CRED allows you to create forms to edit user profiles. In this tutorial, we demonstrate how to create a form that can be used in an “edit your profile” page.

This page is part of the user-account system that we created in previous parts (Part 6 and Part 7).

Outcome of this tutorial – front-end form for editing a user profile
Outcome of this tutorial – front-end form for editing a user profile

The “Edit profile” page will be available from the “My account” page
The “Edit profile” page will be available from the “My account” page

Building a form to edit user profiles

Switching to Layouts
Switching to Layouts

In your CRED Training Site:

1. Go to Pages -> Add new
2. Give your page a name, e.g. Edit profile.
3. Save it as a draft.
4. Click Content Layout Editor

Full width cell
Full width cell

The Layouts Editor opens

5. Draw a full width cell.

User Form cell
User Form cell

6. Select the CRED User Form cell

Setting up the User Form cell
Setting up the User Form cell

7. On the Create new CRED User Form cell screen:

  1. Select “Create a new user form” option.
  2. Select “Edit Users” in the field “This form will”
  3. In the User role field select Subscriber
  4. In Settings section check the following two fields:
    • autogenerate username
    • autogenerate nickname

Do not check the autogenerate password field. This is to ensure that the field will be included on the form and available for the password updates by the user.

Setting up the Edit profile form
Setting up the Edit profile form

Once the Edit CRED User Form screen opens

8. Give your form a meaningful name reflecting its purpose, for example: Edit profile.

9. If closed, click on the Settings section to expand it.

In the Select allowed User Role dropdown, you determine what kind of users you desire to update through this form. In Part 6, we decided that our site’s users will be registered with the Subscriber role; thus, it is required that you check at Subscriber field.
10. Feel free to check all other roles to allow other users edit their profiles through this form.
11. In the After user submits this form: dropdown, select “Keep displaying this form” to stay on the same page after the form is updated.

Form content
Form content

12. Scroll down to the Content section.
Your form content has been pre-populated with some default markup that renders the HTML form as well as the form input fields.
Hint: If needed, you can delete the content and autogenerate the form again by using the Auto-generate option.
For the time being we leave our form as-is and we will make some edits later.
13. Click Save and Close this form and return to the layout

Edit profile - front-end
Edit profile – front-end

14. Preview your layout.
Your form should now look like the screenshot on the left.
15. Press Update to save your layout

Edit profile with a message
Edit profile with a message

16. View your page on the front-end to test your form.
17. After submitting your changes, you should see the User Saved message.
Hint
You can customize the message on your form cell in the Messages section in the User saved Message field.

Making the form visible for subscribers

So far, you have been testing the form while logged in as the site administrator.
If you log in to your site as a Subscriber, your “Edit profile” page will display the page title only. We want to see the “Edit profile” form instead.

The “Edit profile” page is displayed by default. The form is not visible to subscribers
The “Edit profile” page is displayed by default. The form is not visible to subscribers

The default settings of the Toolset Access plugin, which is used in the training site, display the user forms for the site administrators only.

To make the form visible for Subscribers, we need to change the default settings of the Toolset Access plugin.

Making the form visible for subscribers
Making the form visible for subscribers

Follow the steps below to make the “Edit profile” form visible for Subscribers:

1. Toolset -> Access Control.-> CRED forms tab
2. Expand the “CRED Users Forms Front-end Access Group” section.
3. Locate the row entitled “Edit Own Custom User with CRED Form ‘Edit profile’” and check the field for Subscriber.
Feel free to check other roles such as Editor, Author or Contributor, if needed. Only the Guest users should not see the form.
4. Save your changes.
5. Log out.
6. Log in as a user with the Subscriber role to check if the form appears.

Displaying the login form for visitors

“Edit profile” page - what visitors see by default
“Edit profile” page – what visitors see by default

If you are accessing the “Edit profile” page as a visitor (i.e., not as a logged-in user), you will see the message display No user specified.

We would like to display a login form instead.

We already have a layout that displays the login form. We created that layout in Part 7. It looks as the following screenshot:

Login form
Login form

The login form layout is displayed for pages available for logged-in users. These are pages grouped under the Logged-in users only post group.

All we need to do now is to add our Edit profile page to the same group.

Adding the Edit profile page to the Logged-in users only group
Adding the Edit profile page to the Logged-in users only group

1. Go to Toolset->Access -> Post Groups tab.
2. Click on the Logged-in users only group to expand it.
3. Click the Modify Group button.

Adding the Edit profile page
Adding the Edit profile page

4. Look up the Edit profile page
5. Click Modify Group to save your changes.

If you visit the Edit profile page as a guest, you should see the login form.

Final touches

Edit profile page
Edit profile page

The edit profile page is ready and secure now. Feel free to customize your form and the page layout.

We made the following edits on our form:
1. The nickname has been removed.
2. The first and last name input fields have been moved up.
3. The Email and Mobile fields have been grouped under a new subheading entitled “Contact info.”
4. The password fields have been grouped under the new “Change your password” heading.
5. The button label has been changed to “Update.”
6. A crack link above the form has been added.
See the picture on the left.

Need help? Questions?

Go to the CRED Course Support page and leave your comment. Agnes, the author of the course will be happy to help you.

What’s next

In the next tutorial, you will learn how to list items that belong to the logged-in user and how to make users see only their own items with links to Edit and Delete the ads.

Part 9 – Listing items that belong to the logged-in user