Contact Page [Kickstart Pro]

To set a page as the Contact Page using the special design style seen in the demo ( http://demo.leanthemes.co/contact) go to Pages from the WordPress menu and then either create a new page or edit the page you wish to nominate as the contact page.

Once on the edit screen of that page simply choose Contact from the Templates box on the right and click Save.

Contact Page: Map

To set the large background style Google Map you can see in the demo site follow the instructions below:

  1. Go to http://maps.google.com and enter the street address of your business
  2. Making sure that Google Maps has located your business correctly, click the gear (Settings) icon in the bottom right of the page and then Share and Embed map
  3. Now click the Embed map tab and Custom Size from the dropdown menu
  4. (We recommend dimensions of 2000 vs 565 pixels)
  5. Copy this code and now go to Appearance > Widgets in WordPress
  6. Drag and drop a Text widget to the Contact Page (Map) widget area and paste your iframe code in and click Save.
  7. Important: If you do not want the default info box to appear in the top left of your Google Map:
    1. once you've found your location in Google Maps - but before generating the iframe code - click the 'X' in the Google Maps search box and you will still get the map location without the info box.
    2. Now you can generate your iframe code.

Please note these instructions are for the 'new style' Google Maps that has been rolled out for most users. For 'old style' Google Maps, the process is very similar, you want to create an iframe with the same dimensions as above.

Contact Page: Box

Drag a Text widget into the Contact Page (Box) widget area. The following text / HTML is used on the demo site:

You can see that there are a number of classes (e.g. class=”email”) which displays the appropriate icon. There is also a class (class=”featured-link”) which creates the link box at the end of the box.

Contact Page: Lower Text & Form

To exactly copy the lower text and form from the  demo contact page:

  1. go to the page you've assigned as your Contact page in the WordPress editor;
  2. click the Text tab on the WYSIWYG editor (if not already selected);
  3. copy and paste the following code to get the two columns effect and then adjust as desired (just be careful not to delete the <div and </div> parts if you want to retain the two column effect):

Please note that in order for the form to display you must be using the Gravity Forms plugin and have a form with the same ID number created via the plugin itself.

If you're not using Gravity Forms you can replace the Gravity Forms shortcode, i.e...

[gravityform id=1 name=ContactForm title=false description=false]

...with a shortcode from any other WordPress form plugin you are using.

(When using an alternate form plugin, you may need to adjust how your form is styled (or hire a developer to help you) if you want it to look exactly the same as the demo, because each form plugin may output slightly different code and apply slightly different styles to the form itself).

Just want a regular Contact page with no map / contact box?

No problem, just create a Page as normal in WordPress and then embed your contact form of choice. There is no need to use the Contact Page Template unless you want the features shown in the demo: http://demo.leanthemes.co/contact