Demo: Spectral Theme

Let’s create a contact form so that our potential customers can contact us.

We’re happy to integrate any suitable contact form provider with your website.

For now, we have integrated Formspree. It’s free for 50 submissions a months and if you are a paying subscriber of the all-inclusive-offer, we will gladly use our paid account to provide you with forms.

Simply either sign up for this service and create a new form. The form ID will be the last part of the form endpoint (see image).

Alternatively, contact us to get your form ID.

Here is an example form with the form ID highlighted (Please don’t use this ID, though. 😉):

Then, put the following shortcode on any page, for example the home page and the contact page.

{{< formspree "your_formspree_id" >}}

{{< /formspree >}}

You can leave the content between the opening and closing brackets blank to create a default form.

If you’d like to define your own form, you simply put an HTML code block there, for example:

<div class="row">
	<input type="text" class="text" name="name" id="name" placeholder="Name" required>
	<input type="email" class="email" name="email" id="email" placeholder="Email" required>
</div>
<textarea name="message" id="message" placeholder="Your Message" rows="6" required></textarea>
<input type="submit" class="submit" value="Send">

This means that the name and email input will be on the same row. Then there is a text box where the user can type their message and lastly, they have a button to submit what they put in the form.

Note that we automatically add a honeypot, which is an invisible input that bots might fill out and that’s how we can catch them.

If someone submits the form, you will be contacted depending on how the contact form was defined on Formspree. You will not only know what the user submitted but also where they submitted the form, so feel free to reuse the same form ID on different pages.

Here is an example contact page with contact form:

Check out the contact form we enabled on this demo site (but please use your own form ID 😉) : https://fae-tools.notion.site/Contact-Us-b2c810de2c7046a3acc54d30e5c9256f

Next step: You’ve probably been waiting patiently for this one — let’s discuss Creating The Home Page.