Revitalisieren Sie Ihre Formulare: Verbessern Sie die Benutzererfahrung mit der Formular-API von Drupal

Wussten Sie, dass „Formmüdigkeit“ eine Sache ist?! Es ist ein Gefühl der Erschöpfung, wenn man zu viele Formulare ausfüllen muss. Aber Formulare sind ein wesentlicher Bestandteil einer Website und kein Website-Besitzer kann (oder sollte) auf sie verzichten. Wie können Sie also sicherstellen, dass Ihre Website dazu beiträgt, Formularermüdung zu reduzieren? Einfach! Halten Sie es einfach und kurz, bieten Sie klare und prägnante Anweisungen, brechen Sie lange Formulare auf und verwenden Sie Autofill. Stellen Sie vor allem sicher, dass Sie eine luftige Benutzererfahrung bieten, um sie auszufüllen.

Die Formular-API von Drupal bietet eine Möglichkeit, leicht anpassbare und thematisch anpassbare Formulare zu erstellen, die sich gut in jede Website einfügen. Es bietet Entwicklern eine Reihe von Funktionen und APIs zum Erstellen, Validieren und Verarbeiten von Formularen in Drupal. Tauchen Sie tiefer in die erstaunliche Drupal Form API ein und finden Sie heraus, wie Sie sie in Ihrem nächsten Projekt implementieren können.

Warum Formular-API

Wie Sie wissen, sind Formulare ein entscheidender Bestandteil jeder Website, da sie es Benutzern ermöglichen, mit ihnen zu interagieren, indem sie Daten übermitteln. Mit der Formular-API von Drupal können Entwickler einzigartige Formulare für verschiedene Zwecke erstellen, darunter Kontakt, Anmeldung und Registrierung. Einige Gründe, warum Sie die Formular-API in Betracht ziehen sollten:

1. Es ist einfach zu bedienen und erfordert nicht viel Programmiererfahrung. Sie können Formulare mit einer Reihe einfacher und intuitiver Funktionen erstellen.
2. Es bietet integrierte Validierungsfunktionen, mit denen Sie Formulardaten einfach validieren können.
3. Verfügt über integrierte Sicherheitsfunktionen, die helfen, Angriffe wie Cross-Site-Scripting (XSS) und Cross-Site Request Forgery (CSRF) zu verhindern.
4. Es ist hochgradig anpassbar und kann verwendet werden, um komplexe Formulare mit mehreren Feldern, Schaltflächen und Aktionen zu erstellen.
5. Formular-APIs sind gestaltbar, sodass Entwickler CSS und HTML ändern können, damit ihre Formulare so aussehen, wie sie es möchten.
6. Es kann einfach mit anderen Drupal-APIs integriert werden.

Dinge, die Sie wissen müssen, bevor Sie Formulare erstellen

Es gibt verschiedene Arten von Formularen, die häufig in Drupal verwendet werden. Jede enthält eine Basisklasse, die Sie in einem einzigartigen Modul Ihres eigenen Designs erweitern können.

Identifizieren Sie zunächst den Formulartyp, den Sie erstellen müssen:

• Eine generische Form. FormBase erweitern.
• Ein Konfigurationsformular, mit dem Administratoren die Einstellungen eines Moduls aktualisieren können. Erweitern Sie ConfigFormBase.

Jedes Formular, das FormBase in seiner Hierarchie hat, muss die folgenden Methoden implementieren, da FormBase FormInterface implementiert.

• getFormId()
• buildForm()
• sendForm()

Um ein generisches benutzerdefiniertes Formular mit der Formular-API zu erstellen, müssen Sie eine Funktion definieren, die ein Array von Formularelementen innerhalb von buildForm() zurückgibt. Der Schlüssel jedes Elements ist der Name des Formularelements, und der Wert ist ein Array von Eigenschaften, die das Element definieren. Um beispielsweise ein Textfeld zu erstellen, würden Sie ein Element wie folgt definieren:

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

Validierung hinzufügen

Die Formular-API bietet auch eine Möglichkeit, Benutzereingaben zu validieren. Sie können Ihrer Formulardefinition Validierungsfunktionen hinzufügen, die aufgerufen werden, wenn das Formular gesendet wird. Wenn eine Validierungsfunktion eine Fehlermeldung zurückgibt, wird die Formularübermittlung verhindert und die Fehlermeldung wird dem Benutzer angezeigt.

Um eine Validierungsfunktion hinzuzufügen, müssen Sie eine validateForm() implementieren.

Verarbeitung von Formulareinsendungen

Wenn ein Formular gesendet wird, ruft Drupal eine von Ihnen definierte Sendefunktion auf. Die Übermittlungsfunktion kann jede notwendige Verarbeitung der Formulardaten durchführen, wie z. B. das Speichern in der Datenbank

Um eine Übermittlungsfunktion zu definieren, müssen Sie ein submitForm() implementieren.

Integrieren Sie das Formular in eine Anfrage

Um dieses Formular in die URI-Struktur einer Drupal-Site zu integrieren, verwenden Sie eine Route wie die folgende:

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

Der Schlüssel _form teilt dem Routingsystem mit, dass der bereitgestellte Klassenname eine Formularklasse ist, die als Formular zu instanziieren und zu handhaben ist.

Erstellen eines benutzerdefinierten Formulars mit der Drupal Form API

Befolgen Sie diese einfachen Schritte, um mit der Erstellung eines benutzerdefinierten Formulars mit der Formular-API von Drupal zu beginnen:

1. Erstellen Sie eine .info.yml in einem benutzerdefinierten Modul. ( Da wir ein separates Modul für benutzerdefinierte Formulare erstellen, ist dieser Schritt nicht erforderlich, um Formulare in einem vorhandenen Modul hinzuzufügen ).
2. Erstellen Sie eine Formularklasse zum Zurückgeben des Formulararrays. (custom_module/src/Form/Registration.php )
3. Erstellen Sie eine .routing.yml- Datei
4. Erstellen Sie ein .module und hook_form_alter() und/oder hook_form_FORM_ID_alter(), um das Formular zu ändern ( falls erforderlich ).

Hier ist ein vollständiges Beispiel für ein Mitarbeiterregistrierungsformular:

Ordnerstruktur:

1. mitarbeiter_registrierung.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/Formular/Registrierung.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. mitarbeiterregistrierung.routing.yml

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

Ergebnis:

Abschließende Gedanken

Mit der Formular-API können Sie komplexe und benutzerdefinierte Formulare mit Validierungs- und Verarbeitungsfunktionen in Drupal erstellen. Wenn Sie die Formular-API verwenden, können Sie sicher sein, dass Ihre Formulare konsistent und für Ihre Benutzer einfach zu verwenden sind. Suchen Sie nach einer Drupal-Agentur, die Ihnen hilft, ein benutzerfreundliches Erlebnis für Ihr Publikum zu schaffen? Sprechen Sie noch heute mit unseren Drupal-Experten!