Grav - 表格

---

您可以使用此链接中提供的表单插件创建表单。搜索表单插件并将其安装在您的 Grav 文件夹中。

您还可以使用命令$ bin/gpm install Form安装此插件。导航到 Grav 的根文件夹并键入此命令。它将自动下载表单插件并安装必要的依赖项。

创建一个简单的表单

您可以创建一个简单的表单，可以在页面 YAML frontmatter 中定义该表单。以下是表格的示例 -

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

上面的代码显示了带有姓名、电子邮件、消息和验证码字段的简单表单页面。当您填写表单后提交信息时，表单将通过向 YAML frontmatter 添加process字段进行处理，如代码所示。

流程字段使用以下信息 -

• 电子邮件选项使用两个字段，例如from字段指定电子邮件的发件人，to字段指定邮件的收件人。

• 主题使用[反馈][输入的邮件]选项，将电子邮件发送到输入的电子邮件。

• 电子邮件的正文在主题文件夹中的forms/data.html.twig文件中指定。

• 表单输入数据存储在user/data文件夹下。该模板在主题文件夹中的forms/data.txt.twig文件中定义。

• 在thankyou/子文件夹下创建一个子页面，当用户提交表单时，该子页面将被重定向到该页面。

您可以在表单插件中使用一些字段，如下表所示 -

字段参数

每个字段都接受以下参数，这些参数可用于自定义表单中的外观。

一些字段包含特定参数，例如 -

关于验证码的注意事项

我们在名为g-recaptcha-response的字段下有有关验证码信息的代码，如下所示 -

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

reCaptcha 用于保护您的网站免受垃圾邮件和滥用。它使用recatpcha_site_key选项并在您的站点上显示小部件。要使用 reCaptcha，只需参考reCaptcha 文档。如果 reCaptcha 不正确，它将使用recaptcha_not_validated选项显示消息。

表单操作

电子邮件

您可以在流程字段下发送包含特定选项的电子邮件，如下所示 -

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

它使用电子邮件选项，其中包括两个字段；通过使用电子邮件插件配置，from字段指定电子邮件地址的发件人，to字段指定电子邮件地址的收件人。电子邮件字段还使用主题选项，其中电子邮件将发送到主题为[联系人][输入的姓名]输入的电子邮件，并且电子邮件正文在主题的 forms/data.html.twig 文件中定义。

重定向到其他页面

您可以使用流程字段下定义的消息和显示选项重定向到另一个页面。

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

消息选项设置当用户单击提交按钮时应显示的消息。当用户提交表单时，它应该被重定向到另一个页面。在存储form.md文件的thankyou子文件夹下创建一个子页面。提交表单后，页面将被重定向并显示上述消息。

名为thankyou/formdata.md的子页面将包含以下内容。

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

## Your email has been sent!

当您提交表单时，插件将向用户发送一封电子邮件，并将数据保存在data/folder下。

节省

它用于将数据保存到保存在用户/数据文件夹下的文件中。

例如 -

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

数据将以文本格式存储，扩展名为txt。正文取自主题的templates/forms/data.html.twig文件。

以下屏幕显示了一个简单的表格 -