Actions Pack

Forget Password?

How to Create Elementor User Registration Form?

Are you looking to create an advanced User Registration or Signup Form using Elementor? We have the best solution for you. You can easily create a fully customized sign-up form using the power of drag & drop feature of Elementor’s native Form widget. Yes!!! you don’t need any separate widget for this.

Let’s see how you can create a User Registration Form for your website in 5 simple steps –

Note: Make sure you already installed Elementor, Elementor Pro, and Actions Pack.

1. Create a Page or Popup in Elementor

Drag and Drop Elementor Form Widget
How to Create Elementor User Registration Form? 12

Create a WordPress page and edit it with Elementor or you may create a popup using Elementor’s theme builder. Then you need drag and drop Elementor Pro’s default form widget to your section layout.

Note: You might be using some other plugins which adds different form widget to your Elementor’s dashboard. Actions Pack only works with Elementor’s native form widget. So you need to be careful.

2. Design your Elementor Registration Form

Design your Registration form using Elementor
How to Create Elementor User Registration Form? 13

Now it’s time to create the required form fields for your Elementor user registration form as shown in the image above. Keep in mind you can create unlimited form fields like address, phone number, or anything else by clicking on “ADD ITEM”. In case you have too many form fields you may also use the “STEP” option in Elementor to create a multistep Signup form. You just need to be careful while selecting the form field type e.g if you want to create a phone field then the “type” should be “tel”, if you want to create a password field then the “type” should be “password” and so on.

Note: None of the fields are compulsory. “Username” and “Password” field can be set to “autogenerate” which we will see in the next article. For the shake of simplicity, let’s think we need a Username and Password field for now only.

3. Select “Register” action

Select Register from all the available actions
How to Create Elementor User Registration Form? 14

Scroll down your Form Widget a bit, you will see an option “Actions After Submit”. If you click on it, you will see a lot of actions to select from. Remove the “Email” action or any other actions and select only “Register” action. If you are not finding the “Register” Action, you might not have activated “Actions Pack” plugin in your WordPress site.

Note: You can add multiple actions like Email, Mailchimp, Active Campaign, etc along with the Register” action. But If you are new to Elementor Form widget, I would recommend you first create your Elementor Signup Form properly, test the form by filling some details, check inside your WordPress User table if users are getting created or not, and then add other actions one by one.

4. Configure “Register” Action

Now, you need to configure the Register Action that you selected in the previous step.

4.1. Choose a user Role

choose user role
How to Create Elementor User Registration Form? 15

You have to choose a “User Role” so that any user registered through this Signup form can have a particular user role and have specific permissions throughout your WordPress site.

4.2. Map Form Fields

elementor form mapping
How to Create Elementor User Registration Form? 16
mapping fields
How to Create Elementor User Registration Form? 17
username
How to Create Elementor User Registration Form? 18

Next, you need to map your Form Fields inside Register Action. Mapping means you have to explicitly tell the “Register” Action about your Elementor Form. Which field will be used as a username, which field will be used as a password, which field will be used as Email, and so on. Simply click on the “pencil” icon next to every option inside Register Action. You will see all the form fields that you created while designing the form in step-1 are available inside the “form field” option. Just choose the correct one. Do the same for all other fields like “Password”, “Email”, or “Phone Number”.

available user fields
How to Create Elementor User Registration Form? 19
elementor signup form additional fields mapping
How to Create Elementor User Registration Form? 20
custom user meta
How to Create Elementor User Registration Form? 21

In case you have some additional form fields like “Name”, “Address”, “State”, “Country” etc you can map them inside “Additional Fields” as shown in the images above. You have to map your “Form Fields” with “User Field”. These user fields are actually called “User Meta” in terms of WordPress. There are already many default User fields or User meta keys provided by WordPress itself like “first_name”, “last_name”, “description” etc. If you don’t find any suitable meta key in the list, you can simply select “Custom Field” as shown in the image above. You don’t need any extra plugins for that. Out of the box Actions Pack creates those custom meta fields on the fly.

5. Publish the User Registration Form

elementor registartion form 5
How to Create Elementor User Registration Form? 22

Now your Elementor Signup (or Elementor User Registration Form) is ready to be published and tested. While testing, be sure you have already logged out from the current user, or alternatively you should try to open your Elementor Registration page or popup in an incognito window, fill the form and submit. Go to your WordPress user Table (yoursite.com/wp-admin/users.php) and check the newly created users.

Table of Contents

11 Responses

  1. Hello, just purchased this plugin and have a quick question: Is there a way to make a Password and Confirm Password field? I know how to make them using the tutorial but not sure how to get them to actually match and show errors if they didn’t match.

    would appreciate your help

  2. hello,

    Do i need to have username in the register field in order for this to work? I do not see anywhere to delete it.

    1. It seems you have added other actions along with "Register" action and those actions are not working properly. The parser error happens mostly due to Email action. Your Email server is not working properly. So kindly remove any other actions and test the form.

Leave a Reply

Your email address will not be published.

Kudos!!! You are in the top 100 visitors of the day.

🔥 FLAT 19% DISCOUNT FOR YOU 🔥

00
Hours
00
Minutes
00
Seconds