This page contains affiliate links, meaning we get a commission if you decide to make a purchase through our links, at no cost to you. Please read our disclosure for more info.
Elementor is a WordPress page builder that makes creating beautiful and professional-looking websites easy without coding knowledge. One of the most powerful features of Elementor is its form builder. Using Elementor’s form builder, you can create different forms such as contact us or newsletter subscription.
Elementor Series
Are Elementor forms free?
Elementor has a free version, but to use the Form Builder, you must get Elementor Pro. Remember, Elementor is a website builder with many great features, and Form Builder is just one of them.
Does Elementor have forms?
Elementor Pro allows you to create unlimited forms directly within the Elementor editor. You can use Elementor to create stunning landing pages and forms from the same editor.
Getting Started with Elementor Forms
Elementor Forms is only available on Elementor Pro, so you’ll need to upgrade to Pro if you want to use it.
If you’re new to Elementor, read our “Getting Started with Elementor in WordPress” guide.
Purchase Elementor Pro
Go to the Elementor plugin pricing page and click Buy Now on your purchase plan.
NOTE: All the plans come with the form builder.
Fill out the purchase form and click Pay now on the right-hand side.
Create Elementor Form
Let’s create a contact us form with the following fields:
- Name
- Message
- Technology
We’ll assume you have a page already created using Elementor. If you’ve never used Elementor, read our “Getting Started with Elementor in WordPress” guide on using the plugin.
1. Search for the Form widget on the left.
2. Drag the Form widget to the right.
3. You should see a basic form with a few fields.
4. On the left, change Form Name to Contact us.
Add Fields to Form
We currently have three fields; Name Email and Message.
Let’s add a select field called Technology and add the following options:
- WordPress
- React
- Node
1. Make sure the form is selected and click on ADD ITEM on the left.
2. Choose Select from the Type drop-down.
3. Add Technology into Label.
4. Make the field required by clicking on the button next to required.
5. Add the following text into Options. This will give us options in the select field.
WordPress|wordpress
React|react
Node|node
6. Now your form should look like the following:
Style Form in Elementor
Now that we have a working form let’s style it and make it look a little nicer.
Display Fields on the same Row
1. Click on Name and change the Column Width to 50%.
2. Do the same for Email, click on the field and change the Column Width to 50%.
3. The Name and Email fields should be side by side.
Display Asterisk on Required Fields
By default, Elementor doesn’t add an asterisk on required fields.
To display them check “Required Mark”.
You should see a red asterisk next to required fields.
Customize Button Label and Size
You can customize the button by clicking on Buttons below Form Fields.
1. From Size select Large to make the submit button bigger.
2. Add Contact NOW! into Submit to change the button label.
3. The button on the form should look as shown below:
Customize Button Color
1. Select the form widget then click on the Style tab and Buttons.
From this section you can change the color and typography of the button.
2. Click on Background Color under Next & Submit Button and change the color to black.
3. The submit button will have a black background.
Test Form
Let’s test everything out because we have a working form at this point.
1. Scroll to the bottom and click on PUBLISH.
2. Go to the page and you should see the form.
3. “Your submission was successful” should be displayed below the submit button.
View Submissions
Form submissions can be viewed and downloaded by going to Elementor, Submissions.
You can filter, search and run bulk actions on submissions using the fields above the table.
Export all the submissions by clicking on “Export All to CSV”.
Customize Elementor Form Success Message
The default confirmation message can be missed because it’s added below the submit button.
You can miss it if you’re not paying attention when submitting the form.
Change Success Message Text
Edit the form using Elementor, click Additional Options and turn on Custom Messages.
Change the Success Message to something such as “Thanks for contacting us. We’ll reply within 24 hours.”
Take note of the other messages that can be customized as well.
Customize Message Style
1. Click on the Style tab.
2. Then click on Messages.
3. Click on “Success Message Color” and select green.
4. Click on Typography and set the size to 24 and Weight to 700 (Bold).
Save the page and test the form.
The success message should stand out.
You want to adjust the style and size according to your website design.
Redirect After Form Submission
Redirecting the user to a custom confirmation page is a common use case for forms. The Elementor form builder allows you to do this.
1. Edit the form and click on Actions After Submit.
2. Click on the + icon in Add Action and select Redirect.
3. Click on the new Redirect section and add a URL that the user will get redirected to.
This could be an internal or external URL.
Add Form Steps
A form can be broken up into separate steps or “pages”. This is useful for large forms or forms with lots of fields.
Let’s break the current form into separate steps. Name and Email will be the first step, Message will be the second and Technology will be the third.
1. Edit the form, click on “+ ADD ITEM” and select Step from Type.
You may notice that Elementor automatically adds “Item #1” which is the “first” step and Item #6 is technically the second.
2. Click “Item #1” and add Contact into Label.
3. Click “Item #6” and add Message into Label.
4. Move the Message step above the Message field.
5. Add another step for Technology and set the label as Technology.
6. Save the page, and now the form should have a Next button with each step above the fields.
Actions After Submit Options
Click on the “Actions After Submit” section when editing the form.
This section lets you specify what happens after the submission.
By default, Elementor will store the submission and send an email when someone fills out the form.
However, from this section, you can customize where the submission goes. For example, you could send the submission to a 3rd party email service provider or redirect them to another URL.
Create Form using Template
If creating a form from scratch seems like too much work then look at using one from Elementor templates.
Click on the “Add Template” icon to see all available templates.
Filter the template category by Contact or Subscribe to see form templates.
You can use these templates to build the initial form and then customize it.
Summary
If your site is already using Elementor and you need a basic form created then the form builder that ships with Elementor does a pretty good job.
It works well for newsletter subscription forms or basic contact us forms. But if you need to create an application form with dynamic fields and conditional logic then you’ll need to look at Gravity Forms.
