The contact page of the Oceanic demo site was created with SiteOrigin’s free Page Builder plugin and the Contact Form 7 plugin. To achieve the same layout do the following:
- Install SiteOrigin’s free Page Builder plugin.
- Install the free Contact Form 7.
- Download the Page Builder layout file for this page which you will then be able to import.
- Edit your contact page and select the “Full Width” page template from the “Template” dropdown located down the right hand side of the page.
- Click the “Page Builder” tab that is displayed on the right of the WYSIWYG editor. This will put the editor into Page Builder mode.
- 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 “oceanic-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.
- To create your contact form navigate to Contact > Add New
- Once you have created your contact form copy the shortcode for your form. You will then need to edit the contact page layout and replace the Contact Form 7 shortcode that is there with the shortcode of your own contact form. This can be found in the top left hand Text widget.
- 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 Oceanic demo site contact page.