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?
- The first function of a Contact page is to get visitors interested. If they like what they see and it is easy to contact you, why won’t they make a call or fill a form?
- The second but probably the most important reason to build Contact page wisely is the collaboration facilitation. The ‘Contact Us’ section helps users to contact the webmaster and so the website owner so gets the information on his customers.
- Contact page is the last one that visitors see before they decide if they need your project. There are little chances that users will change their mind if your home page is brilliant but contact page has a so-so design. Still, it is better not to risk with it! If a user likes your website thanks to a perfect website design, the Contact page will just emphasize how cool you are.
- Contact page kills two birds with one stone: it helps to improve customers’ satisfaction of the website and the company, plus it helps to improve your product. How? – Very easy: people will leave their thoughts, suggestions, tips, recommendations via a contact form. So you can make an analysis of your website and understand how your audience sees it.
- This function follows out of the previous point: you can collect any information you need via a Contact form. It doesn’t mean just information on your project but on users too. You can get the name, email address, website URL, and something else very easy.
Contact Page Must Be:
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.
3. Written seductively
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.
Components of a Smart Contact Page
1. Contact form
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.
2. Email address
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.
3. Phone number
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.
4. Social media links
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.
5. Interactive map
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.
6. Specific details
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.
7. Confirmation message
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.
Something Important To Add
We want to share some secret rules for making buttons perfect with you.
- Exclude ‘Reset’ or ‘Clear’ button. The name you pick for this button does not make a big deal, because it should not appear on your Contact page with the contact form. This buttons usually is close to the Submit button, and users can push it accidentally. Imagine the frustration someone feels after he thought out a perfect message to contact you and delete it through inattentiveness. And, actually this button serves for nothing useful, why then to include it? If a user wants to delete the message, he can do it manually; or if he changed his mind to contact you, he will just leave the page.
- Think out the button text. Trivial ‘Submit’ button will surprise nobody. There are many variants to be more creative and make the button text: go, sent message, ready, etc.
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?
Ways toGet to the Contact Page
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.
1. Primary navigation
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.
What Should You Do Right Now?
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!
Learn From the Best – A Little Bit of Inspiration for You
Blue House Design
Pasadena Conservatory of Music
Photo Portfolio Template
Samuel Docker Wedding Photographer
Smart Cookie Design
PapúVerão Fashion Website
European EISA Awards
Pmode Web Agency
Arabella on Boossa
Visit us at InstantShift.com