この記事では、ワードプレスプラグインのContact Form 7の使い方について解説しているとん
収益化ブログを作成していく上で、ワードプレスのプラグインはとても便利な機能です。
ブログ運営で必要になってくる様々な機能を後から追加できますので、ほとんどのブロガーはプラグインを導入しています。
こちらの記事では、収益化ブログにオススメのプラグインについて解説しましたが、今回はその中の「Contact Form 7(コンタクトフォームセブン)」というプラグインについて解説していきます。
プラグインなしで実装しようとするとなかなか大変な機能も、Contact Form 7を使えば簡単に追加できるので、この機会にぜひ実装してみましょう。
Contact Form 7とは?
Contact Form 7ってなんだぷう?
Contact Form 7はメールの問い合わせフォームを誰でも簡単に設置出来るプラグインです。
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/13f76fa6608e042fdf63c517a4c0902e.png?resize=829%2C737&ssl=1)
Contact Form 7を導入すると、このようなフォームを簡単に設置可能です。
通常、このようなフォームをプラグインなしで作るには、HTMLの知識が必要になります。
初心者の方が1から自分の好きなようにフォームをいじるのはかなりの難易度だと思います。
そんな時にContact Form 7が重宝されるでしょう。
プラグインの設定方法はとても簡単ですので、HTMLの知識がなくても問題ありません。
具体的な設定方法は後述しますが、まずはContact Form 7の凄さを見ていきましょう。
Contact Form 7を使うメリット
まずはContact Form 7を使うメリットについて紹介します。
- 誰でも簡単にフォームを設定出来る
- 拡張性がある
- 信頼性のあるプラグイン
- ユーザーからの問い合わせをいつでも受付られる
やはり一番のメリットは、誰でも簡単に問い合わせフォームを設定出来るという点でしょう。
ワードプレスのプラグインなしでこの機能をつけようと思うと、そこそこ難しいHTMLをいじる必要がありますから、Contact Form 7の存在はとても大きいです。
また、このプラグインは非常に拡張性が高いです。
フォームによく使われている入力項目が多数用意されていますので、Contact Form 7さえあれば、大抵のフォームは作成可能です。
足りない機能はないぐらいですので、問い合わせフォームとして十分な機能を兼ね揃えているという点が非常に大きいです。
そしてプラグインを選ぶ際のポイントでもありますが、信頼性という点もクリアできています。
プラグインの信頼性を簡単に見るポイントは「更新日」です。
更新日が最近なプラグインほどアップデートが行われている証拠ですので、運営がしっかりしているということがわかります。
Contact Form 7は問い合わせフォーム系のプラグインで一番よく使われているものですので、安心して使用できます。
また問い合わせフォームの設置はユーザーにとってもメリットになりますし、チャンスを広げることにも繋がります。
気になったブログを見つけても問い合わせフォームがないと連絡手段がありませんから、ユーザーからの問い合わせ窓口を作ることで交流もはかれます。
ちなみに、ブログをしっかり構築していけば、企業から取材や仕事などのオファーがくることもありますので、問い合わせフォームがあるというだけで、仕事のチャンスを広げることに繋がります。
ですので、ブログにぜひ実装してほしい機能ですね。
出来ること
お次はContact Form 7で出来ることについてまとめていきます。
- アンケートフォームの作成
- 自動返信メール設定
- サンクスページ遷移
Contact Form 7では、フォーム作成の他にビジネス上便利な機能があります。
それが、自動返信メールとサンクスページへの遷移設定です。
自動返信メールとは、問い合わせをしてくれたユーザーに問い合わせ後に自動でメールを送る機能です。
問い合わせた内容を再度ユーザーに送るというやり方が一般的ですが、その他に伝えたいことがあれば自動返信で送ることが可能です。
またサンクスページへの遷移も非常に便利です。
サンクスページとは、登録をした後に自動で遷移する先のページのこと
サンクスページは、無料オプト系のフォームで多様されています。
よく見かけるのが、メール登録した後にLINE登録を促すページを表示するパターンです。
ユーザーが何かに登録してくれた後にそのままの勢いで別ページを見せて、他の目的も果たすために有効な手段です。
そのページの遷移を、Contact Form 7ではURLを設定するだけで自動で出来るのです。
この機能もビジネスを進めていく上で非常に便利ですので、今後のために覚えておきましょう。
とても便利なプラグインなので設定してみるとん!
Contact Form 7の導入方法
Contact Form 7の凄さがわかったところで、早速ワードプレスにインストールしていきましょう。
プラグインのインストール方法は他のプラグインと同様ですが、念の為解説していきますね。
まずは、ワードプレスの左メニューのプラグインを選択します。
そして新規追加をクリックします。
![](https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/09/5277ce3020617320ab5225156b70865e.png?resize=1024%2C363&ssl=1)
続いて、右上の検索窓に、Contact Form 7と入力します。
そして検索結果が表示されますので、「いますぐインストール」をクリックしましょう。
![](https://i2.wp.com/justsv.com/wp/wp-content/uploads/2020/09/8a1a9cf1d5eeed5fd4dd5507b72f9af3-3.png?resize=1024%2C350&ssl=1)
続いて、「有効化」をクリックします。
![](https://i2.wp.com/justsv.com/wp/wp-content/uploads/2020/09/8a1a9cf1d5eeed5fd4dd5507b72f9af3-4.png?resize=527%2C280&ssl=1)
これでContact Form 7のプラグインインストールが完了しました。
続いては、Contact Form 7の設定方法について詳しく解説していきます。
プラグインの導入は簡単だとん
Contact Form 7の設定方法
まずは、左メニューの「お問い合わせ」という箇所をクリックしましょう。
![](https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/09/5277ce3020617320ab5225156b70865e-1.png?resize=1024%2C385&ssl=1)
続いて「新規追加」をクリックします。
![](https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa.png?resize=1024%2C338&ssl=1)
新規追加をクリックした後に表示される画面が、Contact Form 7の設定画面になります。
まずは、タイトルを設定しましょう。
![](https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/09/edea5014c6951dc69ed010c2be9e5171.png?resize=1024%2C378&ssl=1)
タイトルは自分の管理用ですので、なんでも良いです。
フォームは複数パターン作成できますので、自分でわかりやすいようにタイトルを設定しましょう。
そして画像の下の方にあるコードのような画面がフォームの設定画面になります。
ここでは主に以下の4つの項目を設定可能です。(画像ではタブに書かれています)
- フォーム
- メール
- メッセージ
- その他の設定
フォーム
まずは、メインのフォームから解説します。
![](https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/09/edea5014c6951dc69ed010c2be9e5171-1.png?resize=1024%2C372&ssl=1)
なにやら難しそうなコードが表示されていますが、これは特に気にする必要はありません。
基本的に、上に並んでいるボタンをクリックし、各種設定を行えば、自動でコードが挿入されます。
このコードは手入力は不要ですので、その点は安心してください。
ちなみに、現在入力されている初期のコードで実際にフォームを設置するとこのように表示されます。
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/690ce38825b55bb926c8b3b167aa9f04.png?resize=407%2C411&ssl=1)
これだけでも十分使えそうですね。
ただ、他にも便利な機能が沢山ありますので、1つずつ解説していきます。
具体的には以下のような項目を追加可能です。
- テキスト
- メールアドレス
- URL
- 電話番号
- 数値
- 日付
- テキストエリア
- ドロップダウンメニュー
- チェックボックス
- ラジオボタン
- 承諾確認
- クイズ
- ファイル
- 送信ボタン
テキスト
まずはテキストです。
テキストは、フォームの基本となる自由テキストを入力出来る項目です。
主に名前に使用することが多いですね。
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/edea5014c6951dc69ed010c2be9e5171-2.png?resize=685%2C534&ssl=1)
この設定項目の赤枠で囲んだところを設定すれば、最低限の設定が可能です。
「項目タイプ」の必須項目という箇所にチェックを入れれば、入力なしでは送信ボタンを押せない仕様にできます。
「名前」という項目には、「フォーム」の項目名を入れましょう。
「デフォルト値」はフォームにあらかじめ入力しておくテキストになり、設定は任意です。
ちなみに、その下にある「このテキストを項目のプレースホルダーとして使用する」にチェックを入れると、入力した文字が薄く表示されます。
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/690ce38825b55bb926c8b3b167aa9f04-1.png?resize=613%2C164&ssl=1)
メールアドレス
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-1.png?resize=614%2C360&ssl=1)
続いてはメールアドレスです。
その名の通り、メールアドレスを入力するための項目になります。
基本設定は先程のテキストと同じで、項目名とデフォルト値を設定可能です。
この項目の良いところは、メールアドレス以外が入力された時にエラーが出るので、間違ったアドレスが送られてくる確率が下がることですね。
ユーザーにとっても便利な項目ですので、アドレスを聞く際は、この項目を使用しましょう。
URL
![](https://i2.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-2.png?resize=686%2C366&ssl=1)
URLもその名の通りURLを入力するための項目です。
こちらも基本設定は同じになります。
あまり使用する頻度はないかもしれませんが、URLの入力を求めたい場合は、こちらの項目を使用していきましょう。
電話番号
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-3.png?resize=653%2C333&ssl=1)
電話番号はそれなりに使うシチュエーションはあるでしょう。
問い合わせをする際に電話番号を聞きたい場合はこちらの項目を使用します。
こちらも特別な設定値はなく、基本的な設定のみで設置可能です。
数値
![](https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-4.png?resize=614%2C399&ssl=1)
続いては数値です。こちらは、指定した数値の中から選択をしてもらう項目を作成可能です。
項目タイプとして「スピンボックス」か「スライダー」を設定可能です。
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/690ce38825b55bb926c8b3b167aa9f04-2.png?resize=604%2C233&ssl=1)
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/690ce38825b55bb926c8b3b167aa9f04-3.png?resize=600%2C241&ssl=1)
下限と上限を設定できますので、活用できるシーンがあれば使ってみましょう。
日付
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-5.png?resize=583%2C371&ssl=1)
お次の日付は、指定した期間内の日付を入力できる項目になります。
![](https://i2.wp.com/justsv.com/wp/wp-content/uploads/2020/09/690ce38825b55bb926c8b3b167aa9f04-4.png?resize=607%2C287&ssl=1)
カレンダーから直感的に日付を選択できるので、テキストよりも便利だと思います。
テキストエリア
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-6.png?resize=635%2C362&ssl=1)
最初に説明したテキストに対し、こちらのテキストエリアは複数行の文章を入力可能です。
1文というよりも、それなりに長い文章を入力できるため、問い合わせ内容の本文によく利用しますね。
利用シーンはかなりあると思いますので、覚えておきましょう。
ドロップダウンメニュー
![](https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-7.png?resize=649%2C424&ssl=1)
続いては、アンケートでよく使用するドロップダウンメニューです。
このようなタイプの選択ボタンをよく見かけると思います。
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/690ce38825b55bb926c8b3b167aa9f04-5.png?resize=584%2C349&ssl=1)
オプションで、選択項目を1行ごとに入力すれば選択肢を増やせますので、一度試してみてください。
チェックボックス
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-8.png?resize=626%2C445&ssl=1)
チェックボックスもよく見る項目ですね。
「ラベルを前に、チェックボックスを後に配置する」
→表示されるチェックボックスの位置を選択肢の後ろに配置できます。
「個々の要素をlabel要素で囲む」
→フォームのコーディングなどでソースコードを触りたい場合はつけておくと便利でしょう。
「チェックボックスを排他化する」
→複数選択が不可になるので選択肢を1つに絞らせたいときに使いましょう。
![](https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/09/690ce38825b55bb926c8b3b167aa9f04-6.png?resize=594%2C355&ssl=1)
こちらも選択肢を提示する際によく使う項目ですので覚えておくと便利だと思います。
ラジオボタン
![](https://i2.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-9.png?resize=594%2C392&ssl=1)
ラジオボタンもアンケートによく使う項目になります。
設定方法はチェックボックスと同じですね。
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/690ce38825b55bb926c8b3b167aa9f04-7.png?resize=521%2C189&ssl=1)
機能としてもチェックボックスをほぼ同じですが、選択するボタンが丸になっているのが特徴です。
承諾確認
![](https://i2.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-10.png?resize=648%2C322&ssl=1)
承諾確認は、問い合わせをする前に何か承諾を得る際に設置します。
![](https://i2.wp.com/justsv.com/wp/wp-content/uploads/2020/09/690ce38825b55bb926c8b3b167aa9f04-8.png?resize=489%2C278&ssl=1)
そこまで利用シーンはないと思いますが、個人情報の利用について規約を設けている方は、それに同意してもらってから問い合わせをもらった方が良いと思います。
クイズ
![](https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-11.png?resize=652%2C359&ssl=1)
コンタクトフォーム7では、クイズも出題できます。
1行にクイズの問題と回答を入力することによって簡単にクイズを設置できるので、興味がある方はやってみても面白いと思います。
![](https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/09/690ce38825b55bb926c8b3b167aa9f04-9.png?resize=596%2C310&ssl=1)
ファイル
![](https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-12.png?resize=656%2C356&ssl=1)
ファイル添付を項目に付け足せば、ユーザーからファイルを受け取ることも可能です。
ファイルサイズの上限
ファイル形式
を指定するだけで、簡単にファイルアップロード項目を設置可能ですので、利用してみると良いでしょう。
送信ボタン
![](https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-13.png?resize=568%2C207&ssl=1)
最後は送信ボタンです。
ラベルに、ボタンに表示する文字を指定すれば、簡単にボタンを設置可能です。
一般的には、「送信する」や「問い合わせる」という文章が良いでしょう。
メール
続いてはメールの設定項目についてです。
メールの設定は、「管理者である自分に送信するメール」と「ユーザーに送信するリターンメール」を設定可能です。
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-14.png?resize=1024%2C608&ssl=1)
基本的には下記を設定します。
「送信先」:送信する相手のアドレス
「送信元」:メールを送信する側のアドレス
「題名」:メールのタイトル
「メッセージ本文」:メール本文
ただ、設定する際はフォーマットに沿った設定が必要です。
赤枠で囲んだ所に使用できるタグが設定されています。
そのタグをコピーして該当箇所に貼ると、実際に送られてくるメールでは、フォームの回答の中身がそのまま記載されるようになります。
こちらについては、ご自身でフォームに回答を行なって、実際にどのようなメールが届くのか必ずテストしてみましょう。
![](https://i2.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-15.png?resize=1024%2C528&ssl=1)
続いて、「メール(2)を使用」にチェックを入れ設定を行うと、今度はユーザーに送るメールを設定可能です。
こちらも設定方法は同じで、タグをコピペして表示させたい項目を設定してみましょう。
メッセージ
メッセージでは、フォームにユーザーが入力した時、正常もしくはエラーなどの場合において、どのようなメッセージを表示させるかを決定します。
![](https://i2.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-16.png?resize=1024%2C496&ssl=1)
特に理由がなければ、デフォルト設定で問題ないでしょう。
その他の設定
最後に、その他の設定ではサンクスページの設定が可能です。
![](https://i2.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-17.png?resize=1024%2C271&ssl=1)
こちらのコードを貼り付けると、送信ボタンを押したサンクスページへの遷移が可能です。
フォームの公開
設定が完了したら、「保存」をクリックしてフォームを公開しましょう。
![](https://i2.wp.com/justsv.com/wp/wp-content/uploads/2020/09/c80b28151ebacc64ed24286485cbfbaa-18.png?resize=1024%2C374&ssl=1)
そして、表示されるショートコードをコピーしてください。
そのショートコードを問い合わせフォームを設置したいページに貼り付けます。
![](https://i1.wp.com/justsv.com/wp/wp-content/uploads/2020/09/874666b428c9eed678c04f13ccd09c6c.png?resize=1024%2C408&ssl=1)
そうすることによって、ページにフォームが自動で埋め込まれます。
![](https://i0.wp.com/justsv.com/wp/wp-content/uploads/2020/09/690ce38825b55bb926c8b3b167aa9f04-10.png?resize=1024%2C573&ssl=1)
以上がコンタクトフォーム7の設定方法になります。
フォームを作ってみたら、必ず自分で問い合わせを行なって、テストをしてみるとん