Grav - 表單

您可以使用此連結中提供的form外掛建立表單。搜尋表單外掛並將其安裝到您的 Grav 資料夾中。

您也可以使用命令$ bin/gpm install Form安裝此外掛。導航到 Grav 的根資料夾並鍵入此命令。它將自動下載表單外掛並安裝必要的依賴項。

建立簡單的表單

您可以建立一個簡單的表單，該表單可以在頁面 YAML 前置資訊中定義。以下是一個表單示例：

---
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 前置資訊中新增process欄位來處理，如程式碼所示。

process欄位使用以下資訊：

email選項使用兩個欄位，例如from欄位指定電子郵件的發件人，to欄位指定郵件的收件人。
subject使用[feedback][entered mail]選項，其中電子郵件傳送到輸入的電子郵件。
電子郵件正文在forms/data.html.twig檔案中指定，該檔案位於主題資料夾中。
表單輸入資料儲存在user/data資料夾下。模板在forms/data.txt.twig檔案中定義，該檔案位於主題資料夾中。
在thankyou/子資料夾下建立一個子頁面，當用戶提交表單時將重定向到該頁面。

您可以使用表單外掛中的一些欄位，如下表所示：

序號	欄位和描述
1	驗證碼它是一個反垃圾郵件欄位，用於計算以確定使用者是否為人類。
2	複選框它顯示一個簡單的複選框。
3	複選框它顯示多個複選框。
4	日期和日期時間這兩個欄位分別用於顯示日期和日期以及時間。
5	電子郵件它是一個帶有驗證的電子郵件欄位。
6	隱藏它指定隱藏欄位。
7	密碼它指定密碼欄位。
8	單選按鈕它顯示簡單的單選按鈕。
9	選擇它提供選擇欄位。
10	間隔符它允許向表單新增標題、文字或水平線。
11	文字它顯示簡單的文字欄位。
12	文字區域它顯示簡單的文字區域欄位。
13	顯示它顯示文字或說明欄位，而不是輸入欄位。

欄位引數

每個欄位都接受以下引數，這些引數可用於自定義表單中的外觀。

序號	引數和描述
1	標籤它定義標籤欄位。
2	validate.required 它使元素成為必填項。
3	validate.pattern 它指定驗證模式。
4	validate.message 驗證失敗時顯示訊息。
5	型別它定義欄位型別。
6	預設它定義預設欄位型別。
7	大小它顯示欄位大小，例如大、特小、中、長、小。
8	姓名它定義欄位名稱。
9	類它使用帶有 css 類的字串。
10	ID 它定義欄位 ID。
11	樣式它指定欄位的樣式。
12	標題它定義欄位的標題。
13	停用它確定欄位是否處於停用狀態。
14	佔位符它是一個簡短的提示，在使用者輸入值之前顯示在輸入欄位中。
15	自動聚焦它指定頁面載入時輸入元素應自動獲得焦點。
16	novalidate 它指定提交表單資料時不應進行驗證。
17	只讀它將欄位確定為只讀狀態。
18	自動完成當用戶開始在欄位中鍵入時，它會顯示欄位中的選項，並根據之前鍵入的值顯示值。

一些欄位包含特定引數，例如：

序號	引數和描述
1	日期和日期時間這些欄位使用validate.min和validate.max來設定最小值和最大值。
2	間隔符它使用underline新增<hr>標籤，使用text新增文字值，並使用title作為<h3>標籤。
3	選擇它使用multiple引數新增多個值。
4	選擇和複選框它使用options欄位設定可用的選項。
5	顯示它使用content引數顯示內容。它將markdown設定為 true 以顯示內容。
6	驗證碼它使用recatpcha_site_key和recaptcha_not_validated引數。

關於驗證碼的說明

我們在名為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選項顯示訊息。

表單操作

電子郵件

您可以在process欄位下使用特定選項傳送電子郵件，如下所示：

- 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欄位使用電子郵件外掛配置指定電子郵件地址的收件人。電子郵件欄位還使用subject選項，其中電子郵件傳送到輸入的電子郵件，主題為[Contact by][name entered]，電子郵件正文在主題的forms/data.html.twig檔案中定義。

重定向到其他頁面

您可以使用process欄位下定義的message和display選項重定向到另一個頁面。

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

message選項設定使用者單擊提交按鈕時應顯示的訊息。當用戶提交表單時，應將其重定向到另一個頁面。在儲存form.md檔案的thankyou子資料夾下建立一個子頁面。提交表單後，它將重定向到該頁面並顯示上述訊息。

名為thankyou/formdata.md的子頁面將具有以下內容。

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

## Your email has been sent!

提交表單後，外掛會向用戶傳送電子郵件，資料將儲存在data/folder下。

儲存

它用於將資料儲存到儲存在user/data資料夾下的檔案中。

例如：

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

資料將以文字格式儲存，副檔名為 txt。正文取自主題的templates/forms/data.html.twig檔案。

以下螢幕顯示了一個簡單的表單：

列印頁面

上一個

下一個