Add a Pop-Up Signup Form to Your Website

Before You Start

Here are some things to know before you begin this process.

• Like all MailChimp forms, pop-up signup forms are created in the Form Builder for a specific list. Customize related response pages and emails in the General Forms section.
• A pop-up form that advertises a contest or giveaway has the potential to attract subscribers who may only be interested in a particular offer or event. These subscribers may not open or click through future emails that you send to your list. To combat this, create compelling campaigns more likely to keep recipients engaged over time.
• Depending on the code behind the scenes of your website, the pop-up signup form may look different than you expected. Sometimes, additional CSS is required to style the form correctly on your site.
• When a visitor sees the pop-up signup form on your site, we'll store a cookie in their browser to keep it from appearing again, even if they don't choose to fill out the form. If they clear browser cookies or visit after a year, they will see the pop-up form again.

Design the Form

The Form Builder for the pop-up signup form allows you to design your form in the editing pane and see the changes in real time. Use the Desktop and Mobile buttons in the upper-left corner of the screen to see how your form will appear on different devices.

Follow these steps to design your pop-up form and generate the HTML to paste in your website's code.

1. Navigate to the Lists page.
2. Click the drop-down menu for your list and click Signup forms.
   
3. Select Subscriber popup.
4. On the Design tab in the editing pane, choose from four layout options, and format your Form Labels, Button Styling, and Modal Styling. 
   
   When the pop-up form appears on your site, the screen behind your form grays out to emphasize the pop-up modal.
   Set the Overlay Opacity from 1–100, where lower values are more transparent and higher values are more solid. Use only numerical values—the setting won't work if you use text or other characters, like %. If you leave the Overlay Opacity field blank, we'll default to our recommended opacity.
5. To view the Hover Color, Close Link Color, and Overlay Opacity, click Preview Popup in the upper-right corner.
   
6. On the Fields tab, check the boxes for the fields you want to include on your form.
   Click and hold the handle to the left of the fields to drag and drop the fields in the order you want.
   
   To require a field, toggle the slider to a green checkmark in the Required column.
   
7. On the Content tab, upload your image from the File Manager, and add content to the body and footer blocks. Body content appears above the form fields, and footer content appears below the form field section.

   If the layout you chose on the Design tab is the text-only layout, you won't see the option to upload an image.

8. On the Settings tab, choose the Popup Delay, and set the Max Popup Width in pixels.
9. Click Generate Code.
   
10. Copy the form code provided, and add the code to your site's HTML. 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.

Edit the Form

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

1. Navigate to the Lists page.
2. Click the drop-down menu for your list, and click Signup forms.
   
3. Select Subscriber popup.
   
4. Make the edits you want, and click Publish.
   
5. Click Publish in the pop-up modal to automatically push these changes to the form code on your site.