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.

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 your original downloaded theme package and in the HTML Snippets folder is a file called “contact-form.txt” that you will open. Look for the batch of code that is labeled as: Form Layout – Contact Form 7. Then copy the code that begins with:
   <div class="cir-divider-space clearfix"></div> 
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.

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. In the HTML Snippet file “contact-form.txt” file, copy the code under the label “Company Hours”
4. Click Save
5. Repeat steps 1-4 above for the other widget you need for the “Company Address”

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

Screencast Video – Setting Up the Contact

Screencast Video – Setting Up the Map