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

โค้ดด้านบนแสดงหน้าแบบฟอร์มง่ายๆพร้อมฟิลด์ชื่ออีเมลข้อความและแคปต์ชา เมื่อคุณส่งข้อมูลหลังจากกรอกแบบฟอร์มแล้วแบบฟอร์มจะดำเนินการโดยการเพิ่มprocess ไปยัง frontmatter ของ YAML ตามที่แสดงในโค้ด

process ฟิลด์ใช้ข้อมูลต่อไปนี้ -

  • email ตัวเลือกใช้สองฟิลด์เช่น from ฟิลด์ระบุผู้ส่งอีเมลและ to ฟิลด์ระบุผู้รับจดหมาย

  • subject ใช้ [feedback][entered mail] ตัวเลือกในการส่งอีเมลไปยังอีเมลที่ป้อน

  • เนื้อหาของอีเมลระบุไว้ในไฟล์ forms/data.html.twig ไฟล์ที่มีอยู่ในโฟลเดอร์ธีม

  • ข้อมูลอินพุตแบบฟอร์มจะถูกเก็บไว้ในไฟล์ user/dataโฟลเดอร์ เทมเพลตถูกกำหนดไว้ในไฟล์forms/data.txt.twig ไฟล์ที่มีอยู่ในโฟลเดอร์ธีม

  • สร้างหน้าย่อยภายใต้ thankyou/ โฟลเดอร์ย่อยซึ่งจะถูกเปลี่ยนเส้นทางไปยังเพจนั้นเมื่อผู้ใช้ส่งแบบฟอร์ม

คุณสามารถใช้บางฟิลด์กับปลั๊กอินฟอร์มดังแสดงในตารางต่อไปนี้ -

ซีเนียร์ ฟิลด์และคำอธิบาย
1

Captcha

เป็นฟิลด์ป้องกันสแปมที่ใช้ในการคำนวณเพื่อตรวจสอบว่าผู้ใช้เป็นมนุษย์หรือไม่

2

Checkbox

จะแสดงช่องทำเครื่องหมายง่ายๆ

3

Checkboxes

จะแสดงช่องทำเครื่องหมายหลายช่อง

4

Date and Datetime

ทั้งสองช่องใช้เพื่อแสดงวันที่และวันที่พร้อมกับเวลาตามลำดับ

5

Email

เป็นช่องอีเมลที่มีการตรวจสอบความถูกต้อง

6

Hidden

ระบุฟิลด์ที่ซ่อนอยู่

7

Password

ระบุฟิลด์รหัสผ่าน

8

Radio

จะแสดงปุ่มตัวเลือกง่ายๆ

9

Select

ให้เลือกฟิลด์

10

Spacer

อนุญาตให้เพิ่มชื่อเรื่องข้อความหรือเส้นแนวนอนลงในแบบฟอร์ม

11

Text

จะแสดงฟิลด์ข้อความธรรมดา

12

Textarea

จะแสดงฟิลด์พื้นที่ข้อความธรรมดา

13

Display

จะแสดงข้อความหรือฟิลด์คำสั่งไม่ใช่ฟิลด์อินพุต

พารามิเตอร์ฟิลด์

ทุกฟิลด์ยอมรับพารามิเตอร์ต่อไปนี้ซึ่งสามารถใช้เพื่อปรับแต่งลักษณะที่ปรากฏในแบบฟอร์ม

ซีเนียร์ พารามิเตอร์และคำอธิบาย
1

label

เป็นการกำหนดฟิลด์ป้ายกำกับ

2

validate.required

มันทำให้องค์ประกอบที่จำเป็น

3

validate.pattern

ระบุรูปแบบการตรวจสอบความถูกต้อง

4

validate.message

จะแสดงข้อความเมื่อการตรวจสอบล้มเหลว

5

type

เป็นการกำหนดประเภทฟิลด์

6

default

เป็นการกำหนดประเภทฟิลด์เริ่มต้น

7

size

โดยจะแสดงขนาดของฟิลด์เช่นใหญ่ x เล็กกลางยาวเล็ก

8

name

กำหนดชื่อเขตข้อมูล

9

classes

ใช้สตริงกับคลาส css

10

id

กำหนด id ฟิลด์

11

style

ระบุรูปแบบของฟิลด์

12

title

เป็นการกำหนดชื่อของฟิลด์

13

disabled

กำหนดว่าเขตข้อมูลอยู่ในสถานะปิดใช้งานหรือไม่

14

placeholder

เป็นคำใบ้สั้น ๆ ที่แสดงในช่องป้อนข้อมูลก่อนที่ผู้ใช้จะป้อนค่า

15

autofocus

ระบุว่าองค์ประกอบอินพุตควรได้รับโฟกัสโดยอัตโนมัติเมื่อโหลดหน้า

16

novalidate

ระบุว่าไม่ควรตรวจสอบข้อมูลแบบฟอร์มเมื่อส่ง

17

readonly

กำหนดฟิลด์เป็นสถานะอ่านอย่างเดียว

18

autocomplete

จะแสดงตัวเลือกในฟิลด์เมื่อผู้ใช้เริ่มพิมพ์ในฟิลด์และแสดงค่าตามค่าที่พิมพ์ก่อนหน้านี้

บางฟิลด์มีพารามิเตอร์เฉพาะเช่น -

ซีเนียร์ พารามิเตอร์และคำอธิบาย
1

date and datetime

ฟิลด์เหล่านี้ใช้ validate.min และ validate.max เพื่อกำหนดค่าต่ำสุดและสูงสุด

2

spacer

มันใช้ underline เพื่อเพิ่ม <hr> แท็กเพิ่มค่าข้อความโดยใช้ text และการใช้งาน title เป็นแท็ก <h3>

3

select

มันใช้ multiple พารามิเตอร์เพื่อเพิ่มหลายค่า

4

select and checkboxes

มันใช้ options เพื่อตั้งค่าตัวเลือกที่มี

5

display

มันใช้ contentพารามิเตอร์เพื่อแสดงเนื้อหา มันตั้งค่าmarkdown เป็นจริงเพื่อแสดงเนื้อหา

6

captcha

มันใช้ recatpcha_site_key และ recaptcha_not_validated พารามิเตอร์

หมายเหตุเกี่ยวกับ Captcha

เรามีรหัสเกี่ยวกับข้อมูล captcha ภายใต้ฟิลด์ที่เรียกว่า 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 ตัวเลือกที่อีเมลจะถูกส่งไปยังอีเมลที่ป้อนด้วยหัวเรื่อง [ติดต่อโดย] [ชื่อที่ป้อน] และเนื้อหาของอีเมลถูกกำหนดไว้ใน forms/data.html.twig ไฟล์ของธีม

กำลังเปลี่ยนเส้นทางไปยังหน้าอื่น

คุณสามารถเปลี่ยนเส้นทางไปยังหน้าอื่นได้โดยใช้ message และ display ตัวเลือกที่กำหนดไว้ภายใต้ process ฟิลด์

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

messageตัวเลือกตั้งค่าข้อความที่ควรแสดงเมื่อผู้ใช้คลิกปุ่มส่ง เมื่อผู้ใช้ส่งแบบฟอร์มควรเปลี่ยนเส้นทางไปยังหน้าอื่น สร้างหนึ่งหน้าย่อยภายใต้thankyou โฟลเดอร์ย่อยที่ของคุณ form.mdไฟล์ถูกเก็บไว้ หลังจากส่งแบบฟอร์มแล้วระบบจะเปลี่ยนเส้นทางบนหน้าเว็บและแสดงข้อความด้านบน

หน้าย่อยเรียกว่า 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 ไฟล์ของธีม

หน้าจอต่อไปนี้แสดงรูปแบบง่ายๆ -