Building a Better Contact Form
Contact forms are basically everywhere on the internet; they can be for anything: user log ins, email newsletter sign-ups, requests for quotes, customer support inquiries, payment forms – you name it. They give website visitors and prospective buyers an easy way to reach someone at your company. And they’re great for you, too. If you put your email address out there you runs the risk of seeing a lot of spam in your inbox every morning, right? But with a contact form you can collect all kinds of information to aid in personalizing content and delivering better content to leads. Just about every website uses some type of contact form but it’s harder than it looks to design one that is functional, looks pretty, and is optimized for conversions.
Tips for Creating Great Contact Forms
Contact forms are a critical piece of the visitor’s journey. A bad form could ruin the user’s experience, even if you’ve impressed them up to that point. Broken buttons, confusing fields, too many steps, or an unorganized interface could all contribute to the visitor leaving your site and giving up on getting their problem resolved or question answered. You’ve got to delight the customer at every touch point, including your forms.
Pretty much anyone can install a WordPress form plugin and create a contact form. But not everyone can design a contact form that stands out and is highly-converting. Keep reading for tips on building better contact forms that convert.
-
Use a neat, clean user interface
Ideally, the layout of your contact form is intuitive and simple. If it’s too difficult for the visitor to make heads or tales of it, or if it’s too long, people will leave the page, and probably your site. Ultimately, your contact form needs to be readable. This means the field labels need to be clear. UX experts say that the label-on-top and field-below-it layout is best. People also prefer left-aligned forms.
-
Only ask for necessary information
Don’t be annoying or overwhelming. Be concise and brief if possible. Name, email, and message might be all you need. Forms that require people to give a lot pf personal information see a high abandonment rate so just make sure you include all the necessary fields. Be explicit: isn’t it so frustrating when you fill out a form as the labels say, hit the submit button, and get the red error message that indicates something was incomplete and you’ll have to redo? As a user, I know you hate that so when designing your own contact form don’t leave users guessing. If a field is optional, say so. If you need specific formatting, write out those requirements. i also suggest having an error message pop up immediately after a field, not after they’ve completed the form.
-
Improve your buttons
The submit button is your call to action so consider something like “Send Message” or “Get In Touch” rather than just “Submit.” Engaging wording improves the user experience.
-
Incorporate custom branding
It’s always a good idea to maintain brand consistency and have the contact form match your overall branding. The page and form need to fit in with your website’s theme so customize it! Make it better than those generic forms by adding elements of your businesses’ branding. Use the same font or use brand colors in the form’s fields and buttons or checkboxes, etc.
-
Make it mobile friendly
Does your contact form look great on desktops and mobile devices? I’m sure you focused on making your website responsive but don’t overlook the contact form! Style your form input fields with large touch areas. Checkboxes and buttons should be easy to tap. You might use a placeholder attribute to suggest to the user what they should be typing into a particular field. Some mobile browsers automatically detect telephone numbers on web pages and convert them into tappable links – a super useful tool for visitors. That auto-detection is not always reliable though so you might try disabling that element and manually specifying telephone links. There are lots of other configurable options, like autocapitalize, so try a few things and do some testing!
Impressive Contact Forms We Like:
- Many SaaS players provide a range of marketing solutions meaning customers could be getting in touch for any number of reasons – from technical issues with products to general inquiries. It’s a bit difficult to have one form to handle all this so many companies opt for something like what’s below.
The tricky part is that it can take many clicks before a visitor gets to something resembling a form where they can type out their message. However, by having the customer or lead choose right off the bat which avenue is right for them, it does reassure them that they’re on their way to talking to someone who might actually be able to help.
2. For a classic and minimal feel, check out Leadformerly. Simple and to-the-point.
3. Yeti, creator of durable outdoor products, stays true to their brand by carrying the outdoors motif through to the contact page. And they inject a bit of humor, which is always appreciated in our book.
4. Moz, an SEO software company, starts their “Contact Us” page with a clear CTA which directs to a detailed “Help Hub.” By encouraging the visitor to click around and find the help they need for specific Moz services, Moz doesn’t overwhelm.
~ ~ ~
A well-designed contact form will collect information from site visitors effortlessly – directly through your web page. (Rather than someone having to hunt down the correct email address and login to their email account to send a message.) Social media is, arguably, the easiest way to connect with your audience but it’s not always the best form of communication. Contact forms are important because they open that communication channel and are a convenient method for prospects to approach you- even in your off hours.
Don’t forget to redirect submitter’s to a thank you page that explains how and when you’ll be contacting them. And if you need a bit of help with design, fill out our contact form.
