Contact Page Layout

The contact page of the Panoramic demo site was created with SiteOrigin’s free Page Builder plugin and the WPForms plugin. To achieve the same layout do the following:

  1. Install SiteOrigin’s free Page Builder plugin.
  2. Install the free WPForms plugin.
  3. Download the Page Builder layout file for this page which you will then be able to import.
  4. Edit your contact page and select the “Full Width” page template from the “Template” dropdown located down the right hand side of the page.
  5. Click the “Page Builder” tab that is displayed on the right of the WYSIWYG editor. This will put the editor into Page Builder mode.
  6. Once the editor is in Page Builder mode click the “Layouts” button at the top of the editor. This will show you a popup, click the “Import / Export” link on the left and click the “Select Import File” button. Browse to the “panoramic-contact-us.json” file that you downloaded and double click the file. Then click the “Insert” button at the bottom of the popup. A small menu will appear, click “Replace Current” (this will replace all the current content in the editor) and then click once more to confirm.
  7. To create your contact form navigate to WPForms > Add New. If you are using the Premium version of the plugin you will be able to select from a list of pre-built form templates.
  8. Once you have created your contact form click the “Embed” button and copy the shortcode for your form. You will then need to edit the contact page layout and replace the WPForms shortcode that is there with the shortcode of your own contact form. This can be found in the top left hand Text widget.
  9. You will need to edit the Google Maps widget and add your API key. For additional information please refer to the following page. For more information on authentication and Google Maps JavaScript API services please see Google’s documentation.

Your contact page now has the same layout as the Panoramic demo site contact page.

Plugins used on this Layout