How to setup a contact us page like the demo

This tutorial will help you create a Contact Us page just like the live demo site for Encounters Lite and the Pro version of Encounters. However, before we get started, you will need several plugins installed:

1. Contact Form 7 – Activation will add this to the left column admin menu group
2. Dynamic Widgets – Lets you publish widgets on select pages
3. Remove Widget Titles – Lets you disable a widget title by adding a ! in front of your title
4. WP Google Maps – Adds a google map to your page

Step 1 – Install the Plugins

1. Go to Plugins >> Add New
2. Search for Contact Form 7
3. Click Install and then Activate it
4. Repeat for the rest of the plugins

Step 2 – Setup Your Form Code

Now we need to create our form that the demo site has, but to make it easier, the code below is what you will copy and paste into the contact form.

1. Go to Contact
2. Click on Edit on the first form you see there (normally this will be a default starter form)
3. Further down the page are Mail Settings…fill these out.
4. In the Form field above, you will replace the existing code with the code you see below, and then you need to copy the shortcode after saving your new contact form:

<div class="en-contact">Your Name (required)<br />
[text* your-name class:en-textfield] </div>
<div class="en-contact">Your Email (required)<br />
[email* your-email class:en-textfield] </div>
<div class="en-contact">Subject<br />
[text your-subject class:en-textfield] </div>
<div class="en-contact">Your Message<br />
[textarea your-message class:en-textarea] </div>
<div class="en-contact">[submit "Submit Comment"]</div>

Step 2 – Create a Contact Page

1. Go to Pages >> Add New
2. Title your page anything you want
3. Switch to the Text view tab on your editor and paste the code below, and then replace the contact form shortcode with yours. Once done, Publish (or Update) your Contact page, and then add your contact page to the main menu.

<p>Welcome to the Encounters contact page. Ultimately everyone will have their own contact page in mind, but for the purpose of this demo website, I put together a sample contact page and form using basic HTML, inline columns, and a forms plugin. This form is not active, but is here to represent one of many layout possibilities available to you.</p><div class="row-fluid">
<div class="span5"><h4>Our Office</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus eros vitae est bibendum lobortis mattis nibh ornare. Fusce at eros dui.</p><p>Telephone: (555) 555-1234 <br />Fax: (555) 555-5678</p><h5>Address</h5>
<address>55555 Your Street,
Vancouver, British Columbia
Canada V5E 4M3</address>
</div>
<div class="span7"><h4>Contact Form</h4>
Error: Contact form not found.

</div></div>

Step 3 – Configure Your WP Google Map Plugin

1. Go to Maps in your admin left menu and click on Maps
2. Click on the Edit text link
   
3. Make your width as 100%, height as 350px, and map alignment as Center….click Save Map
   
4. After you saved your map, now go further down on the settings and set your marker in the Address field. This will be an address or location for yourself to display on the map. Once done, click Add Marker.
   
5. Now scroll up to the map and zoom into where your marker is until you are happy with the view. 
6. Click Save Map
7. Copy the Shortcode because you will need this in the next step.

Step 4 – Add Your Map to Your Contact Page

1. Go to Appearance >> Widgets
2. Drag a Text widget to the Showcase widget position, then title it, paste your Map shortcode into the text area.
3. At the bottom of this widget, click on the text link Static (or Dynamic)
   
4. Click on the “Set All Options to No” text link under the Quick Settings section
   
5. Then below, click on the Pages tab and select No to not show on all pages, then place a checkmark next to “Contact”  because we want it to show only on our contact page. 
   
6. Click Save