Setup a Contact Page like the Preference Contact Page

This tutorial helps you to create a contact page lke the live demo site has:


Part 1 – Download the Plugin

IF you have not done so already, you will need to install the contact form 7 plugin (if you want to create the contact page like the demo), although not required.

  1. Go to Plugins >> Add New
  2. In the search field, type in: Contact Form 7
  3. Install and activate the plugin…this will put a new menu link in your admin area in the left sidebar

Part 2 – Create a Contact Page

  1. Go to Pages >> Add New
  2. Create the title of your contact page
  3. In the original download file, there is a folder named as “Extras” which contains two files:
    1. contact-form-page.txt (this is the page content)
    2. contact-form.txt (this is the actual form code used)
  4. Open the contact-form-page.txt then copy & paste the code into your page
  5. Click Publish (or Update)

Part 3 – Create Your Form

  1. Go to Contact in your left sidebar menu in your Admin dashboard
  2. Open the Contact Form 1 form that is there (unless it’s titled differently)
  3. In the form code editor window, copy & paste the code from the contact-form.txt file that was downloaded
  4. Set any other settings such as your email address, and anything else you want to include (each will be personal preferences)
  5. Click Save
  6. The shortcode that is displayed at the top of the “Contact” form admin area, copy that and then open your new “Contact” page you made earlier. In the “Text” editor view, look for this: 

    Error: Contact form not found.

    and then replace that by pasting the form shortcode you copied just before.
  7. Click Update if necessary.