How To Design A Usable Contact Page & Contact Form

A usable contact page is crucial for every website. It’s the only way for users to connect with a site owner to ask questions or share suggestions.

No doubt, every website needs a contact page. And most modern websites should have their own contact forms to make communication easier. The toughest part is designing a usable form that works for everyone.

In this post I’ll share some basic design tips for any and all contact pages. These tips are generally universal and easy to implement regardless of what type of site you have.

Keep Attention On The Form

Contact pages exist for one main reason: to let visitors contact you.

So it naturally follows that the main contact form should be easily accessible and clear as day. The contact page on WinningWP is an excellent example.

This is incredibly minimalist and designed plainly to blend with the overall site design. This form is front & center so users know exactly what it’s for.

Some websites add extra writing or directions for users. These paragraphs are definitely helpful, especially if you have stipulations or requests for users to send(or not send) in their messages.

But I’m also a fan of simplicity because it reduces all distractions.

InVision’s contact form has a similar design centered right in the middle of the page. However this form appears on the company page so it’s not meant to be the primary focal point.

A lot of site combine their contact form into other pages using jump links. This is totally fine as long as it makes sense contextually—like with “about us” pages.

But centered contact forms can have plenty of relevant info around them and still work well.

I mostly suggest keeping attention here if you have a super long form with tons of fields like the Phuse contact page.

With so many fields this massive form can be intimidating. Placing the focus squarely on the form is the best way to keep engagement rates high.

Iconography Clarifies Intent

You can always add custom graphics or icons into your contact form to improve performance.

Usually graphics enhance the experience by visually showing what each field does and how the form works overall.

The contact form on Vanila's site is one of my personal favorites. The loading animation is exquisite and the icon styles perfectly match with the design.

Vanila also uses a single page layout so this contact form is embedded onto their homepage. It’s a clean example of what you can do with icons and a few simple input fields.

If you wanna get wacky adding tons of graphics you can do that too. Anything that fits with your site’s branding can generally work well.

Most form icons should be simple and monotone. Outline icons tend to work best, although you should feel free to sample a bunch and see what you like.

Give The User Alternatives

Every contact page should have a built-in email form. That’s a given.

But what if the user doesn’t want to use this form? They may prefer to send emails directly in their email client to keep the message in their sent folder. Or they might be looking to call the company, or maybe to learn where it’s located.

It’s a good idea to include more details about other methods for contacting the site owner. At a minimum I recommend adding a real email address in text so the user has the option to message the site directly.

The contact page on Evocreative includes a mailing address, a phone number, and the main email. It’s all located directly beside the contact form so it’s tough to miss.

Some websites may not feel comfortable giving away all this information. And if that’s you then don’t worry!

But if your site works directly with clients or sells to customers then it’s a good idea to provide a lot of opportunities for contacting the staff.

The Lighthouse Brewing Company goes above and beyond with their contact form.

This includes a real email address along with a physical address, phone number, social media links and hours of operation.

Everything needed to get in touch is right at your fingertips on this page.

I can’t say this will have a major impact on usability for the contact form. But I do think it’ll improve the user experience by offering as many contact methods as possible.

Tie It Together With Branding

Most websites have a unique theme connected by typography, colors, and branding.

You should apply this to your contact page and ideally to your contact form as well. This is likely to increase conversions and build trust with users.

If your site has a mascot or vector character then definitely add this into the page. You can see a fun example on OPResume which uses their fun-loving toucan all throughout the page.

Their website is overloaded with graphics in the header, footer, and throughout the content section. It’s a natural tie-in for their contact page too and this is one hell of a design.

Although I admit this might be too much for simpler sites that don’t have flashy branding assets. You could still try adding a small icon near the form or at least matching colors to your website.

The contact form on Intercom's site uses their basic blue colors along with a custom illustration. You could replicate something similar or even remove the illustration to just keep the basic design.

You can’t really go wrong if you stick to branding and keep it simple. The goal is to have your contact page blend into the site and build trust through familiarity.

Once a visitor knows they can trust a form they’ll be more willing to enter information and follow through to completion. This idea holds true for checkout pages, signup forms, and certainly contact forms.

The Wrap Up

Keep your contact pages simple and your forms even simpler. Use CSS and custom graphics to match your site branding, but always keep it relevant.

Ensure that a quality user experience comes first. And when possible try to offer alternatives for communication beyond email.

If you look around at sites similar to your own you can study their contact pages and reverse engineer their trends. But as long as your page has relevant contact details and the form is usable you can rest assured it’s a well-designed page.