How to create a MailChimp Form in your website?

MailChimp give you the power to make different types of forms for your website. You can place these forms in your website and allow people to fill and submit it to you. MailChimp Form can be used by anyone and does not require HTML, CSS or Form building technical skills.

Also these forms can be filled by visitors, right in your website, and without leaving it. They can also be styled to match the colors and fonts of your website. In this tutorial I will explain all this about MailChimp Forms from the beginning.

MailChimp List

Before starting with the MailChimp Form, you should have a MailChimp List. A List is a container which stores the information submitted by people through the Form. Create a List by clicking the Lists link at the top of your MailChimp account.

Next click the Create List button. If you already have a List then click the list name. In the screen that shows up, click on the Signup forms link.

MailChimp Form

Next you will be asked to select the Type of Form out of General, Embedded, Subscriber Popup and Form integrations. From here you can start making your MailChimp Form.

General forms

First click the first Option General forms, this will allow you to add different fields to your MailChimp Form and also do their designing. There are 3 Tabs here – Build it, design it and Translate it.

By default the form has just 3 fields (email, first name, last name). But you can add more fields to your form (from Add a field section). These fields can be text, number, date, birthday, image, address and other fields.

You can also change field settings by making them required one, change label text and other things.

I added two new fields – a phone no, and a drop down for sex.

Here you can do the coloring of the form (like you can change the background color, font, spacings, link syle, etc). You can also do the styling and coloring’s of the various fields of the form (like that for text boxes, drop downs, buttons) etc.

You can also show the form in various languages (based on the language specified by the user’s browser).

I have completed the designing of our MailChimp Form.

You will see Signup form URL which gives you the form link. You can paste this link in your emails, website, etc and ask people to fill and submit the form. Note that people will leave your website when filling the form, because the form is in an external website.

Embedded Forms

Embedded forms can be put in your website itself and people can fill the form right from your website. Here people don’t leave your website.

Remember the Type of Form screen? Click on the Signup forms tab at the top and this will again take you to the screen which asks to select the Type of Form, so now select Embedded forms.

You may notice that in General forms area, we have created the form design and added fields to it. But let me tell you that only the form fields will show in here while the design does not. You have to create the design (form colors, fonts, control colors, etc) in our Website CSS for embedded forms.

Select the Classic tab, then under the Form options give the form a title, also select Show all fields and Enable reCaptcha.

The most important part is to show the embedded form in the website so copy the code given under Copy/paste onto your site and paste it to a page in your website where you want to show this form.

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//myotcworld.us3.list-manage.com/subscribe/post?u=188ba13c292f3108bb6e132ea&amp;id=6b14ef05b5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<h2>Free Movie Tickets</h2>
<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 class="mc-field-group size1of2">
	<label for="mce-MMERGE3">Phone Number  <span class="asterisk">*</span>
</label>
	<input type="text" name="MMERGE3" class="required" value="" id="mce-MMERGE3">
</div>
<div class="mc-field-group">
	<label for="mce-MMERGE4">Sex  <span class="asterisk">*</span>
</label>
	<select name="MMERGE4" class="required" id="mce-MMERGE4">
	<option value=""></option>
	<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Prefer not to say">Prefer not to say</option>

	</select>
</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_188ba13c292f3108bb6e132ea_6b14ef05b5" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='phone';fnames[4]='MMERGE4';ftypes[4]='dropdown';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

Right at the beginning of the code there are the default style links for this form, you can remove these lines and create your style in your website’s CSS file. Shown below are the default style lines which you can remove –

<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>

#mc_embed_signup {
    background-color: #220F13;
    color: #FFFFFF;
    padding: 10px 100px;
    width: 45%;
}

    #mc_embed_signup h2 {
        padding-bottom: 10px;
        border-bottom: 1px solid #CCCCCC;
    }

    #mc_embed_signup .indicates-required {
        color: #ff0000;
        font-style: italic;
    }

    #mc_embed_signup input[type="text"], #mc_embed_signup input[type="email"], #mc_embed_signup select {
        padding: 8px 3px;
        border: 1px solid #abb0b2;
        border-radius: 3px;
        width: 300px;
    }

This is how my MailChimp Embedded Form looks, see below image:

Subscriber popup

From here you can create popup signup form that can be embedded on any site. It is very similar to embedded form except that the form will show in the popup window.

Form Integration

Here create signup forms using one of MailChimp integration methods. Available integration methods are twitter, wufoo and squarespace.

Now you have the knowledge of creating MailChimp Form and embedding it in your website. Go on and creating more such forms for your website and connect with your audience in a better way.

Please share your valuable feedbacks about this tutorial in our comments section below.