JetEngine is an Elementor add-on that allows you to add dynamic content to your Elementor designs (pages or templates). Elementor Pro already has a feature to add dynamic content as well, but the dynamic content types it supports are limited to the WordPress default content types such as blog posts, pages, user profiles, featured images, and so on.
JetEngine allows you to create custom content types — such as custom post type and custom fields — and add them to your designs.
In addition, JetEngine also allows you to create custom forms. You can use JetEngine to create form types like user registration form, front-end post submission form, booking form, and so on. In this post, we will show you how to create a user registration form in Elementor using JetEngine.
How to Create a User Registration Form in Elementor Using JetEngine
Before getting started, make sure you have installed and activated JetEngine on your WordPress site. JetEngine itself is a premium Elementor add-on that costs $43 per year. You can get it on the Crocoblock website.
Once the JetEngine plugin is active, go to JetEngine -> JetEngine on your WordPress dashboard and make sure the to enable the Forms module.
You might also want to set the default role for a newly registered user on your WordPress site. To do so, go to Settings -> General. Scroll down to the New User Default Role section and select your preferred default role for a new user from the dropdown menu.
Note: If you set new user default role to Subscriber, chances are your new users won’t be able to access the WordPress dashboard after logging in. To allow them to access the WordPress dashboard, you can set the default role to Contributor.
Creating the Registration Form
To create a user registration form with JetEngine, you need at least 6 form fields:
- First name
- Last name
- Username
- Password
- Confirm password
To start creating the form, go to JetEngine -> Forms. Click the Add New button to create a new form.
Give your form a name before start setting the form fields.
As mentioned, you will need at least 6 form fields. By default, JetEngine provides one form field and one submit button for a new form. We will create the form from scratch so you can simply delete the default field and submit button. You can click the X icon to delete the existing field/submit button.
- First name field
Click the Add Field button to add the first name field and click the pencil icon to make the settings.
Set the Type option to Text and the Field Type option to Text as well. Also set the field name and field label. Click the Apply Changes button.
- Last name field
Click the Add Field button to add the last name field and click the pencil icon to make the settings.
Set the Type option to Text and the Field Type option to Text as well. Also set the field name and field label. Click the Apply Changes button.
- Username field
Click the Add Field button to add the username field and click the pencil icon to make the settings.
Set the Type option to Text and the Field Type option to Text as well. Also set the field name and field label. Since username is a required field, make sure to check the Required option. Click the Apply Changes button.
- Email field
Click the Add Field button to add the email field and click the pencil icon to make the settings.
Set the Type option to Text and the Field Type option to Email. Also set the field name and field label. Since email is a required field, make sure the Required option is checked. Click the Apply Changes button.
- Password field
Click the Add Field button to add the password field and click the pencil icon to make the settings.
Set the Type option to Text and the Field Type option to Password. Also set the field name and field label. Since password is a required field, make sure the Required option is checked. Click the Apply Changes button.
- Confirm password field
Click the Add Field button to add the confirm password field and click the pencil icon to make the settings.
You can use the same settings for the confirm password field as the settings on the password field.
Once done setting the form fields, add a new submit button by clicking the Add Submit Button button. Click the pencil icon to make the basic customization to the button.
Set the button label and click the Apply Changes button.
If you want to change the order of the fields, you can simply drag the fields upright and downright.
If you want to protect your form with reCAPTCHA, you can simply tick the Enable reCAPTCHA v3 option and enter the site key and the secret key.
Once done setting the form fields, switch to the Post-submit Actions / Notification Settings section to set the form action. By default, the form action is set to Send Email. You can click the pencil icon to change it.
Change the action type to Register New User and set the fields map according to the fields you have set above before. If you want to set the newly registered user to automatically log in after the successful account creation, you can tick the Log In User after Register option. Click the Apply Changes button to apply the settings.
If you want to redirect the users to a certain page after they successfully registered (the WordPress dashboard for instance), you can add a new form action by clicking the Add Notification button. Click the pencil icon to make the settings.
Set the action type to Redirect to Page and set the redirect page on the Redirect to option. If you want to redirect your newly registered users to the WordPress dashboard, you can set the the URL to yourdomain.com/wp-admin on the Redirect URL: field. Click the Apply Changes button to apply the changes.
You can switch to the Messages Settings section to set the custom messages. Once done, click the Publish button to publish your form.
Your form is now ready to use.
Adding the Registration Form to the Registration Page
Once you are done creating the registration form with JetEngine, you can then use the newly created form. In our case, we will use it on a user registration page. So, create a new page (Pages -> Add New) and edit it with Elementor. On the Elementor editor, search for the Form widget on the LISTING ELEMENTS widgets block and drag it to the canvas area.
Go to the left panel and select the registration form you have created from the Select form dropdown menu under the Content tab.
You can go to the Style tab to style up the form just like when you are styling up other Elementor widgets. You can set things like the typography of the fields, the typography of the form labels, the typography of the submit button, background color, border radius, and so on. Click the Publish button once you are done styling up the form and editing the page.
That’s it. You can test your form once the page is published. If there are still some problems, you can edit the form (no need to edit the registration page, just edit the registration form). To edit the form, go to JetEngine -> Forms. Hover your mouse over the form and click the Edit link.
Click the Update button every time you made new changes.
5 thoughts on “How to Create a User Registration Form with JetEngine”
Excelente conteúdo. Parabéns!
Mas deixo uma pergunta: e se o usuário quiser alterar as informações. Como ele pode fazer isto?
Não achei essa dica na internet ainda.
How do you add a icon to the form input fields? Elementor Forms have this built in but if your using JetEngine profile builder – forms – listing etc, how can it be accomplished?
Thanks for easy to follow explanation. I wonder: can we admin approve the registration first before new user can be added in user?
Same question here!
Hi, how do you check the match between the password and its confirmation ?
Thanks