Contact Page Layout

The contact page of the Shopstar! 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 “shopstar-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 bottom left hand Text widget labelled “Send us a Message”.

Your contact page now has the same layout as the Shopstar! demo contact page.