Designing A Usable Contact Page In WordPress: Tips & Trends

Every great website needs a contact page. You can set this up on a static HTML site or a CMS like WordPress which offers a lot of flexibility & tons of plugins.

The process of designing a contact page is fairly simple. You organize what information you want on the page and design the layout around that.

But how do you create a page that’s usable, accessible, and easy to manage through WordPress? Let’s dive into some common design trends and WP plugins to see what’s out there.

Clear Contact Instructions

This is something I find on a lot of contact pages but not always in enough detail.

People who land on your contact page often want very different things. If you can clearly explain how people should reach out and what types of emails you answer(or don’t answer) you’ll save yourself a lot of useless messages.

Write a couple paragraphs telling readers what you’re looking for. Do you accept guest posts? Are you open to sponsorships? Or maybe you have a different page for those kinds of requests? Are you usually quick to answer messages?

This might not seem like a design feature but it goes a long way towards increasing usability on the page.

The WP Kube contact page is a nice example that covers all the primary reasons people email the site.

These are commonly requests for writing, submitting ideas, or help with a WordPress setup. By clarifying intent on the page you save yourself time dealing with duplicate emails, and you save your visitor’s time so they don’t send emails that you won’t answer.

sitepoint contact

SitePoint has a similar contact page but it doesn’t have a built-in email form.

Instead this lists all the ways you can message the SitePoint team including a physical address for snail mail.

But they also encourage readers to check out their forums and their FAQ page to see if their questions have been answered. It’s good to create an FAQ page if you get a lot of similar questions and want to cut down on duplicate responses.

With free FAQ plugins you can even embed these widgets right into your contact page too.

Well-Blended Form Styles

Usability does include aesthetics and a strong sense of design. You want your contact form to look nice and fit into your site’s layout.

This is easier said than done because each website has its own unique style. But a well-designed contact form is more likely to encourage user engagement which means more messages from your userbase.

Make form textareas easy to read and change that horrible default monospaced font. Use plenty of line height and make the textarea large enough that people can type their messages and re-read them afterwards.

cre8 collective contact form

CRE8 Collective has a very nice contact page with minimalist elements.

These simple form inputs blend into the page well enough so they don’t stick out, yet they also don’t feel poorly crafted or thrown together haphazardly.

This page shows that blended form fields don’t need to be wacky. They just need to fit with the site and feel like a natural part of the layout.

vanila.io contact form

The single-page agency site for Vanila keeps their contact section towards the bottom of the page. It follows its own unique style so this contact area does jump off the page.

However you’ll notice these form elements blend perfectly into the darker page section.

Contrast helps define your webpage and these form inputs follow that contrast to breed familiarity with the page footer. Use familiar colors, fonts, and spacing on your contact page so it feels like one cohesive unit.

Add Extra Contact Data

You can find plenty of free WordPress plugins that let you add physical addresses, maps, and even related contact details like hours of operation for support(or store locations).

A usable contact page should include all the information you can possibly muster. If someone wants to contact your website or business they should have the option to pick whatever contact methods work best for them.

Here are a few ideas to get you thinking:

  • Contact form
  • Raw email address
  • Physical location(s)
  • Embedded maps
  • Phone number(s)
  • Social media links

Take a look at the Urban Influence contact page for one example.

urban influence contact page

This page features an entire section beside the form with extra text-based contact info. This includes a physical location, an email address, and a phone number.

Some visitors may really benefit from all this extra info while other visitors just wanna use the contact form and move on. Your job is to support everyone which is really the main idea behind usability & accessibility.

On the Brown’s Court Bakery contact page you’ll see an even simpler example. But this also includes hours of operation in case people want to visit in person but don’t know when they’re open.

browns court contact form

Larger corporations may have more alternate contact methods than digital businesses.

If a phone number or a section with operating hours doesn’t make sense then don’t add them.

It’s certainly helpful to include as many contact methods as possible. But you only want viable contact methods that visitors can actually follow through with.

sej contact page

On SEJ’s contact page you’ll notice a few combined techniques. They have a simple well-blended form along with instructions for different contact types(advertising vs. general inquiry).

But the page also splits contact methods into different columns. Visually this defines each column as a separate entity which tells the visitor to look over all the options carefully.

Find your own balance and see what works best for your current project.

Just be willing to try other adding links and contact methods too. This is a surefire way to improve connections beyond email.

Best Free WP Contact Plugins

If you’re launching a new contact page on your WordPress site then you’ll definitely want a few kick-ass plugins. There’s a lot to choose from although a staple for every contact page is the email form.

These are my top picks for free WP plugins you can try adding to your contact page. Everyone has their own preferences but out of these plugins you’re bound to find something you like.

CF7

contactform 7 plugin

Contact Form 7 is perhaps the most widely-used contact form plugin for WordPress. It is a fantastic choice for every single website and the admin panel is super easy to use.

By default it comes with one simple contact form and you can stylize this however you want. The settings page lets you change form inputs, field labels, requirements, and even edit the response template from your mail settings.

I often use CF7 for clients who aren’t super familiar with WordPress. It’s a trusted plugin that you can just set & forget so once it’s installed you’ll barely touch the thing.

Plus it supports multiple contact forms if you want a few different forms for different requests(ie. a main contact page & a guest writer’s page).

FS Contact Form

fs contact form plugin

Another popular choice is the Fast Secure Contact Form with Ajax-powered form submission.

My biggest gripe with this form is the boring default style. It comes with a usable form but it won’t blend nicely with most WP themes(by default).

This means you’ll need to spend some time customizing the form fields to get them looking nice. But once you do this plugin is fantastic and it works much like CF7 with the added bonus of instant Ajax message submission.

Each form comes with a CAPTCHA too which adds security and reduces spam without much setup. The default email template is also pretty nice with support for HTML characters in the message.

I’d say FS Contact Form is at least comparable to CF7. It has a more techie settings panel and an Ajax frontend but this plugin is just as powerful and quite a bit lighter.

Caldera Forms

caldera forms plugin

If your site has a lot of different forms beyond the contact page then you might try Caldera Forms. This free plugin works for any form so it can help you create a brilliant contact page along with other outreach pages.

I recommend this plugin for any WP websites that use a lot of custom forms. These might include signup pages, user story submission pages, and different contact form pages(advertising, guest writing, products/ecommerce or general contact).

You can find plenty of great form plugins out there but Caldera’s free option is magnificent. Certainly a nice way to go if you want more than just a contact plugin.

WP Google Maps

wp google maps plugin

One other WP plugin worth mentioning is the G Maps plugin designed for contact pages. This plugin is the best solution to embed a map anywhere on your site.

You can set different pin locations for your office(s) and even include links for driving directions.

Again not every contact page needs this type of embedded map and it won’t be valuable to every website. But it’s still a nice addition to the page if your company has a strong physical presence.

Moving Forward

If you run on WordPress then you have thousands of free plugins at your disposal. Many of these can help you craft a brilliant contact page, but it’s up to you to plan the design & structure.

I hope this guide offers enough tips to get you started on the right track. I’ve listed a few of my favorite plugins but you can find many others that work for every type of website.

And if you’re looking for more contact page inspiration check out these related galleries:

Jake is a writer & designer covering the latest tech on the web. He frequently writes about user experience and resources for building usable websites. Check out more work on his portfolio site and find his latest updates on Twitter @jakerocheleau.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.