Contact Form Page

In the following article we show how to create the contact form from our Granite demo site.

Flothemes Contact Form

Creating the demo contact form is super simple with our contact form page template.

Step 1 – Create New Page

Create a new page, and use the Template “Contact Page”

Screen Shot 2016-03-22 at 5.07.17 PM

Step 2 – Add Titles and Featured Image

Title the page, and also add the subtitle if required, this will show over the featured image:


Then on the right hand side, make sure to add a featured image if you wish to show the image at the top of the page like the demo site:

Screen Shot 2016-05-09 at 11.01.04 PM

We recommend using an image 1400 x 600px.

Step 3 – Add Email and Other Details

When that template is selected, more options will be available:


The email section is required.

You should enter the email if you want to use the built in contact form. Or if you want to use a more advanced custom form, then you should create it using a plugin and insert the form shortcode in the provided field:Screen Shot 2016-03-22 at 5.17.25 PM

We strongly advise you to use a dedicated contact form plugin, like Ninja Forms, because of the next critical advantage:

– If your mailbox server fails to work, all messages are saved in the backend/database, therefore you can review them when logging in. That way you’re 100% sure you will read all messages.

The built in form provides the following fields:


By default most hosting providers will send the emails from and email address that looks like ‘’, and you’ll see that address as the reply address. There are many site owners  who want to use the user’s email instead. To do that you should enable this option:

Screen Shot 2016-03-22 at 5.26.05 PM

But, when enabling the option above, it will change the email headers and that will cause issues sending the emails on many hosting providers. Therefore, if you notice problems after changing that option, turn it off again.

Adding Custom Contact Form

With Flothemes we have added the option for you to create a custom contact form using CF7 or Ninja forms. Then you can simply paste the shortcode into the contact form templates settings. This will overwrite the standard contact form and replace it, whilst keeping the same Flothemes styling.

Step 1 – Create Custom Form

See the following documentation on creating a custom contact form with Ninja forms.

Copy the shortcode from the created form, you’ll need it later.

Step 2 – Create Contact Page

Go to Pages > Add New and then use the page template Contact Page:

Step 3 – Add details

Once this page template is selected, copy the shortcode and paste it into the Custom Form Shortcode Section:


Step 4 – Select View

Select the contact page type and then save the form. The rest of the contact form details can be ignored as the custom contact form settings should be used.

Step 5 – Test the Form

Test the form and make sure that you’re receiving the emails. If not, refer to the documentation on contact form email issues.

Page Settings

With Como we’ve added some additional page settings that can be applied separately on any page. The options will be available just below the main page content.


Show Page Title

Do you want to display the page title, select “Yes” or “No”

Enable Widget Area Located before page content

If you have added any widgets in the widget area before page content in Appearance > Widgets you can show them on the page.

Enable Widget Area Located below page content

If you have added any widgets in the widget area below page content in Appearance > Widgets you can show them on the page.