5 Tips For Designing Slippery Web Forms

by Stephanie Hamilton

Last updated on May 28th, 2018

Web forms are a basic building block of the web.

They allow website visitors to input information, often during the sales or lead generation process.

Some forms are barriers.  Others are a slippery slide that propels a site visitor effortlessly through the process.

The difference lies in the usability of your form design.

Here are five ways to make your web forms more usable.

1. Highlight Required Fields

Get into the habit of explicitly stating that an input field is required or is optional to avoid the user missing input fields.  Notifying site visitors that a field was required after they hit the submit the form is a great way to increase abandonment and frustration.  Clearly mark required fields for a slippery experience.

model 1098 request

Required form fields are highlighted in a non-intrusive manner on the website for Steinway. Don’t rely on the (*) asterisk hint in every scenario.  It’s not explicit enough.  Further contrast through the use of a different color helps the user understand its purpose more readily.

create an account

Mint.com clearly marks which fields are required of users to fill out. You’ll also notice they’re a different color than the rest of the form to enhance visibility.

contact me form

Kissmetrics alerts users right away through Javascript validation of errors. If you accidentally skip a field you are immediately alerted.

user information

Inline form validation is another method of ensuring your users fill in forms correctly. With an inline form validator, your users are less susceptible to errors while completing forms faster overall. This jQuery plugin allows you to provide inline form validation to an individual form.

2. Show Progress

If your web form is long or requires multiple pages to successfully complete, it’s a good idea to show the user where they are in the process. This let’s them know how much more time is necessary in the web form completion process and reduces confusion. This can be portrayed through graphics or through numerals such as ‘3 out of 5.’

step by step

The process tracker on Game clearly guides the user through the steps of their checkout.

amazon ship and pay

Amazon shows you where you are in the checkout process – a helpful tool that allows the customer to know where they are in the transaction process and how far they have to go.

3. Display Hints

There are times when a user won’t understand what a form element means. Solve this problem by adding help text.  Display hints when a user clicks on a particular field of your form. This will help explain commands that are difficult to explain in the field label.

talk to us

Visual Republic’s form design utilizes a nice technique of including a solid background with an arrow pointing to the input field. The input field itself contains hints explaining the kind of information they’re looking for.

Money Supermarket Web Form

The quote form for MoneySupermarket.com shows how hints can be used to guide the user along the form completion process. The text provided is short and clear. If a user needs more information it’s best to link to a FAQ section than overload the form section with more text.


jQuery Input Floating Hint Box is a simple plugin that displays a fully-customizable floating hint when a field gets focus.

first name last name

DHTML Goodies Form Field Tooltip is another variation of the form field helper text that displays the helper text based on what is entered in the form field’s title attribute.

4. Use Ample Field Sizes

Make sure you give your users plenty of space to fill out each input field by providing an adequate-sized field length. Provide at least 20 characters for each of the first and last name fields. Ensure that input boxes give the user sufficient room to enter and read their text.

contact us

Users are given ample space on the input message box for Pinchzoom. The field is long enough that users are able to see the entirety of their messages. The form lengths for the remaining input fields above are also long enough to fit an adequate size of information.

mail chimp contact

Mailchimp’s contact form is simple and intuitive. The message field also gives you the option of expanding the form through clicking and holding the bottom right corner.  The input field length is also a good fit for long entries.

5. Use Plug-ins for Checkboxes, Radio Buttons, and Select Elements

You’re limited to what these buttons and elements can achieve in many browsers, but plug-ins are available from the Javascript library that allow you to include enhanced form elements that degrade nicely across browsers.

Here are some examples:

jQuery Checkbox
jQuery Image Combobox

You do it.  I do it.

We abandon web forms that are difficult to complete or cause confusion.  We want a seamless, intuitive and slippery web form experience.

How well designed are your web forms?

One Comment


Get updates on new articles, webinars and other opportunities:

Stephanie Hamilton

Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let's collaborate to tell your brand's story. Visit the blog for more helpful design and business resources.


Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.


Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Fabio says:
    December 15, 2011 at 4:23 pm

    Cracking blog post! really enjoyed it. Have you also considered closing the form? We did this for a client and increased conversion by over 10%.

Show Me My Heatmap

Click tracking, heat maps, and without a spreadsheet? Yes, please. is one solut...

Aimee Graeber


What makes people leave your website?