In this tutorial, you will learn how to build front-end forms in order to create user accounts.
We will build a form that allows us to add a new WordPress user with a subscriber role. In addition, our form will include a custom user field: the mobile phone.
Our new form will appear as follows:
Using the same method, you can build custom forms in order to add new users with roles and fields of your choice.
In your CRED Training Site:
- Navigate to Pages->Add new.
- Give your page a name (e.g., “Create account”).
- Save it as a draft.
- Click Content Layout Editor to design your page using Layouts.
- Draw a full width cell.
- Select the Visual Editor cell and insert it.
- Type the following text: Fill out the following form to create your account.
- Click Create.
We will now add a cell that will include a CRED form used to add user profiles
- Select the CRED User Form cell.
- Ensure the Create a new User Form option is selected.
- In the This form will: field, choose Create user.
We want to create new users using this form.
- In the User role field:, select Subscriber.
This is the role with which the user will be registered after the form is submitted.
Hint: Note that you could choose a custom role if you have one. To create a custom role, visit the Toolset->Access Controls->Custom role tab.
- In the Settings section, check the following two fields:
- autogenerate username
- autogenerate nickname
Leave the autogenerate password field unchecked. We want users to enter the password of their choice.
- Click Create cell.
A new window opens. Here, you set up your form.
- Give your form a meaningful name. (e.g., Create account).
- In the After user submits this form: dropdown, choose Display a message instead of a form.
Type the following message: “Your account has been created. Please sign in.”
Hint: You can have the sign-in text be a link that directs users to the My account/login page. We will create that page in Part 7.
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: You can delete the content and autogenerate the form again by using the Auto-generate option.
We will now leave our form as-is and edit it later.
- Click Save and Close this form and return to the layout
A new row with a CRED form cell has been added.
- Click Preview to see how your form appears on the front-end.
Your form should look like the following screenshot.
Save your layout and publish the Create account page.
- Log out from your site (or visit your site in a browser in which you are not currently logged in).
- Visit the “Create account” page.
Although you may expected to see the form, the page appears empty.
This is because the training site includes the Toolset Access plugin. The default settings of the Access plugin are for user forms to be displayed for site administrators only.
To make the form visible for all site visitors, we must change the Access default settings.
To make the form visible to all users, do the following.
- Navigate to the Toolset->Access Control->CRED Forms tab.
- Click the CRED Users Frontend Access Group section to expand it.
- Locate the form that you just created and check the Guest role to ensure the form is visible to visitors.
- Save your changes.
Anyone who now visits your site will see the form. Log out and test your form as a visitor. Try to create a new user to test it.
We will send an email to the user who is creating the account. The email will include the username and nickname generated by CRED and will contain the link to the login page.
- Click on your form cell to open it for editing.
- Scroll down to the E-mail Notification section.
- Click Add new notification.
- Give your notification a name (e.g., Account created).
- In the When to send this notification section, check Send notification to the email specified in the form field.
- Set the dropdowns that follow to the user_email, first_name, and last_name fields that are included in your form.
- Retain the default values in the “Set form details” section.
- Scroll down to the Subject of emails section. Type the following: “Your account has been successfully created.”
- Scroll down to the email body.
- Enter text in the body of the message. Use the Insert Body code button to include the login name of the user.
Your message should look like the following screenshot:
Note that we added a link to the My account page. We will create that page in Part 7.
- Click Save and Close this form and return to the layout
Forms created with CRED can include additional user fields (e.g., a user picture, mobile phone, user role in the company, etc.).
We will add the mobile phone field to our form.
To include additional user fields in your user form, you need to add these fields to your user profiles using the Toolset Types plugin first.
- Go to Toolset->User Fields.
- Add a new group and give it a name, e.g., “c.”
- Add a new field for the Phone type. Give it a name, e.g., “Mobile phone.”
- Expand the Where to display the group section on the right. Check Subscriber to display this group of fields for all users with this role.
- Save your group.
- Go back to editing the “Create account” form, to the Post Content section.
- Position your cursor where you want your Mobile field to appear. We will include the field right before the Submit button.
- Click Add User Fields.
- Expand the Custom Fields section.
- Click on the Mobile field to insert it.
- Your field has been inserted as a shortcode.
- Precede it with the Mobile field label (feel free to use HTML similar to that used for other fields in your form).
- Use the Preview button to preview your changes.
- Your form now includes the Mobile field. If you are satisfied with your changes, save your form.
- Go to the “Create account” page and test the new field.
Now that your form is working, you can customize it further.
Feel free to make any necessary edits both for form content and in the layout that includes the form.
In our demo site, we produced the following:
- We changed the sequence of some input fields.
- We changed the label of the Submit button to Create account
- We added the following text to our layout: “Already have an account? Log in.” where the second sentence is a link to the My account/login page.
We will create the login page in the Part 9 of this tutorial.
The form should now match the following in appearance.
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 part, we will build the My account page, which will include a login form. You will also learn how to display different contents for logged-in users and visitors.