There\u2019s a lot that can go wrong, and in this article we’ll be doing our best to educate you on how you can avoid these things.<\/p>\n
More specifically we’re giving you our…<\/p>\n
6 Rules For Building the Perfect Contact Form<\/h2>\n
But hold on, quick PSA first…<\/strong><\/p>\n Before we go any further, you should know this is an advanced look into the world of WordPress contact forms.<\/p>\n If you want a simple introduction, our getting started with contact forms<\/a> post is a great place to start.<\/p>\n Then, once you know you need to create more contact forms for your site, the next step is choosing the right contact form plugin<\/a> to make life easier.<\/p>\n Once you’ve done those things we reckon you’ll be ready and primed for the advanced in-form-ation (heh) that follows.<\/p>\n Moving on…<\/strong><\/p>\n User logins. Membership sign-ups. Email subscriptions. Quote requests. Questionnaires. Support requests. Order and payment forms.<\/p>\n There are a bunch of different ways to use contact forms on a WordPress site. What doesn\u2019t change, however, are the rules you must abide by if you want the contact form to perform well.<\/p>\n A Google eye-tracking study<\/a> published in 2014 showed that following the most basic usability guidelines for form design will significantly improve the user experience.<\/p>\n Specifically, when a contact form abides by all the rules, 78% of users can complete and submit them in a single try. When a contact form violates those rules, however, only 42% are able to do it in one attempt.<\/p>\n Curious to know what those rules are? Then keep reading.<\/p>\n As you\u2019ll see in some of the other rules here, people are often concerned with the length of contact forms, which is what often leads to bad design choices.<\/p>\n Take the matter of alignment, for instance.<\/p>\n You might see a form like this one on the BrainTraffic website and think, \u201cHmmm\u2026 but isn\u2019t that a little too long to fill out?\u201d<\/p>\n One way you might think about fixing this \u201cproblem\u201d is by shifting the labels to the left-hand side and placing the answer fields on the right.<\/p>\n However, UX experts will tell you that\u2019s a major no-no as it compromises the scannability of the form.<\/p>\n The same thing applies if you were thinking about placing fields next to each other horizontally.<\/p>\n Basically, if you deviate from the label-on-top\/field-below-it structure, you\u2019ll create friction within the user experience.<\/p>\n Back in 2010, a set of guidelines were issued regarding the design of web forms called \u201cSimple but Crucial User Interfaces in the World Wide Web: Introducing 20 Guidelines for Usable Web Form Design<\/a>\u201d .<\/p>\n Google picked those guidelines up in 2014 and put them to the test with an eye-tracking study<\/a>.<\/p>\n Among their many findings, they concluded that left-aligned forms with labels placed atop each field resulted in an improved user experience.<\/p>\n If you\u2019d like your contact forms to abide by this simple alignment rule, here is what you need to do:<\/p>\n Not only is this design great for the user experience, but it will help your site bridge the gap between the desktop and mobile experience (especially important as you work towards updating your sites for Google\u2019s mobile-first index<\/a>).<\/p>\n When it comes to designing contact forms, you might think that shorter is better, right?<\/p>\n This actually isn\u2019t always the case. What matters most is that you provide users with all necessary and relevant fields.<\/p>\n Michael Aagaard, the Senior Conversion Optimizer for Unbounce, gave a presentation<\/a> in 2015 that tackled this very question.<\/p>\n He and his team wanted to know what would happen if they shortened this contact form:<\/p>\n As you can see, they removed what they believed to be unnecessary fields in order to streamline the process of filling out the form.<\/p>\n However, upon concluding the test, they discovered a 14% drop in conversions with the shorter form.<\/p>\n Afterward, they studied which fields had the highest and lowest interactions on the contact form.<\/p>\n Using the original, longer design, they rearranged those fields and updated the labels to clarify what type of information was needed.<\/p>\n They re-ran the test and saw a 19% improvement in leads with the relabeled and reorganized version of the long form:<\/p>\n That\u2019s not always how these tests work out though.<\/p>\n Expedia, for example, found that there was a field in the contact form<\/a> for \u201cCompany\u201d that was confusing customers.<\/p>\n It was optional, but users didn\u2019t necessarily understand that and, in turn, filled out the wrong information which eventually led to their purchase being declined.<\/p>\n When Expedia realized the issue, they removed the field and saw an additional $12 million in revenue the following year.<\/p>\n I would suggest that, when building your own contact form, start with the basic fields as QuickBooks has done here:<\/p>\n If you find that conversions aren\u2019t tying out with expectations, study the analytics and see if you can determine which fields are stopping users up from completing the form.<\/p>\n Regardless of whether your users engage with your contact form using a desktop or mobile device, or whether or not they need assistive technology to help them do it, the form should be equipped to simplify the input process.<\/p>\n Here are some techniques you should be aware of:<\/p>\n Tabbing<\/b> Input Masks<\/b> This type of auto-formatting also leads to fewer clicks (especially if a field like a phone number or credit card is broken into multiple fields) and quicker form completions.<\/p>\n Input Types<\/b> Google Autocomplete<\/b> Not only will it help you avoid having to deal with misspellings and improperly formatted addresses, it\u2019ll spare your visitors from having to type most of that information out.<\/p>\n Conditional Logic<\/b> Once the user selects their particular \u201ccondition\u201d, only then will the relevant parts of the form be exposed.<\/p>\n Many contact form plugins come with an extension for this. For example, here\u2019s one for Forminator<\/a>.<\/p>\nRule #1: Focus on Alignment<\/h2>\n
![\"Perfect](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/12\/Perfect-Contact-Form-BrainTraffic-Alignment.png\")
![\"Perfect](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/12\/Perfect-Contact-Form-Google-Eye-Tracking.png\"){kind=tracking}
\n
![\"Perfect](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/12\/Perfect-Contact-Form-WPMU-DEV-Mobile-Button.png\")
Rule #2: Include All Relevant Fields<\/h2>\n
![\"Perfect](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/12\/Perfect-Contact-Form-Unbounce-AB-Test-1.png\")
![\"Perfect](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/12\/Perfect-Contact-Form-Unbounce-AB-Test-2.png\")
![\"Perfect](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/12\/Perfect-Contact-Form-QuickBooks-Fields.png\")
Rule #3: Simplify Input<\/h2>\n
\nFor desktop users and those with accessibility issues, make sure your contact form has a logical tabbing order<\/a> enabled.<\/p>\n
\nRather than force users to guess how you want certain fields formatted, you can code them with input masks<\/a> that automatically format them as the user types.<\/p>\n![\"Perfect](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/12\/Perfect-Contact-Form-Social-Design-House-Format.png\")
\nHTML input types<\/a> will help users see the right keyboard options as they type on mobile, saving them from having to type everything from scratch (like the \u201c.com\u201d for email).<\/p>\n![\"Perfect](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/12\/Perfect-Contact-Form-Elluminati-Adaptive-Keyboard.gif\")
\nRather than code each field to automatically format per the standards it needs to meet, enable auto-fill with the Google Address Autocomplete plugin<\/a>.<\/p>\n
\nIf you\u2019re worried about the length of your contact form–especially if it targets different user types and fulfills various purposes–you can use conditional logic to keep it short.<\/p>\n![\"Perfect](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/12\/Perfect-Contact-Form-Pixflow-Expanded-Form.gif\")
![\"Forminator](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/01\/forminator-conditional-logic.jpg\")