6 ways to improve your web site forms
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”.
If you add “required” to your HTML input forms. E.g. instead of just
<input type=”text” name=”email_address”>
<input type=”text” name=”email_address” required>
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>
<input type=”email” name=”email_address” required>
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.
- 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!
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.
- 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.
- 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://”.
- 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):
- Secure collection of the data
- Secure transmission of the data to you over secure email or secure FTP
- Secure storage of the data in MySQL or an online file storage location
- Secure searchable, downloadable, online access to submitted form data
- 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:
- Make an AJAX request to the server to make sure it is reachable and alive
- If that request succeeds, then post the form data and continue
- 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.