.... Internet marketing resources, ecommerce web site design tutorials
  Taming the Beast - quality web marketing and ecommerce development services .... .


Return to web marketing and ecommerce articles index

Quick-subscribe forms with simple JavaScript

Solutions for creating user/web master friendly subscription forms with email address validation.

When I began writing articles on web design, development, marketing and promotion on a regular basis, we decided that it was also time to implement our site ezine. The ezine not only served to inform our subscribers of the latest articles, but of Internet industry news and special offers.

I had a couple of simple ezine subscription forms scattered around the site and our mailing list slowly started to grow. To increase our subscription rate, we then implemented quick-subscribe boxes on 95% of the site. This was made an easier task by the use of SSI (Server Side Include) - only two pages needed to be changed. For more information on SSI and FrontPage Includes:

http://www.tamingthebeast.net/ articles/siteupgrades.htm 

Quick subscribe boxes are a popular site feature, appearing mostly appear the top of web pages and only requesting an email address - effectively, they're the McDonalds of web site forms! There are "Privacy" and "Details" links usually close by for those users who wish to investigate more fully before giving out their email address. Although many users don't bother with privacy policies etc., these links are still very important.

The response to our quick-subscribe implementation was fantastic, it greatly increased the subscription rate to our free site owner/web developer ezine and also our free cell phone ring tone update. The ezine encouraged irregular site visitors to return and review our new free web tools, tutorials and ring tones sections on a more frequent basis. 

If you do have an ezine, make sure that you promote it on every page of your web site using a function such as a quick suscribe form. People are generally in a hurry, so long-winded subscription processes (unless you offer other incentives) will not attract many new list members. 

If you don't have an ezine, it's time to start thinking of implementing one. They are a great way of increasing site traffic through return visits. From an e-commerce perspective, loyal visitors = sales. While ezines are a great Internet marketing tool, be sure not to bog them down with too many advertisements, otherwise your publication will end up in the Deleted Items Folder of many mailboxes.

More on ezine strategies another time, let's get back to the subscription form!

Along with our increased ezine subscriptions also came an increase in the numbers of user "errors".

People were using the subscription box to try and perform searches of Taming the Beast.net. Internet surfers have a tendency to "scan" pages and unless your subscription box is clearly (and I mean CLEARLY) labelled, it may be mistaken for a search form. Also, a number of our visitors were from ESL (English as a Second Language) countries and they had misinterpreted the form.

A strategy to deal with this issue was to have the term "your email address" appear in the text input field. But then some visitors would simply click the "subscribe" button and all we would recieve is the "your email address" in our email subscription notifications. It also meant that potential subscribers would need to delete the blurb before entering in their own email address. I must admit that I personally abhor such labour-intensive activities!

Solution number 1:

With the help of some javascript code within the form's HTML, we set the input text field to clear itself when clicked on.


<input type="text" onFocus="this.value=''" name="email_address" value="email address" size="13" style="font-family: Courier">

The JavaScript onFocus event is triggered by the email address text field being clicked on, then the text is replaced by the value in "this.value=''" - in this case, nothing. The subscriber can completed the field unhindered.

Email address validation using JavaScript

That made life easier for subscribers, but not for us. It still didn't get around the problem of users just clicking the "subscribe" button with the form's default text as their email address. Nor did it stop a few people who continued to use the form as a site search function or as a place to type strings of incoherent text - which would then be transmitted to us.

Solution no.2:

Another small block of Javascript code incorporating the previous snippet. Here's a full quick subscribe script and form, with validation, that you can implement on your site.

Copy and paste this section to Notepad and then copy from Notepad to between the <head> and </head> tags of your web pages where you wish to place subscription forms.

<script language="JavaScript">

<!-- Free JavaScripts, articles & tutorials available from: -->
<!-- Taming the Beast.net --> 
<!-- http://www.tamingthebeast.net -->

<!-- Start
function checkEmail(SubscribeForm) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)* (\.\w{2,3})+$/.test(SubscribeForm.email_address.value)){
return (true)
alert("Please enter a valid email address.")
return (false)
// Finish -->

Next, copy and paste this code to Notepad and from Notepad into between the <body> and </body> tags of your web pages where you want the subscription form to appear. Adjust the table settings if they aren't appropriate.

<table border="0" cellpadding="5" cellspacing="0" width="150">
<td width="100%" align="center">
<form onSubmit="return checkEmail(this)" method="post" action="THE_MAILER_SCRIPT_YOU_ARE_USING">
Subscribe Today!:<br>
<input type="text" onFocus="this.value=''" name="email_address" value="email address" size="13" style="font-family: Courier">
<input type="submit" value="Subscribe">

That's all there is to it! This code is compatible with all NS4.x and IE4.x browsers that have Javascript enabled. It looks for the @ symbol and .whatever in a certain sequence to validate and rejects characters such as $.

Remember to copy the script to Notepad first, then copy it from there into your HTML. This will avoid incorrect coding appearing if you are using a WYSIWIG web development application such as FrontPage. 

Don't forget to specify the location of your mailer script in the "action" section. Also remember to configure your Form Mailer script to send subscriptions to the correct email address. Users should also be redirected to a confirmation page after they have been successfully subscribed. You will need to check your mailer script for details on configuring this, but many scripts will produce a confirmation message by default. If you are using FrontPage, these modifications can be made by right-mouse button clicking over the form in Edit mode and selecting Form Properties, filling in the email address where the subscription is to be sent to, then clicking on the Options button to set the confirmation page.

While these modifications aren't fool-proof and I'm definitely against using JavaScript unless it's really necessary, these changes decreased our bogus subscriptions by around 90% overnight! 

Well worth the few extra lines...

Michael Bloch
Taming the Beast
Tutorials, web content, tools and software.
Web Marketing, Internet Development & Ecommerce Resources

Copyright information.... This article is free for reproduction but must be reproduced in its entirety & this copyright statement must be included. Visit http://www.tamingthebeast.net  for free Internet marketing and web development articles, tutorials and tools! Subscribe for free to our popular ecommerce/web design ezine!

Click here to view article index 

Online meeting & webinar software review
Powerful, easy to use collaboration tools that can help improve your marketing sales and training efforts. Learn more about these services in this review & try a free trial!

The best shopping cart software
Our reviews of some of the best shopping carts around - free ecommerce solutions  through to premium services offering affiliate programs, marketing modules & online soft goods delivery.  Shopping cart software guide 

Autoresponder software/mailing list manager
 Read our beginners guide and reviews of all-in-one autoresponder & email marketing software solutions.

Credit card transaction fraud screening!  Effective fraud screening is an essential part of running an online businesses. Fraud transactions cost you money and can threaten your merchant account. Pick up a stack of transaction screening tips in this free guide! 

Need some advice/tools for writing/creating a web design, development or marketing proposal?






Get paid cash taking online surveys - free to join online 
survey companies that will pay you cash for your opinion!

In Loving Memory - Mignon Ann Bloch

copyright (c) 1999-2011  Taming the Beast  Adelaide - South Australia 

Profile - Contact - Privacy - Consultants Portfolio 

Search Site - Terms of Service - Social/environmental