How to Code a Custom Mailchimp Popup Form

There are all kinds of marketing platforms out there like Mailchimp, Sendinblue, ContactPigeon, and Constant Contact. These can help you grow your business and generate more leads by providing you with the tools for sending marketing messages, segmenting audiences, creating customer journeys, and so on. All come with different pricing plans—some even offer a free service. Plus, depending on your platform (eCommerce, CMS, CRM), they might deliver built-in integrations. For example, WordPress Contact Form 7 (CF7) plugin provides an integration module with Constant Contact.

One popular example of a marketing campaign that you might have seen in different eCommerce stores is to receive a one-off discount upon a newsletter subscription. The journey might look as follows:

• First, you subscribe to the newsletter.
• Then, an automated email is sent immediately to your address with a one-time discount promo code which you can use for a limited period.

But things aren’t limited only to stores. Another example might be a college website form where a candidate can express their interest in a program. The journey here might look as follows:

• First, you fill out the form by expressing your interest in a program.
• Then, an automated email is sent immediately to your address with an attached file that describes your chosen program in more detail.
• At the same time, your email address is added to a list with specific tags, for example, "BSc - Informatics - 2023-2024". This will help the marketing team behind the college to categorize audiences and run promotions from time to time.

Code for the Modal

As discussed above, in a previous tutorial, we created a flexible JavaScript popup modal from scratch with a customizable animation effect (fade, slide, bounce, etc.) of its dialog.  

Here’s the demo:

For this example, our modal will launch via the slideInOutLeft animation (click on the first button above to see it in action). We’ll keep all modal’s core functionality untouched and only make some little stylistic modifications like increasing its height and rounded corners. 

We’ll also provide two ways for revealing the modal:

• First, upon button click, as it happens already.
• Alternatively, the modal can autoload when the page loads with a small delay. Then, upon the user closes it, it won’t open again unless they open a new browser session. For this case, we’ll add a small amount of JavaScript code and activate the session storage. Of course, if you want a more permanent solution, you can replace session storage with local storage.

Create the Mailchimp Form

The following steps require that you have a Mailchimp account. After signing in to the Mailchimp dashboard, we’ll perform three actions:

First, we’ll generate the form by selecting the Embedded forms option.

Then, in the Form Builder, apart from the predefined Email input, we’ll add two more required ones.

The order doesn’t matter, as we can also manually reposition them later in the HTML.

Finally, by clicking on the Complete button on the top right, we’ll get the generated code.

Embed the Code

We’ll take the generated code from Mailchimp and paste it into our modal:

1

<div class="modal-dialog">

2

    <!--paste contents here-->

3

</div>

Edit the Generated Code (a Bit)

Our form currently looks like this:

We’re going to make some aesthetic improvements though. Here are the main modifications we’ll make to this code:

• To make things more readable, we’ll put the related Mailchimp CSS and JS files right before the closing head and body tags of our page, respectively.
• To create the two-column layout, we’ll wrap the two text inputs inside an element with the grid class.
• We’ll remove the labels from all inputs and give them an extra placeholder attribute.
• We’ll change some texts, and remove some extra elements/classes that we won’t need like the .indicates-required and .helper_text ones.
• We’ll add some custom styles.

Our form will now look like this:

Form Validation

If someone tries to submit the form without filling in all the fields, styled messages will appear.

Success Confirmation

As soon as someone fills out the form successfully, they’ll be added to the target audience—see both the front and back screens below.

Double Opt-in for New Recipients

As an extra verification step, there’s also the option to enable the double opt-in from the form settings.

In such a case, the user needs first to confirm their subscription—then they’ll be added to the audience.

Conclusion

That’s it! Let’s recap what we built today:

• First, we covered how to set up and customize an embedded Mailchimp sign-up form, and then
• how to include it inside a custom JavaScript modal popup.

As mentioned in the beginning, this demo won’t work unless you change the value of the action attribute.

Of course, Mailchimp provides other ways for embedding a subscription form in your web pages. Similarly, there are plugins for different platforms out there ready to handle all this stuff for you.

As always, thanks a lot for reading!