Creating Custom Sign up Forms in MailChimp

In a past article I talked about a WordPress plugin called “MailChimp Widget” that allows you to generate a signup form on the fly using a widget for placement in WordPress which was created by James Lafferty.  Feel free to read the article called “How to Integrate MailChimp into WordPress” if that is something you’d like to do.  What I wanted to show you today is how to create a custom sign up form in MailChimp regardless of which type of website you are running including WordPress, Joomla, Magento or even something with custom HTML and CSS code.  Its really cool and it won’t take you that long to get the code to use on your website.  Some things that you will need to do this successfully include…

  • An understanding of HTML and CSS (and maybe a little JavaScript)
  • A MailChimp account and an email list setup for your website
  • And access to your website’s code

Now that you’ve got all that lets dive into this in greater detail and talk about how to generate the custom code for the sign up form in MailChimp.

Step 1: Login to your MailChimp account and select your website’s list from the “Design signup forms” drop down

Step 2: Click on “Share It” tab

Step 3: Select the “Create Form HTML” option.  You can see the click path outlined below to get access to the HTML form.

Step 4: Paste the code into an editor and you can begin to customize the font, spacing, line heights, etc or use the user interface in MailChimp (Shown below) by selecting a number of customization options.  Personally I would rather code then do it through clicks but with sections including Define Form Structure, Form Colours and Enhance Your Form by simply clicking the radio button, checkboxes and input fields options.

Step 5: Lastly copy the code that you’ve edited into your webpage or website depending on where you want to see it (Example “In the Header, Footer or Body)

I hope that if you are using MailChimp you will consider this option when you think about customizing a signup form for your website.  For the more experienced people out there I would suggest copying the signup form code into an editor and customize it through code as you will be able to accomplish even more in terms of look and feel.  Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree Plugin