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:
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>
- Go to Contact > Contact Forms
- You will see a default form named Contact Form Demo
- You will also see a shortcode displayed. Copy the shortcode and then go to Pages > Add New
- Name your page Contact Us (or whatever you decide) and add any content you want
- 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.
- Drop a shortcode block into your page and then paste the contact form shortcode that you copied earlier.
- Click the Publish button
Add a Photo
This is simply done by dragging an Image Widget into the Half Sidebar position.
- Go to Appearance > Widgets
- Drag an image widget into the Half Sidebar position and then upload your portrait photo into it
- Click the Publish button.