WordPressで企業ホームページやメディアサイトを作成するとき、お問い合わせフォームの存在は欠かせません。WordPressのプラグインの「Contact Form 7」を活用すれば、簡単にお問い合わせフォームを作成・編集できます。

Contact Form 7は、テキスト・数値・日付・チェックボックス・ラジオボタン・承諾確認ボックスなどを、ボタンひとつで簡単に挿入でき、スパム防止機能のGoogle reCAPTCHAとも連携した、拡張性の高いプラグインです。

今回は、「Contact Form 7」のインストールからフォームの公開までの使い方、カスタマイズ、あわせて利用すべきプラグインなどを解説します。

【専門知識不要】フォーム作成にかかる時間を90%削減できるフォーム作成ツール「formrun」はこちら！

【専門知識不要】フォーム作成にかかる時間を90%削減できるフォーム作成ツール「formrun」はこちら！

最短30秒でテンプレートから簡単にフォームを作成することが可能です。ぜひ無料でお試しください。

目次

  1. Contact Form 7（コンタクトフォーム7）とは
  2. Contact Form 7（コンタクトフォーム7）の使い方
  3. Contact Form 7（コンタクトフォーム7）のカスタマイズ方法
  4. Contact Form 7（コンタクトフォーム7）と利用するのがおすすめのプラグイン
  5. WordPressにフォームを設置するなら「formrun」もおすすめ
  6. まとめ

Contact Form 7（コンタクトフォーム7）とは

01.png
Contact Form 7は、Takayuki Miyoshiさんが作成した、WordPressにコンタクトフォームを設置するためのプラグインです。日本のみでなく海外でも広く活用されています。


＜Contact Form 7の特徴＞
・コンタクトフォームを作成するWordPressプラグイン
・フォームには、テキスト・数値・日付・チェックボックス・ラジオボタン・メニュー・承諾確認ボックスなどを、ボタンで簡単に挿入可能
・1フォームにつき2種類までの自動返信メール設定
・固定ページや投稿へのフォーム表示はショートコードを利用
・各種メッセージカスタマイズ
・スパムやロボットをブロックするGoogle reCAPTCHAとの連携

フォーム設置のために自分で面倒なHTMLを作成・編集する必要はなく、固定ページや投稿内にフォームを設置するには、Contact Form 7が生成するショートコードを一行挿入するだけでOKです。フォームへの項目追加は、ボタンひとつで行えます。

お問い合わせフォームの作成は難しそうに感じますが、Contact Form 7を使えば専門知識なしで簡単に作成できます。

Contact Form 7公式サイト

Contact Form 7（コンタクトフォーム7）の使い方

それでは、具体的にContact Form 7の使い方をみていきましょう。プラグインのインストールから実際にフォームを表示させるところまで、順を追って解説していきます。

インストール

まずは、WordPressにContact Form 7をインストールします。

02.png

ダッシュボード画面の左側にあるメニューの「プラグイン」から、「新規追加」を選択します。表示されたページの右上にある検索窓に「contact form 7」と入力し、表示されたプラグインの「今すぐインストール」をクリックします。

03.png

プラグインのインストールが完了すると、「今すぐインストール」とあった部分に「有効化」のボタンが表示されるので、そのままクリックします。これでインストールと有効化の作業は完了です。Contact Form 7が利用できるようになります。

フォーム作成

次に、Contact Form 7でフォームの作成をしていきます。

04.png

Contact Form 7の有効化が済むと、ダッシュボード画面の左サイドバーに「お問い合わせ」というメニューが追加されているので、その中から「新規追加」を選択します。

05.png

表示されたページのタイトル欄には、管理用のフォームタイトルを入力します。

06.png

タイトル欄の下にある「フォーム」タブで、フォームに含まれる項目を編集します。デフォルトでは、名前・メールアドレス・題名・メッセージ本文・送信ボタンが設定されています。

必要最低限の項目はそろっているので、追加したい項目がなければ、このまま下にある「保存」をクリックします。これでフォームの作成は完了です。

フォーム編集

一度作成したフォームの内容を編集したい場合は、以下の手順で行います。

16.png

まず、ダッシュボード画面の左サイドバーにある「お問い合わせ」から、「コンタクトフォーム」を選択します。フォーム一覧の中から、編集したいフォームの「編集」をクリックします。

表示されたページの「フォーム」タブ内の本文で、変更したい箇所を書き換えて保存すれば、編集は完了です。

さらにContact Form 7では、フォームにファイル添付機能を付けることもできます。

19.png

「フォーム」タブ内にある青の「ファイル」ボタンをクリックします。設定画面が表示されるので、名前や各種任意項目を入力します。名前は部品を識別する目的の項目なので、重複しない固有の値にします。ちなみに、「ファイルサイズの上限」を空欄にすると1MBが上限になります。

20.png

設定画面の下部に表示されているのがタグです。「タグを挿入」ボタンをクリックすると、フォームの本文にファイルタグが挿入されます。あとは表示用のテキストやデザインを編集し、「保存」ボタンをクリックするだけです。

21.png

これで、フォームにファイル添付欄が表示されるようになります。

自動返信メール設定

07.png

「メール」タブでは、フォームが送信された場合に自動で相手に送られるメールを設定できます。ちなみに、「メール」タブで見られる[your-name]や[your-email]には、フォームで入力された名前やメールアドレスが入ります。

08.png

「メール」タブの一番下までスクロールし、「メール(2)を使用」にチェックを入れると、自動返信メールを作成できるようになります。デフォルトで必要最低限の内容は記入されていますが、「送信元」「題名」には手を加える必要があります。

「送信元」には自分のメールアドレス、「題名」には「お問い合わせありがとうございました」など、返信メールのタイトルにふさわしい文言を入れます。

また、「メッセージ本文」をデフォルトのままにすると、相手がフォームに入力した内容が自動で入るだけなので、「お問い合わせありがとうございます。返信まで少々お待ちください」など、相手に配慮した内容を追記しておきましょう。

メッセージ設定

09.png

「メッセージ」タブでは、フォームの送信状態や入力項目のエラーなどを伝えるために、画面に表示される各種メッセージを編集できます。

フォーム送信後に画面に表示される、「ありがとうございます。メッセージは送信されました。」や「入力内容に問題があります。確認して再度お試しください。」などのメッセージを自由に変更できます。

「担当者から後日ご連絡させていただきます。」などのように、そのあとのアクションを掲載することで、ユーザーの不安を減らすことができます。

完了画面の作成

10.png

「その他の設定」タブでは、フォーム送信後に完了画面へ移動させる設定を組むことができます。完了画面とはフォームが無事送信されたことを示す画面で、「サンクスページ」とも呼ばれます。

まず、WordPressの固定ページなどで完了画面を作成します。ページを保存したら「その他の設定」タブを開き、空欄部分に以下のコードを入力します。

1on_sent_ok: “window.location.href =’完了画面のURL’;”

ほかにも、「その他の設定」タブの空欄部分に以下のようなコードを入力すると、特殊な設定を追加できます。

subscribers_only: true: ログインユーザーのみがフォーム送信可能
demo_mode: on: フォーム送信後にメールが送付されず、完了メッセージのみ表示

ここまでの設定が完了したら、右上にある「保存」ボタンをクリックします。

フォーム表示

11.png

フォームを必要なページで表示させるため、まずはコンタクトフォームの編集画面上部に表示されているフォームのショートコードをコピーします。

13.png

次に、WordPressの固定ページなどで、フォームを表示するページを作成します。ここでは例として、お問い合せページを固定ページとして作成します。ダッシュボード画面の左サイドバーにある「固定ページ」から、「新規追加」を選択します。

14.png

タイトルを入力したら、本文に先ほどコピーしたショートコードを添付します。「プレビュー」画面でフォームが表示されていることを確認したら、「公開」ボタンをクリックします。

15.png

フォームが表示されます。

フォーム画面が無事公開されたら、フォームから正しく送信できるかどうか、誤字脱字などがないかをチェックしておきましょう。

Contact Form 7（コンタクトフォーム7）のカスタマイズ方法

Contact Form 7では、フォームにもっと細かなカスタマイズを設定することもできます。ここでは、「必須項目」「ラジオボタン」「テキストエリア」「ドロップダウンメニュー」「メールアドレスの複数回入力」「横幅の変更」について解説します。

必須項目の設定

必須項目の設定をすると回答が必須になり、空欄部分がある状態では送信されません。必ず回答してもらいたい項目がある場合に利用すべき機能です。

必須項目の設定は、「フォーム」タブ内の「テキスト」をクリックして行います。表示された画面の一番上の「必須項目」にチェックを入れるだけです。

ラジオボタンの設定

「ラジオボタン」とは、複数の選択肢の中から1つを選んで回答してもらう質問形式です。「はい」「いいえ」のどちらかを回答させたり、3つの選択肢から1つを選んだりするような、シンプルな内容質問で使えます。

「フォーム」タブ内の「ラジオボタン」をクリックし、「オプション」とある空欄部分に選択肢を入力します。たとえば、1行目に「はい」と入力して2行目に「いいえ」と入力すれば、2択のラジオボタンが作れます。

なお、複数回答を求める質問の場合は、「フォーム」タブ内の「チェックボックス」の方を使いましょう。

テキストエリアの設定

名前やメールアドレス、住所や電話番号などを入力する際は、1行の回答欄で問題ないでしょう。しかし、お問い合わせ内容や感想などは、1行の回答欄では足りません。長文を入力する必要がある部分には、「テキストエリア」を設定しましょう。

「フォーム」タブ内の「テキストエリア」をクリックして、タグを挿入すれば設定完了です。

ドロップダウンメニューの設定

ドロップダウンメニューは、多くの選択肢の中から1つを選んで回答してもらう質問形式です。都道府県や年齢などを尋ねる際によく利用されます。

複数の中から1つを選ぶという点では「ラジオボタン」と共通していますが、ドロップダウンメニューは矢印をクリックするまでは選択肢が隠れているので、場所を取りません。

「フォーム」タブ内の「ドロップダウンメニュー」で設定します。「オプション」とある空欄部分に、選択肢を改行しながら入力します。

メールアドレスの複数回入力

フォームにメールアドレスが正しく入力されたかを確認するために、メールアドレスを2回入力させることはよくあります。メールアドレスが正確でないと返信ができないため、フォームにはメールアドレスを複数回入力させる機能を実装させましょう。

「フォーム」タブ内の「メールアドレス (必須)[email* your-email] 」とある下に、「メールアドレス (必須)　[email* your-email_confirm] 」と入力します。これで、フォーム内にメールアドレスを2回入力する欄ができます。

さらに、2回入力されたメールアドレスが一致しているかを確認するためには、テーマフォルダ内にあるfunctions.phpに、以下のコードを追加する必要があります。


function wpcf7_main_validation_filter( $result, $tag ) {
  $type = $tag['type'];
  $name = $tag['name'];
  $_POST[$name] = trim( strtr( (string) $_POST[$name], "\n", " " ) );
  if ( 'email' == $type || 'email*' == $type ) {
    if (preg_match('/(.*)_confirm$/', $name, $matches)){
      $target_name = $matches[1];
      if ($_POST[$name] != $_POST[$target_name]) {
        if (method_exists($result, 'invalidate')) {
          $result->invalidate( $tag,"確認用のメールアドレスが一致していません");
      } else {
          $result['valid'] = false;
          $result['reason'][$name] = '確認用のメールアドレスが一致していません';
        }
      }
    }
  }
  return $result;
}

add_filter( 'wpcf7_validate_email', 'wpcf7_main_validation_filter', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_main_validation_filter', 11, 2 );

これらの実装が済んだら、わざと異なるメールアドレスを入力してみて、エラーメッセージが表示されるか確認しましょう。

横幅を変更する

Contact Form 7でフォームを作ると、デフォルトではどの欄も横幅が記事いっぱいまでのびています。お問い合わせ内容など文章を書く部分ならともかく、名前やメールアドレスなどを入力する部分は、適正な幅に調整した方がスッキリします。

基本的には、「フォーム」タブ内の名前やメールアドレスのコード部分で、[text* your-name size:10]のようにサイズ指定すれば、横幅を変更できます。

ただし、WordPressのテーマのCSSでフォームの幅が固定されている場合は、上記の方法ではサイズ調整できません。テーマ内で直接、幅を示す数値を編集する必要があります（この際、子テーマがある場合はそちらで編集してください）。

テーマのスタイルシートに以下のようなコードを入れ、幅を示す数値を入れて調整します。


.wpcf7 input[name="your-name"] { / 名前入力欄 /
	width: 85%;
}
.wpcf7 input[name="your-email"] { / メール入力欄 /
	width: 85%;
}
.wpcf7 input[name="your-subject"] { / タイトル入力欄 /
	width: 85%;
}
.wpcf7 textarea[name="your-message"] { / 本文入力欄 /
	width: 100%;
}

上記の例では記事の横幅を100としたときの割合で調整しています。実際の画面で確認しながら、数値を調整をしてみてください。

Contact Form 7（コンタクトフォーム7）と利用するのがおすすめのプラグイン

WordPressのプラグインの中には、Contact Form 7とセットで利用するとより便利になるものがいくつもあります。ここでは、その中から4つのプラグインをご紹介します。

Akismet

お問い合わせフォームを設置することで起こる問題の1つが、スパムコメントや迷惑メールが送られてくることです。しかし、「Akismet」を導入すれば、それらをブロックしてくれます。

WordPressに標準装備されている上に、WordPressの運営会社が開発したプラグインなので、安心して利用できます。

Contact Form 7 Honeypot

この「Contact Form 7 Honeypot」というプラグインは、先に紹介した「Akismet」とは違う方法でスパムメールを防いでくれます。

ボットがスパムメールを送る際、フォームのボックスをすべて埋めるようプログラムされています。「Contact Form 7 Honeypot」はその性質を逆手にとって、ボットにしか読み取れない隠しボックスを用意し、そこに入力があった時点でスパム判定をするのです。

Contact Form 7 Multi-Step Forms

「Contact Form 7 Multi-Step Forms」というプラグインを導入すると、縦長のフォームを途中で分割して横に並べることができます。

名前・メールアドレス・お問い合わせ内容といったシンプルなフォームであれば、それほど問題にならないでしょう。しかし、スクロールが必要になるほど入力項目が多くなれば、ユーザーの記入率は下がっていきます。

「Contact Form 7 Multi-Step Forms」でフォームを分割し、画面内ですべておさまるように配置できれば、ユーザーの負担感を減らせるでしょう。

cf7-google-sheets-connector

「cf7-google-sheets-connector」は、「Contact Form 7」のフォームから送信された情報を、自動で「グーグルスプレッドシート」にまとめてくれるプラグインです。

送信されたユーザーの情報は、通常手動で一覧表に移し管理しなくてはなりません。しかし、「cf7-google-sheets-connector」で自動的にスプレッドシートに集約されるようになれば、そうしたトラブルを防げるでしょう。

WordPressにフォームを設置するなら「formrun」もおすすめ

フォーム作成・設置に便利なContact Form 7ですが、以下のような要望がある場合は、フォーム作成ツール「formrun（フォームラン）」を利用するのもおすすめです。

    image14.png

    formrunを無料で始める
  • より直感的・簡単にフォームを作成したい
  • デザイン性の高いフォームを作りたい
  • セキュリティレベルの高いフォームサービスを利用したい
formrunでは豊富なテンプレートが用意されており、ドラッグ&ドロップ操作でフォームの作成が可能です。直感的な操作のみでおしゃれなフォームを作成できます。 また、個人情報の適切な取り扱いをしている事業者に付与される「Pマーク」や、セキュリティの国際規格の1つである「ISMS認証」を取得しているなど、セキュリティ体制も整えられています。

まとめ

Contact Form 7は、コンタクトフォーム作成・管理を目的としたWordPressのプラグインです。
基本的なHTMLがわかれば、コードを書かなくても、テキスト・数値入力欄以外にもファイル添付・承諾確認ボックスといった高度なパーツの追加ができます。

操作もわかりやすく便利なプラグインですが、1つ注意点として、フォーム送信後は完了画面が表示されないため、Google Analyticsでフォーム送信完了画面への遷移をコンバージョンとしてトラッキングできません。フォーム送信完了を計測する際は、フォーム送信をイベントとしてトラッキングする方法が推奨されています。

上記の完了画面の問題も、「formrun」であればクリアできます。「formrun」の導入を検討してみてはいかがでしょうか。

【専門知識不要】フォーム作成にかかる時間を90%削減できるフォーム作成ツール「formrun」はこちら！

【専門知識不要】フォーム作成にかかる時間を90%削減できるフォーム作成ツール「formrun」はこちら！

最短30秒でテンプレートから簡単にフォームを作成することが可能です。ぜひ無料でお試しください。