Back to contents

How to add an effective MailChimp subscribe form to the page using JetElements Subscribe widget

This tutorial features the overview of Subscribe Form widget from JetElements plugin that can be integrated with the MailChimp list.

Are you looking for a way to increase the number of your subscribers or gather the information about your website visitors? The first step is to create a strongly designed subscription form. JetElements Subscribe widget is the right tool that can help you create such a subscription form integrated with MailChimp.

Setting up MailChimp API Key and List ID

If you still don’t have a MailChimp account, please, feel free to check this tutorial. It provides detailed instructions on creating an account and finding out your MailChimp API key and List ID.

Step 1 — Now let’s make sure our MailChimp account has proper integration with JetElements Subscribe widget.

Step 2 — Navigate to Elementor > JetElements Settings > Integrations in WordPress Dashboard.

Step 3 — In the MailChimp section, find the fields, where you have to input the MailChimp API key and the MailChimp List ID.

Also, you can enable the Double opt-in option in case you want that the contacts will receive an opt-in confirmation email when they subscribe to your list.

MailChimp integration

JetElements Subscribe widget overview

Let’s make the process of customizing the Subscribe form in the Elementor builder more clear.

Step 1 — First of all, we need to add the Subscribe widget to Elementor section. Find Subscribe widget provided by JetElements and drag it to your page.

Subscribe widget for Elementor

Step 2 — By default, you’ll see the only field where one can input an email, and the Subscribe button. Feel free to change the Submit Text in Content > Field to change the text shown for the button.

Subscribe widget settings

Step 3 — In the Input Placeholder field you should input the placeholder that’s to be shown in the field by default, giving the visitors the tip on what information should be placed in the field, and about the format of the information (e.g., an email).

Step 4 — Turn on Use additional fields option to add more fields to the Subscribe button (e.g., First Name, Last Name, Phone number, etc.). Click Add New Item button to add more fields to the form.

Subscribe widget adjustments

Step 5 — After the new field is created select the field type from the dropdown and input the placeholder text for it.

Step 6 — In the Settings section, you can set up the URL for redirection and enable usage of Target List ID of your MailChimp list.

Subscribe widget set up

Step 7 — In the Style section, you can customize the Layout, Width, Background, Color, Padding, Margin, Border Radius, Border Type, Box Shadow, Text Color, Typography to make the design of your Subscribe form more appealing.

Subscribe widget style settings

Congrats! From now you are able to add an effective MailChimp subscribe form to Elementor using JetElements Subscribe widget.