Contact Form 7でお問い合わせフォームを作成する方法

サイトやブログを開設するにあたって必要になってくるのがお問い合わせページ。

ブログを始めたけど、お問い合わせフォームってどうやって作るの？なんだか難しそうだにゃ

WordPressなら無料のプラグインを使用して簡単にお問合せフォームが作成できます。今回は最も利用されているContact Form 7というプラグインの使い方を紹介していきます。

この記事の目次

Contact Form 7がおすすめな理由
Contact Form 7の使い方
自動返信メールの設定
サンクスページの設定
- ①Contact Form 7のフォームにスクリプトを追加する方法
- ②functions.phpにコードを追加する方法
まとめ

Contact Form 7がおすすめな理由

Contact Form 7がおすすめな主な理由が以下になります。

無料で手軽にフォームが導入できる
日本語対応している
利用者が多いので導入方法やカスタマイズ方法も検索すれば情報が出てきやすい
デザインのカスタマイズ性が高い
自動返信メールやサンクスページの設定も可能

プログラミングの知識がなくても簡単に導入が可能で、コピペでできるカスタマイズ方法を紹介したサイトもたくさんあります。無料で利用できるので、フォーム作成に迷ったらContact Form 7を利用することをおすすめします。

Contact Form 7の使い方

インストールする

まずはWordPressにContact Form 7をインストールしましょう。管理画面から「プラグイン」→「新規プラグインを追加」と進み、右上の検索ボックスでContact Form 7を検索してインストールします。インストールが完了したら忘れずに「有効化」をクリックしてください。

フォームを作成する

プラグインを有効化すると、管理メニューに「お問い合わせ」という項目が追加されるので、クリックして「新規追加」に進むと、フォームの設定画面が出てきます。初期設定では氏名・メールアドレス・題名・メッセージ本文の項目が設定されたフォームが作成される状態になってます。「ここにタイトルを入力」となっているエリアには、「お問い合わせ」等ご自身が何のフォームか判別しやすい名前を入力してください。

フォームの項目が初期設定のままで問題なければこのままで大丈夫です。個人ブログでしたら十分だと思います。項目を追加したい場合は<label>タグを追加して、そこに上記画像の青枠内から項目を選択してクリックすると追加できます。

[text* …][email* …]などについてる*(アスタリスク)は必須項目の印です。任意にしたい場合には*を削除し、必須にしたい場合には追加しましょう。

メールの設定をする

メールタブをクリックして、メールの設定を行います。ここでは、フォームから問い合わせがあった場合の通知メールの設定ができます。

送信先	問い合わせがあった際の通知メールを受け取るアドレス。初期値の[_site_admin_email]はWPに設定してある管理者のメアドです。違うアドレスで受け取りたい場合はそのアドレスを記入します。
送信元	通知メールの送信元アドレス。Gmailなど、サイトドメインと異なるドメインのメアドを設定しているとメールが届かなかったり迷惑メールフォルダにいくことがあります。サイトと同じドメイン名のメアドを設定するか、WP Mail SMTPというプラグインを使用してください。
題名	通知メールの件名。[_site_title]にはサイト名が、[your-subject]には問い合わせ者がフォームに記入した題名が入ります。問い合わせの通知メールだとご自身がわかりやすいように、適宜変更してください。
追加ヘッダー	Reply-To: [your-email]で、問い合わせ者のメアドが返信先に設定されています。ここにはCcやBccも追加可能です。
メッセージ本文	問い合わせ者がフォームに記入した名前・メアド・題名・本文がここに表示されます。

設定が完了したら最後に「保存」をクリックしてください。

ショートコードを固定ページにコピペする

お問い合わせの一覧に保存したフォームが追加されているので、ショートコードをクリックして、コピーします。

お問い合わせページ用の固定ページにコピーしたショートコードを貼り付けて下書き保存、もしくは公開します。

これでお問い合わせフォーム完成です。CSSでお好みのデザインにカスタマイズが可能です。

自動返信メールの設定

問い合わせをしてくれた人に自動返信メールを設定することができます。メールタブをクリックしてメールの設定へいきます。

下へスクロールして「メール(2)」セクションの「メール(2)を使用」にチェックを入れてください。

チェックを入れると自動返信メールの設定が表示されるようになります。

送信先	自動返信メールの宛先。[your-email]で問い合わせ者がフォームに記入したアドレスを指定しているので、このままでOKです。
送信元	自動返信メールの送信元。[_site_title]であなたのサイト名、その後ろに送信元となるあなたのメアドが設定されています。
題名	自動返信メールの題名。初期値の[_site_title]であなたのサイト名、[your-subject]で問い合わせ者が入力した題名が表示されるようになっています。「お問い合わせありがとうございます」など、問い合わせ者がわかりやすい件名をつけた方が良いでしょう。
追加ヘッダー	Reply-To:で問い合わせ者が返信する先のアドレスを指定しています。
メッセージ本文	自動返信メールの中身。[your-message]で問い合わせ者がフォームに記入した本文が表示されるようになっています。問い合わせへのお礼やコメント、返信にかかる日数などを明記しておくと親切です。

設定が完了したら最後に「保存」をクリックします。これで自動返信メールが設定されました。テストしてきちんと自動返信メールが送られてくるか確認しましょう。

サンクスページの設定

Contact Form 7 はフォーム送信後に表示される問い合わせ完了の画面がありません。送信後に下部に「ありがとうございます。メッセージは送信されました。」のテキストが表示されるだけの仕様になっています。

この表示だけでも致命的な問題はありませんが、送信が完了したかどうかわかりにくいので、サンクスページを用意する方がユーザビリティの向上に繋がります。また、アクセス解析でサンクスページの到達数を計測することでコンバージョンを計測できるなどのメリットもあります。

まず、サンクスページ用の固定ページを用意してください。注意点として、サンクスページは検索エンジンにインデックスされたくないので、「noindex」「nofollow」の設定をしておきます。Cocoonを使っている場合、SEO設定のところでチェックを入れるだけです。(All in One SEO などのプラグインでも同様に個別に設定できるかと思います。)

サンクスページを用意したら、フォームの送信ボタンを押すとサンクスページに遷移する設定を追加します。やり方は下記の2通りあります。

サンクスページに遷移する設定方法

Contact Form 7のフォームにスクリプトを追加する方法
functions.phpにコードを追加する方法

functions.phpをいじりたくない方は①のやり方をおすすめします。

①Contact Form 7のフォームにスクリプトを追加する方法

フォームに追加するスクリプトは下記になります。locationの中にサンクスページのURLをhttps://から入れて下さい。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'ここにサンクスページのURLを入れる';
}, false );
</script>

スクリプトを追加する場所は下記です。

これで送信ボタンをクリック後にサンクスページに遷移できます。うまくいかなかった場合は、functions.phpにコードを追加する方法を試してみて下さい。

②functions.phpにコードを追加する方法

functions.phpをさわれる方はこちらの方法をどうぞ。

コードは親テーマではなく子テーマのfunctions.phpに追加してください。親テーマに記述するとテーマの更新があった際に消えてしまいます。また、functions.phpはコードにエラーがあるとサイトが表示されなくなってしまうので、編集する際はバックアップを取っておくと安心です。

追加するコードは下記になります。

//Contact Form 7 でサンクスページに遷移する設定
add_action( 'wp_footer', 'add_thanks_page' );
function add_thanks_page() {
  $homeUrl = home_url();
  echo <<< EOD
  <script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {
      location = '{$homeUrl}/サンクスページのスラッグ/'; 
    }, false );
  </script>
  EOD;
}

「サンクスページのスラッグ」となっている部分は、ご自身が作成されたサンクスページのスラッグを入れて下さい。スラッグとはパーマリンクでご自身が設定した下記の部分になります。