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:

Front-end form to be built
Front-end form to be built

Once created, the user profile will be accessible for the site admins from the Users->All Users screen.
Once created, the user profile will be accessible for the site admins from the Users->All Users screen.

Using the same method, you can build custom forms in order to add new users with roles and fields of your choice.

Step 1: Building a page for creating user accounts

Switching to Layouts
Switching to Layouts

In your CRED Training Site:

  1. Navigate to Pages->Add new.
  2. Give your page a name (e.g., “Create account”).
  3. Save it as a draft.
  4. Click Content Layout Editor to design your page using Layouts.

Drawing a full-width cell
Drawing a full-width cell

  1. Draw a full width cell.
  2. Select the Visual Editor cell and insert it.
  3. Type the following text: Fill out the following form to create your account.
  4. Click Create.

Step 2: Building the form for adding user accounts

We will now add a cell that will include a CRED form used to add user profiles

CRED User Form cell
CRED User Form cell

  1. Select the CRED User Form cell.

Setting up the form cell
Setting up the form cell

  1. Ensure the Create a new User Form option is selected.
  2. In the This form will: field, choose Create user.

We want to create new users using this form.

  1. 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.

Setting up the form cell
Setting up the form cell

  1. 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.

  1. Click Create cell.

Setting up the User Post form
Setting up the User Post form

A new window opens. Here, you set up your form.

  1. Give your form a meaningful name. (e.g., Create account).
  2. 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.

Content section of the User Form
Content section of the User Form

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.

Previewing the form
Previewing the form

  1. Click Save and Close this form and return to the layout

A new row with a CRED form cell has been added.

  1. Click Preview to see how your form appears on the front-end.

Your form should look like the following screenshot.

Form on the front-end
Form on the front-end

Save your layout and publish the Create account page.

Step 3: Making the form available for all visitors

Create account - what visitors see
Create account – what visitors see

  1. Log out from your site (or visit your site in a browser in which you are not currently logged in).
  2. 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.

Setting up access control
Setting up access control

  1. Navigate to the Toolset->Access Control->CRED Forms tab.
  2. Click the CRED Users Frontend Access Group section to expand it.
  3. Locate the form that you just created and check the Guest role to ensure the form is visible to visitors.
  4. 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.

Step 4: Setting up email notifications

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.

Setting up email notifications
Setting up email notifications

  1. Click on your form cell to open it for editing.
  2. Scroll down to the E-mail Notification section.
  3. Click Add new notification.
  4. Give your notification a name (e.g., Account created).

Setting up email notifications
Setting up email notifications

  1. In the When to send this notification section, check Send notification to the email specified in the form field.
  2. Set the dropdowns that follow to the user_email, first_name, and last_name fields that are included in your form.

Body codes
Body codes

  1. Retain the default values in the “Set form details” section.
  2. Scroll down to the Subject of emails section. Type the following: “Your account has been successfully created.”
  3. Scroll down to the email body.
  4. 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:

Setting up the email body
Setting up the email body

Note that we added a link to the My account page. We will create that page in Part 7.

  1. Click Save and Close this form and return to the layout

(Optional) Including additional user fields in your form

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.

Additional User Fields are added on the Toolset Types plugin level
Additional User Fields are added on the Toolset Types plugin level

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.

  1. Go to Toolset->User Fields.
  2. Add a new group and give it a name, e.g., “c.”
  3. Add a new field for the Phone type. Give it a name, e.g., “Mobile phone.”
  4. 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.
  5. Save your group.

Additional user field added to the form
Additional user field added to the form

  1. Go back to editing the “Create account” form, to the Post Content section.
  2. Position your cursor where you want your Mobile field to appear. We will include the field right before the Submit button.
  3. Click Add User Fields.
  4. Expand the Custom Fields section.
  5. Click on the Mobile field to insert it.
  6. Your field has been inserted as a shortcode.
  7. Precede it with the Mobile field label (feel free to use HTML similar to that used for other fields in your form).
  8. Use the Preview button to preview your changes.
  9. Your form now includes the Mobile field. If you are satisfied with your changes, save your form.
  10. Go to the “Create account” page and test the new field.

Final touches

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.

Result
Result

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 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.

Part 7 – Building the “My account” page with a login form