Create a Contact us page like the demo site

This video in this series provides an overview of how to setup a “Contact” page just like the Encounters theme demo website. We will need a couple of plugins to achieve this, which are the Contact Form 7 plugin, and WP Google Maps. This is what we will be making: 

Contact Page

Covered in this video:

  • Introduction to the Contact Form 7 plugin.
  • Introduction to the WP Google Maps plugin.
  • Creating a contact page.
  • Creating our contact form.
  • Adding the form shortcode to our contact page.
  • Previewing our contact page.

Contact Form Code

To help you out, here is the demo site’s contact form code:

<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>