Aarfie custom web development and maintenance services are discontinued – read more

Looking for our new Big Cartel themes – visit Aarcade

 
 

AARFIE SUPPORT

How do I add a newsletter subscription form to my Web Site?

Choose Your Newsletter Service

If you do not already have a newsletter service, you will first need to create an account with one. Aarfie’s preferred newsletter service is YMLP, however any of the popular newsletter services will work with your Web Site.

Get The Sign-Up Form Code

Once you have created an account with a newsletter service, you will be able to access your sign-up form code in your newsletter admin area. The controls to access your code will differ between newsletter services, so it is recommended that you refer to your particular service’s help section if needed. In some cases you may need to create a contact group and/or newsletter (also referred to as a campaign) before the sign-up form code is made available to you.

For YMLP accounts, your form code is accessed by clicking the Website Forms main menu > Create / edit form sub-menu, then click Add Form to Your Site next to your web form name.

Your Form Code Options

Depending upon your newsletter service, you may be presented with a number of options for inserting your newsletter sign-up form. For your Web Site, you will need the basic HTML code that will include the HTML tag starting with <form somewhere within the code (may be referred to as “manual” form code).

The code will be in a similar format to the following (YMLP default format shown):

<form method="post" action="http://ymlp.com/subscribe.php?id=geeqmmqgmgb">
<table border="0" align="center" cellspacing="0" cellpadding="5">
<tr><td colspan="2"><font size="2" face="verdana,geneva">Fill out your e-mail address<br />to receive our newsletter!</font></td></tr>
<tr><td valign="top"><font size="2" face="verdana,geneva">E-mail address:</font></td><td valign="top"><input type="text" name="YMP0" size="20" /></td></tr>
<tr><td colspan="2"><input type="submit" value="Submit"  />&nbsp;</td></tr>
</table>
</form>

Cleaning Up Your Form Code

Copy and paste your form code into a simple text editor like TextEdit for Apple or Notepad for Windows.

While you may use the code exactly as provided by your newsletter service, reducing the code to just the necessary elements will create a minimalist appearance more suited to an Aarfie Web Site and also ensure that inline styles created by your newsletter application do not clash with your layout.

As a general guideline, only the HTML form elements are required for your code. These include the tags form, input, textarea, select and button.

If you are a Mailchimp user, please skip to the next section of this help article at this point.

Using the above example sign-up form code, if we review the code and remove all tags (i.e. parts of code contained within < >) that are not included in the form element list we get:

<form method="post" action="http://ymlp.com/subscribe.php?id=geeqmmqgmgb">
Fill out your e-mail address to receive our newsletter!
E-mail address:<input type="text" name="YMP0" size="20" />
<input type="submit" value="Submit"  />
</form>

The form code is further reduced by removing any text, in this example “Fill out your e-mail address to receive our newsletter!” and “E-mail address:”, resulting in:

<form method="post" action="http://ymlp.com/subscribe.php?id=geeqmmqgmgb">
<input type="text" name="YMP0" size="20" />
<input type="submit" value="Submit"  />
</form>

Reducing the code this far, however, may result in the form having no apparent purpose. For example, the above code will now appear like this to your visitor (formatting will differ depending upon your theme):

To amend this, add a value to your type=”text” input tag to explain the purpose of the form, i.e. in the example code we change the line

<input type="text" name="YMP0" size="20" />

to

<input type="text" name="YMP0" size="20" value="Join our newsletter" />

which results in the final form code:

<form method="post" action="http://ymlp.com/subscribe.php?id=geeqmmqgmgb">
<input type="text" name="YMP0" size="20" value="Join our newsletter" />
<input type="submit" value="Submit"  />
</form>

giving the form appearance (formatting will differ depending upon your theme):

Mailchimp Users

If your preferred newsletter application is Mailchimp, to access your Mailchimp form code:

  1. click the main menu item Lists
  2. click the forms link for the appropriate list
  3. click the for your website link in the sub-menu
  4. click the Signup Form Embed Code link
  5. refer to the copy/paste into your site text box

You will note that the Mailchimp form code is extensive. To save time in minimising this code, we recommend that you copy the contents of the copy/paste into your site text box and paste the code into a simple text editor like TextEdit for Apple or Notepad for Windows.

After pasting your code into a text editor, locate the opening form tag <form . If necessary, click anywhere within text and use your text editor’s find text function, typically located in your Edit > Find menu, and search for “<form “.

Mailchimp Form Code

Locating the opening form tag in your Mailchimp code

then note your form action value:

Mailchimp Form Action

Locating the form tag action value

Make sure that you note the entire value between the quotation marks.

Generate your final sign up code by taking the following code:

<form action="YOUR ACTION LINK" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
<input type="text" value="Join our newsletter" name="EMAIL" id="mce-EMAIL">
<input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe">
</form>

and replacing the YOUR ACTION LINK text with the form action link you noted in your Mailchimp form code:

<form action="http://aarfie.us1.list-manage2.com/subscribe/post?u=153800a4512df382d14b6d0fa&id=20a03c4bd0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
<input type="text" value="Join our newsletter" name="EMAIL" id="mce-EMAIL">
<input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe">
</form>

Inserting Your Code

Once you have created your final sign-up form code, you can paste it into your Web Site in a number of areas, including:

  • In your header using the Additional Header Text field in your Appearance > Header admin area
  • In your footer using the Additional Footer Text field in your Appearance > Footer admin area
  • In any page or post content
  • In your sidebar by adding a Text widget in your Appearance > Widgets admin area and pasting your form code into the Text widget

Last Modified: 10th May, 2011