Pop-up signup forms help you connect with the people who visit your website. Use our Form Builder to quickly design a pop-up form and customize it with a special offer or discount so you can grow your audience and boost your sales. We’ll provide the code you need to embed it on 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.
- This is an advanced task and is recommended for users familiar with custom coding. Contact your developer, or hire a MailChimp Expert if you need assistance.
- If you need to translate your content into another language, try an embedded form.
- If you use MailChimp for Shopify, MailChimp for PrestaShop, or MailChimp for WooCommerce, you can automatically add a pop-up form to your store from the Connected Sites page.
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.
To access the Form Builder, follow these steps.
- Navigate to the Lists page.
- Click the drop-down menu next to the list you want to work with, and choose
Next, you'll customize the look of your pop-up form and add the form code to your site.
Customize the Form
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.
To help grow your list, the pop-up form is single opt-in by default. If you prefer, you can make your form double opt-in at anytime.
To customize your pop-up form, follow these steps.
- In the
Design tab, choose a format for your form.
- Click Modal to display the form in the center of your site.
- Click Slide to have the form slide in and display in a fixed position on the bottom-right side of your site.
- Click Fixed to display the form in a fixed position at the bottom of your site. This format only shows an email address field, and body text for your form. Choose another format to display additional fields, footer text, or an image.
- Click the
Display drop-down menu to choose when your form appears to people who visit your site.
- Next, choose the
Image alignment, and styles for the field labels, button, and pop-up modal.
- In the
Fields 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.
- To reorder a field, click the
three dots icon next to it and drag the field to where you want it to appear in your form.
- In the
Content tab, add the image and text you want to include in your pop-up form.
After you customize your pop-up form, toggle between the Desktop and Mobile tabs to see how your form will appear on different devices.
If someone views your site on a mobile device, a banner will display in place of your pop-up form. Viewers can tap the banner to see the full form. In the Form Builder, you can preview the banner to see how it will appear on a phone or tablet.
To preview your mobile banner, follow these steps.
- In the Pop-Up Form Builder, click the Mobile tab.
- Toggle the slider to the green checkmark to preview your banner.
Other Things to Know
- Fields that are required in your list are not automatically marked as required on the pop-up signup form. Mark fields as required in the Fields tab.
- Group fields can be required on the pop-up signup form. This isn't an option on our hosted or embedded signup forms.
- Set the Overlay Opacity from 1-100, where lower values are more transparent and higher values are more solid. Use only numbers—the setting won't work if you use text or other characters, like %. If you leave the Overlay Opacity field blank, we will default to something that works for most sites.
- Make sure you customize your form's related pages and response emails.
- To help prevent fake signups, you can add reCAPTCHA confirmation to your pop-up form in your list's settings.
- Your website’s code can affect how your pop-up form appears. Sometimes, additional CSS may be required to style your form.
- The On exit display option shows your form when site visitors move their cursor away from their current tab or window. This display option is available when your site is viewed on a desktop, but isn't available for mobile devices.
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
- 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.
- In the
Publish Form pop-up modal, click
That's it! We'll automatically push the changes to the code on your site and update your pop-up form.
To identify people who signed up with the pop-up form, segment your list by Signup Source. After you create your segment, you can email these subscribers discounts, custom product recommendations, and more.
Remove the Form
To remove your pop-up form, you’ll need to manually delete the form code from your site. This process varies from site to site. Contact your developer, or hire a MailChimp Expert if you need assistance.
If you added a pop-up form to a connected site, access it through the connected sites page and click Remove to automatically delete the form from your site.