ปรับปรุงฟอร์มของคุณ: ยกระดับประสบการณ์ผู้ใช้ด้วย Form API ของ Drupal

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

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

ทำไมต้องใช้แบบฟอร์ม API

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

1. ใช้งานง่ายและไม่ต้องใช้ประสบการณ์ในการเขียนโค้ดมากนัก คุณสามารถสร้างแบบฟอร์มโดยใช้ชุดของฟังก์ชันที่เรียบง่ายและใช้งานง่าย
2. มีฟังก์ชันการตรวจสอบในตัวที่ช่วยให้คุณสามารถตรวจสอบข้อมูลในแบบฟอร์มได้อย่างง่ายดาย
3. มาพร้อมกับฟีเจอร์ความปลอดภัยในตัวที่ช่วยป้องกันการโจมตี เช่น การเขียนสคริปต์ข้ามไซต์ (XSS) และการปลอมแปลงคำขอข้ามไซต์ (CSRF)
4. สามารถปรับแต่งได้สูงและสามารถใช้สร้างฟอร์มที่ซับซ้อนด้วยฟิลด์ ปุ่ม และการกระทำที่หลากหลาย
5. API ของฟอร์มเป็นแบบกำหนดธีมได้ ดังนั้นนักพัฒนาจึงสามารถเปลี่ยน CSS และ HTML เพื่อให้ฟอร์มมีรูปลักษณ์ตามที่ต้องการ
6. สามารถรวมเข้ากับ Drupal API อื่น ๆ ได้อย่างง่ายดาย

สิ่งที่คุณต้องรู้ก่อนสร้างแบบฟอร์ม

มีแบบฟอร์มหลายประเภทที่มักใช้ใน Drupal แต่ละคลาสประกอบด้วยคลาสพื้นฐานที่คุณสามารถขยายในโมดูลเฉพาะของการออกแบบของคุณเอง

ขั้นแรก ระบุประเภทของแบบฟอร์มที่คุณต้องการสร้าง:

• แบบฟอร์มทั่วไป ขยาย FormBase
• แบบฟอร์มการกำหนดค่าที่ช่วยให้ผู้ดูแลระบบสามารถอัปเดตการตั้งค่าของโมดูลได้ ขยาย ConfigFormBase

แบบฟอร์มใด ๆ ที่มี FormBase ในลำดับชั้นจะต้องใช้วิธีการต่อไปนี้เนื่องจาก FormBase ใช้ FormInterface

• getFormId()
• สร้างแบบฟอร์ม ()
• ส่งแบบฟอร์ม ()

หากต้องการสร้างฟอร์มที่กำหนดเองทั่วไปด้วย Form API คุณจะต้องกำหนดฟังก์ชันที่ส่งคืนอาร์เรย์ขององค์ประกอบฟอร์มภายใน buildForm() คีย์ของแต่ละองค์ประกอบคือชื่อขององค์ประกอบฟอร์ม และค่าคืออาร์เรย์ของคุณสมบัติที่กำหนดองค์ประกอบ ตัวอย่างเช่น ในการสร้างช่องข้อความ คุณต้องกำหนดองค์ประกอบดังนี้:

 $form['emp_name'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Name'), '#required' => TRUE, ];

การเพิ่มการตรวจสอบ

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

ในการเพิ่มฟังก์ชันการตรวจสอบ คุณจะต้องใช้ validateForm()

กำลังดำเนินการส่งแบบฟอร์ม

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

ในการกำหนดฟังก์ชันการส่ง คุณจะต้องใช้ submitForm()

รวมแบบฟอร์มในคำขอ

ในการรวมแบบฟอร์มนี้เข้ากับโครงสร้าง URI ของไซต์ Drupal ให้ใช้เส้นทางดังต่อไปนี้:

 example.form: path: '/example-form' defaults: _title: 'Example form' _form: '\Drupal\example\Form\ExampleForm' requirements: _permission: 'access content'

คีย์ _form จะบอกระบบเราต์ติ้งว่าชื่อคลาสที่ระบุเป็นคลาสฟอร์มที่ต้องสร้างอินสแตนซ์และจัดการเป็นฟอร์ม

การสร้างแบบฟอร์มที่กำหนดเองด้วย Drupal Form API

ทำตามขั้นตอนง่าย ๆ เหล่านี้เพื่อเริ่มกระบวนการสร้างแบบฟอร์มที่กำหนดเองด้วย Form API ของ Drupal:

1. สร้าง .info.yml ภายในโมดูลที่กำหนดเอง ( เนื่องจากเรากำลังสร้างโมดูลแยกต่างหากสำหรับฟอร์มแบบกำหนดเอง ขั้นตอนนี้ไม่จำเป็นสำหรับการเพิ่มฟอร์มในโมดูลที่มีอยู่ )
2. สร้างฟอร์มคลาสเพื่อส่งคืนฟอร์มอาร์เรย์ (custom_module/src/Form/Registration.php )
3. สร้างไฟล์ .routing.yml
4. สร้าง .module และ hook_form_alter() และ/หรือ hook_form_FORM_ID_alter() เพื่อแก้ไขแบบฟอร์ม ( หากจำเป็น )

นี่คือตัวอย่างที่สมบูรณ์ของแบบฟอร์มการลงทะเบียนพนักงาน:

โครงสร้างโฟลเดอร์:

1. Employee_registration.info.yml

 name: Employee Registration Form type: module description: Custom module for implementing custom employee registration form. core_version_requirement: ^9 || ^10 package: Custom

2. src/Form/Registration.php

 <?php namespace Drupal\employee_registration\Form; use Drupal\Core\Form\FormBase; use Drupal\Core\Form\FormStateInterface; /** * Implements a custom form. */ class Registration extends FormBase { /** * {@inheritdoc} */ public function getFormId() { return 'employee_registration_form'; } /** * {@inheritdoc} */ public function buildForm(array $form, FormStateInterface $form_state) { $form['emp_name'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Name'), '#required' => TRUE, ]; $form['emp_no'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Employee Number'), '#required' => TRUE, ]; $form['emp_mail'] = [ '#type' => 'email', '#title' => $this->t('Enter Email ID'), '#required' => TRUE, ]; $form['emp_phone'] = [ '#type' => 'tel', '#title' => $this->t('Enter Contact Number'), ]; $form['emp_dob'] = [ '#type' => 'date', '#title' => $this->t('Enter DOB'), '#required' => TRUE, ]; $form['emp_gender'] = [ '#type' => 'select', '#title' => $this->t('Select Gender'), '#options' => [ 'Male' => $this->t('Male'), 'Female' => $this->t('Female'), 'Other' => $this->t('Other'), ], ]; $form['submit'] = [ '#type' => 'submit', '#value' => $this->t('Save'), '#button_type' => 'primary', ]; return $form; } /** * {@inheritdoc} */ public function validateForm(array &$form, FormStateInterface $form_state) { if (strlen($form_state->getValue('emp_phone')) < 10) { $form_state->setErrorByName('emp_phone', $this->t('The phone number is too short. Please enter a full phone number.')); } } /** * {@inheritdoc} */ public function submitForm(array &$form, FormStateInterface $form_state) { // Processing form data. $this->messenger()->addMessage($this->t("Employee Registration Done!!")); foreach ($form_state->getValues() as $key => $value) { $this->messenger()->addMessage($key . ': ' . $value); } } }

3. Employee_registration.routing.yml

 employee_registration.form: path: '/registration-form' defaults: _title: 'Employee Registration' _form: '\Drupal\employee_registration\Form\Registration' requirements: _permission: 'access content'

ผลลัพธ์:

ความคิดสุดท้าย

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