build your pop up

How to create a Pop Up Form with Mailchimp with 5 Easy Steps

I bet you have seen a pop up form that do come up when you are about to exit/close a window/tab of your browser and maybe you have wondered  how they made them.

Is this some sort of Marketing Automation strategy or Email Marketing? To create this, do they imply lots of designing hours? Do I need advanced html/JS code in order to implement them? How do they track when the user is about to leave? Just stay tuned and discover HOW EASY IT IS!

Why do I need a Pop Up on my website?

When you want to build a community around your website it is so helpful to have email directions so you can “get in touch with them” aka send them emails/newsletter about your news and more in-depth content. With Mailchimp this is so easy to achieve.

First of all, keep in mind that Mailchimp is an Email Marketing tool, so this way you do not have to worry about setting up a CRM to collect the email addresses of the users that do subscribe/contacts you gather.pop up to add contacts to your Mailchimp database create a pop up on Mailchimp

 

 

1st step, Select the goal for your Pop Up form:

First of all, go to your “Home” page of your Mailchimp account, once in there it will show up two different “ways” from where you can start building your pop up form: “Use a pop up form to collect subscribers” or “Design a pop-up signup form that can be embedded on any site“.

 

With this selection, you will be shown a dialogue box where you choose what type of pop-up form you want to create, kinda securing the “goal” for it.

build your pop up

2nd step, Design your pop-up form on Mailchimp:

Now it is where the game starts. If you are familiar with the interface to create a Mailchimp e-mail template, this will be kinda easier for you. 🙂

The first screen is about applying the “Design”. You can create a design and upload it as a photo, or jus leave it without any “fancy” design, the subscription box to fill with your email address and the “Subscribe” button, will be kept there anyways, no worries!

Let’s take a look at what are the main options to design your pop-up form on Mailchimp:

options to build a pop up on Mailchimp

  • Format: Where you want it to show up?
    – As a Modal in front of your website interface/content.
    – As a Slide that does come up from the side in front of the content.
    – As a Fixed element on the screen/content showing.
  •  Pop-up settings: When do you want it to show up?
    – Immediately.
    – After 5 seconds.
    – After 20 seconds.
    – When the user does scroll to the middle of the page showing.
    – When the user does scroll to the bottom of the page showing.
    – When the user does want to exit the page.

types of exit pop up

  • Field labels: choose carefully the font and the text color of the message that will be shown in the box, in this case: “Subscribe”, “Email Address” and “WANNA KEEP IN TOUCH!”
  • Button style: text shown, text color, background color, hover effect color, alignment of the button inside the box, and if you do want it to be full width.
  • Overlay opacity with a percentage (%).

3rd step, What information fields does my pop-up form can have?

When working to build up a pop-up form on Mailchimp, you can count with the fields that are already available, and even choose if that information needs to be “required” from the user, in order to get the right data for your Email Marketing strategy:

As for default, for the time being, the fields are:

  • Email Address.
  • First Name.
  • Last Name.
  • Address.
  • Phone Number.
  • Birthday.

style options to build a pop up on Mailchimp

 

 

4th step, Content for my user-interaction with the pop-up form:

Keep in mind that you are going to need to “create” three different copy for your pop-up form (build with Mailchimp).

First of all, you need to write the “Body” part of it, which is the one that will show up before the name of the field of information that the user needs to fulfill.

The “Footer” text will show up under the button that the user does need to click onto in order to submit their information.

Finally, the “Sign up success message“, which is the one that will show up on a light-box working as a ‘thank-you’ page for the submission.

code and build a pop up on Mailchimp

 

 

5th step, Install your Mailchimp pop-up form onto your website:

Then, click onto “GENERATE CODE” and you will see magic happen. 😉

Go to your Google Tag Manager account (which previously I have showed you how to create and build up), and go to create a “New” “Tag“.

create a new tag on GTM

 

Once in there, choose to create a “Custom HTML” tag type, and paste the code that Mailchimp has generated specially for your pop-up form. 🙂

create a tag on Google Tag Manager

 

Apply the parameters of what URLs do you want your pop-up form to be shown at and publish the Google Tag Manager (GTM) container:

publish your Google Tag Manager container

 

And so VOILÀ, your pop-up form build up with Mailchimp will show on your website with all the design and parameters you have introduced while building it on Mailchimp!

exit pop up

 

There is no excuses to not start working on our Email Marketing strategy! 🙂