This tutorial will show you how to make a contact page when using the Contact Form 7 plugin for WordPress. Basic knowledge of WordPress administration is required when doing this, but this tutorial is for the demo site’s contact page:

screenshot demo of the Empt contact page

Install the Contact Form 7 Plugin

NOTE: Although this plugin is optional, this tutorial is for anyone who uses or decides to use 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.

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.

Create a Contact Form

Let’s start by creating a form for your page. We won’t take you through the setup of Contact Form 7, but what we can do is give you the code for the online 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 "Send"]</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 displayed. 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. With your new page created, you will also want to assign the Half & Half page template to it by going to Page Attributes and selecting it.
  6. Drop a shortcode block into your page and then paste the contact form shortcode that you copied earlier.
  7. Click the Publish button

Add a Photo

This is simply done by dragging an Image Widget into the Half Sidebar position.

  1. Go to Appearance > Widgets
  2. Drag an image widget into the Half Sidebar position and then upload your portrait photo into it
  3. Click the Publish button.