{"id":7081,"date":"2019-02-21T14:01:47","date_gmt":"2019-02-21T14:01:47","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=7081"},"modified":"2023-06-07T10:47:20","modified_gmt":"2023-06-07T10:47:20","slug":"how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/","title":{"rendered":"How to Create a Multi-field MailChimp Form to Display in the Popup"},"content":{"rendered":"\n

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

Synchronizing MailChimp Account<\/h2>\n\n\n\n
\n

In order to connect MailChimp audiences<\/strong> with the widget, you should take the following steps.<\/p>\n\n\n\n

Navigate to the JetPopup > Settings<\/strong> directory. Here you should paste the API key<\/strong> of your MailChimp account<\/strong>. Learn this<\/a> tutorial in order to find out how to generate your API key<\/strong>.<\/p>\n\n\n\n\"MailChimp\n\n\n\n

After you paste the key, click the Sync<\/strong> button.<\/p>\n\n\n\n

As a result, your Account Data<\/strong> will be received in your database. Also, boxes with main information about all your MailChimp audiences<\/strong> will be displayed.<\/p>\n\n\n\n

Next step is to click the Get Merge Fields<\/strong> button, and the merge fields will be received in the database as well.<\/p>\n\n\n\n

Click the Save<\/strong> button to apply the customizations.<\/p>\n<\/div><\/div>\n\n\n\n

Creating Multi-field MailChimp Form<\/h2>\n\n\n\n
\n

Now, you can insert a popup from the Popus library<\/strong> and add the MailChimp form<\/strong> to it. Also, you can create a popup from scratch. I\u2019d like to show you the second way.<\/p>\n\n\n\n

Click the Add New Popup<\/strong> button, enter the title and click the Edit with Elementor<\/strong> button.<\/p>\n\n\n\n\"create\n\n\n\n

Then, find the MailChimp<\/strong> widget and drag it to the section.<\/p>\n\n\n\n\"JetPopup\n\n\n\n

Select the audience<\/strong> to which you need to apply this popup in the List<\/strong> field.<\/p>\n\n\n\n\"select\n\n\n\n

In case you want to redirect subscribers to a new page after they succeeded with the form, enable the Use Redirect URL<\/strong> option.<\/p>\n\n\n\n

Now, let\u2019s switch to the Fields<\/strong> 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 device types.<\/p>\n\n\n\n

In order to start adding new fields to your form, enable the Use Additional Fields<\/strong> option. Then, click the Add Item<\/strong> button.<\/p>\n\n\n\n\"fields\n\n\n\n

Here, you should paste the merge tags<\/strong> of the audience to which you applied this popup.<\/p>\n\n\n\n\"merge\n\n\n\n

You can find them in your MailChimp account<\/strong>. Navigate to the Audience > Settings > Audience fields and *|MERGE|* tags<\/strong>.<\/p>\n\n\n\n\"tags\n\n\n\n

In my case, I have 5<\/strong> tags that were displayed in the WordPress Dashboard during the process of synchronizing.<\/p>\n\n\n\n\"Mailchimp\n\n\n\n

So, in order to connect these tags with your database, you need to click the Get Merge Fields<\/strong> button (step 4 of Synchronizing MailChimp audience<\/strong> block).<\/p>\n\n\n\n

Later, when you add a new field in your MailChimp audience<\/strong>, you should pull it out by hitting the Get Merge Field<\/strong> button and get new field data.<\/p>\n\n\n\n

So, I paste a tag to each new field and change the labels. It looks like this.<\/p>\n\n\n\n\"filling\n\n\n\n

As you might notice, you can add as many fields as you need according to the fields you have in your MailChimp audience<\/strong>.<\/p>\n\n\n\n

Also, you can customize the Submit<\/strong> button and style each element of the popup.<\/p>\n\n\n\n\"submit\n<\/div><\/div>\n\n\n\n

Setting Conditions for Popup<\/h2>\n\n\n\n
\n

Once you\u2019ve created the popup with MailChimp subscribe form<\/strong>, you should set proper conditions to specify the place where the popup will appear on the front end.<\/p>\n\n\n\n

Proceed to the Settings<\/strong> directory and click the Settings<\/strong> block. Here you can select an animation effect<\/strong> for the popup and actions of the visitor that will determine the occurrence of the popup. Additionally, you can enable Show once<\/strong> option and choose the delay after the popup can be shown again.<\/p>\n\n\n\n\"settings\n\n\n\n

Finally, let\u2019s switch to the Display Settings<\/strong> block. Click the Display Conditions<\/strong> button to specify where the popup will appear. You can select whether to apply the popup to Entire Site<\/strong>, a Singular<\/strong> page, a post or any other place on the site. If you need to apply a popup to the archive template, you should select Archive<\/strong> from the dropdown list.<\/p>\n\n\n\n\"popup\n\n\n\n

Moreover, you can choose the user roles<\/strong> for which this popup will be available.<\/p>\n\n\n\n\"available\n\n\n\n

Also, you can style your subscription form.<\/p>\n\n\n\n

Don\u2019t forget to click the Publish\/Update<\/strong> button to save all changes.<\/p>\n<\/div><\/div>\n\n\n\n

Check how it works on the front end and enjoy your multi-field MailChimp subscribe form<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"

With the MailChimp widget, you have an opportunity to create subscribe form and add as many fields as you need.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[487],"yoast_head":"\nHow to Display MailChimp Form in Popup \u2014 JetPopup | Crocoblock<\/title>\n<meta name=\"description\" content=\"Check the guide on how to create a multi-field MailChimp form and to display it in the popup. Learn how it can be done in Elementor with JetPopup plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display MailChimp Form in Popup \u2014 JetPopup | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Check the guide on how to create a multi-field MailChimp form and to display it in the popup. Learn how it can be done in Elementor with JetPopup plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-07T10:47:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/api-key-field.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/\",\"name\":\"How to Display MailChimp Form in Popup \u2014 JetPopup | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-02-21T14:01:47+00:00\",\"dateModified\":\"2023-06-07T10:47:20+00:00\",\"description\":\"Check the guide on how to create a multi-field MailChimp form and to display it in the popup. Learn how it can be done in Elementor with JetPopup plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Multi-field MailChimp Form to Display in the Popup\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Display MailChimp Form in Popup \u2014 JetPopup | Crocoblock","description":"Check the guide on how to create a multi-field MailChimp form and to display it in the popup. Learn how it can be done in Elementor with JetPopup plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/","og_locale":"en_US","og_type":"article","og_title":"How to Display MailChimp Form in Popup \u2014 JetPopup | Crocoblock","og_description":"Check the guide on how to create a multi-field MailChimp form and to display it in the popup. Learn how it can be done in Elementor with JetPopup plugin.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/","og_site_name":"Help Center","article_modified_time":"2023-06-07T10:47:20+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/api-key-field.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/","name":"How to Display MailChimp Form in Popup \u2014 JetPopup | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-02-21T14:01:47+00:00","dateModified":"2023-06-07T10:47:20+00:00","description":"Check the guide on how to create a multi-field MailChimp form and to display it in the popup. Learn how it can be done in Elementor with JetPopup plugin.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/how-to-create-a-multi-field-mailchimp-form-to-display-in-the-popup\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create a Multi-field MailChimp Form to Display in the Popup"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/7081"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=7081"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=7081"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=7081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}