How to create a Mailchimp Signup-Form using Bootstrap

If you create a landing page using the Bootstrap CSS-Framework, chances are that you would like to give your visitors the chance to sign-up to your Mailchimp newsletter. This is what I wanted to do on where people can get feedback and corrections to their gym exercises from real coaches by uploading a short video.

Unfortunately mailchimp only offers you off the shelf solution that don’t look great on a Boostrap based site. We can however use some variables from the Mailchimp form-code and build it into our own Boostrap from:

Step 1: Generate the form code on Mailchimp

Create a new embedded form and select “Unstyled” and “show only required fields” as shown in the screenshot:

Start by selection a new Unstyled embedded form and “Show only required fields”

Step 2: Extract the variable from the form code

This will generate the following html code:

Here we need the values from the form action attribute in line 3 (https://app.us19.list-manage…..f057efe) and the input name attribute in line 15 (b_d12c94….50a7dfd). In the next step we are going to plug theses values into our Bootstrap form:

Step 3: Create the boostrap form and fill in the Mailchimp values

In the final step you can copy and paste the form code below and fill in the previous values in lines 3 and 28. Also feel free to adjust the class names to fit with the rest of your Bootstrap design.

Now we have made a Bootstrap based Mailchimp signup form that will look nicely with the rest of a Boostrap site.

Comments are closed.