Create a contact page like the demo site using Jetpack

There are many ways to create a contact page, but the one thing hey all have in common is that they use a plugin for the actual form that people fill out. Normally I used Contact Form 7 as the plugin, but since I am using Jetpack in the live demo site for Preferential, I decided to give this a try and created this tutorial based on Jetpack.

For a basic form, it’s very solid and we know it’s coded well because it’s from the developers over at Automattic (makers of WordPress).

Each contact form can easily be customized to fit your needs. When a user submits your contact form, the feedback will be filtered through Akismet (if it is active on your site) to make sure it’s not spam. Any legitimate feedback will then be emailed to you, and added to your feedback management area.

NOTE: Even though I am using Jetpack for this, you can still create this contact page and use any other contact form plugin such as Contact Form 7, Gravity Forms, or any other plugin to add to your page.

Activating the Contact Form

  1. Go to Jetpack >> Settings >> Contact Form
  2. Click to activate it
  3. If you have Akismet activated (the plugin) go to Jetpack >> Akismet >> enter in your API Key
  4. Save Changes

Create Your Contact Page

  1. Go to Pages >> Add New
  2. Title your page and add whatever content you want into the editor
  3. In your page editor, click where you want to add your contact form shortcode and click on the “Add Contact Form” button just above the editor
  4. Follow the instructions on the popup window and create your form, then click on Add this form to my Post
  5. Click Publish or Update for your contact page

Adding the Business Hours Widget

  1. Go to your theme download package folder and in the HTML Snippets folder, go into the “page-snippets” folder and open the “contact-page.txt” file
  2. Copy the code where you see “Company Hours Widget
  3. Go to Appearance >> Widgets >> and drag a text widget into the “Page Right Sidebar” position
  4. Title it as “Business Hours” and then in the content area, paste the copied snippet
  5. At the bottom of the widget, set where you want to publish your widget…to your contact page
  6. Click Save

Setup Your Map

  1. Go to Plugins >> Add New
  2. Search for “WP Google Maps” and click install and then activate it. You will see this get added to your admin menu group near the bottom.
  3. Go to Maps >> Maps >> Then open the map that is there which is a sample starter map.
  4. Set the Width to 100%
  5. Set the Height to whatever you want, but to begin, try 300px
  6. Click Save Map
  7. Scroll down to “Your Markers” and click the “edit” link. In the “Add a Basic Marker” just above, type in your address you want in the “Address/GPS” field
  8. Click Save Marker
  9. Using your mouse, adjust the map in the preview window above to position it and zoom in to how close you want it.
  10. Click Save Map when happy.
  11. Copy the Shortcode that you will see near the top of the page.
  12. Go to Appearance >> Widgets >> and drag a text widget into the Banner Wide position, then paste the shortcode there.
  13. Click Save

Screencast – Contact Form


Screencast – Map