Webformで確認画面を追加する方法
はじめに
本記事では、Drupal11でWebformを使用して、 確認画面付きのお問い合わせフォームを作成する方法を解説します。 標準では確認画面がなく、管理画面の設定項目を見つけるのに手間取ったので記事にしました。 フォームの作成は、YAML形式でもフォームを構築できますが、今回はWebform UIモジュールを使用して作成します。
前提条件・環境
本記事では、Drupal11を使用します。
Webformモジュールの準備
Webformの追加
composerでWebformを追加する場合は、下記コマンドです。
composer require drupal/webformしかし、2026年4月現在では安定版のWebformはDrupal10までしか対応しておらず 上記コマンドではエラーになります。 今回はDrupal11用のベータ版があるので、そちらを使用します。 下記はcomposerで、Drupal11用のWebformを追加するコマンドです。
composer require drupal/webform:^6.3@beta -WWebformのインストール
管理画面の「管理」 >「機能拡張」から「Webform」にチェックを入れます。
同じく「Webform UI」にチェックを入れて、ページ下部にある「インストール」を押下します。
確認画面付きフォームの作成
フォームを作成する
管理画面の「管理」>「サイト構築」>「webforms」にある「+Add webform」を押下して フォーム情報を入力して作成します。
作成すると「Build」ページに遷移します。 「+Add element」を押下すると、フォームの要素を追加できます。
ここでは簡単なお問い合わせを作成します。 「名前」「メールアドレス」「お問い合わせ内容」の入力欄を作成しました。
確認画面を追加する
ここでWebformsの「設定」>「フォーム」にある「Form preview settings」の「Enable preview page」を「必須」にすると確認画面を追加できます。 「任意」にすると入力画面に「プレビュー」「送信」のボタンが表示されます。 「プレビュー」を押下すると確認画面へ、「送信」を押下すると完了画面に遷移します。 Form preview settingではそれ以外に、確認画面のプログレスバーの文言を変更したり、確認画面で項目の表示・非表示を選択できます。
フロント画面で確認画面は、下記画像のようになっています。
まとめ
お問い合わせの確認画面は、使用頻度が高いと思うのでまとめました。 確認・完了画面の設定をする際に、設定項目の表記が確認画面は「From preview settings」に完了画面は「Confirmation」になっていました。 普段開発に使用しているWordPressでは「Confirm」「Complete」なので混同してしまい、確認画面の設定だと気づきにくかったです。 その他管理画面から設定できるので、ネタが見つかればまた記事を書けたらと思います。
