Back to contents

How to create a multi-field MailChimp form to display in the popup

useful information

Create trendy popups using JetPopup plugin! With MailChimp widget, you have an opportunity to create subscribe form and add as many fields as you need.

Are you a MailChimp user? Looking for the best way to display a subscribe form? So, the first way is to use the Subscribe Form widget from JetElements as we uncovered before. Moreover, an opportunity to add MailChimp form in the popup is available now. You can create the form with an unlimited amount of fields using MailChimp widget.

Let’s dive in the process!

Synchronizing MailChimp account

In order to connect MailChimp audiences with the widget, you should take the following steps.

Step 1 — Navigate to the JetPopup > Settings directory. Here you should paste the API key of your MailChimp account. Learn this tutorial in order to find out how to generate your API key.

MailChimp API key

Step 2 — After you paste the key, click the Sync button.

Step 3 — As the result, your Account Data will be received to your database. Also, boxes with main information about all your MailChimp audiences will be displayed.

MailChimp account data

Step 4 — Next step is to click the Get Merge Fields button and the merge fields will be received to the database as well.

Get Merge Fields button

Step 5 — Click the Save button to apply the customizations.

Creating multi-field MailChimp form

Now, you can insert a popup from Popus library and add the MailChimp form to it. Also, you can create a popup from scratch. I’d like to show you the second way.

Step 1 — Click the Add New Popup button, enter the title and click the Edit with Elementor button.

Create a new popup

Step 2 — Then, find the MailChimp widget and drag it to the section.

JetPopup MailChimp widget

Step 3 — Select the audience to which you need to apply this popup in the List field.

select the MailChimp list

Step 4 — In case you want to redirect subscribers to a new page after they succeeded with the form, enable the Use Redirect URL option.

Step 5 — Now, let’s switch to the Fields block. By default, the first field is for e-mail. You can change the text of the label and placeholder, and change the size of the field on all devices types.

In order to start adding new fields to your form, enable the Use Additional Fields option. Then, click the Add Item button.

fields settings

Step 6 — Here you should paste merge tags of the audience to which you applied this popup.

merge tags

You can find them in your MailChimp account. Navigate to the Audience > Settings > Audience fields and *|MERGE|* tags.

tags in the MailChimp account

In my case, I have 5 tags, that were displayed in the WP Dashboard while the process of synchronizing.

Mailchimp tags

Step 7 — So, in order to connect these tags with your database, you need to click the Get Merge Fields button (step 4 of Synchronizing MailChimp audience block).

Later, when you add a new field in your MailChimp audience, you should pull it out by hitting Get Merge Field button and get new field data.

Step 8 — So, I paste a tag to each new field and change the labels. It looks like this.

filling in the fields of the subscribe form

As you might notice, you can add as many fields as you need, according to the fields you have in your MailChimp audience.

Step 9 — Also, you can customize the Submit button and style each element of the popup.

submit button options

Setting conditions for the popup

Once you’ve created the popup with MailChimp subscribe form, you should set proper conditions to specify the place where the popup will appear on the frontend.

Step 1 — Proceed to the Settings directory and click the Settings block. Here you can select an animation effect for the popup and actions of the visitor that will determine the occurring of the popup. Additionally, you can enable Show once option and choose the delay after the popup can be shown again.

settings of popup widget

Step 2 — Finally, let’s switch to the Display Settings block. Click the Display Conditions button to specify where the popup will appear. You can select whether to apply the popup to Entire Site, Singular page, post or any other place on the site. If you need to apply popup to the archive template you should select Archive from the dropdown list.

https://youtu.be/bsgj0UdxMSQ src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2019/02/display-conditions-for-a-popup-1.png” alt=”display conditions for a popup” width=”758″ height=”495″ class=”alignnone size-full wp-image-15825″ />

Step 3 — Moreover, you can choose the user roles for which this popup will be available.

available for roles option

Step 4 — Also, you can style your subscribe form.

Step 5 — Don’t forget to click the Publish/Update button to save all changes.

Check how it works on the front-end and enjoy your multi-field MailChimp subscribe form!