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
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 with creating a form for your page.
- First, open the
Contact > Contact Formsmenu link on your WordPress administration panel. You can manage multiple contact forms there.
- To help you with a starter form layout, here is the form code used in the demo that you can copy and paste. Please note that you will need to finish up with the form attributes (email address, name, etc):
<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>
- Just after installing the Contact Form 7 plugin, you’ll see a default form named “Contact form 1”, and a code like this example:
- Copy this code. Then, create a new page (
Pages > Add New) which we will use to insert the shortcode. You can add more content to your page if you wish. 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.
- If you want to add a page excerpt, an introduction just below the page title, then type one out in the “excerpt” field in the page editor.
- Click the “Publish” button for your page.
Add a Photo to Your Page
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.