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

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

今回は、「Contact Form 7」のインストール方法と、実際にフォームを設置する方法を解説します。

目次

  1. Contact Form 7(コンタクトフォーム7)とは
  2. インストール方法
  3. Contact Form 7(コンタクトフォーム7)の使い方
    1. 新規フォーム作成
      1. フォーム設定
      2. 自動返信メール設定
      3. メッセージ設定
      4. その他設定
    2. フォーム表示
  4. フォームの編集方法
  5. フォームのカスタマイズ方法
  6. まとめ

Contact Form 7(コンタクトフォーム7)とは

Contact_Form_7_1TOP.png
https://ja.wordpress.org/plugins/contact-form-7/
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_3インストール方法1.png
WordPress左サイドバー「プラグイン」>「新規追加」を選択し、検索窓に「contact form 7」と入力します。プラグインの「今すぐインストール」をクリックします。

Contact_Form_7_3インストール方法2.png
「有効化」をクリックします。これでインストール作業は完了です。

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

新規フォーム作成

フォーム設定

Contact_Form_7_4使い方_1新規フォーム作成_1フォーム設定1.png
WordPress左サイドバー「お問い合わせ」>「新規追加」を選択します。

Contact_Form_7_4使い方_1新規フォーム作成_1フォーム設定2.png
管理用のフォームタイトルを入力します。

Contact_Form_7_4使い方_1新規フォーム作成_1フォーム設定3.png
タブ「フォーム」では、フォームに含まれる項目を編集します。デフォルトでは、お名前・メールアドレス・題名・メッセージ本文・送信ボタンが含まれます。

自動返信メール設定

Contact_Form_7_4使い方_1新規フォーム作成_2自動返信メール設定1.png
タブ「メール」では、フォームが送信された場合に送られるメールを編集します。[your-name]や[your-email]には、フォームで入力された値が入ります。

Contact_Form_7_4使い方_1新規フォーム作成_2自動返信メール設定2.png
あらかじめ入力されている最初のメール以外に、もう1つ別のメールを設定する場合は、画面下部の「メール(2)を使用」にチェックを入れます。例えば、1つ目のメールは自分宛て、2つ目のメールは内容を変えて送信者宛てなどの用途があります。

メッセージ設定

Contact_Form_7_4使い方_1新規フォーム作成_3メッセージ設定1.png
タブ「メッセージ」では、画面に表示される各種メッセージを編集できます。

その他設定

Contact_Form_7_4使い方_1新規フォーム作成_4その他設定1.png
タブ「その他の設定」では、追加設定に必要なコードを記入します。たとえば以下のような設定とコードがあります。

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

フォーム表示

Contact_Form_7_4使い方_2フォーム表示1.png
フォームWordPressの各ページに表示するため、まずはフォーム一覧にて表示したいフォームのショートコードをコピーします。

Contact_Form_7_4使い方_2フォーム表示2.png
個別のコンタクトフォーム編集画面上部にも、ショートコードは表示されます。

Contact_Form_7_4使い方_2フォーム表示3.png
フォームを表示するページを作成します。ここでは例として、お問い合せページを固定ページとして作成します。WordPress左サイドバー「固定ページ」>「新規追加」を選択します。

Contact_Form_7_4使い方_2フォーム表示4.png
タイトルに「お問合せ」と入力し、本文に先ほどコピーしたショートコードを添付します。「プレビュー」または「公開」をクリックします。

Contact_Form_7_4使い方_2フォーム表示5.png
フォームが表示されます。

フォームの編集方法

Contact_Form_7_4使い方_3フォームの編集方法1.png
WordPress左サイドバー「お問い合わせ」>「コンタクトフォーム」を選択し、フォーム一覧の中から編集したいフォームの「編集」リンクをクリックします。

Contact_Form_7_4使い方_3フォームの編集方法2.png
フォーム内の「メッセージ本文」という箇所を書き換えます。

Contact_Form_7_4使い方_3フォームの編集方法3.png
「お問合せ内容」に書き換え保存すれば、編集は完了です。

フォームのカスタマイズ方法

Contact_Form_7_4使い方_4フォームのカスタマイズ方法1.png
タブ「フォーム」入力欄上部のボタンを使ってタグを入力し、フォームにさらに高度な編集を加えられます。例として添付ファイル入力欄を作成するため「ファイル」をクリックします。

Contact_Form_7_4使い方_4フォームのカスタマイズ方法2.png
名前や各種任意項目を入力します。名前は部品を識別する目的の項目なので、重複しない固有の値にします。モーダルウィンドウ下部に表示されているのがタグです。「タグを挿入」ボタンをクリックすると、フォームに挿入されます。

Contact_Form_7_4使い方_4フォームのカスタマイズ方法3.png
フォーム入力欄にタグが挿入されます。

Contact_Form_7_4使い方_4フォームのカスタマイズ方法4.png
表示用のテキストやデザインを編集し「保存」ボタンをクリックします。

Contact_Form_7_4使い方_4フォームのカスタマイズ方法5.png
フォームに添付ファイル欄が表示されます。

Contact_Form_7_4使い方_4フォームのカスタマイズ方法6.png
そのほか、テキスト・数値・日付・チェックボックス・ラジオボタン・メニュー・承諾確認ボックスなどを追加できます。reCAPTCHAは、画像内の文字を入力することでフォーム送信者がボットではないことを証明できる機能です。Googleが提供しており、スパム防止目的で使用します。使用にはGoogleのサイトにてキーの登録が必要です。

まとめ

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

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

WordPress(ワードプレス)のプラグインを見てみる

【無料】WordPressを“より快適に”使うためのオススメプラグイン10選

【無料】WordPressを“より快適に”使うためのオススメプラグイン10選

自社のホームページをWordPressで制作しようと考えているWeb担当者もいるのではないでしょうか。WordPressには、更新や管理を快適に行うための「プラグイン」という拡張機能が充実しています。任意のプラグインを追加することで、カスタマイズ性を高められるのが特徴です。今回、WordPressを快適に使うためのプラグインをまとめました。