The Science of Online Forms and the Brand Experience: An Essential Guide There's a lot you have to keep in mind when building an online form -- length, placement, verbiage, even color. Yes, I said color. Let's prevent people from seeing red because of your form. Or is red a good thing? Keep reading and find out.

Recently, I came across this online form:

It was so long I had to scroll to fill out all the fields -- on a 23-inch monitor -- to gain access to a preview of the full report I actually wanted. Since the call-to-action button simply said "submit" and the landing page included a mere 17-word description, I didn't really know what I'd get after the click. I was hoping the "research document" on the other side would provide a helpful nugget of information I needed at the time.

It didn't. I was not very happy with this particular brand that day.

Your users might be feeling the same way. When an online form is long, misleading and invasive -- all at the same time -- the risks are high, really high. Some people will abandon the form altogether. Others will unsubscribe after your followup emails fail to deliver on a promise. In both instances, you're not likely to get a second chance.

After creating hundreds of online forms and helping other companies with thousands more, I have learned this -- the structure of an online form directly impacts how people will view your brand. And how people view your brand dictates the number of submissions you can successfully capture.

Many marketers still struggle to make this happen. In fact, recent research found that while "better quality leads" from paid campaigns was a top priority for 54 percent of marketers, 34 percent don't know where to start, and many are overwhelmed. My guess? They're not using online forms to their full potential.

Right now, your online forms are still a roadblock. And that's OK because you're about to learn more than a dozen research-backed methods for taking your online forms from low-performing to irresistible. To start, we need to identify what's going wrong.

Related: Conversion Rate Optimization: From a Luxury to a Necessity in 2016

Why the granular details matter.

How you structure your online forms -- as well as where and how you use them -- can be the difference between love and disdain, or, put more simply, a form that gets filled out versus one that is abandoned or ignored altogether. Understanding what makes or breaks the online form experience will help you meet your audience on its terms. For example:

• HubSpot once discovered that readers were 17 percent more likely to fill out a 14-field lead gen form when it was placed on a separate landing page versus a blog post.
• Neil Patel was able to increase his contact form submission rate by 26 percent simply by removing a single field.
• One major retailer drove $300 million in sales by changing button copy from "register" to "continue" and adding 35 words of supporting text.

These discoveries all came from A/B tests, which I highly recommend. There's another scientific method I've used to determine what, exactly, makes people abandon forms -- I asked them.

Why people currently despise your online forms.

Occasionally, we'll ask people we know to share their biggest frustrations with forms that are, er, less than enjoyable to fill out. Here are a few of the gems:

"When it's not mobile responsive. Yuck."

"If there's no consistency from what you click to where you land, I get really peeved. The landing page should not be completely different from what the submit button says."

"Fields that aren't set up to automatically capture information correctly. I don't want to hit "tab' to get to the next field when typing a phone number."

"Too many fields."

"A lack of color contrast can be really annoying, especially when fields are set as mandatory by the brand but can't be seen as such by the user."

I could go on, but you get the idea. Each and every online form element you choose has a direct impact on how people perceive your brand.

How to perfect your online forms.

Now that I've detailed what's wrong with online forms, let's look at what makes for high-performing ones. We'll walk through six key variables and the steps you can take to get them right.

1. The process of placement

If there's one thing I know, it's that where you place your online forms can have a big impact on how many people will fill them out. Twenty-four percent of the marketers we recently surveyed say they're currently generating the most leads through their main websites. Only 3 percent are getting form submissions from blogs, and 6 percent said most of their leads come from content marketing.

When you consider that form submission rates have been shown to increase by as much as 250 percent when lead gen forms are placed on dedicated resource centers and content hubs, it appears that some tremendous opportunities are being overlooked.

Take what happened at Backlinko. Late last year, blogger Brian Dean made one simple change. He added a content offer and a popup form to the middle of his blog post. The result was a 785 percent increase in conversions. That one opt-in form now accounts for 30 percent of the website's subscribers.

Before you begin to look at color schemes, analyze fields or test fonts, look for placements where your online forms are going to get the best visibility.

2. The influence of color.

Color shapes all kinds of decisions, from how we feel to what we buy. For instance, did you know that:

• People make subconscious judgments about products within 90 seconds of initial viewing, and that up to 90 percent of their assessments are based on color alone?
• Purple is one of the most-loved colors among women -- and most hated by men?
• Green makes people feel relaxed; red makes us want to buy; blue engenders a sense of trust, and black gives off an aura of power and sophistication?

The basis for these theories are explored in more detail in this Website Magazine article and in this HubSpot blog. The key findings can be summarized in one simple statement -- a person's experience with your landing page forms is directly influenced by the colors you use.

"But Chris," you say, "I'm not a designer. I don't have time to study which schemes and contrasts will have the right influence on my brand's message." That's exactly why tools like Adobe Color CC and Paletton exist. You can simply enter one color to have different schemes and palettes automatically generated for you.

Once you've chosen your pallette, the next step is to weave those colors into various elements of your form, based on the emotions you want to stimulate. So if you're displaying a certificate or other trust indicator, use blue to create the sensation of trust and security. A splash of red can help increase the sense of urgency around limited-time offers. When using contrast to highlight required fields, try a cheery shade of yellow to keep them from becoming off-putting.

{Photo caption: Those links and buttons are blue for a reason: It's the color that conveys a sense of trust.}

It may take some trial and error to get the right mix. The goal is to use just enough color contrast to draw attention to important elements without causing your form to become busy and overwhelming.

Related: The Psychology of Color in Marketing and Branding

3. The psychology of fonts.

Believe it or not, the fonts you choose for your online forms play a big role in the brand experience. One experiment involving 45,000 New York Times readers sheds some light on how significant their influence can be. Contributor Errol Morris encouraged readers to take a survey where they were asked if they agreed with a particular scientific theory.

Thing is, Morris didn't actually care if they agreed or disagreed. He just wanted to know if decisions would be influenced by the typography, and they were. Poll takers were statistically more likely to agree with the statement when it was presented in Baskerville than when it was written in several other fonts including Georgia, Helvetica and Trebuchet.

In another example of how fonts shape brand perceptions, the 2012 news of an earth-shattering scientific discovery was overshadowed when the findings were presented in Comic Sans. Instead of conveying an appropriate sense of significance, the message came across as childish.

The right typography helps mold interactions with your brand in positive ways. This handy infographic from the fine folks at Crazy Egg provides a quick snapshot of how to select the best fonts for your forms' field labels, buttons, headers and descriptions based on the emotions you want to evoke:

{Photo caption: Image credit: Crazy Egg}

4. The science of fields.

In a recent Form Conversion Report, an important finding surfaced -- the type of form you use directly impacts the number of fields it's safe to include. Lead gen forms averaged a 17 percent conversion rate with 11 fields. Contest forms included 10 fields and were submitted at a rate of 35 percent. But contact forms? They included six to seven fewer fields but were filled out by just 1 percent of viewers.

Decide first how much detail you really need. While a contact page form asking for name, location, phone, email, job title and biggest challenge may not get many submissions, an event registration might. (Remember that HubSpot blog-versus-landing page example above? That's the kind of determination you need to make here.)

When in doubt, eliminate a field. Test after test has revealed that fewer fields can lead to higher conversions.

{Photo caption:Image credit: Quicksprout.com}

Next, adjust the settings so users have the option of letting fields auto-populate. Some smart forms can pull data from a return visitor's account; others will allow users to extract information from social media. This saves your user valuable seconds and makes for a more seamless experience. In fact, data from our form conversion report shows a 189 percent conversion rate increase when users are given an autofill option.

5. The challenges of mobile

Science says the average person's attention span is now … oh look, I just got a new follower on Twitter!

Ahem.

Humans can fully focus on one digital activity for about eight seconds before distraction sets in. Why? Because of mobile devices. Smartphones and tablets have officially rendered us able to focus for less time than goldfish. That's the bad news. What's worse? Sixty percent of your brand's web traffic is occurring on smartphones.

In other words -- if your web forms aren't beautiful to look at and easy to fill out on mobile screens, they're pretty much guaranteed to bleed leads.

Related: SEO Is Now 'Search Experience Optimization'

All right. Enough doomsaying. What really matters here is what you're going to do to fix it. First, find out which specific devices your target audience is using. You can do this quickly in Google Analytics by going to Audience > Mobile > Devices:

Now you can use a tool like Screenfly to test how your forms appear on these specific devices. Here's a quick list of key elements to check:

• Is it clear which fields are mandatory? (If not, go back to No. 1 and add a color contrast.)
• How many seconds does it take to fill it out? (If it's more than eight, decide which fields you're going to eliminate.)
• Are the field labels easy to read? (No? You'll need to increase the font size.)
• Is the call-to-action button fully visible each time you rotate the device? (This can probably be fixed with some custom CSS.)
• Does everything fit neatly on the screen? (You might need to adjust field length.)

6. The dos and don'ts of email integrations.

You've heard of CASL, right? It stands for Canada's Anti-Spam Legislation and has been in effect for nearly two years. CASL covers the sending of any "commercial electronic message" that's accessed by a personal computer in Canada. This law requires you to get explicit consent before sending someone a message and applies to email as well as automated texts. It's more stringent than anti-spam legislation in the U.S., but not all that different from laws in EU member states like Ireland and Germany.

I say that to say this -- just because someone is filling out your form, it does not give you unbridled permission to subscribe them to countless drip campaigns and nurture lists. People will be annoyed with your brand if they fill out a form for one thing and get barraged with emails for another. This practice could also get you into legal trouble if those people are located outside the U.S.

You have two options to prevent this:

1. Limit each form's integrations to one highly relevant nurture campaign.
2. Be crystal clear about what else your users will be opting into.

The latter can be accomplished by adding a checkbox:

Or some supporting text:

Get to work improving your online form experience.

Many of the fixes outlined above can likely be made using your form builder's drag-and-drop interface. A few may require a visit to the cascading style sheets, or CSS, editor. But don't worry -- you don't have to develop a whole new skillset to make this happen. Many platforms offer detailed support documentation to guide you through the process. Visit your provider's resource center, and you may even find examples of CSS code you can copy.

This may seem like a lot, but each little change has the potential to make a big impact. When your forms capture more leads, you'll be glad you took the time to make them great.

What other tips do you have for improving the brand experience through online forms? Let us know in the comments.