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 realfeedback.app 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:
Step 2: Extract the variable from the form code
This will generate the following html code:
https://gist.github.com/sonium0/4ddc2c9d7df5ef888655b313a92dd67c
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.
https://gist.github.com/sonium0/d6809cad85149014748a8c6ef17bbb8e
Now we have made a Bootstrap based Mailchimp signup form that will look nicely with the rest of a Boostrap site.