Contact page setup (Video)

To setup the contact page is really simple, you just need to create a page and switch to visual composer. From there you can add any contact form you,ve created with contact form 7, a google map and much more.

This is the code I’m using for the contact form pages ( two pages ). Don’t forget to install first the Contact Form 7 plugin. It’s basically the Contact Form 7 standard code with some divs, paragraphs and css classes for styling and positioning the form on the page.

01 - ( copy the code below )
<div id="contact-form">
<h3 class="gmap-header">Leave us a message</h3>
<p>Name <span class="required">*</span><br>[text* name id:name]</p>
<p>Email <span class="required">*</span><br>[email* email id:email]</p>
<p class="cf-margin">Website<br>[text website id:website]</p>
<p class="cf-textarea">Message<br>[textarea message 55x10 id:message]</p>
<p class="cf-submit">[submit "Send Mail"]</p>
</div>
02 - ( copy the code below )
<div class="cleft">
<p>Name <span class="required">*</span><br>[text* your-name]</p>
<p>Email <span class="required">*</span><br>[email* your-email]</p>
<p>Subject<br>[text your-subject]</p>
</div>
<div class="cright">
<p>Message<br>[textarea your-message]</p>
<p>[submit "Send"]</p>
</div>

Tagged:

Rate This Article

(27 out of 106 people found this article helpful)