Make a Contact form 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>youremail@gmail.com</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> 

</div></div>

The code below is the code you would enter into Contact Form 7. 

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.