Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 62: How to add a contact form to WordPress

Thesis 2 Contact Form 7 Plugin

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.

WordPress Plugins Page

Search for Contact Form 7.

WordPress Contact Form 7

Click the “Install Now” link for Contact Form 7.

WordPress Plugin Contact Form 7

Click “OK” on the confirmation pop-up.

WordPress Plugin Confirmation

Click the “Activate Plugin” link.

Activate WordPress Contact Form 7 Plugin

Click the “Settings” link for Contact Form 7.

WordPress Contact Form 7 Settings

Move your cursor over the contact form and click the “Edit” link.

Edit Contact Form 7

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.

Contact Form 7 Shortcode

Next we need to create a “Contact” page for our site.  From WordPress Dashboard > Pages > Add New.

Create Contact Page in WordPress Thesis 2

Give your page a name then click the “Text” tab.  Paste your Contact Form 7 shortcode in the page body.

WordPress Page Text Tag

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”.

WordPress Menus Contact Page

Click on the menu item and move it to your desired location.  Click the “Save Menu” button.

WordPress Nav Menu Contact Page

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.

Contact Form 7 Page in Thesis 2

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.

Thesis 2 HTML Home Template

Click on “Home” and select the blue “Add New” Custom Templates button.

Thesis 2 HTML Add New Template

Name your Contact template then click the green “Create Template” button.

Contact Custom Template

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.

Contact Copy Page Template

Click the “OK” button to confirm the copy.

Copy Template Confirmation Popup

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.

Thesis 2 Contact Template

Your WP Loop should look something like the picture below.

Contact Form 7 Template

Click the green “Save Template” button.

Thesis 2 Save Template

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.

Thesis 2 Custom Template Contact

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.

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 3 comments… add one }
  • Alexander De Ridder May 7, 2013, 7:07 PM

    Thank you, useful tutorial!

  • Jan January 28, 2014, 1:15 PM

    Thanks. This made the whole process of adding the contact Form so much faster for me.

  • viinod February 4, 2015, 12:23 AM

    This contact form seems to much better and easy to install… ninja was the option i was trying so far.. thanks for post.
    Best Viinod
    http://www.arkadstv.com

Leave a Comment