6 ways to improve your web site forms

Published: February 18th, 2015

Web site forms are ubiquitous.  Every site needs them to engage their visitors, collect information, makes sales, etc.  They are easy to add to your site, but not necessarily easy to do right.

Make a quick web form using some generic web site authoring software and put it up on your site and it may work, but you also may have serious issues:

  • Incomplete Forms. Users submitting incomplete forms — e.g. not filling out all of the important fields
  • Invalid Input. Users not entering the “right” information — e.g. not actually putting an email address in the email address field
  • Form Spam Bots. Automated programs may fill out and submit your forms … sending you junk in the form of gibberish or web site URLs they hope you will visit and buy stuff from.
  • Form Insecurity. If your from collects any kind of sensitive information … from passwords to medical data … it could easily be setup incorrectly and allow phishing attacks or data leakage.
  • Stale Forms. You updated your form … but someone just somehow submitted the old version which is not even on the Internet anymore!
  • Connectivity/Server Issues. You don’t want your users to give up because their network is down or your site is down for a few seconds.

All of these problems impact the success of your site — causing everything from annoyance to the inability to contact your sales leads to breaches of privacy.  Fortunately, it is not really hard to plug these gaps and have a solid, productive, and secure web form.

1. Incomplete Forms

An incomplete form submission occurs when the end user does not fill out all of the fields that you think should be required.  Imagine a “Contact Form” that a customer submits and says “I need help” but neglects to fill in any information about who s/he is.  The user is probably waiting for help, not realizing that fact, and you are left unable to assist.  The result is a bad customer experience.

There are many ways to ensure that the end user fills out the fields that you believe are required.  Here are two of them in increasing level of “difficulty”.

Input “required”

If you add “required” to your HTML input forms.  E.g. instead of just

<input type=”text” name=”email_address”>

Use

<input type=”text” name=”email_address” required>

This will cause the web browser itself to ensure that “something” is entered in that field before the form can be submitted via a form “submit” button.  (Note that if you submit the form yourself using JavaScript, then this validation will be skipped).  Some browsers may also draw the field differently to indicate that it is required.  As of this writing, this method works great in FireFox, Chrome, Opera, and Internet Explorer v10+.  It works somewhat in Safari and not at all in older versions of Internet Explorer.  For best effect, you may way to combine it with JavaScript-based form validation.

JavaScript form validation

JavaScript form validation allows the web form designer to write a little program that will be run when the end user presses your form’s submit button.  This program can then inspect any or all of the form fields and check that things are filled in that should be.  If they are missing, you can stop the submission and alert the user … and maybe even highlight and send the focus to the problem field.

JavaScript form validation is highly effective and used everywhere.  Any good web site developer can assist you with setting up validation for your forms and there are myriads of pre-written JavaScript libraries that you can download for free to simplify the process.

Note however, that because JavaScript runs in the web browser it can be disabled and/or altered.  So, just because a form that has JavaScript validation is submitted does not mean that the data actually passed your validation!  It is quite simple for someone with malicious intent to bypass your validation and submit whatever s/he wants to you.  For forms where you must ensure that this does not happen (e.g. perhaps in an product ordering scenario), you should also always perform validation in your server-side scripts…. where the end user has no control.  For many forms, e.g. contact request forms, two levels of validation is not necessary.

Note – if you do have required fields, please let the end user know which ones these are!  E.g. by making them red, or by starring them and indicating what a star means, etc.  Different sites have different ways of doing this.

2. Invalid Input

So, your example end user requesting help entered only “joe” for his/her email address.  That doesn’t help if you have all kinds of “Joes” in your customer base.  How aggravating … you still cannot help the customer.  Ifonly Joe … or is it Josephine? … had been forced to actually enter his/her complete email address!

There are also many ways to combat invalid form input.  These parallel the ways to combat missing form input:

HTML5 Form Input Types

HTML5 … which is now supported in most browsers … has some new “input” field types specifically for validating the user input.  I.e. instead of using

<input type=”text” name=”email_address” required>

Use

<input type=”email” name=”email_address” required>

This forces entering something and that something must be a single, properly formatted email address.  “joe” won’t cut it.  There are many of these — color, date, datetime, email, month, number, range, search, tel, url, time, week, etc.  Unfortunately, while these work well in the browsers that support them, some (like our favorite Micro-child Internet Explorer) still do not.  The bright side is that if you do use them then browsers that do not support them will treat them like “text” type inputs automatically.  You should use them in conjunction with JavaScript validation.

JavaScript validation

The same discussion applies here as for using JavaScript to ensure that form fields are not empty.  JavaScript can check any data formatting or requirements that you may have and provide instant feedback to your users.  It is used everywhere and is highly recommended.  However, as before, JavaScript validation does not ensure that a malicious person does not submit improper data — only server side validation can ensure that if needed.

3. Form Spam

You would not believe (or maybe you would if you have an old-school web form) how many “form bots” are constantly scanning the Internet for new web site forms.  When they find a form, they fill it in and submit it to you…. however, they fill it in with “spam” — text and links to web sites that they want you to visit so that they can either sell things to you or infect you with malware.  This is analogous to email spam, but targeted at your forms; they assume some real person has to look at all these form posts and so maybe some unsuspecting person will be taken in by their spam.  Mostly, it just creates an annoying blizzard of unwanted email.

Here is a good example, LuxSci’s blog is protected from form spam.  We removed the protection for 24 hours to see what would happen (hey, maybe we would get lots of comments!)  Instead, all we got were 100s of spam comments trying to get us to look at other people’s web sites or buy the usual pills, etc.  Turned that back on real fast…. my INBOX was becoming unusable.

Combating web form spam can be done in several ways.

  1. CAPTCHA — Force the user to read some image and type in the code.  The assumption is that no automated program will be able to do this.  This assumption is actually wrong.  However, the majority of them are not programmed to do this and so using CAPTCHA input does knock out almost all form spam.  However, it is annoying to end users… and you don’t want to annoy end users if you can help it!
  2. JavaScript — Most web form bots are not sophisticated enough to simulate a real person using a real browser.  They mostly do not run the JavaScript that your form uses … they just fill out the fields and submit them directly to your server.  If you can have your form require JavaScript actions to be performed somehow so that the server can verify that those JavaScript actions were done and correct … then you can block form bots that do not do that … without CAPTCHA.  This works wonderfully well in blocking most automated form bots; however, it does require that the end user actually have JavaScript enabled in his/her web browser (most people do).

In general, you can download scripts that provide CAPTCHA or JavaScript-based protection for most web forms.

LuxSci’s SecureForm form data collection service includes JavaScript-based form bot protection as part of the service … so you do not have to install or program anything.

4. Form Insecurity

The topic of web form security is deep and wide.  For more detailed overview, see Secure Web Pages and Web Forms: What you Need to Know.  In short, if you are collecting sensitive data of any kind, you should be aware of the entire pathway that the form and data take and ensure that it is all secured from eavesdropping, interference, and breach.

  1. Filling out the form.  Your form itself should be downloaded from a secure server over SSL.  Yes, the form itself may not have any sensitive information in it, but if it is not loaded over a secure connection, then it is possible  for a hacker to have your end user fill out a look-a-like form and submit that data to him instead of you.  With SSL, your users can gain assurance that they are really connecting to your trusted web site and that he page has not been modified to present them with malicious content as it was transmitted from the server to them.
  2. Submitting the form. When the form is submitted and the data is sent to the server, thus must be done over SSL or else that data can be easily eavesdropped upon.  Make sure that your form processor is on a secure address starting with “https://”.
  3. What happens next?  Once the data is submitted, it could be emailed to you, saved in a database, or other action.  Ensure that this step is secure too!  Emailed data is not secure unless special steps are taken; stored files may not be secure.  Do not assume that just because the form data has made it to the server that it is safe!

We recommend using a service like LuxSci SecureForm in conjunction with a web form on an SSL-encrypted web page to ensure your form data privacy.  This type of service can ensure (without any software to install or complex changes to your form):

  1. Secure collection of the data
  2. Secure transmission of the data to you over secure email or secure FTP
  3. Secure storage of the data in MySQL or an online file storage location
  4. Secure searchable, downloadable, online access to submitted form data
  5. Auditing, tracking, and more

5. Stale Forms

Sometimes it happens that customers are seeing old versions of your forms even though you have uploaded newer and better forms.  This is not good!

What is usually happening is that the user has visited your site before and when s/he goes to your form page, the old version which is saved in his/her web browser is displayed instead of your new version.  Why?  Because web pages have an inherent “cachability” where they can be saved and reused for a certain period of time before changes are sought.

If the end user were to press the “refresh” button on the browser, that would force it to get the new page … but you can’t force the end user to do that … can you?

Yes, you can.  You can add a little text to the HEAD area of your web form source that forces the web browser to never remember the contents of the form … and to thus re-load it every time.

<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>

<META HTTP-EQUIV=”Expires” CONTENT=”-1″>

Once you have these between the <head> … </head> of your web form source, you can update your web form at will and be confident that future visitors will always see the latest, greatest version of your form.

This “no caching” feature is built into forms created by LuxSci SecureForm Builder.

6. Connectivity/Server Issues

It is not uncommon for a user to spend time filling out a form, hit “submit” and then get some failure and lose what they did (or at least not know how to get it back).  This causes frustration and sometimes the loss of a customer or possible sales lead.  The solution could be really simple:

  • The user’s network or ISP is having some issue, or
  • Your web site is down for maintenance for a few minutes
  • Some random issue is happening on the Internet.

However, the end user doesn’t care.  Whatever the cause, it is taken to be your fault.  Best to avoid this situation altogether.

This can be done using AJAX by:

  1. Perform all the needed JavaScript validation
  2. Make an AJAX request to the server to make sure it is reachable and alive
  3. If that request succeeds, then post the form data and continue
  4. If the AJAX request fails, alert the user and have them re-try in a minute

The result is that most connectivity issues and maintenance situations can be detected in this way and the user can be nicely notified without losing any work.  Users will generally be receptive to this kind of proactive feedback and are happy to wait a minute and try again.

LuxSci SecureForm, for example, includes features to protect against form post failures in this manner.

 

Dive in for more details. Read next: Creating Secure Web Pages and Web Forms: What You Need to Know.

Leave a Comment


You must be connected or logged in to post a comment. This is to reduce spam comments.

If you have not previously commented, you can connect using existing social media account, or register with a new username and password.