Grav - Biểu mẫu
Bạn có thể tạo một biểu mẫu bằng cách sử dụng formplugin có sẵn trong liên kết này . Tìm kiếm plugin biểu mẫu và cài đặt nó trong thư mục Grav của bạn.
Bạn cũng có thể cài đặt plugin này bằng lệnh $ bin/gpm install Form. Điều hướng đến thư mục gốc của Grav và nhập lệnh này. Nó sẽ tự động tải xuống plugin biểu mẫu và cài đặt các phụ thuộc cần thiết.
Tạo một biểu mẫu đơn giản
Bạn có thể tạo một biểu mẫu đơn giản có thể được xác định trong trang YAML frontmatter. Sau đây là một ví dụ về biểu mẫu -
---
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
---Đoạn mã trên hiển thị trang biểu mẫu đơn giản với các trường tên, email, tin nhắn và Captcha. Khi bạn gửi thông tin sau khi điền vào biểu mẫu, biểu mẫu sẽ xử lý bằng cách thêmprocess trường của mặt trước YAML như được hiển thị trong mã.
Các process trường sử dụng thông tin sau:
Các email tùy chọn sử dụng hai trường như from trường chỉ định người gửi email và to trường chỉ định người nhận thư.
Các subject sử dụng [feedback][entered mail] tùy chọn trong đó email được gửi đến email đã nhập.
Nội dung của email được chỉ định trong forms/data.html.twig tệp hiện có trong thư mục chủ đề.
Dữ liệu đầu vào của biểu mẫu được lưu trữ trong user/datathư mục. Mẫu được xác định trongforms/data.txt.twig tệp hiện có trong thư mục chủ đề.
Tạo một trang con trong thankyou/ thư mục con sẽ được chuyển hướng đến trang đó khi người dùng gửi biểu mẫu.
Bạn có thể sử dụng một số trường với plugin biểu mẫu như được hiển thị trong bảng sau:
| Sr.No. | Trường & Mô tả |
|---|---|
| 1 | Captcha Nó là một trường chống thư rác được sử dụng trong máy tính để xác định xem người dùng có phải là con người hay không. |
| 2 | Checkbox Nó hiển thị một hộp kiểm đơn giản. |
| 3 | Checkboxes Nó hiển thị nhiều hộp kiểm. |
| 4 | Date and Datetime Cả hai trường đều được sử dụng để hiển thị ngày tháng cùng với thời gian tương ứng. |
| 5 | Nó là một trường email có xác nhận. |
| 6 | Hidden Nó chỉ định trường ẩn. |
| 7 | Password Nó chỉ định trường mật khẩu. |
| số 8 | Radio Nó hiển thị các nút radio đơn giản. |
| 9 | Select Nó cung cấp trường lựa chọn. |
| 10 | Spacer Nó cho phép thêm tiêu đề, văn bản hoặc dòng ngang vào biểu mẫu. |
| 11 | Text Nó hiển thị trường văn bản đơn giản. |
| 12 | Textarea Nó hiển thị trường vùng văn bản đơn giản. |
| 13 | Display Nó hiển thị trường văn bản hoặc hướng dẫn, không phải trường nhập liệu. |
Tham số trường
Mọi trường chấp nhận các tham số sau đây có thể được sử dụng để tùy chỉnh giao diện trong biểu mẫu.
| Sr.No. | Mô tả về Thông Số |
|---|---|
| 1 | label Nó xác định trường nhãn. |
| 2 | validate.required Nó làm cho phần tử được yêu cầu. |
| 3 | validate.pattern Nó chỉ định mẫu xác nhận. |
| 4 | validate.message Nó hiển thị thông báo khi xác thực không thành công. |
| 5 | type Nó xác định loại trường. |
| 6 | default Nó xác định loại trường mặc định. |
| 7 | size Nó hiển thị kích thước trường như lớn, x-nhỏ, trung bình, dài, nhỏ. |
| số 8 | name Nó xác định tên trường. |
| 9 | classes Nó sử dụng chuỗi với các lớp css. |
| 10 | id Nó xác định id trường. |
| 11 | style Nó chỉ định kiểu của trường. |
| 12 | title Nó xác định tiêu đề của trường. |
| 13 | disabled Nó xác định trường có ở trạng thái vô hiệu hóa hay không. |
| 14 | placeholder Đây là một gợi ý ngắn được hiển thị trong trường nhập liệu trước khi người dùng nhập một giá trị. |
| 15 | autofocus Nó chỉ định rằng một phần tử đầu vào sẽ tự động lấy tiêu điểm khi trang tải. |
| 16 | novalidate Nó chỉ định rằng dữ liệu biểu mẫu sẽ không được xác thực khi được gửi. |
| 17 | readonly Nó xác định trường là trạng thái chỉ đọc. |
| 18 | autocomplete Nó hiển thị các tùy chọn trong trường khi người dùng bắt đầu nhập vào trường và hiển thị các giá trị dựa trên các giá trị đã nhập trước đó. |
Một số trường chứa các tham số cụ thể như -
| Sr.No. | Mô tả về Thông Số |
|---|---|
| 1 | date and datetime Các trường này sử dụng validate.min và validate.max để đặt giá trị tối thiểu và tối đa. |
| 2 | spacer Nó sử dụng underline thêm vào <hr> , thêm các giá trị văn bản bằng cách sử dụng text và sử dụng title dưới dạng thẻ <h3>. |
| 3 | select Nó sử dụng multiple tham số để thêm nhiều giá trị. |
| 4 | select and checkboxes Nó sử dụng options trường để đặt các tùy chọn có sẵn. |
| 5 | display Nó sử dụng contenttham số để hiển thị nội dung. Nó thiết lậpmarkdown thành true để hiển thị nội dung. |
| 6 | captcha Nó sử dụng recatpcha_site_key và recaptcha_not_validated thông số. |
Lưu ý về Captcha
Chúng tôi có mã về thông tin captcha trong trường được gọi là g-recaptcha-response như hình dưới đây -
- name: g-recaptcha-response
label: Captcha
type: captcha
recatpcha_site_key: 6LelOg4TAAAAALAt1CjjjVMxFLKY8rrnednYVbr8
recaptcha_not_validated: 'Captcha not valid!'
validate:
required: trueReCaptcha được sử dụng để bảo vệ trang web của bạn khỏi spam và lạm dụng. Nó sử dụngrecatpcha_site_keyvà hiển thị tiện ích con trên trang web của bạn. Để sử dụng reCaptcha, chỉ cần tham khảo tài liệu reCaptcha . Nếu reCaptcha không chính xác, thì nó sẽ hiển thị thông báo bằng cách sử dụngrecaptcha_not_validated Lựa chọn.
Hành động biểu mẫu
Bạn có thể gửi một email với các tùy chọn cụ thể trong process trường như hình dưới đây -
- email:
from: "{{ config.plugins.email.from }}"
to: "{{ config.plugins.email.to }}"
subject: "Contact by {{ form.value.name|e }}"
body: "{% include 'forms/data.html.twig' %}"Nó sử dụng tùy chọn email bao gồm hai trường; cácfrom trường chỉ định người gửi địa chỉ email và totrường chỉ định người nhận của địa chỉ email bằng cách sử dụng cấu hình plugin Email. Trường email cũng sử dụngsubject tùy chọn trong đó email được gửi đến email được nhập với chủ đề [Liên hệ theo] [tên đã nhập] và nội dung của email được xác định trong forms/data.html.twig tệp của chủ đề.
Chuyển hướng đến Trang khác
Bạn có thể chuyển hướng đến một trang khác bằng cách sử dụng message và display các tùy chọn được xác định theo process cánh đồng.
process:
- message: Thank you for getting in touch!
- display: thankyouCác messagetùy chọn đặt một thông báo sẽ được hiển thị khi người dùng nhấp vào nút gửi. Khi người dùng gửi biểu mẫu, biểu mẫu sẽ được chuyển hướng đến một trang khác. Tạo một trang con trongthankyou thư mục con nơi của bạn form.mdtệp được lưu trữ. Sau khi gửi biểu mẫu, nó sẽ được chuyển đến trang và hiển thị thông báo trên.
Trang con được gọi là thankyou/formdata.md sẽ có nội dung sau.
---
title: Email sent
cache_enable: false
process:
twig: true
---
## Your email has been sent!Khi bạn gửi biểu mẫu, plugin sẽ gửi một email đến người dùng và dữ liệu được lưu trong data/folder.
Tiết kiệm
Nó được sử dụng để lưu dữ liệu vào một tệp được lưu trong user/data thư mục.
Ví dụ -
process:
- save:
fileprefix: contact-
dateformat: Ymd-His-u
extension: txt
body: "{% include 'forms/data.txt.twig' %}"Dữ liệu sẽ được lưu trữ dưới dạng văn bản với phần mở rộng là txt. Cơ thể được lấy từtemplates/forms/data.html.twig tệp của chủ đề.
Màn hình sau đây hiển thị một biểu mẫu đơn giản:
