Create a Contact page like the demo

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.

Go to Plugins >> Add New

Search for “WP Google Maps” and install it (this will add a new admin menu item)

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.

In the left side column admin menu, go to Contact >> Contact Forms >> Add New

Title your new form

At the top, there are a series of settings (tabs) that you will need to go through and add your own settings

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.

Using the batch of code you see further below, copy and paste it into the form editor

Click “Save“

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

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

Go to Pages >> Add New

Title your page and add some content for your page.

With the contact form shortcode you just copied, paste that below your content in the editor

Assign the “Right Column” template to this page.

Click “Publish” or “Update“

Let’s Add Our Map

Go to Appearance >> Widgets

Drag a Google Maps widget into the Page Right Sidebar position

On the drop down list, select your form you made

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.

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.

Go to Appearance >> Widgets

Drag a “Text Widget” into the “Page Right Sidebar” position

Title your widget, for example: Business Contact Information

Copy the code snippet you see below into the text widget

Update the information in the code to be your own

Show the widget on the contact page only using Display Widgets or Widget Visibility from Jetpack

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

Go to Appearance >> Widgets

Drag a text widget into the “Page Right Sidebar” position

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.

In the text widget area, we need to add some image HTML code like you see below:<img src="http://www.yourdomain.com/contact-banner.jpg" alt="short description" />

Set your widget to only show on the contact page if you are using Display Widgets or jetpack’s Widget Visibility.