Forms lets you build form for front-end user registration and editing. These forms are the basis for membership and directory sites.

Visit Part 6 and Part 8 of the Forms Training Course to see step-by-step tutorials.

To set-up user registration and editing forms, go to Toolset -> User Forms and click Add New. Choose the kind of form (“new user” or “edit user”) and select the various options for the form.

Basic example of the User Form on the Front-end
Basic example of the User Form on the Front-end

Forms can create new users or edit existing users. A form can do either of these operations, so if you require both, you should set up two forms. If you need forms for creating post and pages, use the Post Forms.

Designing the Front-end User Registration Forms

Toolset forms start blank, and you need to add fields to them. The easiest way to add them is by using the Auto-Generate User Form button. The auto-generation will create a complete form, with all the fields that belong to the user (different user roles may have different fields).

Auto-generator feature in User Forms
Auto-generator feature in User Forms

This is how the form looks like after you auto-generate it:

Basic, Auto-generated Form Contents
Basic, Auto-generated Form Contents

You can edit almost anything in the Toolset form. The shortcodes (texts with square brackets around them) are the fields and the form controls. Do not edit them, but feel free to add classes to them for custom CSS styling. You can edit HTML around these shortcodes.

There are some special Forms shortcodes that control the basic functionality of every form. These shortcodes include:

  • [creduserform class='cred-user-form cree-keep-original'] – mandatory
  • [cred_field field='form_messages' value=''] – optional, used for rendering the validation messages
  • [cred_field field='form_submit' value='Submit' urlparam=] – mandatory (form cannot work without a submit button)
  • [/creduserform] – mandatory

Removing the mandatory shortcodes from your forms will cause them to break.

The auto-generator will insert most fields on the form for you. If you edit the form, you can always insert these fields manually, using the Add User Fields and Add Generic Fields buttons.

The Add User Fields button lets you select all the fields that belong to the user. The Add Generic Fields button offers other fields, which don’t belong to the user.

Special care should be taken with the username and password fields. By default, the user submission forms will auto-generate the username and password. You should set up email notifications to send new users their login details. Read how to do this in User Forms Email Notifications user guide.

Email Notifications for Front-end User Submission

You can set up email notifications for any action related to the form, to any email recipient. This includes to specific emails, to users of the site or to the person who submitted the form.

When you create a form for registering a new user, remember to set up a notification to send this user their username and password, or a reset password link.

You setup notifications for the form in the Notification Settings section.

The example in the screenshot shows the settings for an email sent to a new user at the email address they register with. The body of the email contains placeholders for the username and password inserted using the Insert Body Codes button.

Note that Views user shortcodes (inserted with the Fields and Views button) must include the id of the current user as an attribute like so: id=”%%USER_USERID%%”

Settings for new user notification email
Forms notifications settings section

You can trigger multiple notifications with the same form submission, so you might set up another email to inform the website administrator about newly registered members, for example.

Validating User Fields in Forms

You can define some fields as required. Some fields also have strict formats (for example, the email field). When a form is submitted, Forms checks all fields and warns if any of them are incorrectly formatted or missing.

For example, if a user enters an incomplete email address into an email field, the form will display a message and prevent the user from submitting it.

Example of Forms validation message on the front-end

Example of Forms validation message on the front-end

Built-in SPAM Protection for User Forms

SPAM protection is of crucial importance to sites that allow the creation and editing of users from the front-end. Without it, there is a risk of flooding the site with false users, which are created by automated online software, known as “bots”.

Use the reCAPTCHA field to protect your forms from SPAM.

reCAPTCHA field as featured in User Forms
reCAPTCHA field as featured in User Forms

To start using the reCAPTCHA field in your Toolset forms, you have to register a Public and a Private key via Google’s reCAPTCHA homepage. After that, you need to insert the field into your forms. The Toolset Auto-generate Forms can include the reCAPTCHA field and you can also insert it manually using the Add Post Fields button.

Displaying User Forms on the front-end

To display a form, you need to insert it into content (typically pages or posts). Edit the content where you want to display the form and click on the Toolset Forms button. Then, select the form to display.

Toolset Forms button in WordPress editor
Toolset Forms button in WordPress editor

After inserting the form into content, it will be available on the front-end, as shown in the next image.

User Form On The Front-end
User Form On The Front-end

Inserting editing User Forms

Besides inserting Toolset forms for registering new users, you can insert the ones that edit users ones as well. When inserting the editing forms, you can select to show them directly in a post or a page, or to insert a link to the form itself. Advanced options allow you to choose which user will be edited by the form.

For more information, please read our guide about displaying Editing forms.

Using Address Fields in Toolset Forms

The Toolset Maps plugin allows you to add custom Address fields to your Toolset forms. The form then allows to type-in the address manually, use the user’s location, or select the location by pointing on the displayed map.

To learn more, visit our page about how Address fields work in Forms.

Controlling access to User Forms on the front-end

In many cases, you will want to limit who can create and edit users through Toolset forms. To do this, use Access plugin.

Read more about Access control for Toolset forms.