A pop-up signup form helps you connect with your website visitors. Design it to fit your brand, and add a special offer or discount to help grow your audience and boost your sales. After you publish, we’ll automatically add the form to your connected site, or provide the code you need to connect your site.
In this article, you'll learn how to design and edit a pop-up form in Mailchimp, and add it to your site.
Before you start
Here are some things to know before you begin this process.
- Be sure to customize your form's related pages and response emails.
- If you need your form in a different language, read Translate Signup Forms.
- The pop-up form is single opt-in by default. To help prevent fake signups, make your form double opt-in at any time, and enable reCAPTCHA confirmation in your audience's settings.
Access the pop-up form builder
The pop-up form editor is where you customize your pop-up signup form, enable or disable it on your websites, or generate code to connect a custom website outside of Mailchimp.
To access the pop-up signup form builder, follow these steps.
- Click Audience, then click Signup forms.
If you have more than 1 audience, click the Current audience drop-down and choose the one you want to work with.
Select Subscriber pop-up.
Customize your pop-up form
Customize the look of your pop-up form to complement your website. Choose your style preferences, pick a layout, and control how and where it appears. You can also edit your form fields and labels as needed. Any changes you make will apply only to the pop-up signup form.
To customize your pop-up signup form, follow these steps.
Click Style to choose the fonts, font colors, and font size for your form.
Click Layout to choose one of the popup designs.
All layouts will appear as a banner on mobile devices. If your audience has GDPR fields enabled, the layout selector will indicate which templates support them.
Click Settings to control how the pop-up will appear on your site.
Here’s an overview of each setting.
- Overlay opacity
Adjust the slider to darken your website when the pop-up appears, to draw more attention to it.
Click this drop-down to choose how much time you want to pass before your pop-up appears.
- Show Mailchimp Badge
Toggle the slider on or off to add or remove the referral badge.
Choose whether you want the pop-up to slide out from the bottom right of the browser window, or appear in the middle of the page.
- Overlay opacity
Hover over the image placeholder in your layout and click Set Image.
Click the plus (+) icon to add each field you want to include in your form.
Click on any form field to edit it.
In the editing menu, change the Audience field or Label as needed.
To require a field, toggle on the Required slider.
To add Helper text for a field, toggle on the Description slider and enter extra details as needed.
To reorder a form field, click the arrow icons to move it up or down.
Click the Subscribe button to customize it. Highlight the button text to change it as needed.
Here's an overview of each item in the style bar.
Click the icon to position your button to the left, center, right, or make it full width.
- Button Color
Click the circle to choose the color of your button.
- Hover Color
Click the circle to choose the color of your button when a cursor is placed over it.
- Font Color
Click the icon to choose the text color.
Click Preview to see how your form will appear to your visitors after it’s published.
Click the mobile icon and desktop icon to see how your pop-up form will appear on different devices.
Publish or unpublish your form
We'll save your design choices and connect the popup form to your site.
Publish on multiple sites
If you have multiple connected sites, click the Edit link to choose which ones you want your popup form to appear on. Toggle off the slider to disable the pop-up form on your website.
Publish with code
If you haven't created a website in Mailchimp or connected one through our Integrations page, click Connect Site.
Here, you have a couple of options. You can click the link to our integrations page and follow the steps to connect your site, or you can enter your website URL and click Get Started to generate a code snippet.
You’ll need to copy and paste this code between the
<head> tags on your website. hen, return to the pop-up form builder and publish. Removing this code will remove the pop-up form from your site.
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 audience as a subscribed contact.
Edit the form
After you add the pop-up signup form 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 editor.
- Click any design option to make your changes.
- Click Save & Publish.
That's it! We'll automatically update the pop-up form on your website.
To identify people who signed up with the pop-up form, segment your audience by signup source. After you create your segment, you can email these contacts discounts, personalized product recommendations, and more.