Example: Contact Form
Simple Contact Form
The Grav Form Plugin is the easiest way to use forms on your site. Let's see how we can create a simple contact form.
A Live Example
The Sora Article skeleton has a form page ready to see while reading this tutorial:
Setup the Page
You can put a form inside any page of your site. All you need to do is rename the page markdown file to form.md, or add a template header in the page frontmatter, to make it use the form template.
Caution
Your page's template, or page's parent template, must implement the {% block content %} tag in order for the Grav Form Plugin to render your inputs on the page.
The form fields and processing instructions are defined in the YAML frontmatter of the page, so just open the page markdown file with your favorite editor, and put the following code in it:
1---
2title: Contact Form
3
4form:
5 name: contact
6
7 fields:
8 name:
9 label: Name
10 placeholder: Enter your name
11 autocomplete: on
12 type: text
13 validate:
14 required: true
15
16 email:
17 label: Email
18 placeholder: Enter your email address
19 type: email
20 validate:
21 required: true
22
23 message:
24 label: Message
25 placeholder: Enter your message
26 type: textarea
27 validate:
28 required: true
29
30 g-recaptcha-response:
31 label: Captcha
32 type: captcha
33 recaptcha_not_validated: 'Captcha not valid!'
34
35 buttons:
36 submit:
37 type: submit
38 value: Submit
39 reset:
40 type: reset
41 value: Reset
42
43 process:
44 captcha: true
45 save:
46 fileprefix: contact-
47 dateformat: Ymd-His-u
48 extension: txt
49 body: "{% include 'forms/data.txt.twig' %}"
50 email:
51 subject: "[Site Contact Form] {{ form.value.name|e }}"
52 body: "{% include 'forms/data.html.twig' %}"
53 message: Thank you for getting in touch!
54---
55
56# Contact form
57
58Some sample page content
Note
Make sure you configured the "Email from" and "Email to" email addresses in the Email plugin with your email address
Caution
This example uses Google reCAPTCHA via the captcha field, and you should configure your site_key and secret_key in the form plugin in order for this to work. If you don't want to use Google reCaptcha, simply remove the g-recaptcha-response field and the captcha: true process.
Now within your contact page folder create a subfolder named thankyou/, create a new file named formdata.md. And paste the following code into the file:
1---
2title: Email sent
3cache_enable: false
4process:
5 twig: true
6---
7
8## Email sent!
That's it!
Live Demo
Note
Forms in modular pages work differently. To learn more about that we recommend reading using forms in modular pages
When users submit the form, the plugin will send an email to you (as set in the form setting of the Grav Email Plugin), and will save the entered data in the data/ folder.
Warning
For full details on setting up and configuring email, please read the Email plugin documentation
You can activate the Grav Data Manager plugin to see that data in the Admin Plugin.
Note
In the future we want Grav to be able to dynamically generate forms from the Admin Plugin