Website is a general term referring to an entity of web pages.
Each page of a website is equally essential, but why then all noise is about the ‘About Us’ page, landing or home page? Contact page has the same meaning and impact on users.
What Is Contact Page For?
It is pretty clear that everything should work like clockwork on a Contact page. Each field of the form, any button or link must be double-checked before you let it appear before visitors.
Design matters a lot, even if it seems rather easy to create a Contact page. It just seems so. The colors, fonts, form position, elements of design, buttons’ look are all the ingredients of this page. The more important fact is that all these features have to be designed in harmony and balance with one another. The styles and colors should correlate with each other, take this into consideration please.
The copy should be written well if you want users to fill the form fields. For this reason, you can add a short greeting phrase before the contact form, a sentence or two about yourself, anything that can put users in a good mood and win their favor.
Mobile gadgets have taken the world. People use them everywhere and for any purpose. The Contact page, as of course all other pages of the design, has to be responsive. Plus, you need to think about the hassles mobile users can face. For example, this is a ‘Submit’ button. Make sure it is big enough to click on it via a touchscreen.
Many who thinkthat a Contact page is designed like in a standard way and the Contact form can be a simple box with empty fields to fill. But you will gain more users if your Contact page has personalized design. You can use your pictures and the pictures of your team: this is a true way to make a page design individual. Then, let your imagination help you with the design, and maybe you will get something really special that no one else done before.
Users need to have a chance to choose. They should be able to pick the method of contacting you. Someone hates contact forms, even if there are just two small fields. Make your email clickable: probably there would be some people to prefer this way. If you have many branch offices in many cities, make sure you include a search box which visitors can use to find the location of the only office they need, not to scroll a long list of contacts.
A web form is one of the most significant Contact page ingredients. Before you design one, you should define the best appropriate position on the page for it. Firstly, it is better to be above the fold, and not vice versa like many sites do: map above the fold and contact form below. This position allows users not to scroll but type their message immediately. As for the position, a form with center alignment is better, because usually full width forms seem too complicated.
The amount of form fields can make your visitors go away from it at once. Too many fields may scare users, who have no time and especially desire to write a lot. The best solution is to include at least three fields: name, email, and message. By the way, the empty field for client’s message should be included, instead of those forms with many options a user has to choose among.
It is also a great design technique to highlight the current field with another color, a bold or dotted line. This shows which field is active right now.
Contact form is a part of Contact page, but not obligatory it to be just there. You can design a form popup that appears on any other pages. If a user is reading the ‘About Us’ page and has already decided to collaborate with you, he won’t need to go for Contacts to get in touch with you. One more option is possible: sidebar sliding contact form. It is a bit more functional and practical that a popup, so far as the popup disappears after users push the cross button (if accidentally). Sidebar sliding form can be activated any time with just one simple button.
Contact form and email address are oriented on different audience. While some people want their message be more anonymous, or they don’t want to go to another window, open their email client or so; others feel better if sent a direct message from their email. Therefore, they have a copy of the message, which they can use again or make it a proof of that they contacted the website owner. So far, as you can’t predict what a particular user will pick, you should have these both options on your web page. The email address is better to be clickable, as it will save users’ time and don’t require any additional actions from them.
Telephone number is a step towards confidential relations between you and your visitors. By giving these contact details to them, you show more thrust and your desire to negotiate.
Social media buttons and links can maximize your online exposure, and it is double success if they work together with your website. It is more and more often seen how web designers incorporate follow buttons on a Contact page. Some time ago, this kind of elements were put in the Footer or somewhere on the homepage only, but what stops you to have Twitter, Facebook, Google+ or Pinterest links in more than one place? Users will go for contact information on your Contact page and surprisingly they will find one more way to reach you: social networks.
The design of social media buttons must be smart: not too provocative, but enough eye-catching. They should be pretty big in size, yet we don’t mean to give a half of your web page to these links. The most suitable position is somewhere at the bottom, or in the Header, so not to mess up all information you have.
Interactive map is good investment to a Contact web page. It makes your website more up-to-date if to say so, and of course it is a crucial element of the user-centered design. User must be your major interest, and you should understand that users will be pleased with a functional and interactive map on your site. You show your location, this is the first, and you also make it easier for users to find the right route to get to your office. They won’t need to go for Google maps, any other service/app, GPS, they will do everything in one browser window.
The contact form andmap are well-suited features for any website kind, though there are some peculiar things that just some websites can include. The restaurant businesses having a website, can include the happy hours on their Contact pages, while schools or gyms can mention their opening hours. You know your audience better and you definitely know what your potential customer wants to find on the Contact page.
You are obliged to inform users that their message was sent successfully, otherwise they would be confused and can submit a few messages to be sure they succeeded. A simple phrase like ‘Your message was sent successfully’ will be enough. Still, creativity is not forbidden. The confirmation message can contain the information about the respondent or the approximate time of response.
We want to share some secret rules for making buttons perfect with you.
Come on! Do you still have these annoying captchas on your website? It is interesting to know why you need it. Some time ago, it was thought that captcha is a proof of spam defense. The situation has changed and now it is almost the same easy to get to the spammer’s list with an open email address and having captchas to confirm that user is a human. And be honest, have you really got a lot of spam before you use captcha?
Finally, you have made the best Contact page design ever (using our tips, we hope so), but now you need visitors to find it easy and quickly. Here are two placements for a contact page link.
Contact page is a separate web page on your site, and so it deserves to be featured on the primary navigation bar. A common thing is to make Contact menu tab the last on the bar, but it doesn’t matter a lot. Still, there is something to matter: if you have a navigation menu with submenu tabs, the Contact page shouldn’t be somewhere in the submenu.
Oftentimes Footer fulfills the function of the Contact page, i.e. it features the contact info, sometimes contact form and even a map. It is much better to have a separate Contact page with all-in-all features, and Footer can still have contacts but in short. In this case, Footer can become a home place for a link to the Contact page.
OK, you have the read the entire article, and now you need either to design a new Contact page, if you didn’t have it before, or redesign the old one. You have got enough instructions and tips here, but remember the most important: be creative, think about user, make forms simple, ensure that everything works perfectly and add individuality to your Contact page!
Pasadena Conservatory of Music
Samuel Docker Wedding Photographer
Nice tutorials, I’ve already seen some of them but anyway they are still stunning.A very smart approach to explain the things,like your step by step tutorial.Thanks for sharing…………..
You say absolutely right,Contact Page is More Important Than You Might Think..An excellent tutorial, very clear and a fantastic outcome, thank you very much.
I couldn’t refrain from commenting. Very well written!
Excellent article. I’m facing a few of these issues as well..
Nice article. Makes sense.
Hi,
Thanks for very descriptive post on importance of contact us page & how it can build so easily.
Sometimes people forget this small thing but yet important to add it on their blogs or website.
Thanks for sharing!
– Mayur Jadhav