Best Trends for Contact Page Design

contact pageIn this modern era of web web design it’s never been easier to create a dynamic contact form. These typically consist of 3-6 fields asking for the sender’s name, return e-mail, and their message.

Most visitors would rather use a contact form because it saves time. They don’t need to open their e-mail client and compose a new message just to get in touch with a company. Nowadays website contact forms often include security measures like CAPTCHA fields so they’re even more trustworthy.

What really makes a contact form feel complete is a streamlined design. All of the elements should feel like one unified section of the page requesting information. Use helpful JavaScript tips and make sure that the user knows if their message has been sent successfully.

Yummygum’s contact page

yummygum website contact form design

Yummygum’s contact page is very clean and straightforward. It only has 3 individual fields and a big submit button. The simplicity makes this form appear less intimidating, but I also like how it’s designed to be larger with extra padding.

Larger text can be read easier and with more precision. This means a visitor can proofread their content a whole lot easier and with a greater sense of accomplishment.

 

Prince Ink quote form

prince ink quote contact form

For a more complicated design take a look at the Prince Ink quote form. The page is actually split into 4 sections, each relating to a different part of the project request.

Keep in mind that not every field needs to be filled out. Only the input fields with asterisks are required fields and everything else is optional. Most of the time this is implicitly understood but some visitors may not recognize the subtle indicators.

When designing a larger contact form be sure to design required fields more conspicuously. This technique will streamline the submission process and greatly improve the form’s user experience.

Uniform Design Traits

Let’s move on from a contact form’s uniformity into more aesthetic principles. After all, design is a big part of what makes a website look good. The contact page itself should feel like one big interconnected page with easily-digestible content. You might even tie it into the “about us” or “services” page.

Underbelly

underbelly design agency contact page

Underbelly is a creative agency with a fantastic contact page design. It should be obvious that their contact form has been heavily customized with CSS and some JavaScript. The input fields look more like boxes that you’d find when filling out an official document form.

You’ll notice that they do include a mailing address and some other info underneath the form. By placing the contact field front-and-center it becomes the primary choice for most visitors. Underbelly’s design is so clean and unique that it almost seems like fun to send an email!

Dangerous Robot

dangerous robot contact page design

For a slightly different example we can look at Dangerous Robot which uses a single page design. Their contact form blends with all the other sections of the page using bright colors and vector graphics.

Their contact form also seems to take center stage. The icons in each field represent the type of content which should be filled out. Visitors should be able to move through their message quickly without hiccups to slow down the process.

Mailing Directions & Local Maps

A company’s physical location often plays a major role in business dealings. Prospective clients may be interested to know where your headquarters are located. This address can also be used for mailing invoices, cheques, or anything else which needs to be delivered via postal services.

The addition of an embedded map adds more of a visual aspect to the address. Google Maps has a custom embed feature which allows developers to add fully-functioning maps onto the contact page.

BKWLD’s contact page

bkwld contact page map design

Take the example found on BKWLD’s contact page. They include some basic email/phone info along with a dynamic map using Mapbox. This is just one of many great examples to demonstrate how a live interactive map can be used to improve a contact page design.

FortyOneTwenty

4120 contact page design agency

But also consider the value of using a custom-built photograph instead of a JavaScript map. The example on FortyOneTwenty uses a world map with blue pins denoting their company’s various locations & employees.

Since this photo is used as a background image the design feels like it blends more naturally. The map takes a backseat to content and while it’s still visible, it doesn’t feel intrusive.

Links to Social Profiles

Social media has turned into a high-powered monorail racing forward into the 21st century. Even if you don’t use the Internet it’s highly likely that you’ve heard of Twitter, Facebook, and YouTube.

Social profiles add a touch of personality to the contact page. These profiles offer legitimate methods for people to contact a company when e-mail and phone are skipped or not preferred. It’s best to offer different contact methods on the same page and let the visitor decide.

Tone

british uk agency tone design

One of my favorite British creative agencies has to be Tone, both for their work and their portfolio website. The contact page uses a full map and location to their office along with a dynamic contact form.

But after scrolling down a bit you’ll also find a long horizontal block of social media icons. These link out to all of Tone’s various profiles including Twitter, LinkedIn, Google+, and Instagram. The buttons are large and very noticeable but they’re not smack-dab at the top of the page. E-mail, phone, and physical directions maintain priority.

Positive Advertising

If you’re looking for a smaller presence take a look at the contact section for Positive Advertising. Their site uses a single-page scrolling layout so everything is located together. The contact form is located at the very bottom with a phone number, email address, and mailing address.

positive advertising contact form page

Again you’ll notice that underneath these 3 methods of contact are some basic social media icons. The color scheme is much more subtle so the icons aren’t immediately conspicuous. Yet they still work and provide alternative methods of communication.

Showcase Team Members

Although this is a lesser-used feature it does add some personalization to the design. If you’re designing a personal portfolio then you might try adding a small headshot of yourself. Larger companies often break up photos onto team pages where each team member has a photo and a small biography.

Blue Sky Resumes

blue sky resume team page

The about page for Blue Sky Resumes includes a small section about their team. Each employee has their own bios along with links out to their own personal profiles. This is a rather unique page because it also includes contact details for the site itself.

While viewing the top of their contact page you’ll notice a fixed scrolling block along the left-hand side. Small buttons link out to information for e-mail, phone, and sending a request for quotation. Blue Sky Resumes has a very dynamic contact page which is a refreshing change of pace from other common designs.

Etsy team page

etsy team about us page

For another example take a look at the Etsy team page. Each team member photo links to their own page with a small bio about what they do and who they are. This type of personalization is great for both customers and 3rd party vendors working directly with the company.

However the Etsy team page does not link directly to their contact page. This is a purposeful design choice because there are so many people working for the company that an employee list deserves its own page. The page does link back to their About page along with the Press page with some e-mail contact info.

A team member listing is not vital to the contact page design, but it can be a nice addition when appropriate.

Closing

Most contact pages include very similar elements which are arranged using different design techniques. I certainly hope these trends give you something to think about when crafting your own unique contact page design. The most important aspect of any page is usability. As long as your design caters to the user experience then you’ll have no problem designing exquisite contact pages.

You may also like...

Read previous post:
jquery drag and drop
Best JQuery Drag and Drop Tools

Learn how to use jQuery, and the jQuery UI Draggable and Droppable plugins, to create drag-and-drop interfaces in your web...

Close