![\"contact-form-heading\"](\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2016\/10\/Contact-Form-Heading.png\")
<\/p>\nYou incorporate best practices across your website to give visitors a user-friendly experience. However, if that experience diminishes upon reaching the contact page, do you think they will remain on your website? The bottom line is if you fail to entice the visitor into clicking that \u201ccontact\u201d button, you literally have lost a potential customer forever.<\/p>\n
There is a reason why it always adjudicated that a webmaster must never let their guard down when it comes to designing each part of the website. Even a simple contact us form can either result in a potential customer contacting you or just moving to another website. Creating an effective contact page involves a key process and one should abide by some crucial tips in order to ensure that the send button does not sit idle.<\/p>\n
Titles are meant to convey the crux of the matter, so avoid stories and tales. Be clear and precise with your title. The visitor should understand what the form is for, by just looking at the title.<\/p>\n
Although the title of the contact form should explain the contact form, in case the visitor still has any doubts and misconceptions, the description should come to your rescue. The description should answer- what is the need of the form and what will the visitor get in return of filling the form.<\/p>\n
<\/p>\n
Do not overdo your form with numerous fields. Use only those fields which are necessary and of utmost importance to your business. Avoid asking same information twice. Eg. Password \u2013 Confirm Password. Avoid asking for information, which is personal like Phone numbers, Spouse Name etc. In case you are asking such information, ensure the privacy of the user and communicate it using safety badges.<\/b><\/p>\n
Given below are two options: Let us see which one do you like<\/p>\n
![\"short-subscription-form\"](\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2016\/10\/Short-Subscription-Form.png\")
<\/b><\/p>\n
![\"long-subscription-form\"](\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2016\/10\/Long-Subscription-Form.png\")
<\/p>\n
Which one do you think is most likely to be filled by the end user? Surely, the first one is a clear winner; the second option contains unnecessary fields, which can make the visitor hesitant about completing the form.<\/p>\n
Eye tracking studies have shown that left aligned labels above the field perform better than the right and left aligned labels in line with the field. To make the form compact and short, labels can be placed inside the field.<\/p>\n
Left Aligned inside the field:<\/i>\u00a0<\/i><\/strong><\/p>\n Left Aligned above the field:<\/i><\/strong><\/p>\n Left Aligned in line with field:<\/strong><\/p>\n Using action buttons like Submit, OK, Continue, Done is the best way to confuse your visitors. So avoid using such buttons. An action button should always be reciprocation for filling the form and communicate what the visitor will get after he presses the action button.<\/p>\n Doing this will encourage the visitor to focus more on the form itself and hence improve the rate of conversion. Keeping forms below the fold or spread across two folds of the page creates confusion and distraction.<\/p>\n Provide help text below the fields to guide user\u2019s input. This way you are communicating the information as well as the format you are expecting from the visitor.<\/p>\n Eg: In the Email field you can write \u2013 \u201cexample@domain.com \u201c<\/p>\n If the fields are complicated Help option<\/b> can be given to facilitate the user about the required input.<\/p>\n Communicate the errors clearly. Do not just show an error without communicating the reason for error as it can be irritating for the visitor to keep searching where he has gone wrong.<\/p>\n \u00a0 While the visitor is filling a specific field highlight that field, so that in case the visitor gets distracted he can quickly come back and resume from where he left. Also, save time by automatic cursor placement<\/b> in the first field.\u00a0<\/b><\/p>\n Readability of form is very important, so make sure the font style, size, and color do not hinder the reading. Avoid using funky font styles and color schemes, which make reading difficult. For Eg: Light gray background with white text.<\/p>\n Best and easiest way to differentiate between the required and optional fields is using the asterisk (*) sign. This will improve the user experience and hence the conversion rate.<\/p>\n With the number of mobile users going up, it is very important to design a form, which provides a good user experience to mobile users. So invest in optimizing your fields for mobile use.<\/p>\n A drop down menu loaded with numerous options can confuse the visitor and they can end up saying Good Bye to your page. So use drop down menu wisely. In case you have a large number of options, using an Auto Complete will be a better option.<\/p>\n \u00a0 Let your visitors know what will happen after the form is sent. Display a personalized message, which would include the name entered by the visitor telling helpful details like how long will it take for someone to follow-up or any other relevant info.<\/p>\n Although Captcha is an anti-spam measure but can prove extremely annoying if the visitor is unable to get captcha right the first time and you end up scaring off visitor from your page. To overcome this necessary evil, use simple captcha and give the option of changing the code.<\/p>\n Eg: Use something like this, just simple checkbox:<\/p>\n In the end, when it comes to designing a contact form, it all boils down to creating a form that is precise, relevant, personalized and easy to fill. Rather than having a loud form with its focus on high-quality graphics, the contact form ought to usher in the fastest way to contact you. In addition to that, you should also keep the form engaging, so that the visitor does not abandon it midway. Do you have some good examples of such contact forms? Feel free to start a conversation in the comments below.<\/p>\n![\"left-aligned-labels-inside-fields\"](\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2016\/10\/Left-aligned-labels-inside-fields.png\")
<\/i><\/p>\n![\"left-aligned-labels-above-fields\"](\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2016\/10\/Left-aligned-labels-above-fields.png\")
<\/p>\n![\"left-aligned-labels-inline-with-fields\"](\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2016\/10\/Left-aligned-labels-inline-with-fields.png\")
<\/p>\n5.\u00a0AVOID CONFUSING ACTION BUTTON<\/h2>\n
6. PLACE THE FORM ABOVE THE FOLD<\/h2>\n
![\"place-form-above-the-fold\"](\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2016\/10\/Place-Form-above-the-fold.png\")
<\/p>\n\u00a07.\u00a0<\/b>HELP VISITORS FILL FORM<\/b><\/h2>\n
![\"tool-tip\"](\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2016\/10\/Tool-Tip.png\")
<\/p>\n![\"prefilled-feilds\"](\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2016\/10\/Prefilled-Feilds.png\")
<\/p>\n8.\u00a0ALERT ERRORs CLEARLY<\/h2>\n
![\"error-alerts\"](\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2016\/10\/Error-Alerts.png\")
<\/p>\n\u00a09.\u00a0HIGHLIGHT FIELDs<\/h2>\n
![\"highlighted-fields\"](\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2016\/10\/Highlighted-Fields.png\")
<\/b><\/p>\n10.\u00a0FONT SYLE, SIZE & BACKGROUND COLOUR<\/h2>\n
11.\u00a0DEMARCATE BETWEEN THE REQUIRED AND OPTIONAL FIELDS<\/h2>\n
12.\u00a0USE MOBILE FRIENDLY FORMS<\/h2>\n
<\/b>13.\u00a0AVOID CROWDED DROP DOWN MENU OPTIONS<\/h2>\n
![\"crowded-drop-down-menu\"](\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2016\/10\/Crowded-Drop-Down-Menu.png\")
<\/p>\n14.\u00a0PERSONALIZE MESSAGE AFTER FORM IS SENT<\/h2>\n
<\/b>15.\u00a0USE SIMPLE CAPTCHA<\/h2>\n
![\"captcha\"](\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2016\/10\/Captcha.png\")
<\/b><\/p>\nCONCLUSION<\/h2>\n
\n\nBuild an effective contact form for your website<\/h3>\n<\/div>\n