Design Your Popup Form

After you select a template and create your Mailchimp popup form, design and customize the form to match your brand. Upload a logo, change fonts and colors, add follow-up steps and other eye-catching elements to engage your audience.

In this article, you’ll learn how to design your popup form.

Before you start

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

• Mailchimp popup forms require a template. To learn more, check out Create a Popup Form.
• Your popup form design must comply with GDPR requirements. To learn more, check out Collect Consent With Popup Forms.

Design your form

After you create a popup form and choose a template, design it in the popup form editor to match your brand and maximize website engagement. Your form has different elements or components such as text, images, buttons, and input fields that can be changed separately.

Popup forms you've already created are listed on your Overview page. To update, click on the form you want to work with, then click Edit content in the What does it look like? section.

Add a logo

To add your logo to your popup form, follow these steps.

1. In the Steps panel, click Offer.
2. Click Logo.
3. In the Image section, click Replace Image.
   
4. Choose the file you want to upload. SVG, PNG, WebP, or AVIF files are supported.
5. Change the logo style, adjust the position, width, height, and margin. You can add rounded corners and other elements to suit your design needs.

Update fonts

Update your popup form fonts using the bulk edit tool, or individually.

Bulk edit

To update your fonts with a bulk edit, follow these steps.

1. In the Typography section, choose the font you want to update.
2. In the Bulk edit all instances of this font popup, choose a font from the Font drop-down.
3. To preview your changes, click Preview, then click Preview locally.
4. When you’re ready to save your changes, click Save and review.
   
5. Choose a font weight from the Weight drop-down, then click Update all uses of this font.

Individual edit

To update your fonts individually, follow these steps.

1. In your popup form layout, click the text block you want to update.
2. In the Typography section, click the drop-down and choose your font.
3. Change the color, border, spacing, opacity, rotation, animation, and more.
4. To preview your changes, click Preview, then click Preview locally.
5. When you’re ready to save your changes, click Save and review.
   

Change colors

Modify your popup form’s colors for text, backgrounds, buttons, and borders.

To change your colors, follow these steps.

1. In the Colors section, click the color you want to update. If you’re in your popup form layout, click Back to all Steps.
2. Use the color picker to choose a preset or input a custom HEX code.
3. To preview your changes, click Preview, then click Preview locally.
4. When you’re ready to save your changes, click Save and review.
   

Repeat this process for all of the colors you want to change.

Add images

Images are a powerful way to make your Mailchimp popup forms more visually appealing. Replace or add new images to match your style and brand. For best results, we recommend an image size of 300KB.

To add or update images, follow these steps.

Image

1. In the Steps panel, click Offer.
2. Click Add an element.
3. Drag and drop the Image element into your layout.
4. In the Image section, click Upload.
   
5. Customize the image to match your website branding.
6. If you no longer want the image, click delete on your keyboard.

Image background

1. In your layout, click the image background you want to work with.
2. In the Image Background section, click Replace Image. You can also Remove Background + Auto Crop or Remove Background only.
   
3. Adjust the size, set a repeat pattern, or choose the alignment as needed.
4. If you no longer want the image, click delete on your keyboard.

Update text

It is recommended that you update text using the mobile view. The text will automatically update on the desktop.

To update your popup form text, follow these steps.

1. In your popup form layout, double click the text you want to update.
2. Enter your new text in the text block.
3. Be sure to update your text across all steps of the popup form layout.

Update buttons

You can update the appearance and button actions in your layout.

To update buttons, follow these steps.

1. In your layout, click the button you want to work with.
2. In the Properties panel, click Appearance to update how your button looks.
   
3. Click Button Actions to see or add actions. For example, you could have button actions to collect email and SMS data from website visitors.
   
4. In the Go to step section, click the Step dropdown to see other button actions, or click Add Action to add actions to suit your needs.
   

Update styles

Styles are applied to Mailchimp popup form templates to help you design your form. Add or remove styles in your layout to match your personal brand.

Edit styles

To edit styles, follow these steps.

1. In the Layers panel, click the element with the style you want to change. The teardrop icon indicates a style is applied.
2. In the Properties panel, click the STYLE drop-down to see all elements with that style.
3. Choose the property (font, color, size, opacity, etc) you want to update. All elements in your layout with that style will be updated.

Create styles

To create a new style, follow these steps.

1. Select the element without a style attached.
2. In the Properties panel, click the New style icon.
   
3. Name your style, then click Create Element Style.
4. In the STYLE dropdown, click Detach style to remove a style.

Update discount code

If your popup form template has a discount code, update the placeholder discount code text with your own code.

To update the discount code, follow these steps.

1. In your popup form layout, double-click the placeholder discount code.
2. Enter your discount code.
3. You’ll also need to replace this text on the reminder bar before you can publish.

Update SMS legal links

If you choose a popup form template that includes SMS, add links to your SMS marketing terms and conditions and privacy policy.

To update your SMS legal links, follow these steps.

1. In your layout on the Finish Signing Up step, click the Terms & Privacy links.
2. Click Button Actions(1).
3. Enter the URL(s) for your SMS legal links.

Mini-quiz

Mini-quizzes are an interactive way to engage website visitors and collect valuable data. Design a mini-quiz with checkboxes, drop-downs, or radio buttons. For questions with 1 answer, use radio buttons or drop-downs. For questions with more than 1 answer, use checkboxes.

Here are the types of mini-quizzes you can create.

Radio buttons

Radio buttons, or a Radio Set, offer a visible multiple-choice design for your mini- quiz. Your website visitors choose a single answer from the options you create.

To set up radio buttons, follow these steps.

1. In the Steps panel, click Offer.
2. Click Add an element.
3. Drag and drop the Radio Set element into your layout.
4. Enter your text into the text fields. Make sure each radio button has a unique value assigned.
5. Add a submit button.

Drop-down

Drop-downs offer a hidden multiple-choice design for your mini quiz. Your website visitors choose a single answer from the options you create.

To set up a drop-down, follow these steps.

1. In the Steps panel, click Offer.
2. Click Add an element.
3. Drag and drop the Dropdown element into your layout.
4. Enter your drop-down options into the fields. Make sure each option in the drop-down has a unique value assigned.

Checkboxes

Checkboxes offer a multiple-answer and an individual answer option for your mini quiz. Your website visitors choose as many answers as they'd like from the options you create, or they can check a required checkbox. Use checkboxes to gather marketing permission or preferences as well as legal consent.

To set up a checkbox, follow these steps.

Checkbox set

1. In the Steps panel, click Offer.
2. Click Add an element.
3. Drag and drop the Checkbox Set element into your layout.
4. Enter the text to display next to each checkbox. Make sure each checkbox set option has a unique value assigned.
5. Add a submit a button.

Individual checkbox

1. In the Steps panel, click Offer.
2. Click Add an element.
3. Drag and drop the Individual Checkbox element into your layout.
4. Enter the checkbox text into the field.
5. Choose an audience field to store checkbox data in your audience.
6. Choose required and default settings.

Add follow-up steps

Add follow-up steps to your popup form to help visitors re-engage with your form. Remind them of a discount offer or use buttons to transition them through the popup form.

Here are some follow-up steps you can add to your popup form.

Second-chance elements

Second-chance elements, also known as teasers, help re-engage visitors who previously dismissed your popup form. These teaser bubbles typically appear in the corner of the screen, and they follow visitors throughout their time on your website.

To add a second-chance element, follow these steps.

1. In the Steps panel, click Follow-up.
2. Click 2nd Chance Container.
3. Choose your style settings for the follow-up step, text, and buttons.
4. To remove a second-chance element, zoom out and click End Campaign.

Reminder bar

The Reminder bar acts as a prompt to encourage subscribed contacts to use their discount code after the popup form closes and they've opted in to your marketing. This bar is non-interactive and appears as a permanent notification while visitors browse your website.

Review settings

After you design your popup form, review your settings and preview. Click Save and review to review your popup form checklist. Click Preview to test your popup form.

When you’re ready, click Publish or schedule to publish your popup form on your website. To learn more, check out Create a Popup Form.

Next steps

After you publish your popup form, maintain your content and manage your metrics to meet your marketing goals. To learn how to manage your forms, check out Manage Your Popup Form.