Adding a MailChimp form to your website

FAQ: Adding a MailChimp form to your website

1. Login to MailChimp

 

2. Navigate to the 'Lists' tab

3. Click 'Create New List' button (to the left), and fill out the form appropriately

4. Once the list has been created, it will be displayed on the 'Lists' summary page... now click the 'Forms' link (one of the several text links for that list)

5. You'll now be prompted to create the sign-up form for the list. This is the first of several set-up screens for the list - all others are listed in the 'Forms & Response Emails' drop-down on the left, which can all be left as default, or further styled where appropriate.

6. Create/edit the form to suit your sign-up requirements. Once you're happy with the form, you can click on the link near the top of the edit window that says: "create embed code for small form" in order to get the HTML and scripting code to add (embed) onto your website.

7. This code has a basic styling that will look fine on your website, although it may not have your exact web colouring or fonts. You can style the form yourself by using the 'Design It' tab at the top of the edit window, or you can contract a web designer/developer to apply CSS styling.

8. Add the code to a HTML page section within the PowaWEB Dashboard:

i. Go to Manage Website > Edit Website

ii. Click 'Edit Page'

iii. Click to edit a HTML page section

iv. Click 'Done' to complete.


NOTE: The code will need to be slightly amended to fit into a site running on our Swifty platform, as follows:

Near the top of the code block is four lines within <script> tags with references to JavaScript:

<script type="text/javascript" src="http://inspiredbusinessmarketing.us1.list-manage.com/js/jquery-1.2.6.min.js"></script>

<script type="text/javascript" src="http://inspiredbusinessmarketing.us1.list-manage.com/js/jquery.validate.js"></script>

<script type="text/javascript" src="http://inspiredbusinessmarketing.us1.list-manage.com/js/jquery.form.js"></script>

<script type="text/javascript" src="http://inspiredbusinessmarketing.us1.list-manage.com/subscribe/xs-js?u=10d63c7831d32d03078269034&amp;id=9752dbb511"></script>

 

1. Remove the first line:

<script type="text/javascript" src="http://inspiredbusinessmarketing.us1.list-manage.com/js/jquery-1.2.6.min.js"></script>

2. Place this line of code after the lines (making sure you include all letters and '<>' brackets): <script type="text/javascript">$ = jQuery.noConflict();</script>, so that the code block will look similar to:

<script type="text/javascript" src="http://inspiredbusinessmarketing.us1.list-manage.com/js/jquery.validate.js"></script>

<script type="text/javascript" src="http://inspiredbusinessmarketing.us1.list-manage.com/js/jquery.form.js"></script>

<script type="text/javascript" src="http://inspiredbusinessmarketing.us1.list-manage.com/subscribe/xs-js?u=10d63c7831d32d03078269034&amp;id=9752dbb511"></script>

<script type="text/javascript">$ = jQuery.noConflict();</script>

 

Examples of a MailChimp form (styled to match the website) on our Swifty platform:

1. www.mxpublishing.co.uk

2. www.thecardinalscellar.com

 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.