Elementor Pro page builder plugin comes with an in-built Form widget with which you can easily create lead generation and newsletter subscription forms.
If you are using Mailchimp for email marketing you would need to integrate Elementor Forms and Mailchimp. In order to automatically export email contacts when a new form is submitted on your WordPress site.
In this article, we will see how you can connect Elementor Forms to Mailchimp. From idea to deploying your Mailchimp signup form you only need a few minutes.
Also, Mailchimp’s free plan comes with a 2000 contacts limit, so we will see how you can make the best use of the free plan with Elementor Mailchimp integration.
Elementor Mailchimp Integration
The best way to integrate Elementor and Mailchimp is by using a free Elementor Mailchimp addon called Tablesome. With Tablesome, not only can you export the form entries to Mailchimp, but you can also create custom workflows for these form submissions and automatic actions from your WordPress site.
You can validate and filter the contacts using the data from the form fields and only add high-value leads to your email marketing audience.
We will see how to set up Elementor subscribe forms and signup forms that are connected to Mailchimp and how to set up workflows to automatically add form submitters as subscribers to your Mailchimp list/audience. Elementor Mailchimp Integration allows companies to grow their mailing lists and automatically segment audiences.
How to connect Elementor and Mailchimp
We will see a step-by-step guide for Elementor Forms Mailchimp Integration using Tablesome.
Installing the Elementor Mailchimp addon
Tablesome free addon is available in the WordPress repository. You have to install it from your WordPress dashboard by searching for Tablesome in the “Plugins” menu of your site
Copying Your API Key From Mailchimp
After installing and activating Tablesome on your site, you will need to copy the Mailchimp API key from your Mailchimp account. If you don’t have a Mailchimp account, create it first. Then,
- Log in with your Mailchimp account, scroll down the page and click on your avatar in the corner
- In the additional menu, click the ‘Profile’ option
- On the Profile page click Extras → API Keys
- On this page, you will find the list of generated API keys. If you haven’t generated an API key, click on “Create a Key” and can create a new API key
- Copy the generated Mailchimp API Key and return to the browser tab or window with your WordPress site
Connect Elementor and Mailchimp
- In your WordPress site, go to Tablesome Settings → Integrations → Mailchimp
- Paste the copied API Key into the Mailchimp API Key field
- Click the ‘Connect to Mailchimp’ button and it will be connected
- There will be a green tick mark near the Mailchimp section if Mailchimp is connected to your site
- Then click the ‘Save’ button in the Tablesome Settings to save the connection.
Create Mailchimp Subscribe Forms using Elementor
With the Elementor page builder, you can create forms when you are setting up your pages and posts. To create Mailchimp forms with Elementor,
- Go to the Elementor page where you want to set up the form
- In the Elementor toolbar search for the ‘Form’ widget and add it to the page
- This form will have some default fields such as Name, Email, etc., You can add more fields such as Telephone, Checkbox, Radio, and more
- Change the labels and placeholders of the form fields and when your forms are ready save the Elementor page
Design your MailChimp form easily with lots of customization options. With the help of this element, you can easily get the attention of your visitors and make them subscribe to your newsletter.
Creating Mailchimp Popup Signup Forms with Elementor
Besides embedding forms on a page you could also create popup forms in Elementor. If you’re looking for an aggressive way to build subscribers you can make use of the Elementor pop-up builder.
There are many different triggers and display conditions that you can use. Spend your time finding the right triggers & rules for the popups to maximize the form response and generate high-quality leads.
To create popup forms,
- In your WordPress dashboard under the Elementor menu click on Templates → Popups → Add New
- Give the popup a suitable name and click the “Create Template” button
- It will open a page with a Template Library that contains various Popup form templates such as newsletter signup forms, bookings & appointment forms, feedback forms, etc.,
- You could select and insert the template and then edit it or close the library and build a popup form from scratch
- After designing the popup form, click the ‘Publish’ button and it will open the ‘Publish Settings’ page that comes with Conditions, Triggers, and Rules.
- Play with these settings and set the conditions for your popup form to get maximum results and then click ‘Save & Close’
Your Elementor Popup form is now ready to be integrated with Mailchimp.
Creating Elementor Mailchimp Workflow with Tablesome
Now that we have created the Mailchimp signup form with Elementor, let’s set up a workflow using Tablesome for Elementor Mailchimp integration to add form a submitter as a subscriber to your Mailchimp audience.
To do this,
- Go to WordPress Dashboard and click – Tablesome → Create New Table
- Before you set up, the workflow give it an appropriate title
- On the left side of the table, you can set up Triggers & Actions in the toolbar
- Under ‘Trigger 1’ select ‘Elementor’ integration and choose ‘OnForm Submit’
- Then select the Mailchimp signup form that you’ve just created in the ‘Forms’ field
- In the ‘Action (set 1)’ section select the ‘Mailchimp’ integration and choose the ‘Add Contact’ action
- There will be a ‘Select a list’ field where you can select the Mailchimp audience / list to save the contact
Now you have to map the Mailchimp fields with the Elementor Signup Form fields.
Elementor Forms and Mailchimp Field Mapping
You have to map the Elementor form fields with the corresponding available fields in Mailchimp. For example, you have to map the Elementor form Email field to the Email field in Mailchimp.
- There will be a Match Fields section under the Mailchimp list selection
- Here you will have the Elementor Form fields on the left side and the Mailchimp fields on the right side
- Mapping the field based on the data and then click the ‘Save Table’ button and save your workflow
Note: If you can’t find the form field that you want to match in the Mailchimp fields, you have to create it using the Mailchimp form builder.
Applying Conditions Workflows and Tags To Mailchimp Contact
Tablesome allows you to apply conditions to filter the contacts that are sent to the Mailchimp audience. It also allows you to add ‘Mailchimp Tags’ to the contact which is added as a subscriber.
These conditions & tags will help you to filter out High-Quality Leads (HQL) from Low-Quality Leads (LQL) and reject spam & irrelevant contacts being added to the Mailchimp audience.
Let’s see how these conditions and tags can be applied.
- Next to the Match Fields options there will be ‘If ( Conditions )’ options, and it comes with 3 fields – Form field, Conditional operator, and Value.
- So you can apply conditions based on the values in each of these form fields
- For example, let’s set up a condition based on “How much is your budget?” from the field and if the amount is above $500 the lead is HQL and anything below is LQL
- Apply the “Equal to” operator and give the value “Greater than $500”
- Then in the ‘Tags’ field select the corresponding Mailchimp Tag, that is “HQL” tag
- After selecting the Tag, click the ‘Save Table’ button and save the created workflow
You could also click the “Add another action” button and create a 2nd action by repeating the same process but applying different conditions and tags for other values.
You could also choose to save the Elementor Forms entries to the table using Tablesome integration and Add Row action.
Now that you have mapped all the fields and applied conditions & tags, you can send test data from your Elementor signup form and see if the data is sent to your Mailchimp account.
