Make a Contact form like the live demo

To make a contact page like the demo, we will need a couple plugins. However, you are not obligated to use these if you have your own personal preferences, but you can still follow the basics of this tutorial if you choose to use something different.

  1. WP Google Maps - generate maps
  2. Contact Form 7 - a very popular forms plugin

Install Your Plugins

If you have not done so already, install your plugins, in our case, we will use the WP Google Maps and Contact Form 7 as our plugin choices.

  1. Go to Plugins >> Add New
  2. Search for “WP Google Maps” and install it (this will add a new admin menu item)
  3. Search for “Contact Form 7” and install it (this will add a new admin menu item)

Create Your Map

You can follow the documentation that is available for this plugin, by the developer, to create your first map. Depending on the features you need for your map, the free version of this plugin should suffice for you. The map parameters I used for size is:

  • Width = 100%
  • Height = 400px

Create Your Contact Form

You can make your form however you want, but for this tutorial, we will do it like the demo site displays.

  1. In the left side column admin menu, go to Contact >> Contact Forms >> Add New
  2. Title your new form
  3. At the top, there are a series of settings (tabs) that you will need to go through and add your own settings
  4. In the form editor, you will probably see some code already there. This is a default starter form that you can use, but we are going to create our own with a few minor adjustments, so highlight that code and delete it.
  5. Using the batch of code you see further below, copy and paste it into the form editor
  6. Click “Save“
  7. Once you save your form, you will notice it has a shortcode that is generated. You will want to highlight and “Copy” this shortcode because in a few moments will need it.

    You can also get this code when you first go to Contact >> Contact Forms
<div class="contact-form"> <div class="form-group"> <label for="namefield">Your Name</label> [text* name placeholder "Name"] </div> <div class="form-group"> <label for="emailfield">Your Email</label> [email* email placeholder "Email"] </div> <div class="form-group"> <label for="subjectfield">Subject</label> [text* Subject placeholder "subject"] </div> <div class="form-group"> <label for="messagefield">Your Message</label> [textarea* Message placeholder "Message"] </div> <div class="form-group"> [submit id:send "Send"] </div> </div>

The form code you see above has div containers wrapping each form label and its corresponding field. This puts each on into their own container and also includes custom styling for your form when you do this. So for any other form you make, you have the option to wrap each item in a div containing the class “form-group“.

Create a Contact Page

  1. Go to Pages >> Add New
  2. Title your page and add some content for your page.
  3. With the contact form shortcode you just copied, paste that below your content in the editor
  4. Assign the “Right Column” template to this page.
  5. Click “Publish” or “Update“

Let’s Add Our Map

  1. Go to Appearance >> Widgets
  2. Drag a Google Maps widget into the Page Right Sidebar position
  3. On the drop down list, select your form you made
  4. If you have “Display Widgets” or you are using the “Widget Visibility” from Jetpack, you can set your widget to show only on the Contact page.
  5. Click “Save“

Let’s Add an Address Widget

This is a little bonus for you to add an address widget like the contact page shows on the live demo site. It contains two columns and uses an HTML definition list in each column.

  1. Go to Appearance >> Widgets
  2. Drag a “Text Widget” into the “Page Right Sidebar” position
  3. Title your widget, for example: Business Contact Information
  4. Copy the code snippet you see below into the text widget
  5. Update the information in the code to be your own
  6. Show the widget on the contact page only using Display Widgets or Widget Visibility from Jetpack
  7. Click “Save“
<div class="row"> <div class="col-md-6"> <h4 class="widgettitle">Contact Details</h4> <dl class="contact-business-info">
<dt>Email</dt> <dd class="contact-info-icon contact-info-email"><a href="mailto: EMAIL HERE">EMAIL HERE</a></dd>		
</dl> </div>
 <div class="col-md-6"> <h4 class="widgettitle">Work Hours</h4> <dl class="contact-business-info"><dt>Monday - Friday</dt> <dd>10:00 AM - 6:00 PM</dd>														<dt>Saturday</dt> <dd>Closed</dd><dt>Sunday</dt>
<dd>Closed</dd>	 </dl> </div> </div>

Adding a Page Banner

Fairly simple, all you do is prepare your image and upload it to your Media Library, but make sure when you upload it, you copy the File URL from the “edit” link after uploading…we will need this File URL in a moment. The image size I used for the demo is 2560×400 pixels (to accommodate larger screen resolutions).

  1. Go to Appearance >> Widgets
  2. Drag a text widget into the “Page Right Sidebar” position
  3. Title your widget with an ! (exclamation mark) in front of the title so that this hides the title from the front-end. You will need a plugin called “Remove Widget Titles” for this to work, otherwise your title will show.
  4. In the text widget area, we need to add some image HTML code like you see below:
    <img src="https://www.yourdomain.com/contact-banner.jpg" alt="short description" />
  5. Set your widget to only show on the contact page if you are using Display Widgets or jetpack’s Widget Visibility.
  6. Click “Save“