Example: Contact Form

Simple Contact Form

The Grav Form Plugin is the easiest way to have forms on your site. Let's see how to create a simple contact form.

A Live Example

The Sora Article skeleton has a form page ready to see while reading this tutorial:

Live page

Page markdown file

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.

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:

---
title: Contact Form

form:
    name: contact

    fields:
        - name: name
          label: Name
          placeholder: Enter your name
          autofocus: on
          autocomplete: on
          type: text
          validate:
            required: true

        - name: email
          label: Email
          placeholder: Enter your email address
          type: email
          validate:
            required: true

        - name: message
          label: Message
          placeholder: Enter your message
          type: textarea
          validate:
            required: true

        - name: g-recaptcha-response
          label: Captcha
          type: captcha
          recaptcha_site_key: ENTER_YOUR_CAPTCHA_SITE_KEY
          recaptcha_not_validated: 'Captcha not valid!'
          validate:
            required: true

    buttons:
        - type: submit
          value: Submit
        - type: reset
          value: Reset

    process:
        - captcha:
            recatpcha_secret: ENTER_YOUR_CAPTCHA_SECRET_KEY
        - email:
            subject: "[Site 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!
        - display: thankyou
---

# Contact form

Some sample page content

Make sure you add your own recaptcha_site_key reCAPTCHA parameter (see the reCAPTCHA docs). If you don't need captcha at all, just remove it from the form fields, and remove the captcha process action too.

Now inside the page folder create a subfolder named thankyou/, create a new file named formdata.md. Users submitting the form will be redirected on that page.

The formdata page template is provided in Antimatter and other themes. If your theme does not provide it, you'll see an error. You can just copy it from Antimatter and things should work fine.

That's it!

When users submit the form, the plugin will send an email to you (as set in the from setting of the Grav Email Plugin), and will save the entered data in the data/ folder.

You can activate the Grav Data Manager plugin to see that data in the Admin Plugin.