The contact page is of great importance, so its design needs to be given special attention. The more convenient the contact page is, the more opportunities open to the site owner. A contact page, if designed correctly, can very well impact conversion rates: if a user can easily contact a site manager or administrator, they will have a positive experience. The simpler the process, the fewer fields or forms the user needs to fill out, the better for conversion.

A good contact page can improve a website because it creates the conditions for a good relationship between visitors and the site owner. It doesn’t matter what kind of site it is, it could be an online store, news portal or web service - feedback is extremely important.

Despite this, many designers underestimate the importance of a properly designed contact page, focusing on the design of the main content pages.

It happens that a user needs to quickly contact the site owner or contact customer support. However, nothing works, even if you use the site search. Sometimes the necessary information is present on the site, but it is “hidden” because the designer did not take care of correct navigation and the user simply does not see the required link. The desperate user is ready to call the phone, but he cannot find it either.

Companies and web services that pay great attention to the design of contact pages act extremely carefully. Simply because this page does more than just contain contact information: it contains the information the user needs and is interactive. And, most importantly, a good contact page encourages the user to interact with the site again and again.

The contact page is a kind of platform for communication. If the site owner allows clients to express their opinions, then this is already an invitation to dialogue. Web developers and users can benefit from this collaboration and it is for this reason that it needs to be designed correctly.

As you know, functionality in design is one of the key factors. The contact page contains important information, however, there is not too much of it, which can sometimes lead to an erroneous assessment of functionality. The site owner thinks that if he placed the address on the page Email and a telephone, then this is quite enough. Sometimes he's right.

However, double checking for functionality can do more good than harm. Broken links or pages that are overloaded with information are all detrimental to engagement. The site owner may not receive an important message, but the worst thing will happen if he provides outdated or inaccurate information. When designing a contact page, you first need to think about the users, because after all, this page is created specifically for them.

Location

It is imperative to ensure that the contact page is always accessible to users. The appearance of the site, even with an exclusive design, means nothing if users cannot find the contact page. Sometimes you have to design quite complex contact forms, so you need to take care of the instructions in advance. It will be easier for users to contact the site owner if they have a step-by-step guide.

For a designer designing a website, it is important to remember two points:

• Primary navigation should always include contact page
• Users should find the contact page the first time they visit the site, no matter which internal page they land on

Based on the experience designers have accumulated, users tend to look for contact information on the right side of the page, so it makes sense to place the “Contact Us” link there. However, you need to remember that this information is of secondary importance for the user, so you should not make this section of the site too noticeable or intrusive. The link to the contact page located in the upper right corner of the page works best. And the worst thing is a link in a drop-down menu, since users may simply not notice it.

Simple contact forms

For commercial sites, the contact page is very important, this has already been discussed above. Although it may not be as beautiful as other pages on the site, it should be simple, user-friendly and understandable. If the information is not structured correctly, functions poorly or is misleading, then it is unlikely that the site owner will be able to build long-term relationships with his customers.

It often happens that a user who wants to leave a message leaves the site because he cannot fill out the contact form. Or he doesn't want to if it's too long or complicated. Today's users don't want to waste time filling out detailed forms, so it's worth thinking about simplifying them. The simpler the form, the better, also for the user experience, so you need to focus on collecting basic information.

Exact wording

If we talk about official websites, then on all pages, including the contact page, you need to adhere to clear and precise language about the benefits that the user will receive by becoming a client of the company. What is it for? Information cleared of all unnecessary is the most effective way to attract and retain attention. Nicely summarized data should be concise so that people can easily find what they need.

Also, do not forget about the visual component. And we’re not just talking about attractive contact form designs. If the company has a physical address, you can help users by placing a map on the contact page. For companies located in large cities, it is very important to explain to users how it will be more convenient for them to get to their office, store or warehouse.

Contact page responsiveness

For any online business, responsiveness is everything. This is a strict rule, no exceptions. Since the Internet is developing at a rapid pace, and more and more new devices are appearing on the market, this means that contact information must be available regardless of what browser or device a person is using. Today it is very easy to lose in the competition - all you have to do is not optimize your contact page for display on mobile devices.

Integral components

Which is better: an email address or a contact form? Users need simple ways connections with the providers of the services they need, so you need to meet them halfway. You can focus on communication via email or place a contact form - each method has its pros and cons.

Contact forms

• The contact form should not force users to go to another page
• The contact form is not intended to create account or login via email
• The form should have an autocomplete function if possible
• The contact form should have functionality for sending messages and notifications

Email

• Communication via email must be safe for the user
• It is advisable to save all sent data for future use.
• Work with received messages should be carried out systematically, you also need to take care backup data

Validation Form

Verification forms have great importance when you need to know more about site users. In addition, the validation process somehow guides the user in the right direction, since it can draw their attention to incorrectly entered data or blank fields. Thus, the verification form saves clients time, since at the end of the filling process the person will be firmly confident that his message will go to the correct address.

Phone numbers

Many companies do not list telephone numbers on their contact page because they are afraid that constant calls will interfere with the work process. However, as with the card, phone numbers on the contact page increase user trust in the brand; customers feel safe, believing that in a difficult situation they will be able to contact a company employee and discuss the problem. A telephone number reduces the distance between the site owner and the user; this applies to both traditional companies and online services that do not have a physical address.

Social media profiles

Social media buttons are increasingly found on contact pages. This approach can significantly enhance the capabilities of the site, especially if customer support is provided 24/7. Many people find it more convenient to connect with a company through a social network, so it’s worth thinking about this way of interacting with the user.

Designing a contact page

Really good contact pages indicate the high qualifications of the designers who designed them. And the most important part of the design is the visual style of the contact page. In the case of contact forms, this means large fields that make submitting data easier. If the form looks nice, it works better.

Before starting design, the designer should conduct a detailed study of all contact information provided by the client. All elements must be well organized, in addition, they must be harmoniously combined. You should also remember that the contact page should match the color scheme of the site so that the user clearly identifies both the site and the brand.

Conclusion

The contact page should always be visible. This applies not only to the main page, but also to all other pages of the site. When designing a contact page, you need to keep in mind that users will only be able to contact the site owner or support team in the way that they see on the “Contacts” tab. In this case, the key to success is convenience and simplicity. We need to give users what they want. If the user must enter his personal data on the site, then it is best to ask basic questions: first name, last name, email address. The contact form should not contain unnecessary fields. You also need to take care of the adaptability of the contact page - they should be displayed in any browser and on any device. If the contact page is designed correctly, the site's chances of success with users are greatly increased.

From the author: A good contact page is very important for maintaining a relationship with your visitors. Whether we're talking about e-commerce, magazines, personal websites, online services - users usually look for a contact page as the first means of communicating with you. Strangely, many web designers neglect the humble contact page, even considering it one of the least important aspects of a website. Let's fix this.

The Importance of a Good Contact Page

The contact page is often overlooked. How many websites have you visited wanting to get in touch to complain about a product or service, or ask a question? And how often have you had to struggle with a contact form?

A good contact page is beneficial to any type of business. She is able to increase customer satisfaction by helping solve their problems. It can also help improve your products and services by providing a clear avenue for valuable feedback.

When it comes to direct user feedback, other channels may be limited. Television, radio, magazines, newspapers... they are all forms of one-way communication. Online communication should be a two-way street; dialogue between business and visitor. Both parties benefit from this, which is why a good contact page is so important.

Location

First step: where to place your contact information. There's no point in having the best contact page in the world if your visitors can't find it. You can help them if you adhere to some design traditions.

In general, contact information can be found in two places:

Main navigation– an ideal place to link to the contact page. Visitors typically look for the contact page on the right because it appears to be a secondary element. Therefore, you will simply see a link to the contact page as one of the last elements of the site's navigation.

We can also look at the smaller sub-navigation in the top right corner of the screen. This is also a valuable position for a contact page. By the way, it is better to avoid placing the contact page in the drop-down menu, as it is easy to miss there.

footer is also a popular place for contact information. It may contain a link to a contact page:

...or the most important contact information:

It's difficult to predict the flow of traffic to your contact page, so placing links in at least two of the mentioned places will give you good insurance.

The most important thing in the contact page

Now you have peace of mind that your visitors will be able to find their way to the contact page, it's time to think about the actual content. Let's start with the basics and consider the information that should be presented.

Email/contact form

An email address is the easiest way to communicate online in business. Alternatively, you can use a contact form that sends an email. Using a form you get more control over the content (required fields) and this way you can prevent spam. We will talk about contact forms in this article below.

Address

A business with a brick-and-mortar store should not forget to mention its address. If you have many stores, it is best to create an individual page for each one. Fill it out with specific contact information for that store, opening hours, directions, etc. Not only is this useful for visitors, but it can also help your site in local searches.

Telephone

Displaying a phone number creates a sense of trust. This is often seen as a sign of a real company, and really helps online retailers.

Many websites have started adding social media buttons to their contact page. While this may not benefit all sites, it has added value for some visitors. Especially since more and more companies offer customer support via Twitter (sometimes even 24/7).

Additionally

There is no one-size-fits-all solution to a good contact page. Any website or business requires certain elements that may be unnecessary on other sites.

There is a lot of additional information or properties that you will find useful on the contact page. For traditional stores, it's a good idea to mention, say, opening hours. Large companies could use a link to their Live Chat, and e-commerce sites could build user trust by displaying their VAT number.

Convenient information

Ease of use of information will protect your visitors from disappointment with the contact page.
Instead of images, include your information as HTML text. HTML text can be copied and pasted, making it easier for the visitor to save your contact details.

The email address must use the mailto link. This gives the visitor the opportunity to click on it and send a message without having to copy the shipping address and open mail client. A problem with this technique, however, can be spambots that collect email addresses associated with the mailto: link. So you might decide to confuse them first by using a service like mailtoencoder.com.

Side note: Phone numbers should also be clickable. Last year we posted a little tip on how to make a phone number click sensitive. Thanks to a small piece of code, smartphones recognize phone numbers and make it possible to call them. This is really convenient for mobile users.

Businesses that rely heavily on their brick-and-mortar stores often benefit greatly from an interactive map, allowing the user to quickly find their way to retail locations. Showing the store address is good, but adding interactive map better.

Thanks to Google Maps Inserting this useful property couldn't be easier. Simply enter your address into Google Maps and click on the link icon in the sidebar. There is an embed code for you there.

Did you know that you can adapt the map to suit you? You can edit map colors, add custom map markers, and create a legend. You can read more about this at developers.google.com. You might also consider using alternative services, such as the rather attractive Mapbox.

Don't forget about search engine optimization

As a visitor, you will instantly recognize the address on the contact page. Search engines however, a little help is required in recognizing the various elements.

Contact forms

Most websites use a contact form on their page. However, some forms are unnecessarily complicated and user-unfriendly.

No matter how simple a contact form may seem, it is actually a combination of several components. They all need to work together to ensure the best possible user experience.

Input fields

Input fields such as text fields, option selection buttons (radio buttons), checkboxes, etc., allow the user to enter the necessary information.

Website visitors are more likely to fill out short forms because they require less effort. The number of input fields is a balancing act between user experience and business needs. Hubspot analyzed over 40,000 forms and looked at the effect of increasing the number of input fields. Their research suggests that you should use as few form fields as possible and be especially careful with complex text areas and drop-down lists.

Help your visitors fill out the fields with the correct format. Telephone numbers and dates can be a pitfall, especially for international visitors. The HTML5 placeholder attribute will help you.

Next, make sure to select the required fields (they are traditionally marked with an asterisk *). It is safest to clearly indicate the required and optional fields.
Finally, it's useful to highlight the active field. It can be indicated barely or very brightly - as you wish.

Below is an example of a contact form from Jim Nielsen's tutorial. It uses a red star for required fields, gives advice on formats, and highlights the active field.

Form Validation

Internal validation can also prevent some contact form diseases. Having to submit and resubmit a form because you entered incorrect data or data in the wrong format is very annoying. As mentioned here, it is best to assist visitors by showing the required format (eg date, phone number...).

Buttons

There is no contact form without a submit button. It should be at the very end. For button text, use “send message” instead of “submit” to remind customers what they are doing.
The usual standard from last year is to include a "reset" or "clear form" button. Do not do that. It will be accidentally clicked. There's nothing worse than typing out a thoughtful, detailed message and having it lost because of the reset button.

Response

The visitor entered his contact information, wrote a message and clicked the “send” button. Now what? Did the message arrive or not?

Reassure your visitors that the message was sent successfully by displaying a corresponding message. A confirmation email is also a good idea.

The same advice applies to mistakes. Showing an error when a message fails to be sent is a necessity that can prevent many future disputes. The error message should be friendly, so avoid showing alarming error codes.

Contact page design

There are many applications to the design of a contact page. technical requirements, but let's not forget one of the most important moments: visual styles.

If you use a contact form, make the fields large, friendly, and inviting to fill out. White space and padding will serve you well.

Website visitors follow an F-shaped pattern when viewing a web page, so keep this in mind when creating your markup. For contact forms, it is best to arrange all the fields vertically instead of placing them next to each other. This reduces the number of necessary eye movements of the visitor when filling out the form.

The contact page should be consistent with the visual features of the site. Consistency is the key to excellence. For example, look at this contact page designed to look like a postcard.

And, as with most web design related tasks; creativity pays off big time. Neil Patel created his contact page as an infographic, tripling the number of contact requests.

Examples of contact forms

Speaking of good contact forms, let's look at these examples for inspiration (click on the image to visit the corresponding site):

Conclusion

Before you design your contact page, make sure your visitors can find it. Link to it from your main navigation or footer. Remember that most people look for contact information on the right side of the screen.

Consider what information you need to include. The ability to send a message via email or contact form is essential. An address and telephone number may also be helpful. Additional Information, such as links to profiles in in social networks and opening hours for some types of business are also needed.

Interactivity is important. Apply the mailto attribute for email addresses and the tel: attribute for telephone numbers(very useful for visitors from mobile devices). You can insert an interactive map such as Google Maps, but consider the performance implications.

Contact form usability can make or break a contact page. Ask for only the most necessary information. You can avoid headaches by showing the correct format of input fields and using internal validation. Don't forget to display the successful submission of messages when submitting the form.

Is your website already optimized for mobile devices? If not yet, it's not the end of the world. Modern browsers contain innovations such as pinch zoom and automatic adjustment font size.

If you don't have the time or money to optimize your site for mobile, here are ten simple things you can do right now to make your site look decent to mobile visitors.

1. Set the correct form field attributes

If you use input fields for username or address on your site, turn off autocorrect and turn on autocapitalize :

Your name:

If you do not do this, the T9 automated input system will replace names, for example, “Erwan”, with something like “Erevan”.

Setting automatic use of first capital letters in words types will free users from the need to include capitalization of letters each time - that is, each word will begin with a capital letter (for example, “Ken burns” will become “Ken Burns”):

Think about all the pitfalls that a user might encounter on your site.

And without going far from the topic. If your site requests an email from the user, use the email field so that the visitor does not have to enter the @ symbol from the keyboard of a mobile device:

Your email:

2. Set the appropriate width for mobile devices

Open your website in your computer's browser and reduce the width of the program window until you can't read anything in it.

This will be the minimum allowable width. Take the current width value and set it to the @viewport property by setting a meta tag in the page's head:

Next time your site is open on mobile device, the width you specify will be automatically set. The site visitor will not have to use Zoom:

This picture shows the extra space on the right:

And this picture shows the correctly set width value.

If your site is built on a fluid layout and works with all screen sizes, your task becomes even easier. You need to experiment with the width at which the site looks nice and readable on a mobile device, and set this value in the meta tag.

3. Set the width of the images to 100%

Now that your site has a certain width, some images will become very wide. This has not happened before, because the resolutions of desktop monitors are quite wide and most images fit in width:

To avoid this, set the maximum width of your images to 100%. This way, images will automatically resize in cases where they are too large for the mobile device screen. Add the code below to your site's CSS styles:

img (max-width: 100%)

If you are using images as backgrounds other than using an img tag, simply set the CSS background-size property to contain . This will cause the background image to resize when the screen resolution is not enough to display it at 100% scale:

Header ( background: url(header.png) 50% no-repeat; background-size: contain )

If you are worried that the image will become less clear, then you are worried in vain. This will not happen on modern mobile devices.

When a visitor uses magnification, the browser takes advantage of an increase in image clarity. However, make sure that your site does not have the user-scalable=no property in the meta tag. If this is not the case, the user will not be able to use zoom:

4. Set the width of the input fields to 100%

Once the width of the images is set via the max-width property, do a similar trick with the input fields. Just add to your site's CSS file:

input, textarea ( max-width:100% )

When viewing the site on a mobile device, this option will prevent input fields from extending off the screen.

5. Be careful when using Disable for form submission confirmation buttons

To avoid multiple clicks on the form submission confirmation button, you should make submit inactive after the first click on it.

Unlike desktop devices, mobile devices often lose connection to the network. If you make a button inactive, the user will not be able to click it again. And in this situation, keep in mind that the cause of such a situation may not only be the loss of the network.

During incoming call The mobile device browser will close. And then the situation with the blocked confirmation button will repeat. The user will not be able to submit an already completed form.

And if you still decide to deactivate the submit button, do it for a few seconds.

6. Use word-wrap on long lines

Sometimes it is necessary to display long strings such as code examples, links, bank account numbers. If your site turns out to be narrow in order to show the entire line, it may “go” beyond the mobile device screen:

Avoid this situation by using the word-wrap property. This will wrap when the line reaches the edge of the screen. The user will see everything he needs without scrolling:

Your password: 435143a1b5fc8bb70a3aa9b10f6673a8

7. Be careful using spaces

A common practice when displaying long strings is to use spaces every five characters. This will make it more convenient for the user to remember them for entering into another application.

However, a smart user will not do this manually. He will use the clipboard. However, in the case of spaces, he will have to remove them. How convenient and fast is it to remove spaces on a mobile device?

To avoid such situations, use indents instead of spaces between groups of characters:

Your code: 435143a1b5fc8bb

As you can see, the “spaces” between characters remain, but with the difference that when copying and pasting there is no need to delete anything. At the very least, it is convenient and saves time!

8. Benefits of media queries

You can create custom styles that will only work when viewing the site on mobile devices (or displayed in a small browser window), while the normal version of the web page will work on a desktop computer. To do this, use target styles inside media queries as in the example below:

Now you know another trick that will help your website look better on a mobile device.

9. Avoid fixed positioning

If your site's header or sidebar is positioned in a fixed manner, the CSS position property is set to fixed . Be careful.

When you markup like this, your title will grow with the page and possibly take up the entire screen space:

The simplest solution is to not use fixed element positions for display on mobile devices.

The example below, using the media query method, will show how to implement this:

10. Use standard fonts

Using custom fonts gives a site the appearance of a professional product, but users have to download font files. This is done before the site is displayed on the device.

As a rule, the volume of such files is quite large. On a mobile device, this process can take a long time. At this time, we see blank space on the screen instead of text.