How to Optimize Your Forms - Free Tool

Forms tool

Browse to our form analysis tool in order to get insights into your web forms. It’s free of charge, and results are delivered on your screen immediately.

Why use this tool?

Forms tool results

Forms are one of the few elements that are almost certain to stand between a browsing visitor and a paying customer. For lead-gen websites, it’s contact forms, events, and SaaS companies have registration forms and e-commerce websites have checkouts. Therefore, it seems wise to keep your forms in the best shape possible. We believe our forms tool can help you with this.

How to use this tool?

  1. Browse to our form analysis tool.
  2. Enter your URL (e.g. example.org/register).
  3. See the recommendations for your forms.

When to ‘use HTML source’

After you’ve entered your URL, the tool will attempt to fetch the HTML that is rendered if the page were requested in a web browser. While this will work in the majority of cases, there are some exceptions, which are listed below.

  • Forms that are placed on pages that are generated using frameworks such as NodeJS or AngularJS can’t be analyzed using their URL.
  • Pages that aren’t publicly accessible like checkout pages (which often require items in a cart) or ‘account preferences’ forms (which require you to be logged in) are also unavailable.

How to ‘use HTML source’

If you want to analyze forms on such pages, then do the following: go to the particular page using your web browser, view the HTML source (ctrl-u, cmd-u or cmd-option-u), select all, copy, and then paste into the text area that appears after you’ve clicked the ‘use HTML source’ link.

What does the tool check?

Disclaimer: All the recommendations below are no universal truths but merely A/B testing ideas.

While most of them are considered best practices in form design, we advise you to A/B test each of these recommendations to see if they work for your website as well. We suggest to split test them with tools such as Formisimo or Optimizely.

HTTPS on the page

When a page is displayed using the regular HTTP protocol, it doesn’t encrypt the information on it.

Recommendation: Secure your pages by using HTTPS to encrypt the information on them. This provides both trust and additional security to visitors. This additional level of trust will likely increase the number of people, both starting and completing the form.

Mobile-friendly viewport

With a properly configured viewport you’ll make it easier for visitors on mobile devices to fill in the form. This could lead to an increasing number of conversions.

Recommendation: Add the viewport meta tag to your page and use CSS media queries to make the page responsive

Required or optional fields

Telling visitors specifically which fields are required or optional (beyond just marking them with a *) reduces frustration and provides them with an additional sense of control over the form.

Recommendation: Show required or optional by marking fields with (required), (optional) or a * and when using a * provide a legend explaining fields marked with a * are required.

Submit forms through HTTPS

If form information is posted to a non-HTTPS page, then the data that is present in the form might be read by outsiders

Recommendation: Post forms to HTTPS to encrypt the information that is sent in the form and keep the data secure.

Tables

Table tags in HTML should only be used to lay out tabular data. Using them to style forms make it difficult to maintain the code and fill in the form on mobile devices.

Recommendation: Remove any tables to style and the form and use divisions instead.

ARIA attributes

Using these attributes on form fields makes them more accessible to people with disabilities.

Recommendation: Add ARIA attributes such as aria-hidden or aria-required to form fields.

Maxlength

When the ‘maxlength’ is set incorrectly, it stops visitors from being able to enter their information correctly. Furthermore, it doesn’t provide any feedback to the visitors.

Recommendation: Remove the ‘maxlength’ attribute from input fields

Inline Javascript

Inline (obtrusive) Javascript provides poor accessibility and makes code maintenance difficult and browser caching impossible.

Recommendation: Remove inline Javascript from form fields.

Amount of options in dropdowns

Whenever you show a select element that has more than 3 options, mobile visitors might struggle to choose the best option because they lack overview of all the items.

Recommendation: Present fewer options or consider using autocomplete or switching to a different form element than select fields.

Length of options in dropdowns

Whenever options are presented that are over 25 characters in length, mobile visitors might struggle to choose the best option because they can’t easily read the items.

Recommendation: Present shorter options or consider or switching to a different form element select fields.

Labels

Labels offer visitors a way of seeing what data is required of them and allow them to easily select a form field by clicking on the label.

Recommendation: Add a label to form fields.

Elements outside form tags

Internet browsers are unable to process fields that aren’t enclosed in form tags.

Recommendation: Add valid form tags around all input field on the page. Make sure separate forms get their own set of form tags.

Help text

Visitors are often at a loss on what, how, where and why to fill in certain form fields. Providing in-line help text (either automatic or user-activated) can help to resolve these issues.

Recommendation: Add an icon to unclear fields, for example, a blue (i) that activates a small popover layer.

‘Reset’ buttons

An input field of type=”reset” was found on the page. The action of this form element can’t be undone, which can cause great frustration for visitors who (accidentally) click on them.

Recommendation: Remove reset buttons from the page and if necessary replace them with unobtrusive Javascript alternatives.

CAPTCHA

CAPTCHA fields are notoriously difficult to enter correctly by visitors. Whenever a visitor is unable to complete a CAPTCHA, you will lose a potential customer because of this.

Recommendation: Remove CAPTCHA fields from all the forms on the page.

IDs

Setting an id attribute for all form elements allows them to be identified and targeted. This in turn allows you to link label elements, easily tracks clicks as events in Google Analytics, or use these elements as click goals in A/B testing software.

Recommendation: Add an ‘id’ attribute to your fields.

‘Submit’

The button text ‘Submit’ doesn’t explain to a user what will happen after they click. It’s therefore advised to clearly describe what will happen next once a visitor clicks a button.

Recommendation: Use a different text for all buttons using the button text ‘Submit’.

Checking checkboxes

Visitors have a desire to be in control of a website. By initially checking checkboxes (and therefore making visitors opt-out) you can take away some of that control.

Recommendation: Remove the ‘checked’ attribute from form fields.

Two password fields

Typing a password twice is a hassle for visitors. Because they can’t see the password when they type it, the risk of errors increases with two fields.

Recommendation: Remove a password field and allow visitors to flip a switch that will enable them to read their password in the input field

Multiple

Select boxes with the ‘multiple’ attribute are considered to be difficult to complete, especially for novice internet users

Recommendation: Remove the ‘multiple’ attribute from form fields (e.g. try switching to checkboxes).


Dutch translation: Hoe Optimaliseer je Formulieren - Gratis Tool


Theo van der Zee

Author: Theo van der Zee

He is the founder of ConversionReview. He has been building and optimizing websites for 15+ years now, and doing so with great success.

On top of his digital skills, Theo is also a trained psychologist and frequent speaker at events around the world.