Every time I build a new website, there is one particular type of page that I always create: a contact form page.
I would normally install a separate WordPress plugin to achieve this functionality. But with Elementor Pro, I don’t have to do this anymore. With Elementor Form Builder, I can create multiple types of forms quickly without having to install anything extra on my website.
In this tutorial, I show you how to work with Elementor Forms Builder in Elementor Pro by creating a simple contact form. I also show you how to create a simple opt-in form and connect it to a MailChimp email list.
Introducing Elementor Form Builder
Elementor Pro includes a Form widget out of the box. On top of providing the visual design experience, the component includes other nice features as well:
- Honeypot: Fight against the spambots.
- ReCaptcha: A service provided by Google which prevents automated software from entering malicious information through your forms.
- Hidden Fields: Send “invisible” information through your forms. These fields are not visible to the user.
- Submit Notifications: Get a notification every time a visitor submits a form.
- Confirmation Emails: Tell your visitors when an action has been confirmed (like getting confirmation about joining an email list).
- Redirect & Thank You Page: Redirect your visitor to another page after she/he has submitted a form. For instance, you could redirect a person to another page after he/she has joined an email list.
So, how do you get started with Elementor Form Builder?
First, log into your WordPress account and open a page or a blog post for editing. Then, find the Form widget under the Pro section on the left and drag it to the design canvas:
Once you have dragged the element to the design area, you have a basic form with Name, Email and Message fields, and a Send button:
When you click on the form (that’s how you activate it), you’ll see its properties displayed on the left:
The main form field sections are as follows:
- Form Fields: This is where you set the actual fields in your form and other basic elements related to it.
- Submit Button: Set the style and text regarding the Submit button.
- Actions After Submit: Defines what happens after the user has clicked the Submit button on your form.
- Email: Sender and receiver data of the email.
- Additional Options: Set the form ID. If the Custom Messages option is turned on, you will also find settings related to various messages (like the Success Message or the Required Message).
For instance, you could define what message a visitor sees when he/she tries to submit a form without filling in the required fields.
Case: Building a Contact Form
In order to create a contact form for your website, take the following steps.
1. Log into your WordPress Dashboard.
2. Create a new page with Elementor Pro.
3. Once you are in the edit view, drag the Form widget from the left to the design area:
4. Once you have done step #3, the form on your page looks like this:
5. Currently, the form contains three fields: Name, Email and Message. Typically, these fields could be enough.
However, if you’d like to add more fields to the form, click the Add Item button under Form Fields category on the left:
This gives you more options, and you can then add new fields if you wish:
You can then move the fields up and down to the order you wish. In this view, you can also delete any fields that you don’t want to keep.
6. Normally, when a visitor submits a form, I’d like to see that all form fields are filled with information. So, how do you force the person to enter data into all the fields in the form?
Well, if you click any of the form fields, like Email, take a look at the settings on the left. Under Form Fields, you see this view:
Just click the toggle setting next to text Required, and it is then mandatory to fill the field with data:
To make the rule stand out, you can turn on the Required Mark setting at the bottom of the Form Fields section. This shows a red star next to the form field that you set to required.
And by the way, when you set the Content type as Email, the field will try to validate your email address (for instance that an @ character is found in the field).
This same type setting can be applied to other fields as well. For instance, if you expect the field to contain numbers, just set the field type as Number:
7. Next, let’s check briefly check the Submit button section. It has its own settings on the left:
Here, you can tweak various things related to the button like the text, alignment and other settings.
Currently, my submit button looks like this:
Yes, it’s ugly. And no, I’m not going to tweak it any further for this tutorial 🙂
8. Under the Actions After Submit panel, you get to choose what happens when a user submits the form. Make sure that the Email option is chosen:
To see all the available options, click the arrow pointing down:
You have plenty of other options to choose from, and they affect the Elementor user interface under this section (see the next step).
9. As mentioned, the selection you make in step #7 modifies this part of the Elementor user interface. Because you chose Email in the previous step, you now see the Email section on the left pane:
Here, you can set various settings that actually make the contact form work. So, make sure that at least these options are configured:
- To: Who is the receiver of the contact form message. In my case, I would just add the inbox I’m currently reading.
- Subject: What is the subject of the contact form message? For instance, it could be “Feedback from yoursite.com”.
- Message: What data you want to send as part of the message. Here I just keep the default value (all fields), but you can also define (via shortcodes) which data is sent to the receiver.
- From Email: From whom is this email coming from? For instance, you could create a mailbox on your web host and use that. Or perhaps you have a Gmail account. That could be used here as well.
- From Name: What is the display name of the sender’s email? Choose an easy-to-recognize name here.
- Reply-to: Email reply address. Choose the Email Field option here. In this case, when you reply to the contact form message, the email goes to the email address that the visitor entered in the Email field.
- Send as: HTML is selected by default. You can also choose Plain and send the message as plain text. However, my preference is HTML.
10. Finally, you can set the Additional Options:
If you turn on the Custom Messages option, you can define the following settings:
- Success Message: What message the visitor sees when the form was submitted successfully.
- Error Message: What message the visitor sees when an error occurred.
- Required Message: What message the visitor sees when a required field was left empty.
- Invalid Message: What message the visitor sees when the form was invalid.
11. Once you have set all the necessary settings, click Publish to publish your contact form:
12. Then, navigate to the form on your website, enter the required information, and submit the form:
If everything went well, you’ll see a message: “The form was sent successfully.”
13. Go to your email inbox. You should have received a message from the contact form:
And when you open it, you should see the content that you entered in the form:
You will also see some technical information related to the email, like the date of the message or the sending date of the email.
Anyway, this is how you set up the contact form on your website. In the next section, I cover how to hook up an opt-in form into your MailChimp account.
Case: Building an Opt-in Form and Connecting it to MailChimp
A very common way to use forms is to connect them to an email list. This section shows how to do it.
1. Design your opt-in form. In my case, I took the existing form, and then made it look like this:
2. Register an account with MailChimp by going to their website, www.mailchimp.com
3. Create an email list once you have registered with MailChimp. Go to Audiences > Manage Audience > View audiences:
4. On the Audiences page, click Create Audience.
5. On the Create List page, enter List Name, Default From email address, Default From name, and Remind people how they signed up to your list fields. Also, enter all the other required information regarding your list:
Once you have entered all the necessary data, click Save.
6. Next, it’s time to generate an API key, which then gets entered into your Elementor form. So, on MailChimp, click your account name and choose Account:
7. Then choose Extras > API Keys:
8. Under Your API Keys, click Create A Key:
9. Once that is done, you should see the new API key:
10. Copy the newly created API key to the clipboard.
11. In your WordPress, go to Elementor > Settings > Integrations:
Paste the copied API key to the MailChimp field and click Validate API Key button. When the API key is valid, a green checkmark appears on the Validate API Key button. Click the Save Changes button at the bottom of the page.
12. Go to the form you are about to hook up with MailChimp. In Actions After Submit, choose MailChimp:
13. In the MailChimp section under Actions After Submit, set the API Key as Default. You should then see the list of email lists on MailChimp (if not, refresh the page):
14. In Field Mapping, check that the fields are mapped properly. For instance, since I have an email field, it’s also mapped into the Email field.
Technically speaking, you have now hooked your form to a MailChimp email list. You can then tweak the settings further by setting, for instance, the double-optin feature:
15. It is always advisable to Update the changes every once in a while by hitting the green Update button on Elementor. Do that now.
16. Go to the newly created form on your website:
17. Enter your email address. Once you have submitted the form, you should get a success message (in my case, this was: “The form was sent successfully.”)
18. Go to your MailChimp account (Audiences > View Contacts) to verify that the subscription was successful:
19. If you see the email address that you submitted with the form; you have now successfully connected your Elementor form to your MailChimp email list 🙂
Elementor Form Builder: The Conclusion
I hope that this tutorial showed you all the basics you need when working with the Elementor Form builder.
If you are about to make a decision whether you should start using Elementor in the first place, please check out my Elementor Pro review for more information.
- 9 Ways to Clean Up Your WordPress (+ What To Do Next) - December 3, 2022
- Gutenberg Tutorial: How to Remove a Block (3 Ways) - November 26, 2022
- How to Choose a Plugin: 7 Steps to Get the Right One for Your WordPress Website - November 21, 2022