logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll

3.6. Webforms は強力なフォームビルダー。

29/08/2019, by mikhail

この動画では、強力なフォームビルダー Webform の扱い方を探ります。modules ページに移動しましょう。webform を作成するには、WebformWebform UI モジュールを有効にする必要があります。webform をノードページとして表示したい場合は、Webform Node モジュールが必要になります。

Drupal Webform

Drupal 6 と 7 では、Webform はノードページを通じて動作していました――webform は Webform コンテンツタイプに付加されていました。Drupal 8 以降では、各 webform が独自のページを持ち、フォーム自体を任意のページにブロックとして表示できるので、別のノードページは必要ありません。

Webform モジュールが有効になったら、新しい webform の作成を始められます。

Webform Node モジュールを有効にした場合、webform を作成するリンクは Content > Add content > Webform にあります。作成するページで、Title と Description を追加します。Form フィールドで既存の webform を選択することも、空白のままにして新しいものを作成することもできます。

/node/add/webform

Contact Us form

フォーム自体を作成するには、Structure - Webforms メニューに移動します。次に、それをノードページに挿入できます。
現在、問い合わせフォームが 1 つしかないので、新しいものを追加しましょう。もちろんデフォルトのフォームを使えますが、Webform のフィールドがどう動作するか探るために、新しいものを作成します:

/admin/structure/webform

Drupal contact us form

これで、フォームに新しい要素を追加できます:

Text field – Our Name

Drupal text field

Phone field – Phone

Webform phone

Webform モジュールは Drupal の Fields API を使っており、サイト上の任意の Entity で利用できる任意のフィールド――ノード、ブロック、タクソノミー用語、その他のエンティティに付加できるもの――を使えます。

任意のフィールドの編集に入ると、多数の設定が見つかります。あるフィールドが特定の値を持つときに別のフィールドが表示されるように、依存フィールドを構成できます。例えば、問い合わせフォームで法人と個人を選択できる場合、各タイプに異なるフィールドを表示できます。

正規表現を使って検証を行うこともできます。しかし、カスタムモジュールの hook_form_alter() を通じてプログラムで検証を追加することもできます。

フィールドにクラスを構成できます――例えば、レイアウトに Bootstrap を使っている場合、フィールドラッパーに列クラスを割り当てて、フィールドが必要に応じて列に揃うようにできます。2 列レイアウトには col-md-6 のように。

Form display セクションでは、フィールドラベルを表示するかどうか、フィールドの前後に説明を追加するか、プレースホルダーを設定するか、フィールドの最小・最大長を定義するかを構成できます。

送信者に返信できるように Email フィールドを、そしてメッセージ内容用のテキストエリアフィールドをまだ追加する必要があります。

Webform 設定

フォームが動作していない場合に表示するメッセージを書けます。

Submit ボタンのテキストをオーバーライドし、レイアウトクラスを追加します

Wizard 設定

複数ページのフォームで Next / Previous ボタンのラベルを変更できます。

その他の設定の説明。

Thank you メッセージの設定。

webform を左カラムのブロックとして表示。

Webform の通知設定。