Contact pages—one of the staples of navigation menus far and wide. On them, you will usually find something along the lines of “We’d love to hear from you” as a welcoming message meant to encourage you to write to them. Now, judging from some websites’ contact form design, you would never believe they actually mean it!
Contact forms can serve as a valuable feedback mechanism. Whether they are used as sales tools or to gather comments and enquiries, the nuggets of wisdom you get from each message submitted, can help your overall business by increasing your return on investment through improvements in lead generation. So, how do you make a good first impression and ensure your visitors want to complete your form?
Design Process
When designing a website, contact forms can sadly end up being somewhere near the bottom of the priorities totem pole. This doesn’t mean you can get away with just a couple of fields and a “Submit” button at the end of your contact page. In order for a contact form to be worth anyone’s time, there are 3 crucial elements you need to define before you let visitors send you messages.
1. Purpose
Why does your website need a contact form? Will it be to submit general enquiries, ask for product information, or sign up for a service? Establishing the purpose of your form will dictate everything about it—its layout, input fields, how much importance it is given in the overall web design, etc.
If your contact form doesn’t have a purpose, then you might as well not have one. When it comes to converting visitors and getting them to contact you, only purposeful and specific forms do the trick.
2. Necessary Fields
Once you’ve established the purpose, coming up with the necessary input fields is quite straightforward. If your form’s purpose is to get potential clients to ask for a service quote (e.g. web development) your form might include fields such as Name, Email, Project Description, Services Needed, Budget and Timeline. On the other hand, if your form serves as a place for general enquiries, Name, Email and Comments are more than enough.
Make sure you don’t ask for information you don’t truly need. Keep it relevant! Otherwise visitors might become weary of your info-gathering intentions if that has nothing to do with the reason they are contacting you. For example, on a travel quotation form, you wouldn’t ask someone for his or her passport number when all you need is his or her nationality or country of residence.
Moreover, fields and questions should respect a natural progression, not bounce from one topic to another and then back.
An interesting case study by Unbounce.com showcases the effects of unnecessary fields on conversion rates in Expedia. They eliminated the field asking for company name from their contact form, resulting in a $12 million profit. They also added “optional” next to their phone number field, which increased their conversion rate from 42.6% to 80%. If that doesn’t convince you to keep it relevant, then nothing will!
3. Visual identity
Now that your form has a purpose and clearly defined fields, it’s time to make it all look pretty. And by pretty we mean make it look at home on your website. Your contact form is not the place to introduce any new style elements – fonts, colors or effects. If they are not already part of your visual identity, don’t include them!
If the rest of the website has a minimalist look, by all means the contact form should do too. If it’s illustrated, carry the illustrations to the contact form design. A contact form should look familiar and inspire trust, which isn’t going to happen if it looks like it’s a page out of a different website.
A lot of companies, for example, use powerful marketing tools such as Marketo, which come with ready-made forms that can be inserted into a website just by adding a shortcode to the page they want it to be displayed in and job done. Although convenient, the biggest issue with this kind of element is that for the most part you are not able to style and customize the form to match your visual identity and the overall web design. To prevent this, we always recommend integrating the appropriate modules and plugins to your CMS of choice. Magento, Drupal and WordPress all have their own plugins that allow you to create and implement a great contact form!
A good example of a company doing contact form visual identity right is Twitter. Their support page is, not surprisingly, in the form of tweets. You can tweet @Support with your issues or comments and get a reply to your Twitter profile by them. It really doesn’t get more true to self than that!
Twitter’s customer service support form
Design Trends
Besides ensuring that your contact form ticks all the boxes for the above mentioned points, it’s also important to add a little fun to them and keep them up to date with what’s going on in the design world. We’ve noticed a couple of really cool effects that can make pretty much any contact form look and work better (unfortunately some forms are a lost cause, so no point prettifying them).
Placeholders
These are an HTML5 attribute in the form of descriptive text or labels, which are displayed in an input field and disappear when you start typing on it. If older browsers (IE8 and older) will be used to access your contact form – as it would be the case in China – you can still implement placeholders using JavaScript.
Due to the clean, simple and modern design aesthetics you can achieve using placeholders, they have become increasingly common in contact form design and we love them!
Invision’s sign-up form
Interactive Input Fields
For lack of a better name, interactive input fields allow you to give visitors a personalized experience when filling in your contact form. With this kind of interaction, for example, when someone types his or her name into the name field, it is automatically displayed next to a welcome message. Seeing this would certainly put a smile on my face and when it comes to your visitors, this is exactly what you want to achieve!
[There should be an example screenshot here, but no one couldn't find the website we had seen this effect in so we'll add it as soon as we find it!]
Minimal Interfaces
Minimal Interfaces are just that – as simple as it gets. In the case of contact forms, when using a minimal interface, an input field, label and next button are all you need. If your website is minimalistic in its overall design, or your contact form is very simple, minimal interfaces are a great option! In both of these cases, the last thing you want is to have a contact form get in the way of the overall user experience.
Minimal Form Interface by tympanus.net
Real-time Inline Validation
Inline validation is great in that it provides users real-time feedback as they fill out the form. This might mean displaying password strength as they type it or confirm valid answers, for example. Inline validation helps people complete contact forms easily and quickly, without any frustrations over unexplained errors, which is clearly a great way to improve UX.
Twitter’s sign up page
Real-time Confirmations
Just like real-time inline validation, real-time confirmations provide the user with immediate feedback and reassurance that their form is being sent/has been received as soon as they click “submit”. This prevents any uncertainty about the form being sent if the processing time is taking longer than expected and ensures peace of mind once the form is gone.
Below is a great example of real-time confirmations from one of our most recent projects: Ubifrance. Once a visit clicks “send”, a custom loader pops up to show that the request is being processed, followed by a confirmation message once the message has been sent successfully.
There you have it, all the basics you must know before creating a contact form as well as a roundup of some of the nicest effects around the web nowadays! If you enjoyed this, come back tomorrow for part 2 of the post to learn all about the development challenges behind creating and implementing contact forms, and how to avoid any issues they might bring.
See you soon!