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>
- Go to Contact > Contact Forms
- You will see a default form named Contact Form Demo
- You will also see a shortcode for this demo form. 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
- (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.
- (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.
- Click the Publish button for your page.