Blog

You can create a form using the form plugin available in this link. Search for the form plugin and install it in your Grav folder.

You can also install this plugin using the command $ bin/gpm install Form. Navigate to your root folder of Grav and type this command. It will automatically download the form plugin and install the necessary dependencies.

Creating a Simple Form

You can create a simple form which can be defined in the page YAML frontmatter. The following is an example of a form −

---
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
         recatpcha_site_key: 6LelOg4TAAAAALAt1CjjjVMxFLKY8rrnednYVbr8
         recaptcha_not_validated: 'Captcha not valid!'
         validate:
            required: true

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

   process:
      - 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
---

The above code shows simple form page with name, email, message and Captcha fields. When you submit the information after filling the form, the form will process by adding process field to the YAML frontmatter as shown in the code.

The process field uses the following information −

• The email option uses two fields such as from field specify sender of the email and to field specify receiver of the mail.
• The subject uses [feedback][entered mail] option in which email is sent to the entered email.
• The body of the email is specified in the forms/data.html.twig file which is present in the theme folder.
• The form input data is stored under the user/data folder. The template is defined in the forms/data.txt.twig file which is present in the theme folder.
• Create a subpage under the thankyou/ sub folder which will be redirected to that page when a user submits the form.

You can use some fields with the form plugin as shown in the following table −

Fields Parameter

Every field accepts the following parameters which can be used to customize the appearance in the form.

Some of the fields contains specific parameters such as −

Note on Captcha

We have code on captcha information under field called g-recaptcha-response as shown below −

- name: g-recaptcha-response
   label: Captcha
   type: captcha
   recatpcha_site_key: 6LelOg4TAAAAALAt1CjjjVMxFLKY8rrnednYVbr8
   recaptcha_not_validated: 'Captcha not valid!'
   validate:
		required: true

The reCaptcha is used to protect your website from spam and abuse. It uses the recatpcha_site_key option and displays the widget on your site. To use reCaptcha, just refer the reCaptcha docs. If reCaptcha is incorrect, then it will display message using the recaptcha_not_validated option.

Form Actions

Email

You can send an email with specific options under the process field as shown below −

- email:
	from: "{{ config.plugins.email.from }}"
	to: "{{ config.plugins.email.to }}"
	subject: "Contact by {{ form.value.name|e }}"
	body: "{% include 'forms/data.html.twig' %}"

It uses the email option which includes two fields; the from field specifies the sender of the email address and the to field specifies the recevier of the email address by using the Email plugin configuration. The email field also uses subject option in which an email is sent to the email entered with the subject [Contact by][name entered] and the body of the email is defined in the forms/data.html.twig file of the theme.

Redirecting to Other Page

You can redirect to another page by using message and display options defined under the process field.

process:
   - message: Thank you for getting in touch!
   - display: thankyou

The message option sets a message which should be displayed when a user click the submit button. When a user submits the form, it should be redirected to another page. Create one subpage under the thankyou subfolder where your form.md file is stored. After submitting the form, it will be redirected on the page and displays the above message.

The subpage called thankyou/formdata.md will have the following content.

---
title: Email sent
cache_enable: false
process:
   twig: true
---

## Your email has been sent!

When you submit the form, the plugin will send an email to the user and data is saved under the data/folder.

Save

It is used to save the data to a file which is saved under the user/data folder.

For instance −

process:
   - save:
      fileprefix: contact-
      dateformat: Ymd-His-u
      extension: txt
      body: "{% include 'forms/data.txt.twig' %}"

The data will be stored in text format with extension txt. The body is taken from the templates/forms/data.html.twig file of the theme.

The following screen shows a simple form −

Next Topic:-Click Here