Pop-up signup forms help you connect with the people who visit your website. Use the pop-up form editor to design and customize a pop-up form. Add a special offer or discount to help grow your audience and boost your sales. Once you publish, we’ll automatically push the form code to your connected site, or provide the code you need to embed it on your site if it’s not connected.
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.
- Embedding code on your site 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.
- Your website’s code can affect how your pop-up form appears. Sometimes, additional CSS may be required to style your form.
- If you need to translate your content into another language read, Translate Signup Forms.
- If you manually connect a website to MailChimp, or use a supported e-commerce integration, you can automatically add a pop-up form to your site or store from the Connected Sites page.
- Make sure you customize your form's related pages and response emails.
Access the Pop-Up Form Editor
The pop-up form editor is where you customize your pop-up signup form and generate the code you use to publish to your site.
To access the editor, follow these steps.
- Navigate to the Lists page.
- Click the drop-down menu next to the list you want to work with, and choose Signup forms.
- Select Subscriber pop-up.
Next, you'll customize the look of your pop-up form and publish the form code to your site.
Customize the Form
In the editor, 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. To help prevent fake signups, you can make your form double opt-in at anytime, and add reCAPTCHA confirmation to your pop-up form in your list's settings.
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. Fields that are required in your list are not automatically marked as required on the pop-up signup form.
- 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.
Preview Mobile Banner
The On exit display option shows your form when site visitors move their cursor away from their current tab or window, and is only available when your site is viewed on a desktop. 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 editor, 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 editor, click the Mobile tab.
- Click Show mobile banner.
Publish Your Form
If you've connected your site through our Connected Sites page and you've finished customizing your form, click Publish in the pop-up modal and we’ll automatically push the code to your site.
If you haven't connected your site through our Connected Sites page, you'll generate the form code and add it to your website manually.
Generate Form Code
To generate your form code and add it to your site manually, follow these steps. 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.
- In the pop-up form editor, 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 editor.
- Click any tab to make your changes.
- Click Publish.
- In the Publish Form pop-up modal, click Publish.
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
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.
To remove your embedded pop-up form code on a site that's not connected, 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.