MailChimp – Stunning Signup & Pop-up Forms

Because a lot of bloggers use MailChimp, me inclusive, I decided to write an article about MailChimp. However, I will not explain why you should build an email list. Or why to chose Mailchimp. Much better !!! I will show you how to embed MailChimp signup forms to your site and make them look really gorgeous. You don’t have to be on a paid plan to follow the tutorial, it is valid for the free plan.

Just to be clear, MailChimp has a lot of tools, but I won’t cover all of them here. Anyway, I list them so you can search more about each one. Maybe you didn’t know you could do this with MailChimp.

  • Email templates
  • Signup forms + Pop-up forms
  • Landing pages
  • Ads (Google, Facebook, Instagram)
  • Automate your emails
  • Integration (with a lot of other apps)
  • Built-in analytics tools
  • Postcards

 

Now we can start with our task. Go to your MailChimp Dashboard, on the bar at the top you can see Lists. Click on LISTS and we are ready to go.

If you wonder: “Why do you even bother to make your opt-in forms look good? They are just opt-in forms. ” Well yes, but no one wants to fill out an ugly opt-in form. Like no girl in the world wants to try on ugly and boring clothes. But for glamorous fancy clothes, everyone would volunteer.

In order to add signup forms to your site, you have to create a list first.

So, Click on Create List and type in the List details, name, the address people will replay, the name from who email will come, a short reminder of how they joined the list, info about your business, form settings and what notification you want to receive about this list. And your list is ready. After you click on Save.

We have the list now. In case you didn’t know, your subscribers will be saved in a table. Each subscriber will complete a row. And right now your list is a blank table with 0 columns. How do we add columns for the subscriber’s data?

 

SIGNUP FORMS

With FORM BUILDER. This is basically the designer of your table. If you add/delete a field in your FORM BUILDER, a column will be added/deleted on the table that collects data for your list with subscribers.

After you saved details about your List, you will land on the list page. At the bottom is create a signup form link. Or navigate to the Lists page. Click the drop-down menu next to the list you want to work with, and choose Signup forms. From there, select Form Builder.

Here you can build your form, design it and share it on social media or translate it. You can also use the Form Builder to edit other emails and messages that are part of the signup process, like the confirmation thank you page and Final Welcome Email.

But right now, we will stick to the Build it tab. Where we’ll add structure to our list-table. You can use Design it later when you want to share your form on social media. No need for design because I will show you how to add CSS to your site.

Add the fields appropriate to the data you want to collect from your subscribers. Remove those you didn’t want with a click on the title and the “-” icon which appears at the bottom of the field. Then, rearrange them with click and drag.

 

ADD SIGNUP FORM TO YOUR SITE

Now your table has columns and is ready to be populated with data. But no one can reach it. Yet.

With EMBEDDED FORM you can add a list signup form on any page of your website. Meaning, you add the signup form on your site, and everyone who fills out the form will be added in the table when they hit subscribe button.

Go back to Signup Forms and select Embedded forms this time. From Classic tab, highlight all the code in the Copy/paste onto your site field and copy it to your clipboard. Then, paste the embed form code into your website’s HTML where you want the form to appear. Website’s HTML means a Custom HTML widget or text editor(NOT visual editor) for posts and pages. I will paste the code here:

Subscribe to our mailing list

* indicates required




Not bad, but I need to clean up the code a bit. Delete the title, * indicates required text and their CSS so the form will inherit my site CSS.

<!– Begin Mailchimp Signup Form –>
<link href=”//cdn-images.mailchimp.com/embedcode/classic-10_7.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id=”mc_embed_signup”>
<form action=”https://adalainedesign.us19.list-manage.com/subscribe/post?u=ae0cb14f17ecff0bda9165d91&amp;id=e9f58314ec” method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>
<div id=”mc_embed_signup_scroll”>
<h2>Subscribe to our mailing list</h2>
<div class=”indicates-required”><span class=”asterisk”>*</span> indicates required</div>
<div class=”mc-field-group”>

Find this piece of code. Actually, is the beginning and delete the code in bold. The link and style tag is for CSS, h2 is the title and the div after is for that text. And then the form needs to be like other forms on your site.





A bit better but it’s still pretty boring. Time to add some magic.

 

CHANGE TEXT

But first I will show you how to change the text for the subscribe button, delete the text above and add it inside the field.

TEXT FIELDS

Find the code bellow, from the first column, is the original code.The highlighted label tag is where you can change the text above the fields or delete it if you do not want any text. As you can see in the second column, I delete the text above and add text inside fields with the placeholder attribute.

< div class=”mc-field-group”>
< label for=”mce-FNAME”>First Name < /label>
< input id=”mce-FNAME” class=”” name=”FNAME” type=”text” value=”” />< /div>
< div class=”mc-field-group”>
< label for=”mce-LNAME”>Last Name < /label>
< input id=”mce-LNAME” class=”” name=”LNAME” type=”text” value=”” />< /div>
< div class=”mc-field-group”>
< label for=”mce-EMAIL”>Email Address < span class=”asterisk”>*< /span>< /label>
< input id=”mce-EMAIL” class=”required email” name=”EMAIL” type=”email” value=”” />< /div>
< div class=”mc-field-group”>
< input id=”mce-FNAME” class=”” name=”FNAME” type=”text” value=”” placeholder=”First Name” />< /div>
< div class=”mc-field-group”>
< input id=”mce-LNAME” class=”” name=”LNAME” type=”text” value=”” placeholder=”Last Name”/>< /div>
< div class=”mc-field-group”>
< input id=”mce-EMAIL” class=”required email” name=”EMAIL” type=”email” value=”” placeholder=”Email Address”/>< /div>

 

SUBSCRIBE BUTTON

Find the code for subscribe button and add some catchy text in the value attribute. And delete the “clear” class from the beginning.

<div class=”clear”><input id=”mc-embedded-subscribe” class=”button” name=”subscribe” type=”submit” value=”Subscribe” /></div>

Let’s see our form again.



 

ADD CSS

And we finally got in here. As I promised you, I will show how to make the signup forms look stunning. Add the CSS code in APPEARANCE >> CUSTOMISE >> ADDITIONAL CSS.

Each component of the form has an id to which you can assign CSS style. The ids are universal for MailChimp forms, meaning will always be the same. You can copy the code below then change a bit the style, so will match your brand.

BACKGROUND CONTAINER

#mc_embed_signup{
text-align:center;
background:#fbf1f1;
padding:50px;
border:3px double #fff;
}

This is the big container for your form. You can add a background, solid color gradient or image, different types of borders, width(50%, 70%, 30%), margins, outline, paddings, float, text alignment. If you intend to put your signup form on top of an image, set the background:transparent;

TEXT FIELDS

#mce-FNAME, #mce-LNAME, #mce-EMAIL, #mce-MMERGEn{
border: none;
background: #fff;
width: 80%;
margin-bottom: 15px;}

Here you have all the filds for text. You can enter more ids followed by comma. Because I guess you want all your text fields to be the same. It is obvious that the first and the second fields are for name and the third one for the e-mail, but what’s the deal with the last one? The last one is usually “mce-MMERGE3” or “mce-MMERGE4”, depending on how many fields beside first name, last name and email , you add. Anyway, You can find the exact id in the code.

As for CSS, you can add background, padding, borders, outline, box shadow, width and margins. I added an 80% width so my text fields occupy 80% of the container width. And margin-bottom for the space between them.

SUBSCRIBE BUTTON

#mc-embedded-subscribe{
background: #e6cbcb;
border:1px solid #fff;
text-transform:uppercase;
display: unset;
margin: 0;
width: 40%;
}

For the subscribe button, there is 2 id, one for the button and other for the button when it’s hovered. It’s necessary to add display: unset. Otherwise, the button will not be centred. And margin:0, because we already added space from the text field margin-bottom. The width is set to 40% because the default width is auto, meaning the button will cover only the text + paddings. And I wanted a bigger button.

#mc-embedded-subscribe:hover{
background:#fff;
}

For the hover button just add what you want to change.

 
 

SUBSCRIBE TO MY NEWSLETTER

 



 

Pretty cool, right?

 

BONUS TIP 🎁

Ok, you managed to make a beautiful signup form but you want to add it in the footer, on the sidebar, at the end of the posts and in the header in front of an image. And the signup form from header needs to have a transparent background, the one on the sidebar pink fields and the form in the footer pink background. But when you change the CSS all the forms change. Because they all have the same id all the time. Look at the code below :

<!– Begin MailChimp Signup Form –>
<div id=”mc_embed_signup”>
<form id=”mc-embedded-subscribe-form” class=”validate” action=”https://adalainedesign.us19.list-manage.com/subscribe/post?u=ae0cb14f17ecff0bda9165d91&id=e9f58314ec” method=”post” name=”mc-embedded-subscribe-form” novalidate=”” target=”_blank”>
<h2>SUBSCRIBE TO MY NEWSLETTER</h2>
<div id=”mc_embed_signup_scroll”>
<div class=”mc-field-group”>
<input id=”mce-FNAME” class=”” name=”FNAME” type=”text” value=”” placeholder=”First Name” /></div>
<div class=”mc-field-group”>
<input id=”mce-LNAME” class=”” name=”LNAME” type=”text” value=”” placeholder=”Last Name”/></div>
<div class=”mc-field-group”>
<input id=”mce-EMAIL” class=”required email” name=”EMAIL” type=”email” value=””placeholder=”Email Address” /></div>
<div id=”mce-responses” class=”clear”>
<div id=”mce-error-response” class=”response” style=”display: none;”></div>
<div id=”mce-success-response” class=”response” style=”display: none;”></div>
</div>
<!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–>
<div style=”position: absolute; left: -5000px;” aria-hidden=”true”><input tabindex=”-1″ name=”b_ae0cb14f17ecff0bda9165d91_e9f58314ec” type=”text” value=”” /></div>
<div><input id=”mc-embedded-subscribe” class=”button” name=”subscribe” type=”submit” value=”Join the Tribe” /></div>
</div>
</form>

</div>

<script type=’text/javascript’ src=’//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js’></script><script type=’text/javascript’>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]=’FNAME’;ftypes[1]=’text’;fnames[2]=’LNAME’;ftypes[2]=’text’;
fnames[0]=’EMAIL’;ftypes[0]=’email’;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!–End mc_embed_signup–>

 

Don’t panic you don’t have to change all the ids every time. When you want a different signup form change the first id, for the whole container.Put something obvious, like “footer_mc_embed_signup”, “header_mc_embed_signup”, “transparent_mc_embed_signup” and so on. Then, use the code for CSS like this:

BACKGROUND CONTAINER

#footer_mc_embed_signup{ }

TEXT FIELDS

#footer_mc_embed_signup #mce-FNAME, #footer_mc_embed_signup #mce-LNAME, #footer_mc_embed_signup #mce-EMAIL, #footer_mc_embed_signup #mce-MMERGEn{ }

SUBSCRIBE BUTTON

#footer_mc_embed_signup #mc-embedded-subscribe{ }

SUBSCRIBE BUTTON HOVER

#footer_mc_embed_signup #mc-embedded-subscribe:hover{ }

I hope this makes sense for you because it’s nothing too complicated. Just add the new id for the whole container in front of each id for text fields and button. As a family name, so it’s known from whom they belong. Instead of writing only the first name, write the whole name. More specific.

 

And that’s it. From now on you don’t have absolutely any excuse to share ugly-boring signup forms on your site. Search for more CSS, play around with colors and border and make beautiful forms to highlight your brand.

 

POP-UP FORMS

Usually the pop-ups are annoying. Try to read something and boxes pop-up and cover the text. And for a lot of them, the close tag is not even visible. But let’s say I can get over it if is a catchy pop-up. And even subscribe.

The good news is, Pop-Up Form Editor get you covered. Has all the options you need for a pop-up.

To access the editor, navigate to the Lists page. There click the drop-down menu next to the list you want to work with, and choose Signup forms. Select Subscriber pop-up.

Add a photo, change the alignment, colors, text font, opacity, button width, modal format, effect, when to appear, add some text. Make everything it takes to create a beautiful amazing pop-up. So the readers will be thrilled that your pop-up appears. 🤩

When you’ve finished customizing your form, click Generate Code (bottom-right). In the Copy/paste onto your site pop-up modal, highlight the code and copy it to your clipboard. GO to APPARANCE >> EDITOR, on the right, under Theme Files, search for THEME HEADER(header.php). Locate the closing < / head > tag and paste the code just before the closing < / head > tag.

That’s it! Your pop-up form will now display on your site.

 
 

I tried to cover everything about signup and pop-up forms but if is there anything I missed or is not clear for you, leave me a comment. Or if you just need help with CSS.

 

 

♥ THIS POST ? SHARE IT WITH YOUR FOLLOWERS →

mailchimp for bloggers

from the same category

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share
Tweet
Pin