Create a Custom Contact Page

This tutorial will show you how to make a contact page like the Clarified demo shows. For this contact page, we use the Contact Form 7 plugin for WordPress.

Install the Contact Form 7 Plugin

Before we can do anything, you will need a plugin called Contact Form 7 before we can continue. If you already have Contact Form 7 plugin installed, you can skip this step. But to install it, go to Plugins > Add New, and then type in the search, “Contact Form 7” into the field. Once it shows up in the results, click Install and Activate.

NOTE: Although this plugin is optional, this tutorial is for anyone who uses or decides to use the Contact Form 7 plugin.

Creating a Contact Form

Let’s start by creating a form for your page. To help you get started, here is the code we used for the live demo:

p>[text text-74 placeholder "Name"]</p>
<p>[email* email-635 placeholder "Email"]</p>
<p>[text text-75 placeholder "Subject"]</p>
<p>[textarea* textarea-173 placeholder "Message"]</p>
<p>[submit "Submit Form"]</p>

1. Go to Contact > Contact Forms
2. You will see a default form named Contact Form Demo
3. You will also see a shortcode for this demo form. Copy the shortcode and then go to Pages > Add New
4. Name your page Contact Us (or whatever you decide) and add any content you want
5. (Option 1) With the Classic Editor, assign the Half & Half page template to it by going to Page Attributes and selecting it. Then, navigate to Appearance > Widgets and drag a text widget into the Half Sidebar, then paste your form shortcode into it.
6. (Option 2) With the Block editor, we can ignore the Half & Half template and drop a column block into our page. In the first column, add your content. However, for the second column, drop a shortcode block and then paste the contact form shortcode into it.
7. Click the Publish button for your page.