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.
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 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>
<input type=”email” name=”email_address” required>
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.
- 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!
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.
- 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.
- 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://.”
- 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):
- Secure collection of the data
- Safe 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 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:
- 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, 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.