Create a Contact page like the demo site

This tutorial will help you get a contact page just like the demo website. For the actual form part, I will base this tutorial on the Jetpack method that I used.

Contact Demo

Get a Form or Contact Plugin

How you create the actual contact form is going to be dependent on what you are using. The live demo is using the Contact feature from the Jetpack plugin, so making a form is extremely easy without touching any code. However, if you do not use Jetpack, you will need to consider one of the popular forms or contact plugins that are available. I would suggest Contact Form 7 because not only does it let you create a contact form, but you can create other types of forms as well.

Using Jetpack

  1. Go to Jetpack >> Settings
  2. Look down the list for “Contact Form” and as you mouseover it, the link “Activate” will show to the right. Click on it to enable this module.

Create a Page with Content Columns – Option 1

This option will let you create a page like the live demo where the address and contact form go into columns using a column snippet.

  1. Go to Pages >> Add New
  2. Title your page and add any content you want to have that will be above your actual contact form.
  3. From the page templates dropdown, select “Full Width Page”
  4. Save your page

Create the Two Column Layout

This method requires a content column snippet layout which I have done for you already. All you have to do is paste the code and replace the sample content with your own and to update the Jetpack contact shortcode to be your own.

In the original downloaded theme package, is a folder named “Snippets“. Inside that you will find a text file contact-form.txt which is where your code to copy from is found. Open that file and copy the code into your “Text” tab of your Contact page editor. Replace the sample content such as the address to be your own. Where you see this:

Replace this text with your contact form shortcode

That gets replaced with the Jetpack’s Contact form shortcode. *See the next step below.

Add Your Contact Form

  1. Highlight the text “Replace this text with your contact form shortcode” in your page.
  2. At the top of the editor is a button “Add Contact Form” which you will click on.
    insert jetpack contact form
  3. You can modify the form by removing a field or even adding one.
    contact form setup
  4. Switch to the “Email Notifications” tab and fill in the email address you want the form submissions to be sent. There is also a Subject field you can fill in if you want a standardized subject line when you receive the content.
    email notification contact
  5. Click “Save and go back to form builder
  6. When everything is ready, click on “Add this form to my Post“.
  7. Click “Update” or “Publish” on your contact page.

 

 Create a Contact Page without Content Columns – Option 2

The difference with this method is that instead of fussing around with HTML coded columns as option 1 above shows, this one could be easier for you because we will use the Left Sidebar template.

  1. Create your Contact page and add any content to it.
  2. For your page template, select the “Left Sidebar” template
  3. Create a new line below your page content so that we can insert our contact form shortcode.
  4. Follow the “Add Your Contact Form” tutorial above.

Adding the Address Information

  1. Go to Appearance >> Widgets
  2. Drag a text widget into the Page Left Sidebar position
  3. Title your Widget, something like “Company Information”
  4. Copy the Address snippet from the contact-form.txt file (or from the code below) and paste it into the text widget.
  5. Change the content to your own.
  6. To show this widget only on the Contact page, follow this tutorial: “How to Publish Widgets to select pages
  7. Click Save

<address><p style=”margin-bottom: 10px;”>
Your Company Name<br />
12345 Any Street,<br />
Vancouver, British Columbia<br />
Canada A5B 5C5<br />
</p></address>
<p style=”margin-bottom: 10px;”><strong>Phone:</strong> (555) 123-4567<br /> <strong>Mobile:</strong> (555) 890-1234<br /> <strong>Fax:</strong> (555) 987-6543</p>

 Adding a Map

Adding a Map requires a Google Map plugin such as “WP Google Maps”.

  1. Go to Plugins >> Add New
  2. Search for WP Google Maps (I recommend this one, but you can use your own if you prefer)
    google maps plugin
  3. Click on “Install” and then activate it.
  4. To setup your map, refer to their documentation.
  5. Once you have your map setup, you will need to copy the Shortcode for it.
  6. Go to Appearance >> Widgets
  7. Drag a Text Widget into the “Full Width Banner” position and title your widget as “!Contact Page Map”
    NOTEYou will notice an exclamation mark in front of the word Contact. See Remove Widget Title below…
  8. Paste your map shortcode into the text widget
  9. Click Save.

Remove Widget Title

The problem with WordPress and widgets is that they offer limited features, such as hiding the widget title from the front-end of your website. In this instance, we are using the banner sidebar position, so we do not want the title of our widget to show, only the map.

  1. Go to Plugins >> Add New
  2. Search for “Remove Widget Titles” 
    remove widget title
  3. Click on Install and activate the plugin.
  4. To hide titles, we put an exclamation mark !  in front of our widget title.