24/7 Support: 800.608.6482

How To Guides

Try our new AI assistant by clicking the chat icon in the lower right corner.

How To Guides

Subscriber Pop-up with MailChimp

Pop-up signup forms help you connect with the people who visit your website. MailChimp has added a Subscriber Pop-Up Form Builder to quickly design a pop-up form and customize it with a special offer or discount.

In this document, you'll learn how to design and edit a pop-up form in MailChimp, and add it to your site.

Note: This is an advanced task and is recommended for users familiar with custom coding. Contact your developer or Miva's Customer Support if you need assistance.

Access the Pop-Up Form Builder

The Form Builder is where you customize your pop-up signup form and generate the code you use to embed the form on your site.

In MailChimp navigate to the "Lists" page.

Click the drop-down menu next to the list you want to work with, and choose Signup forms.

“Signup

In this example, I'll click on my "Testing Account" list.

“List”

Now click on "Signup forms." Below you will see "Subscriber pop-up," click on the "Select" button.

“Subscriber

In the Form Builder, you’ll navigate between three tabs to create your form: Design, Fields, and Content. This is where you'll choose the format of your pop-up form and when it displays to people who visit your site. You can also add and style labels, call-to-action buttons, and custom messaging.

An editing window will popup. Here is where you will build and customize your pop up window.

“Subscriber

You can choose how you want it to display; as a Modal, Slide or Fixed.

“Subscriber

You can choose when you want it to display; Immediately, 5 or 20 sec, when they scroll to the middle of the page, the bottom of the page or when they exit.

“Subscriber

You can customize the font, background colors, and the hoover color.

“Subscriber

Next, choose the Image alignment, left, middle, right or full width.

“Subscriber

When you click on the "Field" tab, check the box next to each field you want to include in your form.

To require a field, toggle the Required slider to the green checkmark.

“Fields”

When you click on the "Content" tab, you'll get a text editor tool where you can enter your body text and your sign up success message as well as customize it to your liking.

“Content

When you're done, it will show you a preview on the left window. You can then toggle between the Desktop and Mobile tabs to see how your form will appear on different devices.

“Preview”

To publish it, simply click on the "Publish" button on the bottom right. It will confirm that you're about to save and publish your changes to your subscriber pop-up form. Go ahead and click "Publish"

“Confirmation”

Generate Form Code

To finish, you'll generate the form code and add it to your website. The best place to add the code varies from site to site, so reach out to a developer if you're not sure where to modify your site's HTML.

To generate the form code, follow these steps.

In the Pop-Up Form Builder, click Generate Code.

“Generate

In the Copy/paste onto your site pop-up modal, highlight the code and copy it to your clipboard.

Paste the code into your website's HTML.

Nice work! Your pop-up form will display when someone visits your site. If they choose to fill out and submit your form, we'll add them to your MailChimp list.

If a visitor has previously viewed your form, we'll use cookies to make sure they don't see it again for up to one year (or until they clear their cookies).

Edit the Form

After you add the pop-up signup form code to your site, you may need to make changes to the form.

To edit the form, follow these steps.

Navigate to the Pop-Up Form Builder.

Click any tab to make your changes.

Click Publish.

“Publish”

In the Publish Form pop-up modal, click Publish.

“Publish”

MailChimp automatically push the changes to the code on your site and updates your pop-up form.

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

Copyright © 1997 – 2024 Miva®, Miva Merchant®, MivaPay®, MivaCon®, Camp Miva®, Miva Connect®, Miva, Inc. All Rights Reserved.