Drupal 8 Webformモジュール–簡単なチュートリアル

公開: 2020-04-07

Drupal 8 Webformモジュールは、提供されたモジュールであり、Drupal 8で最も強力で柔軟なモジュールの1つです。これは、フォームの作成と送信の管理に使用されるオープンソースモジュールです。 Drupal Webformは、次のDrupalプロジェクトに絶対に必要なトップDrupalモジュールのリストにも含まれています。 このDrupal8 Webフォームチュートリアルで、用途の広いモジュールの詳細をご覧ください。

Drupal Webformは、フォームを作成し、DrupalWebサイトのユーザーから情報を抽出するために使用される非常に用途の広いモジュールです。 たとえば、Drupal Webフォームモジュールを使用して、調査、連絡フォーム、フィードバックフォームなどを作成できます。 送信後、このモジュールを使用すると、ユーザーに電子メールを送信したり、送信に関する通知を管理者に送信したりできます。 送信を表示し、ノード、ページ、またはブロックとして公開し、結果をCSVファイルにエクスポートするオプションがあります。

Drupal.org/Webformから派生したWebフォームのロゴ

Drupal.org/Webformから派生したWebフォームのロゴ

Drupal 8Webformモジュールの使用を開始する

Drupalコミュニティは私たちにいくつかの驚異的なモジュールを提供してくれました。DrupalWebformは確かにそれらの1つです。 WebformモジュールのビルダーおよびメンテナーであるJacobRockowitzは、かつてWebformとDrupalコミュニティへの貢献について私たちと話し合っていました。 「誰もがソフトウェアを構築するための個人的な溝/スタイルを持っています。 ソフトウェアを20年間書いた後、私はDrupal 8のWebformモジュールである単一の目標/プロジェクトに取り組むのが好きだということを受け入れるようになりました。同時に、オープンソースソフトウェアの構築は単なるものではないことも学びました。貢献するコード; コードを中心にコミュニティをサポートおよび作成することです。」 JacobおよびDrupalコミュニティの貢献者の詳細についてはこちらをご覧ください。
それでは、Drupal 8WebフォームモジュールのインストールとWebフォームの作成を始めましょう。

DrupalWebformモジュールをインストールして有効にします

Drupal 8 Webformモジュールをhttps://www.drupal.org/project/webformからダウンロードして、有効にします。

drupal8をインストールして有効にします

Webフォームを有効にするには、[拡張]に移動し、[Webフォーム]カテゴリに、チェックボックスとともにWebフォームが表示されます。 Drupal 8を使用するには、WebフォームでフィールドAPI、システムモジュール、ユーザーモジュールを有効にします。 これらの3つのモジュールを有効にしないと、Webフォームを有効にできません。
Webフォームには、特定の機能を提供する多くのオプションがあります。 要件に従ってそれらを有効にします。

新しいDrupalWebフォームを作成する

新しいDrupal8 Webフォームを作成するには、WebformUIとWebformAccessを有効にします。 Webform UIは、Webフォームを構築/保守するための優れたユーザーインターフェイスを提供し、WebformAccessはWebフォームノードを制御します。 Webフォームアクセスを有効にする前に、Webフォームノードを有効にします。 次に、 [構造]> [Webフォーム]に移動します。

新しいWebフォームを作成する

Webフォームのオプションは次のとおりです。

  • 最初のタブの[フォーム]は、作成されたWebフォームのリストです。 デフォルトでは、お問い合わせフォームがあります。 これは、Webformモジュールによって提供されるテンプレートです。
  • 2番目のタブのテンプレートにはさらに多くのテンプレートがあります。
  • [送信]タブでは、ユーザーが送信したフォームを表示できます。
  • オプションには、ラジオボタン、チェックボックス、およびメニューで使用できる、事前定義された再利用可能な値のセットがあります。
  • [アドオン]タブには、さらにいくつかの再利用可能な値があります。
  • 構成では、Webフォームの一般的な設定が提供されます。

新しいWebフォームを作成するには–

  1. [Webフォームの追加]をクリックします。
  2. [Webフォームの追加]をクリックすると、タイトル、説明、カテゴリ、およびステータスを示すタブが開きます。
  3. WebフォームにタイトルとWebフォームに関する簡単な説明を追加します。
  4. 最後に、[ステータス]の下に開いているオプションと閉じているオプションの2つがあります。 これは、ステータスが「オープン」の場合、フォームはユーザーが利用でき、それ以外の場合は閉じていることを意味します。 すべてのオプションを編集したら、[保存]をクリックします たとえば、ここでのタイトルは「登録」です。
Webフォーム追加フィールド

Drupal 8Webフォームへのフィールドの追加

[保存]をクリックすると、指定されたWebフォームのタイトルが表示されたページが開きます(ここでは–登録)。

webform登録


●フィールドをWebフォームに追加するには、[+要素の追加]をクリックします。
●[+要素の追加]をクリックすると、Webフォームで使用できるフィールドのリストを含むポップアップが表示されます。

Webフォームに要素を追加する


要素をプレビューするには、右上の[プレビュー表示]をクリックします。 要素を追加するには、それぞれの要素の[要素追加]をクリックします。 クリックすると、ページの右側にポップアップが開きます。

Webフォーム要素


ここには、タイトル名を編集するためのオプションと、フィールドの多くの詳細設定があります。 すべての設定を変更したら、最後に[保存]ボタンをクリックします。 Webフォームのすべての必須フィールドの[必須]の下にあるチェックボックスをクリックします。

●上部の[表示]タブをクリックして作成したWebフォームを表示できます。 [送信]ボタンは、Webフォームに要素を追加すると自動的に作成されます。
●[テスト]タブは、作成されたWebフォームにテストを提供します。 フォームフィールドの値は、ランダムな値で自動的に入力されます。
●[結果]タブでは、送信されたフォームの値を表示できます。 結果タブには3つのオプションがあります。

  1. 提出タブの下にあるすべての提出フォームのリスト。
  2. 送信された結果は [ダウンロード]タブで区切りテキスト、HTMLテーブル、JSONドキュメント、またはYamlドキュメントの4つの形式でダウンロードできます。
  3. 結果の明確なタブで提出フォームをクリアすることができます。

●[設定]タブには、ユーザーの要件に応じて変更できるWebフォームの一般設定があります。

●DrupalWebフォームの構成は、[エクスポート]タブからダウンロードできます。 構成が表示され、ページの最後にある[ダウンロード]ボタンをクリックしてダウンロードできます。 YAML設定ファイルは簡単に別のDrupalのインスタンスにインポートすることができたような構成は、YAML形式でダウンロードされます。

DrupalWebフォームへのコンテンツの追加

Drupal 8 Webformモジュールが有効になるとすぐに、「 webform 」という名前のコンテンツタイプが作成されます。 タイトル、本文、ウェブフォームなどのフィールドがあります。 Webフォームには、作成されたすべてのWebフォームを含むドロップダウンがあります。

Webフォームにコンテンツを追加するには、 [コンテンツ]> [コンテンツの追加]> [ Webフォーム]に移動します 前述のように、タイトルと本文があります。 Webformというラベルの付いたドロップダウンがあり、作成されたすべてのWebフォームのタイトル名が表示されます。

Webフォーム

その隣に「 Webフォーム設定」と呼ばれる別のオプションがあります

Webフォーム設定

ステータスでは、3つのオプション、オープン(ユーザーに開放保つために)、クローズ(ユーザーにフォームを閉じます)およびスケジュールそれは、と述べた日時に応じてフォームを日付と時刻のフィールドを提供しますがあります記入するためにユーザーに公開されたままになります)。

[デフォルトの送信データ]フィールドに使用可能なトークンを入力して、デフォルトのデータを提供することもできます。 トークンは、[使用可能なトークンの参照]をクリックして参照できます トークンを書き込むための例は、[例]リンクをクリックして表示できます。 また、送信されたすべてのフォームを[結果]タブで表示できます。

コンテンツタイプのフィールドとしてDrupal8Webフォームを追加する

●● Drupal Webフォームをコンテンツタイプに追加するには、 [構造]> [コンテンツタイプ]> [フォームが必要なコンテンツタイプのフィールド管理する]に移動します

●● [追加]フィールドをクリックします。 [新しいフィールドの追加]で、[参照]セクションの下の[ Webフォーム]を選択し、そのフィールドにラベルを付けて、[保存して続行]をクリックします。

●● [フィールド設定]で、フィールドに許可されている値の数を指定して、[フィールド設定の保存]をクリックできます。

●● デフォルト値からデフォルトのフォームを選択するか、「設定の保存」をクリックすることができます。

●● 次に、[コンテンツ]> [コンテンツの追加]に移動し、Webフォームを参照するフィールドを持つコンテンツタイプを選択します。

Webフォーム

●● このコンテンツに必要なドロップダウンからフォームを選択します。 送信されたフォームは、そのコンテンツの[結果]タブで表示できます。

DrupalWebフォームにキャプチャを追加する

キャプチャが多くのWebサイトで広く使用されているのを見たことがあるはずです。 フォームを送信する前に、質問を提供し、ユーザーからの回答を求めます。 これにより、多くのフォーム送信や電子メール送信を行うことで、ボットがサーバーに過負荷をかけるのを防ぎます。

Drupal Webformを使用すると、Webフォームの作成中にCaptcha要素を追加できます。 Drupal webform captchaでは、Captchaモジュールを有効にする必要があります。

Drupal Webフォームキャプチャをフォームに追加する手順:

●● www.drupal.org/project/captchaからcaptchaモジュールをダウンロードして有効にします。

●● [構造]> [Webフォーム]に移動します。

●● キャプチャが必要なフォームのビルドをクリックします。

●● [要素の追加]をクリックして、[高度な要素]を展開します 高度な要素のリストを展開することにより、表示することができます。 キャプチャの要素を追加をクリックして、キャプチャを追加します。

webformsキャプチャ

●● [要素の追加]をクリックすると、右側に設定ウィンドウが開きます。 管理者がキャプチャをデバッグおよび表示できるように、[管理モード]チェックボックスをオンにします。

●● チャレンジタイプには、数学と画像の2つのオプションがあります。 いずれかを選択できます。 次に、[保存]と[要素の保存]をクリックします

●● フィールドタイプWebformのコンテンツタイプにフィールドを追加し、キャプチャが追加されたフォームを参照します。

●● 次に、[コンテンツ]> [コンテンツの追加]>と、フォームを参照するフィールドを持つコンテンツタイプに移動します。

●● タイトルを入力してコンテンツを保存します。 コンテンツを表示すると、キャプチャとともにフォームが公開されます。 送信ボタンをチェックする前に、キャプチャフィールドに入力する必要があります。そうしないと、フォームが送信されず、アラートメッセージが表示されます。

drupal 8Webフォーム

DrupalWebformモジュールの利点

●● Drupal Webformモジュールはオープンソースです。つまり、無料であり、フォームのセットアップと構成に必要な時間はわずかです。

●● フック、Webフォームハンドラー、またはDrupal WebformValidationモジュールを介してフォーム検証を実行することもできます。 Drupal Webフォーム検証モジュールは、独自の検証ルールをカスタマイズおよび作成するノードに追加のタブを追加します。

●● これらのWebフォームは柔軟性があり、フォームで使用されるフィールドをカスタマイズできます。

●● ユーザーや管理者に通知やメールを送信するなど、1回のインストールで多くのオプションを提供します。

●● Drupal Webformsを使用すると、送信結果を簡単にエクスポートできます。 ユーザーは、送信されたフォームの結果を管理インターフェースで表示でき、ボタンを1つクリックするだけで結果をCSV形式でエクスポートすることもできます。