เจาะลึกเข้าไปใน Webform Module สำหรับ Drupal 8/9

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

ลองดูบล็อกที่น่าทึ่งนี้ - Drupal 8 Webform Module - บทช่วยสอนสั้นๆ เพื่อช่วยคุณเริ่มต้นใช้งานโมดูล Webform ในไซต์ Drupal 8/9 ของคุณ นี้จะช่วยให้คุณเข้าใจพื้นฐานได้ง่าย

โมดูล Webform มาพร้อมกับคุณสมบัติที่น่าสนใจมากมาย และฉันอยากจะพูดถึงบางส่วนที่นี่

คุณสมบัติของเว็บฟอร์ม

1. การเปลี่ยนแปลงรูปแบบและองค์ประกอบ

แบบฟอร์ม องค์ประกอบ และการตั้งค่าที่เกี่ยวข้องสามารถเปลี่ยนแปลงได้โดยใช้ตะขอที่เกี่ยวข้อง ด้านล่างนี้คือ hooks บางส่วนที่พร้อมใช้งาน และคุณสามารถหาข้อมูลเพิ่มเติมได้ในไฟล์ webform.api.php :

• ตะขอแบบฟอร์ม

◦ hook_webform_submission_form_alter()
◦ ดำเนินการแก้ไขก่อนที่จะส่งแบบฟอร์มการส่งเว็บฟอร์ม

• ตะขอองค์ประกอบ

◦ hook_webform_element_alter()
◦ แก้ไของค์ประกอบเว็บฟอร์ม

• ตะขอตัวเลือก

◦ hook_webform_options_alter()
◦ เปลี่ยนตัวเลือกเว็บฟอร์ม

• ตะขอเกี่ยว

◦ hook_webform_handler_invoke_alter()
◦ ดำเนินการกับตัวจัดการเว็บฟอร์มเมื่อมีการเรียกใช้เมธอด

• ตะขอเพิ่มเติม…

◦ hook_webform_access_rules_alter() เป็นต้น..
◦ แก้ไขรายการกฎการเข้าถึงที่ควรได้รับการจัดการตามระดับของเว็บฟอร์ม

2. แหล่งที่มาของ YAML

โมดูล Webform เริ่มต้นจากโมดูล YAML Form ซึ่งอนุญาตให้ผู้คนสร้างแบบฟอร์มโดยการเขียนมาร์กอัป YAML เมื่อถึงจุดหนึ่ง โมดูลแบบฟอร์ม YAML เริ่มมี UI และกลายเป็นโมดูลเว็บฟอร์มสำหรับ Drupal 8

• YAML จัดเตรียมภาษามาร์กอัปที่เรียนรู้ได้ง่ายและง่ายสำหรับการสร้างและแก้ไของค์ประกอบของเว็บฟอร์มจำนวนมาก
• หน้าแหล่งที่มา (ดู) ช่วยให้นักพัฒนาสามารถแก้ไขอาร์เรย์การแสดงผลของเว็บฟอร์มโดยใช้มาร์กอัป YAML นักพัฒนาสามารถใช้หน้าแหล่งที่มา (ดู) เพื่อเขียนโค้ดของเว็บฟอร์มเพื่อแก้ไขป้ายกำกับของเว็บฟอร์มได้อย่างรวดเร็ว ตัดและวางองค์ประกอบหลายรายการ จัดลำดับองค์ประกอบใหม่ ตลอดจนเพิ่มคุณสมบัติที่กำหนดเองและมาร์กอัปให้กับองค์ประกอบ
• ต่อไปนี้คือตัวอย่างแบบฟอร์มการติดต่อและซอร์สโค้ด YAML ที่เกี่ยวข้อง:

แบบฟอร์มการติดต่อพร้อม UI แบบลากและวาง

รหัสที่มา YAML ของแบบฟอร์มการติดต่อ

3. ฟิลด์เงื่อนไข

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

นี่คือตัวอย่างแบบฟอร์มที่มีฟิลด์สองขั้นตอน ขั้น ตอนที่ 1 (องค์ประกอบวิทยุ) พร้อมตัวเลือก 'อีเมล' และ 'หมายเลขโทรศัพท์มือถือ' ขั้นตอนที่ 2 (Fieldset) ที่มีสององค์ประกอบคือ 'อีเมล' และ 'หมายเลขโทรศัพท์มือถือ'

หน้าสร้างแบบฟอร์ม

แบบฟอร์มดูหน้า

ในตัวอย่างข้างต้น ฉันต้องการแสดงฟิลด์ 'อีเมล' หากเลือกตัวเลือก 'อีเมล' ในขั้นตอนที่ 1 หรือแสดงฟิลด์ 'หมายเลขโทรศัพท์มือถือ' หากเลือกตัวเลือก 'หมายเลขโทรศัพท์มือถือ' ในขั้นตอนที่ 1

เพื่อให้บรรลุผลดังกล่าว ให้แก้ไขฟิลด์ 'อีเมล' ของคุณ คลิกแท็บ 'เงื่อนไข' เลือก 'สถานะ' เป็น 'มองเห็นได้' และตั้งค่า 'ทริกเกอร์/ค่า' เป็น 'ขั้นตอนที่ 1 [วิทยุ] ค่าคืออีเมล' ในทำนองเดียวกัน ทำตามขั้นตอนเดียวกันเพื่อเพิ่มตรรกะตามเงื่อนไขลงในฟิลด์ 'หมายเลขโทรศัพท์มือถือ' ของคุณและตั้งค่า 'ทริกเกอร์/ค่า' เป็น 'ขั้นตอนที่ 1 [ค่าวิทยุ] คือ mobile_number' นี่คือรูปลักษณ์สุดท้ายของเว็บฟอร์ม:

การตั้งค่าลอจิกแบบมีเงื่อนไข

แบบฟอร์มเมื่อเลือก 'อีเมล' ในขั้นตอนที่ 1

แบบฟอร์มเมื่อเลือก 'หมายเลขโทรศัพท์มือถือ' ในขั้นตอนที่ 1

4. คุณสมบัติตัวเลือกที่กำหนดเอง

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

ลองนึกภาพสถานการณ์ที่คุณต้องการจัดการตัวเลือกขององค์ประกอบวิทยุตามเงื่อนไขโดยพิจารณาจากค่าขององค์ประกอบอื่นภายในแบบฟอร์ม คุณจะทำอย่างนั้นได้อย่างไร?

ฉันไม่พบวิธีจัดการกับการตั้งค่าลอจิกแบบมีเงื่อนไขจาก UI แต่มีข้อกำหนดในการตั้งค่า 'คุณสมบัติตัวเลือกที่กำหนดเอง' ให้กับองค์ประกอบของคุณ ซึ่งคุณจะต้องเขียนตรรกะตามเงื่อนไขที่จำเป็นซึ่งกำหนดเป้าหมายตัวเลือกของคุณภายในองค์ประกอบโดยใช้รหัส YAML

นี่คือตัวอย่าง ซึ่งเราสามารถเห็นองค์ประกอบวิทยุสองรายการ และตามตัวเลือกที่ฉันเลือกในองค์ประกอบแรก การมองเห็นตัวเลือกภายในองค์ประกอบที่สองควรเปลี่ยน

หน้าสร้างแบบฟอร์ม

หน้ามุมมองแบบฟอร์มก่อนเพิ่มคุณสมบัติตัวเลือกที่กำหนดเอง:

• หากเลือก 'ประเภท A' แล้ว 'ตัวเลือก 1' และ 'ตัวเลือก 2' ควรมองเห็นได้จากองค์ประกอบที่สอง ในทำนองเดียวกัน หากเลือก 'ประเภท B' คุณควรมองเห็น 'ตัวเลือก 3' และ 'ตัวเลือก 4' เพื่อให้แก้ไของค์ประกอบที่สองได้สำเร็จ ให้ไปที่แท็บ 'ขั้นสูง' เลื่อนลงไปที่ส่วน 'คุณสมบัติตัวเลือก (กำหนดเอง)' และเขียนตรรกะที่จำเป็นใน YAML

การตั้งค่าคุณสมบัติตัวเลือก

แบบฟอร์มเมื่อเลือก 'ประเภท A'

แบบฟอร์มเมื่อเลือก 'ประเภท B'

5. ตัวจัดการอีเมลส่งเว็บฟอร์ม

• ตัวจัดการอีเมล

ตัวจัดการอีเมลจะส่งการส่งแบบฟอร์มทางเว็บทางอีเมล หากต้องการเพิ่มตัวจัดการอีเมลในเว็บฟอร์มของคุณ ให้ไปที่ "การตั้งค่า" จากนั้นไปที่แท็บ "อีเมล/เครื่องมือจัดการ" ถัดไป คลิกที่ปุ่ม 'เพิ่มอีเมล / เพิ่มตัวจัดการ'

เพิ่มตัวจัดการอีเมล

• ดังที่แสดงในภาพด้านล่าง บนแท็บ 'ทั่วไป' ให้เพิ่ม 'ชื่อ' และตั้งค่ารายละเอียด 'ส่งไปที่' และ 'ส่งจาก' เพิ่มข้อความ 'หัวเรื่อง' และ 'เนื้อหา' ตามต้องการ และบันทึกแบบฟอร์มการกำหนดค่า

และที่เกี่ยวกับมัน ผู้จัดการของคุณจะถูกไล่ออกทุกครั้งที่ส่งแบบฟอร์ม

• คุณยังสามารถตั้งค่าตัวจัดการอีเมลแบบมีเงื่อนไขให้กับเว็บฟอร์มของคุณ เช่น ทริกเกอร์ตัวจัดการอีเมลต่างๆ ตามค่าขององค์ประกอบบางอย่างภายในแบบฟอร์ม
• ตัวอย่างเช่น ให้เราพิจารณาองค์ประกอบ 'เลือก' ที่มีค่า 'ประเภท 1' และ 'ประเภท 2' หากผู้ใช้ส่ง 'ประเภท 1' ให้เรียกใช้ตัวจัดการ 'อีเมล - ประเภท 1' ที่ตั้งค่าที่อยู่ 'ถึง' เป็น ' [ป้องกันอีเมล] ' หากผู้ใช้ส่ง 'ประเภท 2' ให้เรียกใช้ตัวจัดการ 'อีเมล - ประเภท 2' ที่ตั้งค่าที่อยู่ 'ถึง' เป็น ' [email protected] '
• ในการเพิ่มตรรกะตามเงื่อนไขให้กับตัวจัดการอีเมลของคุณ ให้สร้างตัวจัดการหนึ่งตัวและตั้งชื่อว่า 'อีเมล - ประเภท 1' ตั้งค่าที่อยู่ 'ถึง' เป็น ' [ป้องกันอีเมล] ' สลับไปที่แท็บ 'เงื่อนไข' เลือก 'สถานะ' เป็น 'มองเห็นได้' และตั้งค่า 'ทริกเกอร์/ค่า' เป็น 'เลือกประเภท [เลือก] ค่าเป็น type_1'
• ในทำนองเดียวกัน สร้างตัวจัดการที่สองและตั้งชื่อว่า 'อีเมล - ประเภท 2' ตั้งค่าที่อยู่ 'ถึง' เป็น ' [ป้องกันอีเมล] ' สลับไปที่แท็บ 'เงื่อนไข' เลือก 'สถานะ' เป็น 'มองเห็นได้' และตั้งค่า 'ทริกเกอร์/ค่า' เป็น 'เลือกประเภท [เลือก] ค่าเป็น type_2'

• ตัวจัดการอีเมลตามกำหนดเวลา

  • ขยายตัวจัดการอีเมลของโมดูล Webform เพื่อให้กำหนดเวลาอีเมลได้ หากต้องการใช้คุณลักษณะนี้ ให้เปิดใช้งานโมดูลย่อย 'Webform Scheduled Email Handler'
  • หากต้องการกำหนดเวลาส่งอีเมลของการส่งแบบฟอร์ม ให้คลิกที่ปุ่ม 'เพิ่มตัวจัดการ' เลือกตัวจัดการ 'Scheduled Email' ที่นี่

มีการตั้งค่าพิเศษเพียงรายการเดียวในตัวจัดการ 'อีเมลตามกำหนดเวลา' เมื่อเทียบกับ 'ตัวจัดการอีเมล' ปกติ และนั่นคือการเพิ่มกำหนดวันที่อีเมลภายใต้แท็บการตั้งค่าทั่วไป

ตัวจัดการอีเมลตามกำหนดเวลา

ตั้งวันที่เพื่อเรียกตัวจัดการของคุณและเมื่อ cron ถัดไปทำงาน อีเมลของคุณจะถูกส่ง!

หาตัวช่วย

มีหลายวิธีที่คุณสามารถขอความช่วยเหลือเกี่ยวกับโมดูลเว็บฟอร์มได้ นี่คือรายการของแหล่งข้อมูลบางส่วน:

• เอกสาร ตำราอาหาร & Screencasts
  • https://www.drupal.org/docs/8/modules/webform
• คิวปัญหาเว็บฟอร์ม
  • https://www.drupal.org/project/issues/webform
• คำตอบของ Drupal
  • http://drupal.stackexchange.com
• ช่องหย่อน
  • คุณสามารถโพสต์คำถามของคุณเกี่ยวกับโมดูล Webform ได้ที่ #webform channel ภายในพื้นที่ทำงาน Drupal slack ใครก็ตามจากชุมชน แม้แต่ผู้ดูแลโมดูลเองก็อยู่เคียงข้างและใจดีพอที่จะแนะนำปัญหาของคุณ

ขอแสดงความชื่นชมอย่างมากต่อ Jacob Rockowitz สำหรับการสนับสนุนอย่างไม่หยุดยั้งต่อโมดูล Drupal 8/9 Webform Webform จะเป็นอย่างที่เป็นอยู่ไม่ได้ถ้าไม่มีเขา