6 ways to improve your website forms

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

There are plenty of free or cheap tools for creating web forms, but these tools may cause serious issues:

• Incomplete Forms: Users submitting incomplete forms (e.g., not filling out all of the essential fields)
• Invalid Inputs: Users not entering the “right” information (e.g., not 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 website URLs they hope you will visit and buy stuff from.
• Form Insecurity: If your form collects sensitive information, from passwords to medical data, it could easily be set up incorrectly and enable 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 hard to plug these gaps and have a solid, productive, and secure web form.

Fixing Web Site Form Issues

1. Incomplete Forms

Incomplete form submission occurs when the end-user does not fill out all fields 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 they are. 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 on your website form that should be required. Here are two of them with increasing levels 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, this validation will be skipped). Some browsers may also draw the field differently to indicate that it is required.

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 website developer can assist you with setting up validation for your forms. There are myriads of pre-written JavaScript libraries that you can download for free to simplify the process.

Note that because JavaScript runs in the web browser, it can be disabled or altered. So, just because a form that has JavaScript validation is submitted does not mean that the data passed your validation! It is quite simple for someone with malicious intent to bypass your validation and submit whatever they want. For forms where you must ensure that this does not happen (e.g., perhaps in a product ordering scenario), you should 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 have required fields, please let the end-user know which ones these are! E.g., by making them red, 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 their 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. If only Joe had been forced to enter their complete email address!

There are also many ways to combat invalid form input. Here are a couple of examples:

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, date/time, 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. Web Site 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 website 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 websites 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. Mainly, it just creates an annoying blizzard of unwanted emails.

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, we got hundreds of spam comments trying to get us to look at other people’s websites or buy the usual pills.

Combating web form spam can be done in several ways.

1. CAPTCHA: Force the user to read some images and type in the code. The assumption is that no automated program will be able to do this. This assumption is wrong. However, most of them are not programmed to do this, so using CAPTCHA input does knock out almost all form spam. However, it isn’t enjoyable for end-users, and you don’t want to annoy end users if you can help it!
2. JavaScript: Most website form bots are not sophisticated enough to simulate a real person using a browser. They mostly do not run the JavaScript that your form uses; they 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 requires the end-user to have JavaScript enabled in their web browser (most people do).

You can generally download scripts that provide CAPTCHA or JavaScript-based protection for most web forms.

LuxSci’s Secure Form includes JavaScript-based form bot protection as part of the service, so you do not have to install or program anything.

4. Web Site Form Insecurity

The topic of website form security is deep and wide. See Secure Web Pages and Web Forms: What you Need to Know for a more detailed overview. 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 should be downloaded from a secure server over SSL. Yes, the form itself may not have any sensitive information in it. Still, if it is not loaded over a secure connection, a hacker can 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 connecting to your trusted website and that the 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, it must be done over SSL, or else that data can be easily eavesdropped upon. Ensure 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 another action. Ensure that this step is secure too! Emailed data is not secure unless specific steps are taken; stored files may not be secure. Do not assume that it is safe just because the form data has made it to the server!

We recommend using a service like LuxSci Secure Form in conjunction with a website 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. Safe 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 Web Site Forms

Sometimes, customers see old versions of your website 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 they go to your form page, the old version is saved in their 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 particular 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 never to 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 and be confident that future visitors will always see the latest version of your form.

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

6. Connectivity/Server Issues

It is not uncommon for a user to spend time filling out a website 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 straightforward:

• The user’s network or ISP is having some issue, or
• Your website 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 perceived to be your fault. It’s 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, and the user can be 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 Secure Form, 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.