5 Contact Forms that Went Horribly Wrong and How to Fix Them
Learn from others' mistakes before you make them yourself 🤦
10 November 2020 by Rohan Mendiratta
Often contact forms circulated on websites or marketing emails seem like an afterthought. Why? Because of the common misconception that contact forms are an outdated method for getting in touch with prospects. If you belong to the school of thought that considers web contact forms archaic, you’ve got another think coming!
Get Started with Online FormsWith One Of Our 180+ Templates
Shopping Order Form
Sales Lead Form
Gala Dinner Form
Employee Feedback Form
Job Application Form
Webinar Registration Form
To put it simply, well-designed contact forms work! Everything else you have heard in this regard is a myth. Of course, there are certain caveats to what makes them work.
Believe it or not, several brands experience low engagement through contact forms because of sloppy user experience and interface design and not because it is a lousy medium.
Why Won't Visitors Fill Out Your Web Contact Forms?
Say your SEO company is doing a great job encouraging higher virtual footfall to your website. As a result, more visitors start showing interest in your offerings, but then they reach the 'Contact Us' page, and instead of filling it up, they abandon your website. Here's why:
You Contact Form is Way Too Long
Have you ever abandoned a store purchase because the checkout line was too long? A long contact form feels similar to standing in a virtual queue trying to reach out to the brand but not before jumping major information hoops.
Additionally, a lengthy contact form may make your visitors impatient and suspicious about your motives behind accumulating a great deal of information. Remember, people use the internet to make their lives more comfortable, and a long contact form is the opposite of that. At the very first glance, long contact forms scare and frustrate visitors.
So, what is the ideal length for a web contact form? Ensure the number of fields on your contact form does not leave the range between 3 to 5. The minute you ask for a 6th field, you stand to lose your audience. How much of a real difference can removing only a couple of extra fields make? Neilpatel.com hiked conversions by 26% by getting rid of one additional information field from their contact form.
Another critical thing to keep in mind before drafting a contact form is its purpose. A contact form's primary function is to collect information and not sell any service you offer. Therefore, only get your foot in the door through this page, and for that, you need answers to just a few basic questions.
Check out this ideal sample contact form that asks for only three fields.
A phone number is an intimate piece of information - one most prospects for whom your business practices are unknown are unwilling to share. So, what do they do when you ask for their contact number? They abandon your site, perhaps never to return.
Sure, your sales reps can argue that asking for a phone number qualifies leads, and if they cannot provide this bit of information, they perhaps are not serious about doing business with a company. But, data sings a different tune, and it doesn’t lie. And it shows that demanding phone numbers on contact forms are often the death of conversions.
So, how do you circumvent this problem? Start by leveraging the email id a visitor willingly provides and earn your way up to their telephone number. Or, reach out to a third-party data vendor and collect ethically sourced phone numbers for the email addresses you possess.
Also, make sure not to use the following buttons or features when drafting a contact form:
Auto newsletter signups
Check out this sample contact form, which asks for the phone number. Its design will turn away visitors the minute they land on this page of your website.
Does your contact form sound human? Yes, you read that right! You're far more likely to keep the visitors engaged if they feel the contact form was indeed written in a conversational tone, and there will be a human on the other side to read it rather than a bot.
Not very sure what we mean? Look at the example below to gain a clearer understanding of sounding human vs. machine-like:
Remember, visitors will feel more secure reading a contact form that "speaks" instead of "displays" information. A contact form capable of conversing with the user increases the chances that they will communicate back.
Here is another example of a human-sounding contact form for your reference.
In a nutshell, if you have a contact form, then make sure it works everywhere. Since over 50% of web page views come from smartphone devices, design contact form templates especially for them. Every part of the said form – from drop-downs to CTAs must work seamlessly on a mobile phone or tablet. If the user has to zoom in and out too much, consider them gone.
See what happens when your contact form holds a non-responsive template:
Why will this checkout form fail to generate interest?
It looks incredibly lengthy. Indeed, it does not take that long to fill this form up. However, the look of it is distressingly long with a great deal of white space, barely legible text boxes, and small font size.
It is challenging to navigate as the “Next” button is an unusual black color and is the same size as the rest of the blue boxes.
It contains a lot of unnecessary fields that create redundancy. For instance, users need to fill out both shipping and delivery addresses even if they are the same.
How can you fix it?
Reduce white spaces for assimilated eye movement.
Reduce the number of columns and ask for lesser information.
Highlight CTAs as they create a sense of urgency and prompt customers on what action to take next.
Reduce the number of steps one needs to take before hitting "Next."
Offer a radio CTA, which says, "Billing address same as the shipping address."
It contains incomprehensible error messaging. This incoherence can further confuse the reader as to what they are doing incorrectly.
Even if the user re-visits the form, the UX design does not pinpoint where on the form lies a validation error.
This message cropped up after the user filled out the entire form and hit submit. Meaning, a significant amount of effort goes to waste. The customer will likely not go back and check each column and rectify the problem.
How can you fix it?
Instead of flagging an error right at the end, code a flash message at the very spot of the mistake, also called in-line validation.
Use easier to understand language. Saying “Validation errors” is vague and ambiguous. It may also seem like spam to a customer.
Offer a better CTA than "Ok." Alternatives can be "Allow us to help you," "What went wrong?"
Why will this contact form fail to generate interest?
The clutter caused by unnecessary fields will intimidate the customer.
It contains several redundancies like asking to re-type email.
The advantage it gains by not asking for a mobile number is lost on the customer the minute they look at its length.
How can you fix it?
The “re-type email” row can be done away with.
There is no need for a separate first and last name row.
If there are data security or validation issues, then the form can provide the user with a choice to verify using either the OTP method or a security question method.
Why will this contact come feedback form confuse customers?
For starters, if you are also looking for quick feedback in your contact form, make sure the animated features like drop-down boxes and radio buttons work seamlessly.
The subjectivity in this form can be done away with.
The font size and legibility are substandard.
How can you fix it?
Since you would club this form with the customer’s contact details, assign only one or two fields for feedback rather than dedicating an entire section to it.
Choose large font size, preferably sans-serif like Helvetica or Calibri.
5. The redundant
Why can this contact form confuse the customer?
This form contains both placeholders that appear inside the form field and labels that appear alongside placeholders. But, here they don’t offer much information.
The placeholder must show an acceptable value. For example, if you want an email id or a Twitter handle, the placeholder must write @twitter or @gmail.com.
The label should display the form field's purpose. For instance, if you want a Twitter handle inside the field, the label must say precisely that.
How can you fix it?
All three labels that say “required fields” must be replaced by informative labels.
The placeholders must offer a syntax or a sample email id or name instead of "name," "email address," etc.
, use this post as a starting point for improving your contact forms if you seem unsure of them at the moment. Also, ensure that you create different contact forms for different verticals and individual target groups if need be. Crafting crisp and conversational contact forms for emails, affiliate marketing campaigns, or website visitors will result in more satisfied customers that will ultimately mean higher conversions.
This post is written by Rohan Mendiratta. He helps marketers with building an engaged audience and increasing their sales via SendX: Email Marketing Software.