【WordPress】お問い合わせフォームを簡単に設置できる「Contact Form 7」プラグイン

      2017/06/11



今回は、お問い合わせフォーム簡単に設定できるプラグイン「Contact Form 7」を紹介します。

Contact Form 7のインストール方法と基本的な使い方

WordPressのプラグイン「Contact Form 7」を使うと、お問い合わせのページを簡単に作ることができます。

WEBサイトに「お問い合わせ」のページが無いと、せっかくホームページを見に来てくれた人からの感想や質問が受けられません。

感想をもらう事で、記事を作成するモチベーションアップにも繋がりますし、ビジネスで利用されている場合にはお客様からの問い合わせに答えるのは必須でしょう。

また、Googleアドセンスを利用している場合、問い合わせに回答できる状態にしなければなりません。

問い合わせのフォームを自作するのは大変なので、コンタクトフォーム7のプラグインを使ってサクッと設置しましょう。

 
設置方法は、コンタクトフォームを作成して出力された「ショートコード」を、固定ページ等に貼り付けます。

詳細は、以下で解説します。

 

インストール方法

管理画面からプラグインの新規追加で「Contact Form 7」を検索。インストールして有効化しましょう。
p;

使い方

プラグインを有効化にすると、管理画面のメニューに「お問い合わせ」の項目が追加されています。

お問い合わせ項目の下には、「コンタクトフォーム」「新規追加」「インテグレーション」があります。

コンタクトフォーム」は、作成済みのコンタクトフォームの一覧が見れます。

新規追加」は、お問い合わせフォームを新規で作成するときに使用します。

インテグレーション」は、reCAPTCHA という機能を使う場合に使用する項目になります。reCAPTCHA はこちらのページで解説しています。

 

お問い合わせフォームの作成方法

メニューの「新規追加」、または「コンタクトフォーム」のページから作成できます。

「新規追加」をクリックすると、以下のような画面が表示されます。

 
4つのタブがあり、現在「フォーム」タブが選択されています。

「フォーム」タブは、お問い合わせフォームの入力項目を編集するための機能です。

「メール」タブは、訪問者がお問い合わせフォームの「送信」ボタンを押した際に送られるメールに関する設定です。

「メッセージ」タブは、訪問者が「送信」ボタンを押した際に表示されるメッセージの設定です。

「その他の設定」タブは、カスタマイズのためのコードを追加する事ができます。デモモードで動作させたり、メール送信が成功したときにコードを実行させたりも可能です。

シンプルな問い合わせページであれば、デフォルトの設定のままでもよいかと思います。
「メール」タブの設定は確認しておいた方が良いかと思います。「メッセージ」タブや「その他の設定」タブは、デフォルトのままでも特に問題はないかもしれません。

 

「フォーム」タブの設定

タイトルや、他の項目を編集します。ここでは「お問い合わせ」と入力しました。
※ここではタイトルのみ設定します。他の項目は後で解説するのでこのままにしておきます。

お問い合わせフォームは複数作成することができますので、目的に合わせて分かりやすいタイトルにしておきましょう。
 

設定したら、「保存」ボタンをクリックします。

そうすると、以下のように「コンタクトフォームが作成されました。」と表示されると思います。

その下に「このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください:」

と記述があり、そこにショートコードが出力されているので、コピーしましょう。

右クリックしてポップアップからコピーでできると思います。※コンタクトフォームの画面からでもコピーできます。
 

「メール」タブの設定

訪問者がお問い合わせフォームの「送信」ボタンを押した際に送られるメールに関する設定です。

通常は、訪問者からサイト運営者への送信メールになるかと思います。

訪問者に対しても、問い合わせした内容を自動返信メールとして送信することもできます。その場合は、下の方の「メール(2)を使用」のチェックを付けて、追加で設定を行ってください。

送信先:
メールを受信したいサイト運営者のメールアドレスを入力します。
カンマで区切れば複数のメールアドレスを指定できます。

送信元:
送り元のアドレスです。デフォルトのままでも問題ないかと思います。お問い合わせフォームから送信されたかどうかが分かればよいと思います。

題名:
受信するメールのタイトルです。デフォルトのままでも問題ないかと思います。

追加ヘッダー:
メールの返信先です。デフォルトのままでも問題ないかと思います。

メッセージ本文:
メールの本文になります。デフォルトのままでも問題ないかと思います。

お問い合わせフォームの設置

固定ページを新規追加し、フォームタブでコピーしておいたショートコードを貼り付けます。


 

プレビュー画面を見てみると、以下のように表示されました。

 

コンタクトフォームで使用できる項目

コンタクトフォームの項目をデフォルトのまま作成した場合、
・お名前
・メールアドレス
・題名
・メッセージ本文
・送信
の5つの項目になっています

 
フォームに設定する項目は、以下の各ボタンより追加できます。
labelはボタンで追加が出来ないので、直接手入力で編集します。


 

フォームに追加できる各機能については以下のとおりです。

テキスト

項目 説明
項目タイプ ユーザーに必ず入力させたいならチェックをONにします。
名前 HTMLで出力される際のname属性
デフォルト値 あらかじめ入力しておきたい文字列を指定します。文字列をプレースフォルダーとして使うならチェックをON。
Akismet Akismetによるスパムフィルタリングを使用する場合にチェックする
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

 

メールアドレス

項目 説明
項目タイプ ユーザーに必ず入力させたいならチェックをONにします。
名前 HTMLで出力される際のname属性
デフォルト値 あらかじめ入力しておきたい文字列を指定します。文字列をプレースフォルダーとして使うならチェックをON。
Akismet Akismetによるスパムフィルタリングを使用する場合にチェックする
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

 

URL

項目 説明
項目タイプ ユーザーに必ず入力させたいならチェックをONにします。
名前 HTMLで出力される際のname属性
デフォルト値 あらかじめ入力しておきたい文字列を指定します。文字列をプレースフォルダーとして使うならチェックをON。
Akismet Akismetによるスパムフィルタリングを使用する場合にチェックする
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

 

電話番号

項目 説明
項目タイプ ユーザーに必ず入力させたいならチェックをONにします。
名前 HTMLで出力される際のname属性
デフォルト値 あらかじめ入力しておきたい文字列を指定します。文字列をプレースフォルダーとして使うならチェックをON。
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

 

数値

項目 説明
項目タイプ ユーザーに必ず入力させたいならチェックをONにします。
名前 HTMLで出力される際のname属性
デフォルト値 あらかじめ入力しておきたい文字列を指定します。文字列をプレースフォルダーとして使うならチェックをON。
範囲 入力できる数値の範囲の下限と上限を指定する
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

 

日付

項目 説明
項目タイプ ユーザーに必ず入力させたいならチェックをONにします。
名前 HTMLで出力される際のname属性
デフォルト値 あらかじめ入力しておきたい文字列を指定します。文字列をプレースフォルダーとして使うならチェックをON。
範囲 入力できる日付の範囲の下限と上限を指定する
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

テキストエリア

項目 説明
項目タイプ ユーザーに必ず入力させたいならチェックをONにします。
名前 HTMLで出力される際のname属性
デフォルト値 あらかじめ入力しておきたい文字列を指定します。文字列をプレースフォルダーとして使うならチェックをON。
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

 

ドロップダウンメニュー

項目 説明
項目タイプ ユーザーに必ず入力させたいならチェックをONにします。
名前 HTMLで出力される際のname属性
オプション ドロップダウンメニューの項目を指定する。複数選択をするかの指定、空の項目を先頭に挿入するかを指定も可能
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

 

チェックボックス

項目 説明
項目タイプ ユーザーに必ず入力させたいならチェックをONにします。
名前 HTMLで出力される際のname属性
オプション チェックボックスの項目を指定する。ラベルをチェックボックスの前後どちらに配置するかの指定、label要素で囲むか、チェックを排他にするかを指定できます。「個々の項目を label 要素で囲む」のチェックをONにすると、文字列をチェックした場合にもチェックのON・OFFが変更できます。
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

 

ラジオボタン

項目 説明
項目タイプ ユーザーに必ず入力させたいならチェックをONにします。
名前 HTMLで出力される際のname属性
オプション ラジオボタンの項目を指定する。ラベルをチェックボックスの前後どちらに配置するかの指定、label要素で囲むかを指定できます。「個々の項目を label 要素で囲む」のチェックをONにすると、文字列をチェックした場合にもチェックのON・OFFが変更できます。
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

 

承諾確認

項目 説明
名前 HTMLで出力される際のname属性
オプション チェックボックスをデフォルトでチェック状態にするか、挙動を逆にするかを指定
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

 

クイズ

項目 説明
名前 HTMLで出力される際のname属性
クイズと回答 クイズと回答をパイプ(|)で区切って指定
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

 

reCAPTCHA


reCAPTCHAを使用する場合、先にAPIキーペアを取得する必要があります。
 

ファイル

項目 説明
名前 HTMLで出力される際のname属性
ファイルサイズの上限(バイト) 送信できるファイルサイズの上限を指定できる
受け入れ可能なファイル形式 どんな種類のファイルを受け取れるかを指定
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

 

送信ボタン

項目 説明
ラベル ラベル名を指定
ID属性 HTMLで出力される際のid属性
クラス属性 HTMLで出力される際のclass属性

 

コンタクトフォームで使用できる項目の使用例

コンタクトフォームで使用できる項目のサンプルを載せています。
どのような表示になるか参考にされてください。






範囲を1~100で制限


範囲を2016~2017で制限



複数選択を可能、空の項目を先頭に挿入


アイテム1アイテム2アイテム3

「ラベルを前に、チェックボックスを後に配置する」のチェックをON
アイテム1アイテム2アイテム3

「個々の項目を label 要素で囲む」のチェックをON

「チェックボックスを排他化する」のチェックをON
アイテム1アイテム2アイテム3


アイテム1アイテム2アイテム3

ラベルを前に、チェックボックスを後に配置する
アイテム1アイテム2アイテム3

個々の項目を label 要素で囲む



このチェックボックスをデフォルトでチェックされた状態にする

これの挙動を反対にする



reCAPTCHA を使うには、まず API キーペアの設定が必要です。詳しくは reCAPTCHA を参照してください。



まとめ

今回は、お問い合わせフォーム簡単に設定できるプラグイン「Contact Form 7」プラグインを紹介しました。

問い合わせフォームの代わりにメールアドレスをページ上に記載して対応する方法もありますが、メールアドレスが知られることによりスパムメールが来たりするリスクもあります。

プラグインを使えばお問い合わせフォームは簡単に設置できますのでおすすめです。

 - WordPress ,