Add a Pop-Up Signup Form to Your Website

Use our pop-up signup form to convert website visitors to subscribers. Customize the form to promote special offers and discounts, so you can grow your MailChimp list and sell more stuff.

In this article, you'll learn how to design and edit a pop-up form.

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.
  • The pop-up form doesn't support translation.
  • If you connect your site to MailChimp, we’ll automatically push the pop-up form code to your site when you add a form from the connected sites details 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.
  2. In the Design tab, choose when your pop-up form should display, align your image, and style 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, upload an image from the Content Manager, add content to the body and footer, or choose 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 and Mobile 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.

Things to Know

  • Fields that are required in your list are not automatically marked as required on the pop-up signup form. Make sure any required fields you want are marked as required in the Form Builder.
  • Group fields can be required on the pop-up signup form. This is not 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 our recommended opacity.
  • If needed, you can customize related response pages and emails in the General Forms section of your list.

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.
  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.
  2. Click each tab to make your preferred 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