build a contact page on WordPress

Your contact page is one of the most basic elements of your WordPress site. And while it might be tempting to simply throw together a quick solution, not taking the time to build a contact page carefully can be a mistake, especially for B2B websites where 44% of respondents [1] said they would leave a vendor website that lacks contact information.

No matter what type of site you’re running, you’ll want visitors, readers, and/or customers to be able to get in touch. A well-designed contact page with features such as a dedicated contact form gives you the best chance at encouraging these communications. Plus, creating an effective contact page isn’t difficult and can be done in less than an hour.

👉 In this post, we’ll discuss the importance of contact pages, explain their key elements, and show you some inspirational examples. Then we’ll explain how to build a contact page in WordPress. Let’s talk! 💬

Why you need a contact page

A contact page on HubSpot.
HubSpot’s contact page offers various channels for communication.

In some cases, the need for a contact page on your WordPress website is pretty obvious…

If you’re running a business website or a portfolio, for example, you’ll need to provide a way for potential employers and employees, collaborators, and more to get in touch. Similarly, if you’re running an e-commerce store, customers will want to contact you with questions and concerns.

Ultimately, though, a contact page is vital for all websites, even those where it may seem less important.

Many blog owners feel like they don’t need one, but this leads to missing out on opportunities. When you have a dedicated contact page on your blog, readers can write in with questions and topic suggestions, guest writers and collaborators can get in touch, and so on.

The key elements of an effective contact page

Now that you understand why it’s vital to pay close attention to your contact page, let’s talk about what it should contain. In general, you’ll want to include:

  • Various contact details, such as an email address, phone number, and physical address. The more channels you provide, the more likely you are to solicit communications. For 100% digital blogs, you can probably get away without a physical address, though.
  • A contact form. It’s easier for both you and your visitors to include a dedicated contact form, so they can send you a message without leaving the site.
  • Social media links. Many people now prefer social media to more traditional forms of communication. In fact, 59% of surveyed Americans who have social media accounts “agree that customer service via social media has made it easier to get questions and concerns resolved” [2].
  • A map and/or directions. If your company has a physical location, a map or comprehensive directions is more friendly and helpful than a simple address.

To see these elements in action, check out Moz’s contact page [3]:

A contact page on Moz.

The background image makes the page look stylish, and the main support button is prominently placed. What’s more, there’s a convenient map to help visitors locate the business headquarters and useful navigation buttons in the sidebar.

And on a more personal note, here is our own contact page:

A contact page on Themeisle.

We provide links to documentation, FAQs, and general contact information. We also list various response times, so visitors know exactly how long they’ll need to wait to hear back from us.

How to build a contact page for your WordPress website (in 2 steps)

The above examples illustrate what your finished contact page might look like. Now, let’s move on to the fun part – learning how to build a contact page! 🤩

Step 1: Decide what elements to include

A contact page on PayPal.
PayPal offers a list of answers to common questions on their contact page [4], as well as support links.

As we’ve mentioned, the central elements of most contact pages include contact details, social media links, directions, and possibly a contact form. Each situation is unique, however, and you may require more or less information.

Before you build a contact page, therefore, think carefully about what it should include and consider both your goals and target audience. What do they want, and why will they be trying to contact you? The better you understand your visitors, the more accurately you’ll be able to predict their needs and provide information that will be helpful.

If you run a store with both physical and online locations, for example, your audience will probably want to get in touch both in person and over the internet. What’s more, a younger target audience might want to communicate via social media, while older folks may prefer a phone number. If you haven’t yet, take this time to thoroughly research the demographics you’re trying to reach.

Step 2: Use a solid design to enhance your contact page

Otter Blocks for contact forms

Once you have a plan, it’s time to actually build a contact page. Of course, the basic process is very simple. All you really need to do is create a dedicated page and add in all the details.

However, this results in a basic contact page that isn’t likely to be very interesting or compelling. Since this page is so important, you’ll want it to be well designed and comprehensive. Here are a few ways to do that:

  • Include images. 🖼️ People like to see who they’ll be talking to, if possible. Also, your contact page is a great place to incorporate some branding [5].
  • Take care with the placement of each element. 🗄️ Try putting the most important and commonly-used contact details at the top of the page, and make them prominent.
  • Use a contact form plugin. 🔌 A plugin such as Otter Blocks makes it simple to add customizable forms to your contact page. Be careful not to add too many fields, though, which can confuse users [6].

Is this difficult to do? Nope!

How to add a contact form to your contact page with Otter Blocks

First install and activate the plugin. Then, from inside the WordPress Block Editor, click the (+) sign to add a new block and choose Form -> Contact Form to add the contact form block to your page:

Otter Blocks helps you build a contact page on WordPress

To get a preview of what the raw contact form looks like in Otter, check out the official documentation. Keep in mind that you can customize it – hence why we wrote “raw”.

In addition to the contact form, Otter also comes equipped with lots of free additional block patterns, several of which are specifically designed for contact pages:

Contact form block patterns in Otter Blocks

To access the block patterns, click the (+) button on the top left of the Block Editor. It’ll open to Blocks by default. Simply click over to Patterns, and that will open up the menu you see in the screenshot above.

Accessing block patterns in the block editor in WordPress

Scroll through the various patterns, pick one you like, click to add it to your contact page, and then adjust it to your liking. It’s all very straightforward.

Conclusion 🧐

Contact pages seem simple, but they’re vital to building a dedicated audience for your website through communication. For this reason, it’s important to put some effort into creating a great contact page.

💡 If you need additional help, we also have a more in-depth post on how to add a contact form to WordPress.

Do you have any questions about how to build a contact page that’s effective? Ask away in the comments section below!

Free guide

4 Essential Steps to Speed Up
Your WordPress Website

Follow the simple steps in our 4-part mini series
and reduce your loading times by 50-80%. 🚀

Free Access

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!