Drupalでフォームを作成できる「Contact」と「Webform」の違いとそれぞれの使い方

モチヤスタッフ

ウェブサイトの運営をする上で、フォームを作成したくなる場合があります。

そんなとき、Drupalであれば、モジュールを使ってコードを触ることなく簡単にお問い合わせフォームの作成ができます。

今回は、Drupalのフォーム作成でよく使われる「Contact」と「Webform」の2つのモジュールの違いや、それぞれの使い方についてご紹介します。

「Contact」と「Webform」の違い

ContactはDrupalコアに含まれるモジュールで、シンプルなお問い合わせフォームを簡単に設置できます。

それに対してWebformは、高度なフォームを作成できるモジュールです。
条件分岐や複数ページのフォームを作成できたり、バリデーションの設定も細かくできます。

用意されている入力フィールドの種類もWebformの方が多いのですが、自由度が高い分、複雑で設定に時間がかかります。

簡単なフォームはできる限りContactを使って、もっと細かく設定したり、複雑なフォームが必要になったらWebformを使うのがオススメです。

Contactの使い方

まずはシンプルなフォームを作成できるContactから詳しく紹介します。

モジュールのインストール作業は不要

「Contact」は標準でモジュールがインストールと有効化までされているため、インストール作業は不要です。

権限の設定

Contactで作成したお問い合わせフォームは、デフォルトだとDrupalにログインしたユーザーしか閲覧できない設定になっています。

非ログインユーザーでも閲覧できるようにするためには、Drupal管理画面メニューの[管理]→[ユーザー]へ移動し、[権限]タブを開きます。

スクリーンショット「drupalツールバーのユーザーから権限を選択」

あとは「Contact」の項目を探して、「ユーザーコンタクトフォームを利用する」に「匿名ユーザー」もチェックを入れておきましょう。

これでログインしていない状態でも表示されるようになりました。

また、デフォルトは管理者権限でないとフォームの編集ができないため、他の役割にもフォームの編集をしてもらう必要がある場合は、他の役割にも権限を付けておきましょう。

フォームの新規追加

権限の設定ができたら、次は新規でContactのお問い合わせフォームを作成していきます。

Drupal管理画面メニューの[管理]→[サイト構築]で「コンタクトフォーム」を選択します。

スクリーンショット「drupalツールバーのサイト構築からコンタクトフォームを選択」

デフォルトでいくつか既にフォームが用意されていますが、今回は「コンタクトフォームの追加」ボタンをクリックして新しいフォームを作成します。

スクリーンショット「コンタクトフォームの追加ボタンを選択」

フォームの追加画面に移動するので、「ラベル(フォームの名前)」や「システム内部名称」「受信者(フォーム送信先のメールアドレス)」を入力します。

ちなみに、お問い合わせフォームのURLは、「/contact/システム内部名称」の形式になります。
最終的にURLにも使われることを想定して、「システム内部名称」を付けておくようにしましょう。

スクリーンショット「コンタクトフォーム情報入力画面」

情報を入力できたら、「作成」ボタンを押せば追加完了です。

フィールドの追加設定

フォームの追加はこれだけで完了ですが、ここからは必要に応じてフィールドを追加・編集し、お問い合わせフォームの項目をカスタマイズします。

先ほど作成したお問い合わせフォームの横の三角アイコンをクリックし、「フィールドの管理」を選択します。

スクリーンショット「コンタクトフォーム一覧画面の編集からフィールドの管理を選択」

デフォルトだとフィールドが何もないように見えますが、デフォルトで下記のフィールドは用意されています。

  • 差出人名
  • 差出人メールアドレス
  • 言語
  • 件名
  • メッセージ
  • 送信者メッセージのプレビュー
  • 差出人にコピーを送信

なお、「差出人名」と「差出人メールアドレス」は、実際に表示すると「名前」と「あなたのメールアドレス」というラベル名になるのと、Drupalにログインしていると自動的にユーザー名とメールアドレスが入力されます。

それ以外に必要な場合は「新しいフィールドの作成」ボタンをクリックします。

今回は試しにフィールドを追加するために、デフォルトで用意されているフィールドは無効にして、再度下記のフィールドを追加してみます。

  • 名前:プレーンテキスト
  • メールアドレス:メール

スクリーンショット「フィールドの管理から新しいフィールドの作成ボタンを閃tなく」

フィールドの追加画面が表示されるので、「ラベル」と「フィールドタイプ」を選択します。

スクリーンショット「フィールドの設定画面」

ちなみに、フィールドタイプによっては、選択したあとでさらに細かいオプションを選択できるものもあります。

例えば、「プレーンテキスト」を選択した場合は、そこからさらに1行の「テキスト(プレーン)」にするか、複数行の「テキスト(プレーン, 長文)」にするかを選択します。

スクリーンショット「フィールド設定画面のオプションを選択」

選択したら「継続」ボタンをクリックし、さらに詳細な設定画面へ移動します。

設定できたら「設定の保存」でフィールドを保存し、同じ手順で必要なすべてのフィールドを設定しましょう。

スクリーンショット「フィールドの管理画面」

これでフィールドの追加も完了しました。

フィールドの並び替え

フィールドの追加ができたら、[フォームの表示管理]タブに移動します。
ここでフォームに表示するフィールドの順番や、表示・非表示の設定ができます。

1番左の「十字アイコン」をドラッグアンドドロップすれば、並び替えが可能です。

スクリーンショット「フォームの表示管理画面からフィールドを並び替える」

また、「無効」と書かれた行より下にドラッグすれば、項目を非表示にできます。

スクリーンショット「フォームの表示管理から無効になっているフィールドをフォーカス」

並び替えたあとは、ページ下部の「保存」ボタンをクリックして設定を保存するのを忘れないようにしましょう。

表示確認

お問い合わせフォームの設定が完了したら、実際に表示を確認してみましょう。

[ビュー]タブをクリックすると、実際にフォームの表示確認ができます。
URLは「/contact/システム内部名称」の形式になっています。

スクリーンショット「お問い合わせフォームの表示画面」

フォーム内容を入力して「メッセージを送信」をクリックすると、送信先に設定していたメールアドレスに、入力した内容が送信されます。

このように、シンプルなフォームを作成するには十分な機能が備わっています。

Webformのインストール

ここからはさらに複雑なフォームを作成できるWebformを紹介します。
「Contact」と違い、「Webform」を使う場合はモジュールのインストール作業が必要になります。

Webformのインストール

「Webform」をインストールするためには、まずモジュールページへアクセスします。

ページ下にComposerのインストールコマンドがあるので、実行してインストールをしましょう。

管理画面からモジュールを有効化する

インストールができたら、今度は管理画面からそのモジュールを有効化します。
Drupalの管理画面メニューの[管理]→[機能拡張]をクリックします。

モジュールがインストールされていると、「Webform」のセクションが追加されているので、チェックを入れてページ最下部の「インストール」をクリックすれば完了です。

スクリーンショット「拡張機能からwebformを選択」

なお、Webformはかなり大量の項目が追加されます。
必要に応じて有効にしましょう。

今回は「Webform」と「Webform UI」だけを有効化します。

使わないモジュールはアンインストール

シンプルなフォームは「Contact」を使用し、複雑なものだけ「Webform」を使う方法もありますが、もし「Contact」を使わない場合は、アンインストールしてしまっても問題ありません。

使わないのに有効化していると、間違えてContactの設定をしてしまい、混乱する可能性があります。

使わないのであればアンインストールしてしまいましょう(必要になったらまた有効化すればすぐに使用可能です)。

Drupal管理画面メニューの[管理]→[機能拡張]で[アンインストール]タブを選択し、「Contact」にチェックを入れて「アンインストール」ボタンをクリックすれば完了です。

スクリーンショット「拡張機能アンインストール画面からContactモジュールをアンインストール」

Webformの使い方

権限の設定

Webformはデフォルトだと管理者権限しか編集できないようになっています。

他の役割でも編集できるようにするためには、Drupal管理画面メニューの[管理]→[ユーザー]へ移動し、[権限]タブを開きます。

スクリーンショット「webformの権限設定画面」

あとは「Webform」の項目を探して、必要に応じて権限を有効にします。

フォームの作成

権限の設定ができたら、Webformでフォームの作成を行いましょう。

Drupal管理画面メニューの[管理]→[サイト構築]で「ウェブフォーム」を選択します。

スクリーンショット「サイト構築からウェブフォームを選択」

デフォルトで既にフォームが用意されていますが、今回は「ウェブフォームの追加」ボタンをクリックして新しいフォームを作成します。

スクリーンショット「ウェブフォームを追加ボタンを選択」

「ウェブフォームを追加」モーダルが表示されるので、「タイトル」「管理用の説明」「カテゴリー」「状態(オープンかクローズドかを選択)」を設定します。

スクリーンショット「ウェブフォーム追加設定モーダル」

ちなみに、Webformで作成したフォームのURLは、「/form/システム内部名称」の形式になります。

URLを指定したい場合は、Contact同様に「システム内部名称」もきちんと設定しておくようにしましょう。

フォーム内容の作成

作成が完了したら自動的にフォームの[構築]タブに遷移します。

ここでフォーム内容を作成するのですが、「Webform UI」が有効になっていないと、YAML形式でフォームの内容を作成する必要があります。

有効になっている場合は、下記のような表示になっていて、コードを入力しなくても管理画面上のUIを使って構築できます。

スクリーンショット「ウェブフォームの構築画面フォームの内容作成

今回は「Webform UI」を使う前提で進めていきます。

Webformに追加できる項目は下記の3つです。

追加する項目 内容
要素 テキストフィールドやチェックボックスなど、フォームの1要素のこと
ページ 1ページ目、2ページ目のようにフォームを分けられる
レイアウト 2つの要素を横並びにするなどのレイアウトを追加できる

これら3つの項目を追加して、フォームを構築していきます。

要素の追加

「要素を追加」ボタンをクリックすると、「要素を選択」モーダルが表示されます。
モーダルの中にはさまざまな入力要素が用意されており、「要素を追加」ボタンをクリックで追加できます。

スクリーンショット「要素選択モーダルから追加する要素を選択」

この要素の数を見るだけで、Contactモジュールよりも高度だと分かるのではないでしょうか。

まずは基本的な「テキストフィールド」を追加してみます。
サイドバーが開き、さらに詳細な設定を行います。

スクリーンショット「要素の詳細設定サイドバーを表示」

[全般]タブで基本的な設定を行い、他の[Conditions]タブでは条件分岐の設定ができたり、[高度]タブではCSSなど更に詳細な設定、[アクセス]タブでは表示権限の設定が可能です。

設定が完了したら、「保存」ボタンをクリックして保存しましょう。

ページの追加

「ページを追加」ボタンをクリックすると、サイドバーが開き、ページに関する情報が入力できます。

スクリーンショット「ページに関する情報の入力画面」

ページを追加すると、ページの横に「Add element」ボタンが表示されます。
このボタンをクリックすれば、ページ内に新たな要素を追加できます。

スクリーンショット「ページ内の要素のAdd elementボタンをフォーカス」

他にも、すでに追加されている要素の1番左にある「十字アイコン」をページよりも下にドラッグアンドドロップすれば、ページ内に含めることも可能です。

レイアウトの追加

「レイアウトを追加」ボタンをクリックすると、サイドバーが開きます。

スクリーンショット「レイアウトを追加ボタンを押した後の設定画面」

レイアウトはCSSのFlexboxと同じ挙動をし、高さが異なる要素が横並びのときに、どのようにレイアウトするかを下記3つの中から選択します。

  • Top (flex-start):上揃えにする
  • Bottom (flex-end):下揃えにする
  • Center (center):中央揃えにする

保存すれば、レイアウトが追加されます。
ページと同じで、横に「Add element」ボタンが表示されるので、このボタンをクリックすれば横並びにする要素を追加できます。

また、すでに追加されている要素をレイアウトに含めたい場合は、ドラッグアンドドロップで要素を下に移動させます。

送信ボタンのカスタマイズ

「送信ボタン」の1番右の「カスタマイズ」ボタンをクリックすると、送信ボタンの細かいカスタマイズが可能です。

スクリーンショット「要素送信ボタンのカスタマイズボタンを選択した後の設定画面」

classを追加したり、CSSを直接入力して、ボタンの見た目を変更できます。

すべての項目を設定できたら、ページ下部の「要素を保存」ボタンをクリックして保存しましょう。
今回は最終的に下記のような設定にしました。

スクリーンショット「ウェブフォームの構築の要素の一覧画面」

送信メールの設定

[設定]タブをクリックすると、さまざまなフォームに関する設定ができます。

紹介しきれないレベルのボリュームなのですが、その中でも「Eメール / ハンドラー」の設定は重要なので紹介します。

ここでは、フォームに送信された内容をメールに送信する設定を行います。

ちなみに、Webformで作成したフォームの送信結果は[結果]タブで確認できます。
メールを設定しなくても送信内容の確認は管理画面からできますが、設定しておかないと問い合わせに気がつかない可能性があるため、設定しておくことをオススメします。

スクリーンショット「ウェブフォームの設定Eメール/ハンドラーのEメールを追加ボタンを選択」

「Eメールを追加」ボタンをクリックし、「タイトル」や「送信先のメールアドレス」「送信元のメールアドレス」「本文」などの送信メールの詳細を設定します。

スクリーンショット「Eメール/ハンドラーを選択後の詳細設定画面」

設定が完了したら、「ハンドラーを保存」をクリックして保存します。

これでWebformの基本的な設定は完了しました。
ただ、他にも細かい設定が数多くあるので、ひと通り設定を見て回ると良いでしょう。

表示の確認

フォームの作成ができたので、[ビュー]タブをクリックして実際の表示を確認してみましょう。
URLは「/form/システム内部名称」の形式になっています。

スクリーンショット「webformによって作成されたフォームの表示画面」

このように、複数ページに対応したり、レイアウトや細かい設定まで行ったフォームを、コードを一切触らずに管理画面だけで作成できます。

まとめ

比較してみると、「Contact」と「Webform」モジュールは、どちらもフォームを作成する目的でありながら、機能や設定の複雑さが大きく異なることが分かったのではないでしょうか。

設定のシンプルさであれば「Contact」ですが、複数ページの作成やレイアウトを凝ったり、様々な入力項目に対応しようとすると「Webform」が必要になります。

作成したいフォームに応じて、モジュールをうまく使い分けるようにしましょう。

モチヤスタッフ

Drupalなど技術に関する投稿をモチヤのスタッフが行っています。

モチヤスタッフ の書いた記事一覧

最新の関連記事

Contact お問い合わせ

Drupalでの開発・運用、サーバー構築、Webサイト構築全般、制作費用などに関してお気軽にご相談ください。