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.
Building a form to edit user profiles
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
The Layouts Editor opens
5. Draw a full width cell.
6. Select the CRED User Form cell
7. On the Create new CRED User Form cell screen:
- Select “Create a new user form” option.
- Select “Edit Users” in the field “This form will”
- In the User role field select Subscriber
- 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.
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.
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
14. Preview your layout.
Your form should now look like the screenshot on the left.
15. Press Update to save your layout
16. View your page on the front-end to test your form.
17. After submitting your changes, you should see the User Saved message.
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 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.
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
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:
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.
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.
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.
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.
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.