Get access to an awe-inspiring collection Of 65 Beautiful Wordpress themes for the price of one Get it now Ad

Mailchimp signup form

MailChimp is a great tool for email marketing and supports, amongst many other features, also embedded signup forms for your website. MailChimp will provide a basic HTML code but unfortunately, it does not support Bootstrap framework.

In this article, you'll learn how to embed a Mailchimp signup form on your website form and then convert it to a Bootstrap markup easily. As always, practical examples are included.

Let's get started.

1. Create a MailChimp list

If you don't have it yet, you will need to create a MailChimp list

2. Create a naked signup form in MailChimp

  • Go to the detail of your list (Lists > Your List Name) and choose Signup forms.
  • From the options that you will see, select embedded forms.

  • Choose the Naked form type

3. Customise the form options

Customise the form options, as per your needs. The options I chose for the purpose of this tutorial are pictured below. As you see, Mailchimp will provide only raw HTML but it is really all we need.

4. Update MailChimp HTML with Bootstrap markup

After pasting the code from MailChimp to your HTML page, the code of the form could look like this:

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//Bootstrapious.us10.list-manage.com/subscribe/post?u=97f1bc02efa56031b67a2b00f&amp;id=fc7b4ce646" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
	<label for="mce-FNAME">First Name </label>
	<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
	<label for="mce-LNAME">Last Name </label>
	<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-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 type="text" name="b_97f1bc02efa56031b67a2b00f_fc7b4ce646" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

MailChimp code contains many obsolete classes and elements, so we should transfer to our Bootstrap form only some form attributes (action, method), form labels, inputs and the "anti-spam" div (div that's hidden from the viewport and contains one input element).

To show you the necessary modifications, I will transform this code into two Bootstrap forms: one only containing email address field and one with the name and surname fields too. 

4.1 Simple form

I took the code for this form from the footer of my Universal Bootstrap template.

<form>
    <div class="input-group">
        <input type="email" class="form-control" required="required">
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="fa fa-send"></i></button>
        </span>
    </div>
</form>

After copying the attributes from the MailChimp <form>, <input> and the anti-spam part, the result will be:

<form action="//Bootstrapious.us10.list-manage.com/subscribe/post?u=97f1bc02efa56031b67a2b00f&amp;id=fc7b4ce646" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
    <div class="input-group">
        <input type="email" value="" name="EMAIL" id="mce-EMAIL" required="required" class="form-control">
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="fa fa-send"></i>&nbsp;</button>
        </span>
    </div>

    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_97f1bc02efa56031b67a2b00f_fc7b4ce646" tabindex="-1" value=""></div>
</form>

Demo 1

4.2 Complete form

A bare template for the form will contain fields for name, surname and email address.

<form>
    <div class="form-group">
        <label for="">First Name</label>
        <input type="text" class="form-control">
    </div>
    <div class="form-group">
        <label for="">Last Name</label>
        <input type="text" class="form-control">
    </div>
    <div class="form-group">
        <label for="">Email Address</label>
        <input type="text" class="form-control" required="required">
    </div>
    <button type="submit" class="btn btn-primary"><i class="fa fa-envelope-o"></i> Subscribe</button>
</form>

Again, what we need to do is to copy attributes for <form>, <input>, <labels> and the anti-spam div from the MailChimp form. 

The result

<form action="//Bootstrapious.us10.list-manage.com/subscribe/post?u=97f1bc02efa56031b67a2b00f&amp;id=fc7b4ce646" method="post" target="_blank">
    <div class="form-group">
        <label for="mce-FNAME">First Name</label>
        <input type="text" class="form-control" name="FNAME" id="mce-FNAME">
    </div>
    <div class="form-group">
        <label for="mce-LNAME">Last Name</label>
        <input type="text" class="form-control" name="LNAME" id="mce-LNAME">
    </div>
    <div class="form-group">
        <label for="mce-EMAIL">Email Address</label>
        <input type="email" class="form-control" required="required" name="EMAIL" id="mce-EMAIL">
    </div>
    <button type="submit" class="btn btn-primary"><i class="fa fa-envelope-o"></i> Subscribe</button>

    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_97f1bc02efa56031b67a2b00f_fc7b4ce646" tabindex="-1" value=""></div>

</form>

Demo 2

 

So, that's it for today. We've explored how to transform the Mailchimp forms to Bootstrap and to start collecting your users' emails on your site. I hope you have enjoyed it and find it useful!

Thanks for reading :)

You might also like one of our Free Themes

Universal - Business & E-commerce Template

Universal is clean and stylish universal website template built with Bootstrap 3.3.2. It stands out…

View theme

Bootstrap Job Board Template
PREMIUM

Bootstrap Job Board Template

Bootstrap Jobs is our premium and complex Bootstrap theme for building jobs or …

View theme

Creative portfolio

Creative portfolio is a clean and elegant template mainly made for designers and…

View theme

Discussion