Five strokes to teach you to design a top-notch "contact us" page

You tell me what it's like to be the top of his meow! Today this article, is to tell the students, this he meow called him Meow of the top! A good tutorial, worried that you do not poke in, out of this unwise, learn good >>>

Simplified Contact Form

Yummygum

Yummygum's contact page is very clean and simple, with only 3 boxes and a Submit button. The simple advantage is not to discourage tourists.

Large text appears concise and easy to read, convenient for viewers to quickly proofread information, thus a greater sense of satisfaction.

It's easy to create a dynamic contact form with today's web technology. There are usually 3-6 boxes for visitors to fill out their names, emails and personal information.

Most web visitors prefer this kind of contact list because they save time--no need to open their own mail client, copy email address. The current website contact form usually contains network security technology such as CAPTCHA, so the security is very strong.

All the elements of this form look very uniform and feel complete. It is also recommended that you use JavaScript to display hints and help to ensure that users know that their messages have been sent successfully.

Princeink

Complex a little table to see Prince Ink quote form site, the page is divided into 4 parts.

Remember, not every box has to be filled in. Only fields with asterisks are required. In most cases, visitors can identify the asterisk, but some visitors may not find it. If you are designing a larger contact form, highlight the required items. This simplifies the submission process and optimizes the user experience.

Aesthetics in the unity of the performance

The table should speak both uniformity and aesthetics. After all, tables are an important part of the site's appearance.

Underbelly

Underbelly is a design creative agency website, the contact page is very unique. Obviously, the contact form uses CSS style sheets and JavaScript. The input interface looks like a tabular form of a general official file. The design is unique and tidy, which makes people feel that sending emails has become a pleasure!

Dangerousrobot

The design of the dangerous Robot website is different from the previous one, and the contact form blends well with other elements through bright warm colors and vector patterns. The contact form basically takes the center mode, each box adds the icon, causes the recognition and the reading speed to be improved.

Add a Map callout

The location of a company often plays an important role in business dealings. Adding an embedded map will visualize the enterprise address. Google Maps has a custom embedded feature that allows developers to add full featured Google Maps to the contact page.

Bkwld

BKWLD's contact page, in addition to some basic mail/Phone information, added Mapbox dynamic map, the increase of interactivity.

Fortyonetwenty

You can also consider using a custom photo without JavaScript maps. On the Fortyonetwenty website contact page, use a world map, the blue dots above mark the global branch and staff distribution.

Since this photo is used as a background image, fusion is more natural. The map lets the content be located, does not appear to be distracting.

Add links to social networking sites

Add links to social networking sites on the contact page to give an enterprise a touch of personality. These links are available for visitors to contact the enterprise without or inappropriate to use the phone or mail, and can browse for more dynamic information about the enterprise. It is best to provide a different link on the same page, so that the viewer can decide which one to choose.

Tone

My favorite British creative institution is tone, whether it's a work or a collection site. Its contact page uses a full map and dynamic contact form to locate their office.

Scrolling down the mouse, you will find a long list of social media icons horizontally. These links include the company's various social accounts including Twitter,linkedin,instagram. The buttons are big and eye-catching, but not at the top of the page because mail, phone and address are the most important.

Positiveadvertising

The Positive advertising website's social account icon set is relatively small. This site is a single Web site. The social account icon is located below the phone number, e-mail address, and mailing address. The icon takes a uniform monochrome processing.

Show team members

This method uses less, but can increase the personality of the page. Personal site can be in the contact page plus my photos. Larger companies tend to transfer photos to the "Company Team" page, with individual photos and introductions for each important person.

Blueskyresumes

The "About Us" page of the Blue Sky resumes website contains an introduction to the team. Each employee has a separate page link.

"Contact Us" at the top of the page, note that along the left a fixed scroll block is not, the scroll block small button link to email, cell phone information, can also send a request quote. This website contact page is very vivid, refreshing.

Etsy

Etsy "Team" page. Each team member photo is linked to each profile page. This personalized design is great for both the customer and the company's third party vendor.

This team page is not directly linked to their contact page. This is a purposeful design choice, because the company has so many staff, enough to prop up a Web page. However, the page can be linked to the "about" page, the "News" page, which contains some e-mail contact information.

A team member list is not necessary, but can be a good addition at the right time.