Simple Mailchimp Newsletter template for Bootstrap and Bulma

Here's the code to integrate a Mailchimp embedded form into your Bootstrap or Bulma project.
This is really simple template using input group that looks like the one on the bottom of that page.

It uses the Javascript from Mailchimp to submit the form in an AJAX request and display the success/error messages.

Bootstrap

<form action="YOUR_MAILCHIMP_URL" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

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

    <div class="mc-field-group">
        <label for="mce-EMAIL" class="sr-only">Email Address</label>
        <div class="input-group">
            <input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL" placeholder="Your email">
            <span class="input-group-btn">
                <button class="btn btn-default" type="submit">Subscribe</button>
            </span>
        </div>
    </div>

    <div id="mce-responses">
        <div class="response text-warning" id="mce-error-response" style="display:none"></div>
        <div class="response text-success" id="mce-success-response" style="display:none"></div>
    </div>

</form>

The gist is available here.

Bulma

<form action="YOUR_MAILCHIMP_URL" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

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

    <div class="mc-field-group">
        <div class="field has-addons">
            <div class="control is-expanded">
                <input type="email" value="" name="EMAIL" class="required email input" id="mce-EMAIL" placeholder="Your email">
            </div>
            <div class="control">
                <button class="button is-primary" type="submit">
                    Subscribe
                </button>
            </div>
        </div>
    </div>

    <div id="mce-responses">
        <div class="response has-text-warning" id="mce-error-response" style="display:none"></div>
        <div class="response has-text-success" id="mce-success-response" style="display:none"></div>
    </div>

</form>

The gist is available here.

Don't forget to load Mailchimp's javascript at the bottom of your page:

<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>

You can also add this small CSS to change the error message's color.

div.mce_inline_error {
    color: red;
}