The New User Form widget enables users to create new user profiles from the frontend of a WordPress website, without needing to interact with the WordPress dashboard. The page to host the form is built in Elementor.
Important: By default a user needs to be logged in and carry the “administrator” role to see this form. This can be changed, however, in the Permissions settings of this widget.
Adding the Widget
Create a new page to host the form, then click “Edit with Elementor” to open the Elementor page builder. Search for “New Usert Form” in the sidebar, and drag the widget into the page.
To learn more about using the Elementor page builder see Elementor’s official tutorial.
This section defines the fields which are shown within the form itself. This is where you actually define what data the end user can access when using the form.
By default, the form will have the Username, Password, and Email fields activated. It is recommended you do not remove these fields and leave them set to required. Otherwise your users might have issues logging in.
Adding and Removing Fields
To add more fields simply click the Add Item button. The form on your page will change to reflect these new fields. Fields can also be deleted by clicking the X.
You can add ACF fields by clicking Add Item and changing the field type to ACF Fields or ACF Fields Groups and then selecting the desired fields or groups.
The Form Title is the title for the entire form. By default it will be called “Register Now”, but it can be left blank if you wish.
At the very bottom we can edit the text displayed on the Submit button.
Basic Field Attributes
The Field Type defines the type of field being edited. Changing this will affect the other available options.
All the field types have options which can be changed to customize both the content and the style of the field.
- Label – This is shown above the field’s text box. This can be toggled to be displayed or hidden according to your needs.
- Placeholder – This defines placeholder text to be shown within the text box. By default it is left blank to show nothing.
- Default Value – This will populate a field if no value has been given yet. You can also use shortcodes from other text fields. For example: [$acf:field_name].
- Instruction – This is shown in smaller text under the Label.
- Required – Indicates if the field can be left blank.
- Disabled – This will prevent users from editing the field and will not send the data.
Field Specific Options
As mentioned above, there are many options which are unique to a specific field type. We will cover some of the options for the default fields. There will be more articles going in depth to each field’s options.
We have the standard Label, Instruction etc. Additionally, there is an option for adding a default name if the field is left blank.
You can define a minimum password strength. As the user inputs their password, the strength will be displayed. If their password is too weak it will not let them submit the form.
If you wish to use only emails then you can set the email address to be the username as well. Simply enable the Set as username option.
Here we have several options for additional actions to take place outside the form itself.
You can define where the page should redirect to after submitting. By default it will reload the current page. We can choose to redirect to a different page by selecting Custom URL.
You can also define a custom success message, or choose no success message, whatever suits your needs.
This is where we limit which kinds of users can access the form. It is very important to configure this correctly, as otherwise your users might not be able to see the form at all!
By default, only administrators can see the form. If you want to allow other users to access it, you need to add them. You can choose Roles under the Select By Role option, or add specific users under the Select By User option. This can be useful if you are creating a form to be used by a specific manager who needs to create the user profiles for their team.
If you would like to form to be visible to anyone, set the Who Can See This option to All Users.
Here you can customize display options across all the fields. This includes hiding all the field labels, hiding the red asterisk for required fields, and moving the instructions to below the field instead of above.
This will hide the entire form in a button which then will pop open in a modal window when clicked. This can be useful if you want to give users the ability to easily create an account without leaving the page.
Here we can see what the completed form will look like from the front end: