Add a Pop-Up Signup Form to Your Website

Pop-up signup forms make it easy to 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 Magento, 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 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.

  1. Navigate to the Lists page.
  2. Click the drop-down menu next to the list you want to work with, and choose Signup forms.
    Cursor clicks list drop-down menu and chooses signup forms.
  3. Select Subscriber pop-up.
    Cursor clikcs the select button.

Next, you'll customize the appearance of your pop-up form and add the form code to your site.

Customize the Form

To customize your pop-up form, follow these steps.

  1. Navigate to the Form Builder and select Subscriber pop-up.
  2. In the Design tab, choose when your pop-up settings, alignment, and styles for your field labels, button, and pop-up modal.
  3. In the Fields tab, check the box next to each field you want to include in your form.
    Cursor clicks checkbox next to field label.
  4. To make a field required, toggle the Required slider to the green checkmark.
  5. 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.
    Cursor clicks and drags three dots icon to reorder a field.
  6. In the Content tab, add the image and text you want to include in your pop-up form, and choose whether to make your form double opt-in.
    Cursor clicks browse to open the content manager.

After you customize your pop-up form, toggle between the Desktop, Mobile, and Mobile Banner tabs 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.

On a mobile device, the mobile banner will display at the top of the screen. Visitors to your website can tap Subscribe to open the full version of your pop-up form, or tap Close to exit the form.

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 numerical values—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.
  • Your related response pages and emails are customizable.
  • Your website’s code can affect how your pop-up form appears. Sometimes, additional CSS may be required to style your form.

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.

  1. Navigate to the Form Builder and select Subscriber pop-up.
  2. Click Generate Code.
  3. In the Copy/paste onto your site pop-up modal, highlight the code and copy it to your clipboard.
  4. 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 your form, we'll automatically add them to your MailChimp list.

If a visitor has previously viewed your form, we'll use cookies to make sure they don't see it again for up to one year (or until they clear their cookies).

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.

  1. Navigate to the Form Builder and select Subscriber pop-up.
  2. Click any tab to make your changes.
  3. Click Publish.
    After you make changes to your popup form, click Publish.
  4. 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.

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

Technical Support