Create a Contact page like the demo site

If you like the way the live demo site shows a contact page, this tutorial will help you get the exact same look and functionality as the demo site shows.

Contact Demo

Create a Page

1. Go to Appearance >> Pages >> Add New
2. Title your page and write an intro to your contact page
3. Select the Default Template for the page which will give you a right sidebar
4. Click Publish (or Update)

Install Contact Form 7

1. Go to Plugins >> Add New
2. Type in “Contact Form 7” in the field
3. Click Install and Activate it (it gets added to the top part of your admin menu group as “Contact”
4. Go to Contact >> Contact Forms >> then open the sample form that is there
5. Go to the “Form Snippet” you see below and copy the code
6. Paste the code in the contact form 7 plugin and replace their sample form code with ours.
7. Go through the settings for your form, such as the email address and any other form settings you need. Refer to the plugin’s own documentation to help you out.
8. Click Save
9. Copy the shortcode that you will see. It will look something like this: 

   Error: Contact form not found.

   and then open the Contact page you made earlier and switch to the “Text” tab on the editor and paste the shortcode below your content area.
10. Click Update and view your page to see if the form shows up.

Form Snippet

<div class="cir-divider-space clearfix"></div> 
<div class="input-group"><div class="input-group-addon"><div class="icon-user"></div></div>[text* text-300 class:form-control]</div><br />
<div class="input-group"><div class="input-group-addon"><div class="icon-envelope"></div></div>[text* text-300 class:form-control]</div><br />
<div class="input-group"><div class="input-group-addon"><div class="icon-arrow-right3"></div></div>[text* text-300 class:form-control]</div><br />
[textarea* textarea-329 x6 class:form-control][submit class:btn class:btn-sm "Send"]

Setup Your Sidebar Widgets

1. Go to Appearance >> Widgets >> and drag a text widget into the Page Right Sidebar position
2. Title this widget as “Company Hours”
3. Copy the Company Hours snippet you see below into the widget.
4. Click Save
5. Drag another widget and then copy the Company Address snippet and paste it into the widget
6. Click Save

Company Hours Snippet

<p>Our current hours are listed below showing when we are available from Monday to Friday:</p><table class="table table-bordered">
<colgroup>
<col class="col-xs-1" style="background-color: #eee;">
<col class="col-xs-7"> </colgroup>
<tbody>
<tr>
<td><strong>Monday</strong></td>
<td>9am-5pm</td>
</tr>
<tr>
<td><strong>Tuesday</strong></td>
<td>9am-5pm</td>
</tr>
<tr>
<td><strong>Wednesday</strong></td>
<td>9am-5pm</td>
</tr>
<tr>
<td><strong>Thursday</strong></td>
<td>9am-5pm</td>
</tr>
<tr>
<td><strong>Friday</strong></td>
<td>9am-5pm</td>
</tr>
</tbody>
</table>

Company Address Snippet

<<address>
<p style="margin-bottom: 10px;">12345 Any Street, <br>Vancouver, British Columbia<br>Canada A5B 5C5</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>

Setup Your Map

1. Go to Plugins >> Add New
2. Search for “WP Google Maps” and click install and then activate it. You will see this get added to your admin menu group near the bottom.
3. Go to Maps >> Maps >> Then open the map that is there which is a sample starter map.
4. Set the Width to 100%
5. Set the Height to whatever you want, but to begin, try 300px
6. Click Save Map
7. Scroll down to “Your Markers” and click the “edit” link. In the “Add a Basic Marker” just above, type in your address you want in the “Address/GPS” field
8. Click Save Marker
9. Using your mouse, adjust the map in the preview window above to position it and zoom in to how close you want it.
10. Click Save Map when happy.
11. Copy the Shortcode that you will see near the top of the page.
12. Go to Appearance >> Widgets >> and drag a text widget into the Banner Wide position, then paste the shortcode there.
13. Click Save