• ホームページ
  • 記事
  • SEO
  • フォームを活性化する: Drupal のフォーム API でユーザー エクスペリエンスを強化する

フォームを活性化する: Drupal のフォーム API でユーザー エクスペリエンスを強化する

公開: 2023-04-11

「フォーム疲労」って知ってた？！ あまりにも多くのフォームに記入しなければならないときは、疲労感があります。 しかし、フォームは Web サイトの不可欠な部分であり、サイトの所有者はフォームなしではできません (またはすべきではありません)。 では、どうすれば Web サイトがフォーム疲れを軽減するのに役立つのでしょうか? 簡単！ シンプルで短く保ち、明確で簡潔な指示を提供し、長いフォームを分割し、自動入力を使用します。 何よりも重要なことは、入力するためのさわやかなユーザー エクスペリエンスを提供していることを確認することです。

Drupal の Form API は、簡単にカスタマイズ可能でテーマを設定できるフォームを作成して、どの Web サイトにもうまく溶け込む方法を提供します。 Drupal でフォームを作成、検証、処理するための関数と API のセットを開発者に提供します。 すばらしい Drupal Form API を深く掘り下げて、次のプロジェクトでそれを実装する方法を見つけてください。

Drupal フォーム Api

フォーム API を使用する理由

ご存知のように、フォームは、ユーザーがデータを送信することで対話できるようにするため、すべての Web サイトの重要な部分です。 Drupal のフォーム API を使用すると、開発者は連絡先、ログイン、登録など、さまざまな目的のために独自のフォームを作成できます。 フォーム API を考慮する必要があるいくつかの理由:

  1. 使い方は簡単で、コーディングの経験はあまり必要ありません。 シンプルで直感的な一連の機能を使用して、フォームを作成できます。
  2. フォーム データを簡単に検証できる組み込みの検証関数を提供します。
  3. クロスサイト スクリプティング (XSS) やクロスサイト リクエスト フォージェリ (CSRF) などの攻撃の防止に役立つセキュリティ機能が組み込まれています。
  4. 高度なカスタマイズが可能で、複数のフィールド、ボタン、およびアクションを含む複雑なフォームを作成するために使用できます。
  5. フォーム API はテーマに対応しているため、開発者は CSS と HTML を変更してフォームの外観を自由に変更できます。
  6. 他の Drupal API と簡単に統合できます。

フォームを作成する前に知っておくべきこと

Drupal でよく使われるフォームにはさまざまな種類があります。 それぞれに、独自の設計の一意のモジュールで拡張できる基本クラスが含まれています。

まず、作成する必要があるフォームのタイプを特定します。

  • 一般的なフォーム。 FormBase を拡張します。
  • 管理者がモジュールの設定を更新できる構成フォーム。 ConfigFormBase を拡張します。

FormBase が FormInterface を実装しているため、階層内に FormBase を持つフォームは次のメソッドを実装する必要があります。

  • getFormId()
  • buildForm()
  • submitForm()

フォーム API を使用して一般的なカスタム フォームを作成するには、 buildForm()内でフォーム要素の配列を返す関数を定義する必要があります。 各要素のキーはフォーム要素の名前で、値は要素を定義するプロパティの配列です。 たとえば、テキスト フィールドを作成するには、次のように要素を定義します。

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

検証の追加

フォーム API は、ユーザー入力を検証する方法も提供します。 フォームの送信時に呼び出される検証関数をフォーム定義に追加できます。 検証関数がエラー メッセージを返した場合、フォームの送信は阻止され、エラー メッセージがユーザーに表示されます。

検証関数を追加するには、 validateForm()を実装する必要があります。

フォーム送信の処理

フォームが送信されると、Drupal はユーザーが定義した送信関数を呼び出します。 送信機能は、データベースへの保存など、フォーム データの必要な処理を実行できます。

送信関数を定義するには、 submitForm()を実装する必要があります。

フォームをリクエストに統合する

このフォームを Drupal サイトの URI 構造に統合するには、次のようなルートを使用します。

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

_formキーは、指定されたクラス名がインスタンス化されてフォームとして処理されるフォーム クラスであることをルーティング システムに伝えます。

Drupal Form API を使用したカスタム フォームの作成

以下の簡単な手順に従って、Drupal の Form API を使用してカスタム フォームを作成するプロセスを開始します。

  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'

結果：

従業員登録フォーム

従業員登録結果ページ

最終的な考え

フォーム API を使用すると、Drupal で検証および処理機能を備えた複雑でカスタマイズされたフォームを作成できます。 フォーム API を使用すると、フォームに一貫性があり、ユーザーにとって使いやすいことが保証されます。 オーディエンスのためにユーザーフレンドリーなエクスペリエンスを構築するのに役立つ Drupal エージェンシーをお探しですか? Drupal の専門家に今すぐ相談してください。