Up-to-date content, great layout and easy navigation are some of the most important features you should have on your website. There is one more thing you should pay attention to, though. If a visitor has a question, they will look for a Contact page to get in touch with you. Whether they will stay on the site after that and whether they will order from you may well depend on their experience on that page.
Here are a few tips that will help you create a great Contact page:
Make it easy to find
It won’t really matter what you have on the Contact page of your website if visitors cannot find it. This is why, you should make sure that anybody who wants to contact you, can actually reach the page with ease.
A link to the Contact page is usually placed at the top (main menu or first-level submenu) or at the bottom of a website. This is where people will look if they want to find that page. Adding a link on the sides of the website or on some internal page will make it harder for your visitors to get in touch with you.
Do not give the page some witty name. You should stick to conventional names - use “Contact Us” or “Support”, for example. While site layouts and navigation menus have evolved through the years, the Contact page is one of the few things that have remained constant. People are very used to a handful of names for such a page and they will not appreciate a change.
Keep it simple
Any page on your website should have the same layout and the same branding as the rest of the site, including the Contact page. You should make sure that you do not add too much clutter to the page. Below, you will find more information about the things you should definitely have, but you should avoid adding irrelevant text, images, or anything else that is not related to a channel of communication you offer. Advertisements on the Contact page are a big no-no. Make sure that you have a functional and useful page.
Naturally, you should make sure that the Contact page on your site is responsive so that people can contact you on any device, if needed. Having irrelevant information on the page will only make it look bad on a mobile device.
Add an address and a map
People usually like to see a physical address on a Contact page. It gives them more confidence in the website they are browsing. Depending on the site, this could be an office or a restaurant location, a company registration address, etc. If you offer any goods or services, for example, it is more likely to make a sale online if people see that you have a physical office/shop, even if they cannot visit it. If they see only an email address or a phone number, but no physical address, they may have doubts about placing an order.
Of course, if you add an address, it is good to have an in-page map as well. It will make it easier for people to find you as they will not have to go to a third-party map platform, leaving your site. There are different ways to do that.
If you use our Website builder, it will feature a map on the contact page by default, displaying an address of your choice. Adding a map on another page or changing the address displayed on it is really easy.
If you want to add a Google map, you should follow the steps to create a Google Maps API key:
- Log in with your Google account at Google Cloud Platform Console
- Go to API Project -> New Project.
- On the left, select APIs and Services -> Credentials -> Create credentials -> API Key
Depending on the type of map you want to use (static, dynamic, Street view), you will have to pay between $2 and $7 per 1000 requests. This shouldn’t discourage you, though, as Google gives $200 per month to all its users for API access, which is more than enough for any small to medium-sized website.
You will find the complete code for adding a map to any page here: Adding a Google Map with a Marker to Your Website. The pricing depending on the map type is listed here: Pricing & Plans.
If you would like to see what the map looks like as you edit the code, you can use the JSFiddle online testing IDE.
Add multiple points of contact
A Contact page should indeed be a contact page i.e. it should allow the site visitors to contact you directly through the page and to see different communication channels. Some people may like talking on the phone, others may prefer to use a live chat. Limiting the contact options may have a negative impact on your website as people who do not see their preferred communication channel may go to another website. Vice versa, offering multiple ways to contact you can increase your conversion rates as happy customers tend to order more.
Add a live chat
There are different services that allow you to add a live chat to your website without installing any additional software. While you can use any of them, two of the more popular options are Tawk.to and Facebook Messenger.
To add a Tawk.to chat, you have to sign up on their website for free. You have to enter your site name and URL, and you will have the option to copy the Tawk.to widget code if you want to add the live chat to your site. Our Website builder, for example, comes with a Tawk.to module, so you just have to paste the code in it and the chat will appear on your site. Alternatively, if you use WordPress, OpenCart, Prestashop, WHMCS or Shopify, you will find a plugin download link for each one of these platforms on the same page.
To add Messenger to your site, log in to your Facebook account, select the Page in question and go to Settings -> Messaging. You will see an option “Add Messenger to your website”, so you just have to follow the steps. Select a language, add a domain, copy the code you need and paste it to your site, edit the chat Welcome message if needed, and you will be all set. To add Messenger in our Website Builder, you can add a Custom HTML module and paste the code in it. For WordPress, add the Facebook chat plugin. If you use a different platform like Wix or Shopify, you can follow the instructions listed here: Add Facebook chat plugin to your website.
Add a contact form
Some people avoid talking on the phone (especially if you do not have a local phone number), others may not be able to log in to their personal mailbox to send you a message. A contact form will allow people to get in touch with you while they are on your site. Here are a few things you should look for, but remember that you need a simple and effective form, not a fancy and useless one.
- Ask only for relevant information. You do not have to ask for an address or anything else apart from the name and the email address or the phone number of the site visitors if you have a contact form for general questions. The more information you ask for, the less likely it will be for people to use the form. This is especially true for people who visit your website on their smartphone/tablet, as it will be even harder for them to fill multiple boxes.
- Add a few categories of questions/issues. It will be much easier and less time consuming for people to select one or a few categories from drop-down menus instead of describing their whole issue/question. Be careful not to add too many options, though.
- Use a good Send button. While the usual “Submit” is standard for most forms, using something different may be more tempting for the site visitors and it may be more likely for them to contact you. A couple of good examples we have seen online are “Talk to a human” and “Ask the Support Team”.
- Show people how and when you will respond. This is something few sites do and it is something people will definitely appreciate. Telling people when you will respond and in what way, will increase their trust in you and will save you future queries from them in case that they have not received a reply after some time. Whether you will reply in a couple of hours or a couple of days, it is important to be honest and to write a realistic response time.
- Always display a Thank you message. There isn’t much to say here. People will appreciate the courtesy.
- Add an anti-bot system. You can add CAPTCHA, reCAPTCHA, hCaptcha or any similar solution that will prevent your contact form from being abused by spammers and automatic bots.
Present your team
Adding a picture of you and your team always pays off. Few contact pages have pictures, or have just stock photos, so using a real one will make your website stand out. You will show your human face and this is something people will definitely appreciate. Of course, the main point of the Contact page is to allow visitors to get in touch with you and not to replace your About page, so a small picture will suffice.
Add social media buttons
When people come across a website, they often look for social media buttons to see if the site owner/company is active and to check reviews. While there isn’t a standard where social buttons should be, you will often find a few small buttons on the bottom of a website and larger ones to multiple social media on the Contact page.
Links to FAQ
Having a well-structured and rich FAQ section can save you and your visitors a lot of time. If people can find the information they need right away, they will not need to contact you and you will not have to reply. There are different ways you can go about that depending on the contact form you have and your personal preference – a link to the FAQ page on your site, a few questions and answers below the contact form, or in-line search results that appear in the contact form subject box as people type their question.
How to add a contact form?
If you use our Website Builder, your website will feature a contact page by default. The page will include the company name, address and phone number you have entered during the site setup. You will also find a contact form that you can customize – select what fields to appear and whether they should be required, add radio buttons, drop-down menus, a calendar or an upload button, or add a verification code to make sure that automatic bots will not abuse the form. Below the form, you will see a map displaying the company address. If needed, you can change the address you have entered previously, and choose a different zoom level.
For WordPress, we recommend using the Contact form 7 plugin. There are lots of plugins in the WordPress repository, but this one is by far the most popular one. You can create multiple contact forms, selecting their fields and layout, and then add them to any page by copying a simple shortcode. You can read more about the form here: Contact Form 7 FAQ. Other popular plugins are WPForms and Ninja Forms.
If you use a different platform, you may or may not be able to add a contact form as easily as you can do it in our Website builder or in WordPress. Drupal, for example, comes with a built-in Contact module that you can use (Dashboard -> Extend -> Contact -> Configure), while Joomla allows you to install an extension through its dashboard (you can see the available extensions here: Joomla! Extensions Directory - Contact forms). Explore the settings of the application you have used to build your site to check for a similar option or for a way to add a contact extension/module.
For platforms that do not have such a functionality or a custom-made website, you can try to add a form manually. Here is a simple form you can use in a file called test.html, for example.
Add the following to an HTML or a PHP page:
<form action="mail.php" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<input type="submit" value="Send"><input type="reset" value="Reset">
</form> As you can see, the above code refers to a file called mail.php, so you should create one and add the following code to it:
<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "[email protected]";
$subject = "Website Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You! We will contact you shortly.";
?> 
You can quickly test the form if you upload the two files to your account, open your-domain-name/test.html and fill the form. You will receive an email to the email address you specify in mail.php.
You will find quite a lot of code examples online and some sites like w3schools.com allow you to preview what your code will do and how it will look.
In conclusion
The contact page of a website is important as it will allow people to get in touch with you if they have any questions about your products/services. This is why, you should not neglect it when you build the site. The page should be simple, but informative – we have listed some things you should have on it, but make sure you do not add clutter. You can your address, phone number, email address and a few frequently asked questions that can help your customers. Personalize the page by adding a photo to show people that they will contact a real person, not an automatic bot.
