Elementor Forms Automations – Integrate with HubSpot & Other Integrations with Tablesome

1 Powerful Automation Tool to enhance your Elementor Form at the end of this article.

No matter which type of business you run online via a WordPress website, you need to provide your target customers with a way to reach out to you. This is where a contact form plays a vital role.

Using contact forms, you can generate leads for your business and build a lasting relationship with your customers by providing much-needed support services. Creating contact forms on your website becomes easier when you use the right plugin. 

In this article, we will talk about Elementor page builder and how to create contact forms for WordPress websites. Let’s get started. 

Features of Elementor Form Builder

• Ease of creating an unlimited number of forms
• Easy to add and customize different fields to make them fit your page
• Easy to collect and store information about prospective leads within your Elementor account
• Seamless integration with popular marketing and CRM tools like Mailchimp, Drip, ConvertKit, and Hubspot
• Drag and drop functionality to create forms, no coding required
• Suitable for creating forms for leads, customer feedback, newsletter, surveys, event registrations, and more
• 20 different form fields to choose from to collect visitor information
• Supports both single-step and multi-step form layouts
• Easy to customize fonts, spacing, and colors to represent your brand
• Responsive form functionality to ensure the forms look perfect on any device
• Multiple actions supported after form submission, including email trigger, thank you page redirection, pop ups, to name a few
• Powerful tools like HoneyPot and Recaptcha to block spam form submissions
• Form submission notifications for the admin
• Custom coding supported to add advanced elements in the forms
• Available in both free and PRO variants

To know more about the features of Elementor’s Forms, click here. 

How to Create a Contact Form with Elementor

You can add contact forms to your website using the following two ways:

Free Method

For this, you need to install a third-party plugin to embed the form in the posts or pages built using Elementor.

Paid Method

In this method, you need to get Elementor Pro to use its built-in widget to create the required forms (here, you will need to install both Elementor and Elementor Pro plugins).

We will cover both these methods of adding contact forms using Elementor.

How to Add Contact Form for Free with Elementor?

The Elementor page builder is quite compatible with most of the WordPress Contact Forms plugins. You need to install any of the popular third-party contact form plugins like Contact Form 7, Hubspot, and WPForms, using which you can embed forms with shortcodes.

Once you have selected the contact form plugin of your choice, follow the steps given below to embed forms with Elementor:

1. Create a contact form using the plugin via your WordPress dashboard. The exact steps and form templates may vary from one plugin to another.
2. Customize the form to add or edit required form fields. You can then check the form preview before you save the changes made.
3. Create the shortcode and copy it to the clipboard.
4. Open the page created with Elementor in which you want to add the contact form.
5. Using the Elementor widget, search for ‘Shortcode’ and drag/drop it at the place where you want the form.
6. Paste the copied shortcode into the widget.
7. The created form will then appear at the chosen position.
8. Save the page with the new shortcode.

How to Add Contact Form Using Elementor Pro?

To use this method of adding contact forms to your WordPress website, you need to purchase the Elementor Pro license. Post plugin purchase, you will get access to a wide variety of Elementor Pro widgets and a vast library of templates to choose from.

Given below are the steps to add a contact form using Elementor Pro:

Add Elementor Contact Widget to the specific page

Start with opening the page into which you want to use Elementor Contact Form and then add the ‘Forms’ widget from the editor pane. You can simply drag and drop this widget onto your page to see the basic contact form.

Set up Contact Form Fields

Elementor plugin will automatically add some of the basic fields in the contact form like Name, Email, and Message. In case you want to add more fields, click ‘Add Item’ to add another item/field in your Contact Form. You can also edit or remove any of the existing fields easily and add placeholders in these form fields.

In general, Elementor Contact Forms support the following types of fields:

• Text
• Email
• URL
• Textarea
• Radio
• Select
• Checkbox
• Number
• Date
• Time
• File Upload
• Password
• reCAPTCHA, and many others

Change the Label of Form Fields if Needed

Using the ‘Label’ option, you can change the name of the form fields as required.

Select ‘Required’ Setting for Mandatory Fields

This is available in the form of a toggle switch, which when enabled for specific form fields makes it mandatory for the users to fill the fields before submitting the form. The user will see an error message in case he tries to submit the form without entering details in the ‘Required Fields’.

Set Where the Form Submissions Will Go

By clicking on the ‘Email’ option in the Elementor editor, you can see several fields for email, such as:

To: To add an email address(es) where you want to send the form submissions

Message: To add the subject to the email sent with the form submission

From Email: To get the email address of the person sending the form

From Name: For the name of the person sending the form

Similarly, there are many other fields you can choose from. By default, most of the field options are pre-filled, which means you need not change anything and save the page.

Check or Edit Contact Form Messaging

Another advanced feature of Elementor Form editor is the facility to modify messaging on a per-form basis. You can either go ahead with the default messages or customize them as you like.

You can edit four different types of messages, including Success Message, Error Message, Invalid Message, or Required Message.

Style Your Elementor Contact Form

You can also customize the look and feel of your Contact Form in terms of your brand colors and style using the custom styling option. You can edit the form settings based on your needs in terms of colors, spacing, padding, or size of the fields and buttons.

Once you are done with styling the form you have created, it’s time to publish it onto the required page.

Publish Your Contact Form

At the bottom of the editor, you will see an ‘Update’ button. Click on it and the chosen page will be updated with your Contact Form.

Elementor Pro Pricing

To get all the Elementor Pro features, including Contact Forms and many others, you need to buy the right plugin plan. The final selection of the plugin plan should be based on the number of websites over which you would want to add this Pro plugin

Elementor Pro Plugin Plans Comparison

Plan Name	Pricing	Number of websites supported
Essential	US$49/year	1
Expert	US$199/year	25
Studio	US$499/year	100
Agency	US$999/year	1000

How to Save Contact Form Entries?

Most of the popular Contact Form plugin, including Elementor, can send the form submissions to email addresses so that the admin can reply to the users. However, they do not have the potential to save form entries to the database.

When your website starts receiving tons of form submissions, managing them via email becomes difficult unless you have them saved in your website’s database. For such needs, you will need an add-on plugin that supports such functionality.

An easy way to save form submission to the database of your website is to use Tablesome Pro plugin.

Steps to Save Elementor Form Submissions to Tablesome Tables

• Create a new table using this plugin for the new contact form you have created.
• Sync table columns to form fields.
• Add secondary triggers to automate actions related to new form submissions. 
• Select apps like Google Sheets, Mailchimp, etc. where you want to send the new form entries.
• Import the new form entries in the form of CSV or XLXS tables to the database.

How to Use Tablesome Pro Plugin to add Elementor Form Submissions to MailChimp

MailChimp is a marketing automation platform. You can now integrate Elementor Forms to MailChimp by using Tablesome’s triggers and actions.