Make a contact page like the demo website

I won’t go into a lot of detail here because even though I used the Contact Form 7 plugin for the online demo, you may have a different plugin that you use. However, in reference to the theme’s demo contact page, I will make this very easy by giving you the source code I used to achieve the layout of the contact form, including the column layout with your form’s shortcode.

NOTE Please be aware that your shortcode might be a bit different from what you see in my code below:

<div class="contact-form-wrapper"> <div class="row"> <div class="col-md-3"> <h3>Get in Touch</h3> <p>Would you like to speak to one of our financial advisers over the phone? Just submit your details and we’ll be in touch shortly.</p> <p><strong>ADDRESS</strong>:<br />  555 Boardwalk, City, Province, Canada</p> <p><strong>PHONE</strong>:<br />  (1) 555-5555</p> <p><strong>EMAIL</strong>:<br /></p> </div> <div class="col-md-8 push-md-1"> <div class="contact-form-box"> <h3>Quick Request</h3> <p>Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p> <p>[contact-form-7 404 "Not Found"]</p> </div> </div> </div> </div>

The code below is the code you would enter into Contact Form 7, but please note that the actual form settings will depend on what you choose for your needs. 

IMPORTANT WordPress editors are notorious for adding unwanted paragraph tags and new lines which can make a mess of layouts. So the code you see below needs to be pasted into the field just like you see with no extra lines. Otherwise WordPress will add a new paragraph where you start a new line (unless you want that). 

<div class="row"><div class="col-md-6">[text name placeholder "Name"]<br>[email* email placeholder "Email"]<br>[text subject placeholder "Subject"]</div><div class="col-md-6">[textarea* message placeholder "Your Message"]<br>[submit "Send"]</div></div>

Contact Page Map

The map you see in the live demo on the “Contact” page is create using a plugin called “WP Google Maps” and is free. I won’t go into the creation of a map, as it’s best to follow their own setup tutorials. One thing I can tell you though is that this plugin comes with the option of using a shortcode in a text widget or you can use the widget that comes with the plugin. Simply drag the WP Google Maps widget into the “Banner no Overlay” sidebar position, and you are done!

NOTE I made my map 100% for width and 400px for height.


If You Choose the Second Contact Page Style

As it shows on the live demo, you have a second contact page style you can opt in for. To see this style of a contact form, you can check it out HERE.

<div class="contact-form-2-wrapper"> <div class="row"> <div class="col-md-4"> <h4>AVAILABLE HOURS</h4> <p><strong>Mon-Fri: 9 AM – 6 PM</strong> - <em>PST (UTC -8)</em><br />  <strong>Saturday: 9 AM – 4 PM</strong> - <em>PST (UTC -8)</em><br />  <strong>Sunday: Closed</strong></p> <h4>CONTACTS</h4> <p>Andre - Shaped Pixels<br />  Vancouver, British Columbia, Canada<br />  <a href="#">Twitter</a> – <a href="#">Facebook</a> – <a href="#">Google+</a></p> </div> <div class="col-md-8"> <div class="contact-form-box">[contact-form-7 404 "Not Found"]</div> </div></div></div>

Again, depending on your contact form needs, your fields and settings may be different.

[text name placeholder "Name"]<br>[email* email placeholder "Email"]<br>[text subject placeholder "Subject"][textarea* message placeholder "Your Message"]<br>[submit "Send"]