WordPressにお問い合わせフォームを設置する(Contact Form 7)

この記事は約6分で読めます。

  • LINEで送る

Contact Form 7の設置

サイトになくてはならないのがお問い合わせフォームです。
WordPressでは、プラグイン「Contact Form 7」を使って簡単に設置できます。

カスタマイズして、お問い合わせ者に対しての確認メールも送信できるので使い勝手は抜群です。
お問い合わせフォームは、訪問者がサイト管理者へ個別にコンタクトできる
唯一の手段と言っても良いので、ぜひ最初のほうで設置しましょう。

特に、アフィリエイトを含む情報発信系サイトはお問い合わせからコンテンツが生まれることもあります。
お問い合わせからコンテンツができた事例 | アフィリエイト通信

Contact Form 7を導入してお問い合わせフォームを設置

それでは早速、「Contact Form 7」を導入して、お問い合わせフォームを作成します。
固定ページの作成など、少し手順は多いですが難しい設定はありません。

インストール

Contact Form 7の設置

「プラグイン > 新規追加」から「Contact Form 7」を検索します。
直接ダウンロードは以下のページから可能です。
WordPress › Contact Form 7 « WordPress Plugins

Contact Form 7の設置

Contact Form 7の設置

「Contact Form 7」を今すぐインストールし、
インストール完了後にプラグインを有効化します。

これで、「Contact Form 7」のインストールは完了です。

お問い合わせフォーム作成

Contact Form 7の設置

さっそく、コンタクトフォームを作成します。
インストール後に、ダッシュボードに「お問い合わせ」が表示されるので、
それをクリックすると、お問い合わせフォーム作成画面を表示できます。

デフォルトで既に1つコンタクトフォームが作成されているので、今回はこれを修正します。
用途の異なるお問い合わせフォームを作成する場合は、上の「新規作成」から作れます。
既に作成したコンタクトフォームのコピー(「複製」ボタン)も可能です。

フォームの名前を変更する

Contact Form 7の設置

まずは、1番上の「コンタクトフォーム1」という名前を変更しましょう。
このままでも構いませんが、「お問い合わせ」などのわかりやすい名前がベターです。
「コンタクトフォーム1」をクリックすると、名前が変更できます。

入力してもらう項目を決定してフォームを作成する

Contact Form 7の設置

次に、お問い合わせページで入力してもらう項目を決定してフォームを作成します。
初期では、「名前(必須)」「メールアドレス(必須)」「題名(任意)」「本文(任意)」となっています。

Contact Form 7の設置

横の「タグ作成」で、入力用項目が選択・追加できます。
画像では、ドロップダウン(プルダウン)を追加してみました。
追加手順は簡単で、以下の2手順で完了します。

  1. 必要事項を入力する(HTML出力用のid、classも入力できる)
  2. フォームへショートコードをコピペする

他にも項目はたくさんありますので、必要な方はためしてみてください。

メールで受け取る内容を作成する

Contact Form 7の設置

お問い合わせ内容を自分宛てに送信するメール内容を作成します。
基本的には、作成されているままでも使えます。

メールアドレスはWordPress設定画面で設定されているアドレスが入力されているので、
違うメールアドレスに送信したい場合は、メールアドレスを変更してください。

また、先ほどのフォーム作成時に入力項目を追加していて、
その内容をメールにも反映させたい場合は、フォームの最下部のコードをメール内に追加します。

ここまで作成すると、最低限のお問い合わせフォームは完成です。
1番上の「保存」ボタンをクリックして、作成したフォームを保存してください。

お問い合わせ用固定ページ作成

Contact Form 7の設置

次に、実際のお問い合わせページを作成します。

先ほど作成したフォーム画面にコンタクトフォーム用のショートコードが表示されています。
これをコピーして、固定ページなどに貼り付けるだけでお問い合わせページが完成します。

Contact Form 7の設置

Contact Form 7の設置

新しい固定ページを作成し、ショートコードを貼り付けます。
お問い合わせページの作成が完了しました。

この後、より使いやすくするためのカスタマイズを説明します。
ただ、こだわりのない人はこのままでも十分使えますので、
しっかりメールが届くかを確認して、お問い合わせフォーム設置を完了してください。

お問い合わせの役立つカスタマイズ

それでは、より使いやすくするためのカスタマイズを説明します。
相手に確認メールの送信(自動返信)もできますので、
よりこだわりたい方は、ここからのお問い合わせフォームカスタマイズも試してみてください。

使えるお問い合わせフォーム用オプション

Contact Form 7の設置

お問い合わせフォームに使えるフォームは多種多様です。

  • テキスト項目
  • メールアドレス
  • URL
  • 電話番号
  • 数値(スピンボックス)
  • 数値(スライダー)
  • 日付
  • テキストエリア
  • ドロップダウンメニュー
  • チェックボックス
  • ラジオボタン
  • 承諾の確認
  • クイズ
  • CAPTCHA
  • ファイルノアップロード
  • 送信ボタン

ほぼ入力用項目は網羅しています。
使う機会がないものも多いと思いますが、気になるオプションは試してみてください。

確認画面代わりのチェックボックス

「Contact Form 7」は、送信ボタンを押しても確認画面がでません。
確認画面とは、入力した内容を表示して「この内容でいいですか?」と、使用者に確認してもらうページです。

海外では、あまりこのような文化がないからかもしれませんが、
日本では、入力後に確認画面が表示されると無意識に思っている人も多いです。

そこで、確認画面が表示されないことをチェックボックスで教えます。

Contact Form 7の設置

このように送信前にワンクッション置くことで、送信ボタンを押した後も戸惑わずにすみます。
チェックボックスを必須にして作成してください。

スパム対策の画像認証

Contact Form 7の設置

入力オプションの「CAPTCHA」は、画像認証用のオプションです。
送信する前に画像認証をしなければならないので、スパム対策になります。

私は、お問い合わせフォームからのスパムを経験したことがほとんどないので、
使用したことはありませんが、スパムで悩んでいる人は使ってみてください。

ただ、画像認証の分お問い合わせの手間が増えるということも覚えておきましょう。

サンクスページ

Contact Form 7の設置

「Contact Form 7」は送信が完了すると、画像のような一文のメッセージが出るだけです。
ちゃんと送信できたのかどうかがイマイチわからなくなります。

これは確認画面文化とも似ていますが、日本では完了画面文化もあります。
「お問い合わせが完了しました!」のようなページです。これをサンクスページと呼びます。

固定ページでサンクスページを作成し、その他設定に送信後の動作を設定することで、
お問い合わせ完了後に、メッセージ一文ではなくサンクスページを表示させることができます。

Contact Form 7の設置

お問い合わせフォーム作成画面の「その他設定」に以下のように入力します。
これで、送信後にサンクスページが表示されます。

on_sent_ok: “location.replace(‘xxx’);”(xxxはサンクスページURL)

お問い合わせ内容確認メールの自動送信

お問い合わせしてくれた方に対し、確認メールを自動返信する方法です。
「Contact Form 7」では、メール送信枠が2つありますので、その2つ目を使用します。

Contact Form 7の設置

  • 宛先は相手のアドレスなので「[your-email]」を設定する
  • 差出人は自分のメールアドレスを設定する
  • メッセージ本文に自動返信したい内容(入力項目も使える)を設定する

これで、お問い合わせ頂いた方に自動返信でお問い合わせ内容を送ることができます。
また、返信メールが届かないことでお問い合わせできていないことを知らせる助けにもなりますので、
2つ目のメール送信枠を使用しないのであれば、この確認メールの自動送信をしましょう。

お問い合わせページ作成後にはテストを欠かさずに

お問い合わせフォームを作成した後は、しっかりとテストしましょう。

  • お問い合わせフォームの入力が想定通りか
  • お問い合わせフォームで送信したメールが届くか
  • お問い合わせで届いたメールには必要事項が載っているか
  • 自動返信メールが届くか

などなど、あなたが設定した内容でテストしてお問い合わせフォームを設置しましょう。

  • LINEで送る

コメントを残す

このページの先頭へ