5 things you must know when creating online HTML forms

Every day I verify how our new clients implement web forms. I noticed that the same mistakes are made again and again, so I thought that writing some tips on creating online HTML forms would be helpful.
First of all, let me clarify, when I say "forms" I mean the "online forms" or "web forms" or "HTML forms" on a website.
In general, forms are made to collect information from website visitors; and then a form processor sends that information to certain email addresses or saves it to database.

1. Properly enclosing form's elements.

A form begins with a <form ...> tag and ends with a </form> tag. All form's elements must be enclosed within the <form ...> and </form> tags. Some examples of form element are: text field, checkbox, radio button, submit button. Any elements placed outside of the <form ...> </form> area will be ignored. If there are more than one form on a page, make sure that you close one form before opening another; in other words, one form must not be a part of another form.

2. Naming form elements properly.

The "name" attribute of an element must contain only letters, numbers, underscore and dash. The "name" attribute should not start or end with an underscore or dash. Here are some examples:

These name attributes are correct:

These name attributes are incorrect:

3. Validating form with JavaScript.

In most cases it is beneficial to check if the form was filled out correctly. If a visitor made a mistake, the form should not be processed and the visitor should be presented with a friendly message explaining the mistake. Usually a JavaScript function is called from the <form> tag. Here is an example to verify if the "YourWebsite" field is empty or not. If the field is empty, the JavaScript will notify the user to enter a website address. Here is the code:

<form action="https://www.SnapHost.com/captcha/WebFormSubmit.aspx" onsubmit="return ValidateForm(this);" id="TestForm" method="post">
Enter your website address:<br />
<input name="YourWebsite" type="text" maxlength="400" width="300" /><br />
<input name="SubmitButton" type="submit" value="Submit" /><br />
</form>
<script type="text/javascript">
function ValidateForm(frm) {
if (frm.YourWebsite.value == "") {
alert('Please enter your website address.');
frm.YourWebsite.focus();
return false;
}
return true;
}
</script>

The JavaScript function ValidateForm() will return "false" value to the form if the field "YourWebsite" is empty, and the form will not be processed. Then the user will see a message "Please enter your website address".

4. Implementing anti-spam solution.

Online forms on web pages can be easily found by myriad spam-bots also known as spiders or crawlers. When the spam-bots find your unprotected form, they would:
- send you spam through your form,
- send spam to other people using your mail server and often using your email address.
One way to prevent this from happening is to use a Captcha image. Captcha is a contrived acronym for "Completely Automated Public Turing test to tell Computers and Humans Apart". Humans can read distorted text on a picture, but current computer programs can't.
Read about our Captcha solution.

5. Testing the form!

Testing a newly created or modified form is very important. A small mistake may stop the form from sending visitor's or client's requests; you might never know that someone wanted to contact you or have placed an order.
How to test a form? After your form is ready, fill it out with the information, pretending you were a website visitor. Submit the form, and then check your mail box. There should be a new message with the data you entered into the form. If you do not see the new message, then there might be a mistake in the code. Fix it and repeat the test again.

If you're using our anti-spam form, you can test it by entering an incorrect Captcha code and submitting the form. You should receive a warning that the Captcha code is incorrect. No warning means there might be a mistake in your HTML code.
When entering the Captcha code properly and submitting the form, you should see a "thank you" page.
Check your mail box. If you don't see the message then check you spam filter or check the email address that you have specified to be a recipient.

And one more......

6. FrontPage forms and our Captcha protection.

We provide a code for implementing Captcha anti-spam image into the online forms. However if your form is created and edited with FrontPage or some other "wizard-like" software, that software may re-write our code making it impossible to protect the form.
You need to prevent the re-writing by deleting some FrontPage's blocks from the HTML code. It's easy to find FrontPage's blocks in the code - the blocks start with "". For example:

<!--webbot bot="SaveResults"...

After the blocks are deleted, you need to follow our regular procedure on implementing BasicCaptcha or ProCaptcha.