Creating an Email Contact Form in Grav/Docr
Here is a step-by-step guide for creating an email contact form in Grav/Docr
- Install “Email” Plugin if not already installed. The simplest way to do this is through the admin panel:
- Rename the Markdown file to form.md (instead of chapter.md for example) and include this code snippet (or similar) in the YAML portion at the top of the page below “title”:
Snippet:
form:
name: contact
fields:
– name: name
label: Name
placeholder: Enter your name
autocomplete: on
type: text
validate:
required: true
– name: email
label: Email
placeholder: Enter your email address
type: email
validate:
rule: email
required: true
– name: message
label: Message
size: long
placeholder: Enter your message
type: textarea
validate:
required: true
buttons:
– type: submit
value: Submit
– type: reset
value: Reset
process:
– email:
from: “{{ form.value.email }}”
to: “{{ config.plugins.email.to }}”
subject: “[Healthcheck Contact Form] {{ form.value.name|e }}”
body: “{% include ‘forms/data.html.twig’ %}”
– save:
fileprefix: contact-
dateformat: Ymd-His-u
extension: txt
body: “{% include ‘forms/data.txt.twig’ %}”
– message: Thank you for getting in touch regarding your healthcheck report!
– display: thankyou
Full example of form.md YAML:
We can place any page content below this YAML portion. Our contact form will show up on the bottom of the page after all page content.
- Inside the page folder (in which the form.md is placed), create a subfolder named “thankyou” with a file named “formdata.md” with this snippet:
—
title: Email sent
cache_enable: false
process:
twig: true
—
## Email sent successfully!
This will result in a “Email sent” success screen when the user clicks submit on the contact form:
- Final Step – Configuring Email Plugin settings. Full email configuration documentation can be found here (https://github.com/getgrav/grav-plugin-email/blob/develop/README.md)
Set-up for Google SMTP (Gmail)
- Enable IMAP in your Gmail by going to Settings -> Forwarding and POP/IMAP -> IMAP Access
- Enable “Less secure apps” in your user account settings (https://myaccount.google.com/lesssecureapps)
- From Admin dashboard, go to Plugin -> Email to configure settings:
Fill out configuration:
