A website isn’t a website without a home page, an about page, and a contact page. In this step we’re going to learn how to add a contact page to our website using the popular WordPress plugin Contact Form 7.
Adding a contact form to WordPress using Contact Form 7 Plugin
Navigate to the WordPress plugins page. WordPress Dashboard > Plugins. Click the “Add New” button.
Search for Contact Form 7.
Click the “Install Now” link for Contact Form 7.
Click “OK” on the confirmation pop-up.
Click the “Activate Plugin” link.
Click the “Settings” link for Contact Form 7.
Move your cursor over the contact form and click the “Edit” link.
I’m OK with the defaults for the form, so I don’t need to make any changes. Highlight and copy the shortcode for the contact form.
Next we need to create a “Contact” page for our site. From WordPress Dashboard > Pages > Add New.
Give your page a name then click the “Text” tab. Paste your Contact Form 7 shortcode in the page body.
Be sure to fill out your custom title tag and meta description for SEO purposes. Click “Publish” to make your Contact page live.
Next we need to add the contact page to our nav menu. Navigate to the WordPress Menus screen. From the WordPress Dashboard > Appearance > Menus. Check the box next to your contact page and click “Add to Menu”.
Click on the menu item and move it to your desired location. Click the “Save Menu” button.
Go to your homepage and click your browser refresh button. You will now see your Contact nav menu option. Click the Contact menu item in your nav bar to see your contact page.
Perfect, except we see the author byline and comments section. We don’t need these on our contact page. Let’s create a custom page template for our contact page so we can remove these options.
Navigate to the Thesis 2 Skin Editor > Home HTML page.
Click on “Home” and select the blue “Add New” Custom Templates button.
Name your Contact template then click the green “Create Template” button.
You will now be presented with an empty template for your contact page. Click the template name then click the “Copy from Template” drop-down and select “Page”. Click the green “Copy Template” button.
Click the “OK” button to confirm the copy.
Now we need to move the byline and comments section off of the template. Perform a shift-click and drag the elements shown in the picture below off of the page.
Your WP Loop should look something like the picture below.
Click the green “Save Template” button.
One last step. We need to change the Custom Template for our contact page to use our new contact template.
Navigate to your contact page. WordPress Dashboard > Pages > Contact. Click the “Edit” link to edit your page. Scroll down on the right side to the “Thesis Skin Custom Template” box. Click the drop-down and select your contact template. Click “Update” to save your changes to the page.
That’s it, we’re all done. You have now added a contact page to your Thesis 2 website using the Contact Form 7 plugin. Be sure to test your form to ensure you get the email when someone submits the form.