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

2017年10月4日

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

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

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

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でフォーム送信完了画面への遷移をコンバージョンとしてトラッキングできません。フォーム送信完了を計測する際は、フォーム送信をイベントとしてトラッキングする方法が推奨されています。