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.
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.In this example, I'll click on my "Testing Account" list. Now click on "Signup forms." Below you will see "Subscriber pop-up," click on the "Select" button.
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.
You can choose how you want it to display; as a Modal, Slide or Fixed.
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.
You can customize the font, background colors, and the hoover color.
Next, choose the Image alignment, left, middle, right or full width.
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.
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.
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.
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"
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.
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.
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.In the Publish Form pop-up modal, click Publish.
MailChimp automatically push the changes to the code on your site and updates your pop-up form.