Add a Pop-Up Signup Form to Your Website

MailChimp’s Form Builder allows you to create and style a signup form that launches in a pop-up modal when someone visits your site. The Form Builder allows you to customize the pop-up signup form and promote giveaways, contests, and offers on your website.

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.

In this article, you'll learn how to design a pop-up form, generate the form code for your site, and publish changes to existing pop-up forms.

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 from 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.
Use the Desktop and Mobile buttons to see the layout of your form 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.
    Select Signup forms from the list drop-down menu.
  3. Select Subscriber pop-up.
  4. On the Design tab in the editing pane, choose from four layout options, and format your Form Labels, Button Styling, and Modal Styling
    Screenshot of the Design tab options.
    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. Screenshot of the Modal Styling section.
  5. To view the Hover Color, Close Link Color, and Overlay Opacity, click  Pop-up Preview 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.
    Click and drag fields into the order you want on the Fields tab.
    To require a field, toggle the slider to a green checkmark in the Required column.
    Toggle the button to make the fields on the Subscriber popup required.
  7. On the Content tab, upload your image from the Content 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 Pop-up Delay, and set the Max Pop-up Width in pixels.
  9. Click Generate Code.
    Click Generate Code and then copy the code from the modal to paste in your site's HTML.
  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.
    Select Signup forms from the list drop-down menu.
  3. Select Subscriber pop-up.
  4. Make the edits you want, and click Publish.
    After you make changes to your popup form, click Publish.
  5. Click Publish in the pop-up modal to automatically push these changes to the form code on your site.

Was this article helpful?
What can we do to improve articles like this?

Technical Support