Published: 2.3.2021 | Last update: 5.10.2021

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 and then convert and integrate 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 A simple newsletter signup form

I took the code for this form from the footer of my Corporate 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 A 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 the <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 :)

To learn more Bootstrappy stuff, check out my tutorials on crafting beautiful Google maps for your website or have a look at the list of the best Bootstrap plugins for 2019. To learn more about forms in Bootstrap, head to my tutorials on Bootstrap contact forms or Bootstrap and Captcha form.