WordPressでお問い合わせフォームを作るならContact Form 7は是非使いたいプラグインの1つです。しかも無料！
Contact Form 7を使えばユーザーからのお問い合わせを受けたり、サンクスメールなど自動返信メールも送る事が出来ます。初心者でも簡単に設定が出来るのも魅力です。
ユーザー目線で言えば、問い合わせをメールソフトで送るより、フォームで入力する方がハードルが低いんです。
つまりユーザーとの接点が持ちやすくなり、ブログやサイトの運用にも役立ちます。
ここではよくあるタイプのお問い合わせフォームの作り方を、画像を交えて解説していますので参考にしてくださいね。
本来ならHTMLやCSSだけでなくプログラムも必要になります。
セキュリティやUI・UX面も考慮すると自作するのはそれなりに大変です。
この記事の目次
Contact Form 7とはどんなプラグイン？
ダッシュボードの「プラグイン」→「新規追加」→「Contact Form 7」を入力。画像の様に分かり易いです。
Contact Form 7で出来る事の一例ですが、
- 名前やメールアドレスなどの入力項目を作れる。
- 入力項目もカスタマイズが簡単。
- 自動返信メールも簡単に作れる。
- 日本語マニュアル完備。
Contact Form 7は専門知識のない方でも比較的簡単に設定できる為、非常に人気のプラグイン。インストール数を見ても凄さがわかります。
作者： Takayuki Miyoshi
参考：Contact Form 7のFAQページ 充実した日本語のマニュアルもあるので安心です。
コンタクトフォーム 新規追加
プラグインをインストールすると、ダッシュボードの左メニューに「お問い合わせ」項目が追加されます。
①新規追加
投稿などと同じで、「新規追加」ボタンでフォームを作成します。ちなみにフォームは複数作成可能。
コンタクトフォームの編集
まずは画面の各項目の説明からしますね。フォームは複数作れるので、分かりやすい名前を付けましょう。お問い合わせページに表示されるわけではありません。
投稿ページ内や固定ページ内にショートコードを貼り付けると、HTMLタグに変換されてフォームになります。保存してプレビューで表示確認してくださいね。
１．フォームタブ
ここに入れた項目が、お問い合わせフォームとして実際に表示されます。画像の様に、新規作成するとフォームテンプレートがすでに初めから入っています。
①カーソルで選択
まず、項目を入れたい場所をクリックしてカーソルを合わせます。場所は以下、
<label>ここはHTMLタグです。ここにカーソルを合わせます。</label>
項目を増やしたい時は<label>○○○</label>の記述をコピペして、中の項目を入れ替えればOKです。
②フォームタグをクリックして追加
次に名前やメールアドレスなど、入れたい項目をフォームタグの中から選んでクリックします。
すると入力画面がポップアップしますので、必要項目を入力します。
フォームタグ生成の説明（例：メールアドレスの場合）
フォームタグは最終的にHTMLに変換されてフォームの入力項目になります。
テキストやURLなど、タイプによって入力内容は変わります。画像はメールアドレスのフォームタグ生成の説明です。
①項目タイプ
必須項目にチェックを入れると、入力が必須になります。
例えば名前やメールアドレスなど、必ず入力して欲しい項目などですね。
②名前
フォームタグに付ける名前。ユーザーに表示されるものではありません。
➂デフォルト値
ここに入れた内容が入力された状態で入力欄が生成されます。このテキストはユーザーが編集も出来ます。
「この項目をプレースホルダーの項目として使用する」にチェックを入れると、プレースホルダーとして扱われます。
プレースホルダーとは
入力フォームの入力欄 (テキストボックスやテキストエリア) の中に記述される、入力に関する説明を示したテキスト。あくまで説明用なので入力すると説明テキストは消える。
④ID属性・クラス属性
CSSでレイアウトを変更する際に使うidとclassを入れます。CSSが使える人向け。
⑤生成されたタグ
ここに生成されたタグが表示されます。これを使います。
⑥タグを挿入
「タグを挿入」ボタンを押すと、先ほどカーソルを合わせた場所にタグが挿入されます。
フォームタグを挿入した場合は、後述する「メールタブ」も編集する必要があります。
※フォームタグを編集・挿入したら「保存」ボタンを押してください。ここでの変更内容を次のメールタブに反映させる為です。
２．メールタブ
フォームタグを編集した場合、このメールの設定も同じように編集させる必要があります。
①フォームタグ一覧
フォームタブ側で使っているタグが表示されます。もしフォームタグを生成していれば、そのタグが太字で追加表示されます。
メールタブでは挿入したい場所にタグをコピペしてください。
②送信先
メールを受け取るのはフォームを設置した自分自身なので、メールを受け取れるアドレスを指定します。初期設定はWordPressになっているので、自分のアドレスに変更してくださいね。
サーバー側でお問い合わせフォーム専用のアドレスを作っておくと、何かあっても対処しやすいです。
サーバーの管理画面からチェックするのは面倒なので、メールソフトに転送してます。
③送信元
どこから来たメールなのか、受け取った側が分かる様に名前を付けると良いです。
初期設定はWordPressになっているので、サイト名やサービス名・キャンペーン名などに変更するのがおすすめ。
④メッセージ本文
フォームに入力された内容が入ります。画像では「メッセージ本文：[your-message]」だけですが、この上か下に、別のフォームタグを張り付ける事も出来ます。
目的はフォームから入力された内容を受け取る事なので、フォームタブ内で実際に使ったフォームタグを貼り付ける事になります。
例えば、フォームタブ側でドロップダウンを作った場合、ドロップダウンのフォームタグを貼り付ければユーザーがどれを選択したのかをメール内容で確認出来ます。
２-２．自動返信 メールタブ
自動返信メールを設定すると、問い合わせてきたユーザーに対して自動で返信を返す事が出来ます。
「○○様。お問い合わせありがとうございます。」みたいなメールですね。
お問い合わせ内容も併せて表示する設定にしておけば、ユーザーに対しても親切。リマインドになります。
①メール（2）を使用
チェックを入れると新たにメールテンプレートが使用できます。使い方は色々あるのですが、自動返信で使う事が多いです。
②送信先
この場合、フォームで入力してもらったユーザーのメールアドレスが入ります。
フォームタブ内のフォームタグと合わせてくださね。
➂送信元
ここはフォームタブと同じでフォーム様に用意した自分のメールアドレスでOKです。
④追加ヘッダー
To以外にもCcやBccが指定できます。
公式参考：Cc、Bcc、その他のメールヘッダーを追加するには
⑤メッセージ本文
フォームで送信したユーザーに返信される内容です。画像では「メッセージ本文：[your-message]」だけですが、この上か下に、フォームタブで使用した「フォームタグ」を張り付ける事も出来ます。
つまり、送信を受けたった旨と送信内容の確認を伝える意味合いですね。
３．メッセージタブ
お問い合わせフォームで何かを入力し、送信ボタンを押した際に表示されるメッセージを編集する事が出来ます。
例えば、入力漏れがあったり、何らかの理由で送信エラーがあった時などにメッセージが出ます。
うまく送信できた時もメッセージが出ます。
メッセージを表示させると親切です。ユーザーはエラー時に何がダメだったのか確認出来ますし、上手く送信できた時でもメッセージが出ると安心します。
４．その他の設定タブ
上級者向けの内容になります。
例えば、ログインしているユーザーだけがコンタクトフォームの送信を行えるようにする場合など。
こういう時は購読者限定モードを使います。このモードでは、ログインしていないユーザーはコンタクトフォームの送信ができず、代わりにログインが必要だというメッセージが出ます。
ログインしているユーザーは通常どおり使うことができます。
まとめ
編集ページの上の方にあるショートコードを固定ページに貼り付ければ完成です。
Contact Form 7は設定が簡単なうえ、日本語のマニュアルもしっかりしているので使いやすいです。
フォームタグの種類は沢山あるので、目的に合わせて追加してくださいね。
サイトやブログを運営するならお問い合わせフォームは必要なので、プラグインを活用しましょう。
note
ウェブ制作の仕事でもよく使うくらい有名です。