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”
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:
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:
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 ‘email@example.com’, 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:
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.
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.