Email marketing is one of the most effective ways to connect with your audience and drive conversions. And with the help of Elementor and Mailchimp, creating and managing email campaigns has never been easier. You just have to figure out how to integrate Mailchimp with Elementor.
When you integrate Mailchimp with Elementor, it is a powerful way to build and grow your email list for newsletters. With Elementor, you have the ability to create visually stunning and engaging forms that capture email addresses, and with Mailchimp, you can manage and send targeted emails to your subscribers. This is one of the many benefits.
In this article, we will guide you through the process of connecting Mailchimp with Elementor, step by step, so you can start building your email list and growing your business.
Here’s a step-by-step guide on how to integrate Mailchimp with Elementor:
Setting up Mailchimp
Step 1: Sign Up For a Mailchimp Account
First and foremost, you need to have an account with Mailchimp. If you don’t have an account yet, sign up for the service.
For a start, you can go with the free plan and upgrade once you’re sure Mailchimp is the email marketing tool you want to use. The free plan support 2,000 contacts and 10,000 email sends. It also doesn’t support features like retargeting ads or custom branding.
You then need to follow through on the next few prompts. Don’t worry it’s straightforward.
Step 2: Create an API Key
Before creating your API Key, it is advisable that you first create your audience. This helps you organize your subscribers. This is a vital step to integrate Mailchimp with Elementor.
To organize your subscribers in Mailchimp, create an audience by navigating to Audience > Audience Dashboard in your dashboard.
From this, you then click on “Manage Audience” before clicking on “Add Your Contacts.”
Note that a free account only allows for one audience, while advanced plans can support multiple.
This will lead you to a page where you can import your subscribers’ contact information. You have the option to either manually enter their names and email addresses into a text box or import data from a third-party service or upload a CSV or TXT file.
After doing that, navigate to the Audience Dashboard and locate the option to Manage Audience > Settings. In this section, click on “Audience name and defaults”.
Additionally, ensure to set a “From name” and “From email address” and consider enabling a “double opt-in” feature to send subscribers a confirmation email once they sign up.
Once you have completed the process of creating and configuring your account, navigate to your Profile. From there, select Extras, and then click on API keys.
If you do not already have an API key, click on the option to Create A Key. Mailchimp will automatically generate one for you.
Once your API key is active, make sure to copy it. It’s important to keep in mind that this key grants access to your Mailchimp account, so it should never be shared publicly.
After you’re finished creating and setting up an account, go to your Profile. Then click on Extras > API keys:
If you don’t have an API key, you’ll need to click on Create A Key. Mailchimp will automatically add one for you:
Once your API key is active, copy it. Since this information grants access to your Mailchimp account, never share this code publicly.
We also have a guide on how to add a Mailchimp newsletter popup with Elementor.
Setting up Elementor
Step 1: Design Your Form
First and foremost, you need to download and install Elementor Pro on your website.
If you don’t have Elementor Pro, you can use alternative plugins like Essential Addons, Happy Addons, ElementsKit and The Plus Addons.
After activating Elementor Pro, navigate to Elementor > Settings > Integrations. Scroll down to the Mailchimp section, and paste the API key in the designated field.
This will allow you to connect your Mailchimp account to Elementor Pro, and use its features with your Mailchimp account.
Once you’ve pasted your API key in the designated field, click on the Validate API Key button. If the integration is successful, you will see a green checkmark next to the button. Make sure to save your changes.
With the integration set up, you can now begin designing your signup form. To do this, add a new post or page and select Edit with Elementor. This will open the Elementor editor, where you can create and customize your form as desired.
In the Elementor editor, use the search function to locate the Forms option. Once you find it, drag and drop the Forms widget onto the page.
When you first add the Forms widget to your page, Elementor will automatically generate a basic form that includes fields for name, email address, and message.
However, you can further customize the form to meet your needs by adding or removing fields, changing the layout, and adjusting the styles.
You can also connect your Mailchimp account and select the list you want to add the email addresses to. You can also use the form to create custom fields in your Mailchimp list. You can make it as simple or as complex as you need it to be.
For example, if you want to create a subscribe form, it typically wouldn’t include a message field. You can simply click on the X next to this item to remove it from the form.
To generate leads, it is typically necessary to require visitors to fill out both their names and emails. You can do this by clicking on each field and selecting “Yes” next to the “Required” option. This will ensure that visitors cannot submit the form without providing their name and email address.
Once you’ve configured the form fields, you can move on to editing the action button. The default text for this button is “Send,” but you may want to change it to something more appropriate for a subscribe form, such as “Subscribe” or “Sign Up”. To do this, go to the Buttons section of the Form widget settings and edit the text.
You can also adjust the button’s size and column width as needed. If you prefer, you can add an icon as well. This will help to make the button more visually appealing and to draw attention to it.
Remember to save your changes and preview your form before publishing it on your website.
Step 2: Connect Mailchimp
In the “Form” settings, navigate to the “Actions After Submit” section and select “Mailchimp” from the drop-down menu. This is where you will connect your form to your Mailchimp account to integrate Mailchimp with Elementor.
This creates a new section labelled ‘Mailchimp’, which when clicked, will reveal options for configuring an API key and audience.
By creating a new section labelled ‘Mailchimp’, options for setting an API key and audience will become available. If an API key has already been entered in the integration settings, the API Key section can be left as ‘Default.’
Next, select the desired audience to link to the subscription form.
Map the form fields to the corresponding fields in your Mailchimp list. This ensures that the correct information is collected from your visitors and added to the correct fields in your Mailchimp list.
For this example, the Field Mapping section will only include a name and email field, as they are the only ones present in the subscribe form.
Navigate to Additional Options and enable Custom Messages to display a success message after someone completes the form.
Step 3: Make the Form a Global Widget
To use the form in multiple areas of your website, save it as a Global Widget. To do this, find the Edit Form icon on the right-hand side of the form, right-click on it, and select “Save as Global.”
This will add the subscribe form to your Global Settings. When creating a new page or post, you can go to GLOBAL, locate the pre-designed form and drag and drop it to any desired location.
Hit “Save” and publish the page. Your form is now live and ready to collect email addresses.
Once you’ve followed this step-by-step process on how to integrate Mailchimp with Elementor. Test the form to ensure that it’s working correctly. You can do this by filling out the form yourself and checking that your email address has been added to your Mailchimp list.
By following these steps, you should have successfully integrated Mailchimp with Elementor. Also, you should have set up a form that captures email addresses and automatically adds them to your Mailchimp list. This is a great way to build an email list and keep your audience engaged with your content.
It’s worth noting that these instructions are for a general integration process. Your mileage may vary depending on the specific versions of Mailchimp and Elementor you are using. Additionally, it’s always a good idea to double-check your form and email list to ensure everything is working as intended.
But this is just the beginning! The real power of connecting Mailchimp with Elementor comes from being able to create targeted and personalized email campaigns. This will help you to increase engagement and conversions.
With the ability to segment your email list and create custom fields in Mailchimp, you can create highly targeted campaigns that resonate with your audience and drive results.
Additionally, by using the Elementor form, you can easily collect additional information from your visitors. Examples are their location, interests, and more, which will allow you to create even more targeted campaigns.
Furthermore, you can use Mailchimp and Elementor integration to create targeted and personalized email campaigns. This will help you to increase engagement and conversions. The possibilities are endless when it comes to combining the power of Elementor and Mailchimp.
If you need help or guidance in improving your web design, UX Design, Content Writing, digital marketing or branding strategies, simply Contact Us. We are here for you.