Create Custom Mailchimp Form Using Bootstrap

Custom Mailchimp Form

Hello, ever wanted to use the custom mailchimp form on your website. Mailchimp is an email marketing platform. It allows us to send marketing emails to our subscribers and you can even send automated messages. It offers many forms that you can design and customize very easily. You can find various pre-designed custom forms offered by mailchimp which can be easily installed on our website, but they have some limitations that you cannot easily customize to make them look more attractive. However, in this tutorial, I will explain you to make your own custom form for mailchimp.

I was working for one of my clients and they needed a subscribe form for their website. I have tried all forms provided by mailchimp but my client

1. Login to your mailchimp account.

2. Click on “Lists” in the navigation bar.

3. You should see all the lists that you have created before.

3. On the right side of every list there is a dropdown menu with a down arrow mark, click the dropdown menu to choose Signup forms.

mailchimp lists

4. Now select General forms on the next page.

mailchimp general form

5. After selecting General forms, you will be taken to a page where you can build, edit and translate the form. As I want to explain about custom mailchimp forms I will not go into detail about building, editing and translating in this tutorial. You can find signup form URL on this page.

mailchimp signup form url

6. Just copy the signup form URL from there and paste it into your browser and press enter to open the link. Now you can see a form that you have just created on mailchimp list.

7. Right click or ctrl+U on windows or control+click on a Mac and choose view source.

mailchimp form

8. The source code now you see is a form hosted on Mailchimp and you are required to copy a few lines of code from that.

How to make custom mailchimp signup form from source code?

From the mailchimp signup form source code, you need to copy the form action and other input information. You should copy all the input fields from the source code and put it into your custom mailchimp signup form in any text editor.

1. Find “form action” without quotation marks in the source code and copy the form tag into your custom mailchimp signup form.

2. Copy the other two lines of code below the form tag into your custom mailchimp form and add it just below the form tag. It is very important to put these two lines along with form tag as provided so that your custom mailchimp form functions properly. In these two lines, the first line indicates your user ID and the second one is your list ID. Now the code should look similar to this.

3. Find all input tags on the form and copy, paste the input fields into your custom form.

*IMPORTANT: You should not change the name values for the input fields.

In the above piece of code the name is MERGE0.

input fields custom mailchimp form

4. Repeat 2 and 3 for all input fields in your custom mailchimp form.

How to create Custom Mailchimp Form using Bootstrap?

We discussed on custom mailchimp form above, but what if you want to put this form using bootstrap framework. No worries, I will explain you how to make a custom mailchimp form using bootstrap. Just go to the 3rd step in the above tutorial and add bootstrap classes to the div and input fields. Look at the below piece of code, you can see form-group added to the parent div of the input field and form-control to the input field itself. That is how we add bootstrap classes to make the custom mailchimp form work with bootstrap.on custom mailchimp form above, but what if you want to put this form using bootstrap framework. No worries, I will explain you how to make a custom mailchimp form using bootstrap. Just go to the 3rd step in the above tutorial and add bootstrap classes to the div and input fields. Look at the below piece of code, you can see form-group added to the parent div of the input field and form-control to the input field itself. That is how we add bootstrap classes to make the custom mailchimp form work with bootstrap.

After adding bootstrap classes, each of your input fields should look similar to this.

After finishing all the above steps your custom mailchimp form code looks similar to the below code.

Finally add your custom mailchimp form to your website and test it thoroughly with your email addresses and check if the form works perfectly. Go to your mailchimp account and check if you have received the subscription request from your custom mailchimp signup form.

Happy coding 🙂

 

Comments

comments

Would you like to work with me?

Address

Balajinagar, Secunderabad - 500087

Email

hi@iambhanu.com

Follow me on