Contact Form 7を使って、WordPressにフォームを設置してみよう

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

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

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

目次

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

Contact Form 7とは

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を使えば専門知識なしで簡単に作成できます。

インストール方法

WordPress 左サイドバー「 プラグイン 」>「新規追加」を選択し、検索窓に「contact form 7」と入力します。 プラグイン の「今すぐインストール」をクリックします。

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

Contact Form 7の使い方

新規 フォーム 作成

フォーム 設定

WordPress 左サイドバー「お問い合わせ」>「新規追加」を選択します。

管理用の フォーム タイトル を入力します。

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

自動返信メール設定

タブ「メール」では、 フォーム が送信された場合に送られるメールを編集します。[your-name]や[your-email]には、 フォーム で入力された値が入ります。

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

メッセージ設定

タブ「メッセージ」では、画面に表示される各種メッセージを編集できます。

その他設定

タブ「その他の設定」では、追加設定に必要なコードを記入します。たとえば以下のような設定とコードがあります。

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

フォーム 表示

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

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

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

タイトル に「お問合せ」と入力し、本文に先ほどコピーしたショートコードを添付します。「プレビュー」または「公開」をクリックします。

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

フォーム の編集方法

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

フォーム 内の「メッセージ本文」という箇所を書き換えます。

「お問合せ内容」に書き換え保存すれば、編集は完了です。

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

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

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

フォーム 入力欄にタグが挿入されます。

表示用のテキストやデザインを編集し「保存」ボタンをクリックします。

フォーム に添付ファイル欄が表示されます。

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

まとめ

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

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