At FormAssembly, we don’t just help you create forms. We help you create exceptional, user-friendly, smart, and connected web forms. To help pull it all together, we’ve compiled four of our most useful web form design tips from four of our top form building posts. These are simple pieces of advice that you can use on your forms today. Let’s get started!

1. Don’t Think That Web Forms Have to Follow the Same Conventions as Paper Forms

Forms are forms, right? Wrong.

When you’re upgrading to a web form solution, it can be tempting to take the easy way out by simply copying your paper forms to the digital version. Field for field, no changes in the layout, no thought for user experience.

This might be the easiest way, but it’s not the best in terms of usability or conversion rates. Remember, when you’re not constrained by paper, you no longer have to save space by cramming as many fields as possible into the same space.

paper-screen

Spread out fields and consider one-column layouts, which can be less taxing to move through and fill out. If you have forms that require a lot of scrolling, consider breaking them up onto multiple pages.

Lastly, consider using conditional fields that only appear if a user enters a certain answer. That’s definitely not something that you can do on paper, but your users will appreciate the streamlined look and ease of use.

2. Creative, On-Brand Contact Forms Can Be More Enjoyable to Fill Out

Why would you create a beautiful, unique website, only to use generic and boring contact forms? It doesn’t make a lot of sense, does it? Forms can be as beautiful and well-designed as they are functional.

Make sure your branding is cohesive across all areas of your website, including your contact forms. Here are a few of the examples we’ve given in the past of contact forms that are pleasing to look at and easy to fill out. Much better than a boring black and white contact form, huh?

best web forms

Pillow Homes

  • Attractive, contrasting colors
  • Brand consistency
  • A bright CTA button
  • An interesting CTA (Not just “submit”)

contact form best practice

Zenefits

  • Orange CTA button (one of the best colors for conversion)
  • On-brand fonts and colors

contact form 3

If/When/How (A FormAssembly Customer!)

  • On-brand fonts and colors
  • Clean and simple layout
  • Bright Submit button

Do you have any other examples of great contact forms? Let us know about them!

3. Reduce User Mouse Usage for Better Web Form Design

Forms should be as easy as possible for your users to fill out. We’ll get into why you should reduce form fields later on, but there are other ways of making forms more usable that you might not have thought of.

For instance, are you laying out your forms so they require the least amount of mouse usage and clicks possible? Or do you forms require your users to do an unnecessary amount of work just to answer simple questions?

h_n, dob 560 sbs

Consider a drop-down menu for example. To make a selection from this type of form field, users have to take a few steps. They have to click on the drop down to view the options. They have to click again to scroll through the options, and they have to click a final time to select an option.

Now think about radio buttons. With this form field type, users only have to peruse their options and click once to select one. We don’t have to tell you that one click is better than three or more when it comes to web form usability.

In addition to the types of form fields you use, this tip also applies to how forms are laid-out. Remember how we said multiple columns are a paper form convention that’s often needlessly transferred to web forms? Well, there’s another reason not to use them. Using multiple columns requires more mouse usage than a simple one-column form.

These are simple, almost effortless ways you can improve the UX of your forms.

4. Don’t Include Unnecessary Form Fields, and Be Concise With the Ones You Do Include

The concept of exchange is a pretty well-known concept for marketers. To get something you want from customers, you have to offer something of value in return.

If the value you’re offering isn’t good enough or useful enough, or if you’re asking too much in return, your customer might not see the point of sharing their contact information with you.

There are plenty of forms out there that demonstrate this idea of an unequal exchange. Take lead forms for example. Some only ask for a few details of information (and in return you’ll get a downloadable resource, etc.), but others ask for your title, your industry, multiple forms of contact information, and even your budget.

Do you think that’s an equal exchange? To some, maybe, but to others, probably not. Consider how much you’re asking of the people filling out your forms and whether it equals what you’re offering.

Cut out unnecessary fields (phone number, etc.) and be brief and to the point with any fields you do include. Especially with public-facing forms that aren’t mandatory (lead forms, customer surveys, etc.) you want to reduce the burden of filling them out as much as possible.

Which one do you think is most user-friendly?

user friendly forms

Or…

email address form

———————

Those are some of our best tips, but we’ve got plenty more! Share any others you think we missed on Twitter or in the comments section.

Ready to put this tips into practice?

Try FormAssembly today!

Pin It on Pinterest

Share This