Creating an Email Contact Form in Grav/Docr

Here is a step-by-step guide for creating an email contact form in Grav/Docr

 

  1. Install “Email” Plugin if not already installed. The simplest way to do this is through the admin panel:

  1. 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.

  1. 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:

  1. 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)

  1. Enable IMAP in your Gmail by going to Settings -> Forwarding and POP/IMAP -> IMAP Access

  1. Enable “Less secure apps” in your user account settings (https://myaccount.google.com/lesssecureapps)

  1. From Admin dashboard, go to Plugin -> Email to configure settings:

Fill out configuration: