WordPress お問い合わせフォームを設置する方法

記事公開日:2018.03.08

最終更新日:2018.03.09

701 PV

WordPressではプラグインを使用することで、高度な知識がなくても簡単にオリジナルのお問い合わせフォームを作成することができます。

プラグインをインストール

WordPressで有名な『Contact Form 7』を使用したフォーム作成方法を紹介します。管理画面のプラグインから新規追加で『Contact Form 7』をインストールします。有効化すると管理画面左側メニューに『お問い合わせ』の項目が追加されます。

プラグインの設定をする

『Contact Form 7』の設定はメニューに追加された『お問い合わせ』から設定することができます。『Contact Form 7』は複数のフォームを作成することが可能です。例えば、お問い合わせフォームだけでなく、アンケートや、採用専用のフォームを作成することもできます。フォームごとに表示するテキストや項目も自由に変更し、自分好みのフォームの作成が可能です。

問い合わせフォームを設定する

まずはフォームの名前を決めます。フォームの名前は初期の状態では無題になっています。複数のフォームを作成し管理していくときにどれが何のフォームかわかりづらくなってしまうので、フォームの内容がわかるように『お問い合わせ』や『採用フォーム』『アンケート』などわかりやすい名前をつけることをお勧めします。

フォームに項目を追加する

フォームの名前を決めたら、フォームに必要な項目を設定していきます。『フォーム』というタブを選択し設置していきます。追加できるタグ一覧があるので、必要な項目を選択クリックし追加していきます。

選択できる項目

  • テキスト
  • メールアドレス
  • URL
  • 電話番号
  • 数値
  • 日付
  • テキストエリア
  • ドロップダウンメニュー
  • チェックボックス
  • ラジオボタン
  • 送信ボタン

などフォームに必要な基本的なものが選択できる様になっています。追加したい項目をクリックするとタグが出力されるので、設置したい箇所にタグを追加します。項目入力が完了したら、入力範囲の下にある『保存』ボタンをクリックし保存します。

送信完了のメッセージ

ContactForm7は、ユーザーがフォームを送信した後にサンクスページに移動することがありません。「メッセージを送信しました」というメッセージが表示されるだけです。メッセージは初期設定の状態ではフォームの下の方に表示されるだけで、見落とされる可能性が高いです。

[response]というタグを使用することで好きな場所に『メッセージを送信しました』と表示させることができます。

自動返信メール設定

項目入力が完了したらメールの設定です。『フォーム』タブの右側『メール』タブを選択します。メール設定では、ユーザーがサイトのフォームから送信した時に送られてくるメールの設定です。

メールの設定方法

メールの設定は4つの項目を入力するだけで設定できます。
・宛先…フォームで送信された内容を受信したい、メールアドレスの設定をします。複数のアドレスを設置する場合は『,』で区切り、次のメールアドレスを入力します。
・差出人…メールの差出人を設定します。
・件名…『お問い合わせがありました。』など、受け取るメールの件名を設定します。
・追加ヘッダー…CcやBccの設定をします。特に設定するものがない場合、何も書かなくても問題ありません。

二つ目のメール設定の仕方

初期の状態ではメール設定1つしかできませんが2つのメール設定を行い、管理者宛てのメール設定と、ユーザー(送信者)宛てのメール設定が可能です。
二つ目のメールを設定する場合は、画面下部の「メール(2)を使用」にチェックを入れて上記の『メール設定』と同じ手順で必要な情報を入力するだけで設定完了です。

作成したフォームをページに追加する(サイトに反映)

『Contact Form 7』プラグインで作成したフォームは、お問い合わせ設定するだけではサイトに表示されません。

反映させるためには固定ページ作成が必要

固定ページ新規作成で『お問い合わせ』という固定ページを作成します。(例として『お問い合わせ』としていますが、フォームを表示させたいページの名前で大丈夫です)

固定ページを作成したら、『Contact Form 7』の設定画面にある追加したいコンタクトフォームのショートコードをコピーします。コピーしたショートコードを先ほど作成した『お問い合わせ』ページの任意で記入する部分に貼り付けます。

固定ページを保存(更新ボタンをクリック)し、ページを表示すると、作成したお問い合わせフォームが反映されたページの完成です。投稿記事や、テキストウィジェットにも同じ方法で追加できます。

確認画面の設定

『Contact Form 7』だけでは「入力→送信」の流れでしかありません。「入力→確認→完了」とするためには、『Contact Form 7 add confirm』プラグインをインストールし有効化します。

Contact Form 7 add confirmでできること

・『Contact Form 7』で作成したフォームに対し確認画面を表示する
・入力したフォームの項目を修正する時に、前の画面に戻ることが可能になる

設定の仕方

『Contact Form 7 add confirm』をインストールすると、『Contact Form 7』のフォーム設定時になかった『確認ボタン』と『戻って編集ボタン』のタグが追加されています。フォームの項目を設定する時と同じ様にタグを追加すると「入力→確認→完了」の流れを作成することができます。

まとめ

Contact Form 7 は、フォームを作るために必要な基本的な機能が揃っていて、使いやすいプラグインです。HTMLやCSSが理解できているとフォームのデザインの幅も広がり自分好みの素敵なフォーム作成が可能です。いろんなサイトのフォームを参考にフォーム作成をたのしんでもらえたらと思います。

このエントリーをはてなブックマークに追加

筆者

A.Haraguchi

Bigmac inc. 制作部所属。2016年3月に入社しました。 ほぼ未経験の状態で入社し、戸惑うこともたくさんありましたが、会社のメンバー達に支えられながら今に至ります。 2児の母なので休日は子供との時間にしています。一緒に料理したり、家事を手伝ってもらったり、娘達が自分でできるようになっていく姿をみることが最近の楽しみです。

筆者が最近執筆した記事