Follow

Adding mailchimp subscription forms


Adding a form to collect email addresses is a great way to build a captive audience for your business or idea.

One of the best platforms to do this is MailChimp (www.mailchimp.com). It provides the ability to collect email addresses and build lists. From there you can easily send email broadcasts to the full list or segments of that list and see how effective your emails have been.

Step 1 - Create a List in MailChimp

Sign up to Mailchimp at www.mailchimp.com. From here you will need to create a list. Overall MailChimp is very intuitive but if you need help Mailchimp maintains a great knowledge base, including a video and article to explain how to create a list

Step 2. Copy Embeddable Form Code

Next, you will need to copy the embed code for the email subscribe form from MailChimp. Again, there is a video and article on how to create the signup form in Mailchimp's Knowledge Base.

In basic terms to do this you will need to:

1. Go to your lists that you have created

2. Under the settings for the list click 'Sign up Forms'

 

 

mailchimp_resized.png

3. Go to 'Embedded Forms'

 

mailchimp_2_resized.png

4. Select the form type. Personally, we like the look of Super Slim. The font and colour of the form can be changed after it has been embedded onto your page. 

5. Copy the code provided

*Please note that the 'Disable all Javascript' box must be ticked for it to work on your page. 

mailchimp_3_resized.png

 mailchimp_javascript.png

Step 3. Add to your page

With the code copied now is the time to add it to your page. You can do this by:

1. Dragging the HTML Box Widget onto the canvas 

2. Double click to edit the content of the widget. Paste in your new code, replacing any default code in the widget.

3. You can resize the box to change the width of your subscribe form. 

mailchimp_4_resized.png

*Pro tip: to make the form the full width of your box, copy width:100%; into the code where shown below. This is helpful when optimising your site for desktop, tablet and mobile display because it allows you to reduce or increase the size of the form whilst still filling the whole box. 

mailchimp_image_5.png

That's it. From here you can save & publish and test to ensure your form is working correctly. 

 

Comments

Powered by Zendesk