On this page
Unleash your genius.
Get genius ideas, actionable tips, and smart solutions in your inbox once a month.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Web Form Design Tips: 3 Ways to Make Your Forms More Readable

Heather Mueller
December 5, 2014
Min Read

59 seconds.That’s how long you have to convince the average website visitor to fill out your form, according to the latest research from Nielson Norman Group. Your headlines and visuals must be so enticing they can capture leads in less than a minute.

Feeling the pressure? No sweat. We’ll help you design the form that gets noticed instantly!

Most people don’t notice great form design. They won’t see your web form and think: “That’s the perfect combination of fonts and colors. And all the fields are just the right length!” Yet these are the elements that subconsciously help users decide, in an instant, if they’re going to take time to fill it out.

Which is why making web forms easy on the eye is a first step to improving your conversion rate.

Ready to make your forms more readable? Here are three key design features to keep in mind.

1. Fonts

The sizes and types of fonts you choose directly influence how people will read and respond to your content—a lot more than you might think, as recent research reveals. Factor in the millions of users struggling with digital eye strain and having easy-to-read fonts with proper line spacing is an assessability must. You can achieve this by focusing on two key factors:

Your viewers:

Keep your target audience in mind when selecting fonts in Formstack’s theme builder. If you want academics to take your content seriously, go with a traditional serif font like Georgia or Times New Roman. If you’re appealing to kids and parents, you may get away with a more entertaining typeface like Comic Sans.

Screen sizes:

If a lot of users view your forms on mobile devices (find out using our Google Analytics integration), think big. As in 14 to 20 pixels big. Go below this size and you risk having unreadable description text and headlines. And always check out your forms on different devices before you begin promoting them—even when using a mobile-ready form builder like Formstack.

2. Colors

Is your form content easy to see? If not, it could be a problematic color scheme. The wrong hue or a lack of contrast between the background and text colors can make words difficult to read. While it’s important to choose colors that inspire action, it is possible to have too much of a good thing. Follow two basic rules when selecting form theme colors:

Dark text:

For description areas and labels, stick to black. It’s the most readable font color and ensures even people with color-vision deficiencies can easily read your forms. A white background will also help if your targeted audience skews a little older.

“Clickable” contrasts:

White font on a contrasting color will stand out—as long as this scheme is used sparingly. Limit it to “submit” buttons and hyperlinks where you want to encourage clicks. Stick to black text elsewhere so your highlighted content will really stand out.

3. Length

A long, scrolling form is bound to send time-strapped website visitors running away. It’s too much to process and can’t be easily skimmed. Solve this problem by using special features to make your forms easier to digest (while still collecting the data you need). Just be sure to leverage the right elements based on the type of form:

Lead capture forms:

Remember—you’re requesting personal information from total strangers when you ask new visitors to sign up for your newsletter or request a demo. These are forms where less is better. The Email Address field is acceptable. Requiring a mailing address and credit card number isn’t.

Lead nurture forms:

Communicating with current customers or warm leads? Time to start adding more fields! Satisfaction surveys and content download offers are two examples of when form-shortening features like Conditional Logic and Matrix Fields can come in handy. They'll help make your form more readable by asking several questions within a small space.

Formstack offers a variety of online form templates that you can easily edit to your needs. Check them out here by trying our 14-day free trial!


Streamline Your Decision-Making with Formstack’s Enhanced Approvals Feature

Explore the power of Formstack's updated Approvals feature, enabling dynamic workflow adjustments and group approvals within the Suite Teams Plan.
Read more
Heather Mueller
Heather is a website copywriter and digital content strategist who loves helping brands generate leads through the power of the written word—especially when using Formstack. Connect with Heather on Twitter @heathermueller.
More Articles