This is a guest post by:
Elena Simionescu handles PR for Pixel77 and Inky Deals. She takes marketing and social media pretty seriously and in her free time, she watches a lot of movies. Like a lot, a lot. Get in touch with her on Google+.
“I meet hundreds of people, and I’m not going to remember them. But every single one of them will remember their interaction with me.” – Daniel Radclife
Online forms are the most important tool you have at hand for interacting with visitors online. Not everyone might be inclined to write you an email, but a form is quick. It doesn’t take a lot of time. It’s inviting.
Basically, online forms allow the user to enter details that are required for interacting with you. Be it asking for advice, praising you for your work, or requesting whatever service you offer, web forms, if done properly, will increase the quality of communication between you and people you want to reach.
The following list contains 10 quick tips on how to effectively build an online form and visual examples of truly engaging forms from various websites – not necessarily created with 123ContactForm, but nonetheless great as a point of reference.
Like we said, forms should not be time-consuming. You should make sure that the form layout makes it easy to read and fill in. It needs to look compact and open, so the user won’t be intimidated or lose interest in fear of the time he’ll have to spend completing it.
FI’s form is an excellent example of keeping it simple and knowing the form’s purpose. It’s elegant and simple, having only four fields to fill in. The fact that there are different forms to fill in, depending on the nature of why the user wants to get in touch with you, is another nice touch to this form. It allows you to prioritize answering them, and also invites the users to write, because they give the site and, of course, whomever the site is representing an air of accessibility.
Once the user has started to complete your form, it’s safe to assume he wants to get in touch with you. If he’s willing to allot some time and write something in, he should not regret that decision. We all make typos. We write fast because we’re trying to make our fingers keep up with our minds, and spare our eyes from staying too close to the screen. That’s why highlighting error fields before the user leaves the page is a sign of appreciation towards him. 123ContactForm helps you customize the way you wish for the errors to be shown, so that it’s consistent with the form design and the message you wish to give.
Forms can’t always be kept short. Sometimes you need more information from the user, but you still have to make it look non-menacing. You achieve this by splitting your form into sections – e.g. “who are you?” and “what do you want?”, only friendlier. This doesn’t mean showing the user only bits of the form. It means giving visual cues, such as coloured bars or heading, to make it look (and be) more tidy and less-threatening.
Blue Sky Resumes have got it spot-on with their form. It’s split up in five subsections, neatly bordered text and a few discreet lines so, even if you have to scroll down to fill in the form, it feels neat and organized, and doesn’t feel like you are wasting time.
With 123ContactForm, you have all the options for building a clean and inviting form. You can either split your form into multiple pages or just apply headings on a single-page form to give those visual cues needed.
When designing a form, never lose perspective. Question any idea you have that isn’t solving a problem. Forms attract through their simplicity. They can look nice, pretty even, but to be stunning is a bit far of to ask from them. Forms have to be simple (and why not? even enjoyable) tasks.
Struck Axiom have a really responsive, fluid and basic contact form. Nothing spectacular about it, just good, clean design that’s not at all intrusive, and a simple click away from sending your email to them.
In order to give your form a design that fully blends your website, check out all the freedom 123ContactForm’s Themes section offers. You can juggle with colors, images and fonts at your will.
Multiple choice is another great feature you can implement in your form. It may seem like a small tweak, but it has a really big impact. It saves time for both you and the user, by making you able to prioritize your emails quickly, and by sparing the user the need to type common things such as hometown, or even by giving him an idea as to what your conditions are.
One form that uses multiple-choice marvelously is Foundation Six’s get in touch form, with a dropdown where you can choose the nature of your inquiry, and which structures the form upon rules, to show you just the type of content that matches your intent.
Just because the form should be simple, doesn’t mean it has to be dull. A creative form can make the user want to fill it in. People like dealing with other people, so a form that has a bit of human warmth to it can really make the difference between the user filling it in, and him just not bothering.
Applicom’s charming letter themed form may seem cliché at first glance, but it gives the contact form a bit of personality, and it tells the user that he really is contacting people, not some software that just sorts everything in folders.
When asking for sensitive information, such as telephone numbers or emails, you need to reassure the user that the information he is entrusting is in good hands. You can achieve this by clearly and concisely stating why you need that information, or by explaining it in a jovial, playful manner, thereby humanizing the form a bit more.
For this we’ll be referring to FI’s contact form, again. The “Let’s keep in touch…” text underneath the email box is a lovely idea. It makes the user feel as though you are just as willing to communicate as he – the user – is.
The form should be a core part of the website. Ideally, after someone browses your site, they get to the contact section and can’t help but give you feedback or, better yet, want to do business with you. That’s why the form needs to be consistent within the user’s browsing experience, keeping him interested and entertained.
Idyllic Creative’s form is just such an example. The whole website displays really cute artwork, especially the “Stuff Mums Like” photo and the little teacup pirate at the bottom of the page, which also appears in the contact section, this time as a straw-hatted man at the beach in a pan. The “are you a real person?” box is simply adorable and showcases another nice way to humanize your form.
Including maps in the contact form can be really important. It gives the user a better sense that you are a real person that actually is physically somewhere. Also it gives the impression of openness, like you have nothing to hide. It helps reassuring the user, and it gives the form a rather pleasant look.
Amazee Labs have a really implemented a map in their contact section, that pinpoints their headquarters in Zurich. The zoom-in option is active and runs really smoothly, and they even seem to have picked the right colour for their website to match the map.
Once the user finishes completing the form, it’s nice if he receives a confirmation message from you, to see that you appreciate that he’s taken time from his schedule to contact you. That’s why you should implement a page form him to be redirected to, where you thank him, assure him that his message has been received, and that you will be in touch shortly.