ここあです。
企業サイトでも、個人ブログでも
オウンドメディアとしてWebサイトを開設したら
お問い合わせフォームはぜひ設置しておきたいものです。
というのも、お問い合わせフォームは
ネットビジネスにおいて特に重要な役割を
しっかりと果たしてくれるからです。
特に以下のような
- ブログアフィリエイトを行う場合
- Googleアドセンスを取得する場合
それぞれにおいて
お問い合わせフォームの設置は必須です。
また、コーポレートサイトを立ち上げる場合も
見込み客であるユーザーとのコミュニケーションを
取れる環境があるに越したことはありません。
ということで、今回は
オウンドメディアの運営には必須とも言うべく
お問い合わせフォームの作り方を詳しく解説していきます。
お問い合わせフォームを設置できる
WordPressのプラグインはいくつかありますが
今回はWordPress初心者でも比較的簡単に
お問い合わせフォームの作成・設置ができる
Contact Form 7での作り方をご紹介します。
Contact Form 7はすでに100万人を超える
WordPressユーザーが利用しており
ユーザー評価も非常に高いプラグインです。
なので、あなたもぜひこの機会に
お問い合わせフォームを設置してみてくださいね。
なぜお問い合わせフォームが必要か？
お問い合わせフォームの設置方法を説明する前に
なぜお問い合わせフォームが必要なのか？を
簡単に説明しておきますね。
通常、無料ブログを使った
- 趣味ブログ
- 日記ブログ
といった…
極めて私的なWebサイトであれば
サイト訪問者と共通の話題で盛り上がれる
コメント欄があれば、それで十分です。
いわゆる芸能人のブログのようなサイトですね＾＾
しかし、WordPressを使って
- ブログアフィリエイト
- サイトアフィリエイト
- コーポレートサイトなど
上記、Webサイトを構築し、何らかの形で
ビジネスへの活用、Webサイトの収益化を考える場合は…
たくさんのお客様に見てもらい
興味を持っていただいた方には
ぜひご連絡をいただきたいですよね。
つまり、お問い合わせフォームは…
私たちオウンドメディアの運営者と
お客様とが直接つながれる
非常に重要な入り口としての役目を担ってくれます。
実際にお問い合わせをくれるお客様というのは
あなたが扱う商品、もしくは
あなたに強い関心を持っている場合が多く
お問い合わせフォームを活用し
お客様からのお問い合わせに誠実に対応できるかどうかで
ビジネスの成果もかなり大きく変わってきます。
だからこそ、お客様の信頼が高まる
安心して使っていただけるお問い合わせフォームを
設置しておかなければなりません。
特にコーポレートサイトの場合は
お問い合わせフォームがあることで…
- 企業や個人からの仕事の依頼
- 見積り請求や資料請求
- 各サービスへのお申込み
- 取材の受付
- 寄稿の提案など
様々なご要望やご相談を受ける可能性もあり
お問い合わせフォームを設置しておく方が
これらのご要望にも対応しやすく
サイト訪問者のユーザーにも
非常に便利で親切というワケなんですね＾＾
お問い合わせフォームのメリット
お問い合わせフォームのメリットについても
簡単に触れておきますね。
一昔前のWebサイトでは
電話番号やメールアドレスを掲載し
電話やメールからのお問い合わせが主流でした。
しかし、電話によるお問い合わせの場合は…
- 業務時間外の対応が困難
- 記録が残らない
というデメリットがあり
最悪の場合は…
「言った、言わない」の堂々巡りになる
リスクさえありますよね…＾＾；
メール（メーラーから）によるお問い合わせの場合は…
ユーザーが必要な情報（会社名・住所・氏名・問合せ事項など）を
漏れなく記載する必要があり、非常に手間がかかります。
また、迷惑メールいわゆるスパムメールは
企業にとっても、個人にとっても迷惑極まりないし
不要なメールを整理する作業が
どれほど非効率で時間の無駄かということは
今更言うまでもありませんよね…＾＾；
お問い合わせフォームを設置すれば
- メールアドレスや電話番号の掲載が不要
- 運営者が欲しい情報だけが手に入る
- メーラーが必要ない
- 問い合わせ数も確認しやすい
といったメリットがあります。
① メールアドレスや電話番号の掲載が不要
お問い合わせフォームを設置することで
メールアドレスの掲載が不要なので
スパムメールの餌食になることはありません。
② 運営者が欲しい情報だけが手に入る
メールアドレスや名前、住所など
必須事項をあらかじめ設定することで
運営者が必要な情報だけを確実に入手することができ
- お問い合わせ
- 資料請求
- 申し込みなど
ユーザーへの選択項目をお問い合わせフォームに
設定することで、お問い合わせ内容を
明確に区別することも可能になります。
③ メーラーが必要ない
お問い合わせフォームがあればメーラーも不要。
普段ユーザーが使用している端末だけでなく
ユーザーがその時使用している端末からでも
お問い合わせが可能になるので非常に便利です。
④ 問い合わせ数も確認しやすい
さらにお問い合わせフォームに送信完了ページを
設置することで、アクセス解析にて
問い合わせ数（コンバージョン）の確認もできるようになります。
オウンドメディアの運営においては
こうしたコンバージョン率の計測は非常に需要で
成果の確認、サイト運営の改善を検討する上でも
正確な数字を簡単に把握できるようにすることは
ネットビジネスの成功においては欠かせない
非常に重要なデータとなりますので
合わせて覚えておいてくださいね。
以上、4点がお問い合わせフォームを設置するメリットとなります。
Contact Form 7の導入方法
それではいよいよWordPressのプラグイン
Contact Form 7の使い方について
説明していきますね。
Contact Form 7の特徴
まずは簡単にWordPressのプラグイン
Contact Form 7でできることをご紹介します。
Contact Form 7では以下のように
- お問い合わせがあった場合、管理者へメールの通知ができる
- お問い合わせしてくれた方へ自動返信メールを送れる
- 選択式のボタンが設置でき、複数の商品があっても対応できる
- アンケートをとることができる
さらに…
- WordPressの管理画面でフォームの作成ができる
- 入力必須項目とそうでない項目を自由に設定できる
- お問い合わせ内容をカスタマイズしたり、設置するのも簡単
など…
よほど凝ったお問い合わせフォームを作ろうと思わなければ
Contact Form 7を導入するだけで、ある程度使い勝手の良い
お問い合わせフォームを設置することが可能です。
Contact Form 7でお問い合わせフォームを設置するまでの流れ
お問い合わせフォームは、残念ながら
ただContact Form 7をインストールすれば
設置できるというものではありません…＾＾；
しかし、Contact Form 7の導入は
それほど難しいものではありませんし
以下の手順を踏めば、あなたでも十分簡単に
お問い合わせフォームを作成し、設置することができます。
- Contact Form 7をインストールする
- お問い合わせフォームのテンプレートを作成する
- お問い合わせフォームを固定ページやウィジェットに設置し表示させる
手順は全てスクリーンショットの画像付きで
解説していきますので、あなたでも迷うことなく
確実に設置できるはずです。
Contact Form 7をインストールする
まずは、WordPressのプラグインContact Form 7を
インストールするための流れを簡単に説明していきます。
プラグインの導入が初めてという場合は
ぜひ参考にしてくださいね。
WordPressのプラグインを導入するには
ダッシュボードメニューから
- プラグインをクリック
- 新規追加をクリック
プラグインの新規追加画面を開きます。
または、ダッシュボードメニューの
プラグインの上にマウスを乗せると…
以下のような追加メニューが出てきますので
ここで新規追加をクリックしてもOKです。結果は同じです＾＾
新規追加をクリックすると…
プラグンを追加する画面に移動するので
画面右上の検索ボックスに
Contact Form 7とプラグイン名を入力しましょう。
プラグイン名を入力すると、このようになぜか富士山の絵の（笑）
Contact Form 7が表示されます。
Contact Form 7が表示されたら
右上の今すぐインストールをクリックして
Contact Form 7をインストールしてください。
プラグインがインストールできたら
プラグインを有効化をクリックし
必ずプラグインを有効化してくださいね。
インストールするだけでは機能しないので
気を付けてください＾＾；
プラグインによっては、これらの手順でインストールし
有効化をするだけですぐに使えるプラグインもたくさんあります。
ですが、Contact Form 7の場合は
個別に設定が必要となりますので
引き続き設定の仕方についても説明していきますね。
Contact Form 7の設定方法
Contact Form 7のプラグインが正常にインストールされると
ダッシュボードのメニュー項目に
お問い合わせという項目が追加されます。
この管理画面に追加されたお問い合わせメニューから
お問い合わせフォームのテンプレートを作成していきます。
先ほどのプラグンと同様
ダッシュボードメニューからお問い合わせをクリックし
新規追加をクリックするか
ダッシュボードメニューの
お問い合わせの項目にマウスを乗せて
新規追加をクリックしてください。
ただし、お問い合わせフォームに関しては
Contact Form 7をインストールした時点で
サンプルとして、コンタクトフォームという
テンプレートがデフォルトで用意されています。
なので、お問い合わせフォームの設定に関しては
- 新規作成から
- デフォルトのコンタクトフォーム
どちらを使って編集しても構いません＾＾
あなたが使いやすい方を選択してくださいね。
Contact Form 7の設定内容
続いて、具体的にお問い合わせフォームの
設置作業に付いて説明していきます。
Contact Form 7は基本的に以下の5項目を編集します。
- 問い合わせフォームのタイトル
- フォーム
- メール
- メッセージ
- その他の設定
これらを順番に設定していきます。
1）お問い合わせフォームのタイトル設定
コンタクトフォームの編集画面で設定するタイトルは
実際にサイト表示されるものではありません。
あなたの管理用のタイトルになりますので
管理しやすいタイトルを付けてください。
2）フォーム内項目の設定
フォームの設定は上記、赤枠で囲んだ
それぞれのボタンをクリックして
問い合わせフォームに設置したい項目を追加していきます。
例えば、一番左のテキストをクリックした場合
以下のようなフォームタグ設定画面が開きます。
また、テキストだけでなく、メールアドレスや
他のボタンをクリックすると
フォーム項目の詳細な設定を行う画面が表示されます。
テキストのフォームタグ生成画面の設定内容は以下の通りです。
● 項目タイプ
必須項目にチェックを入れると、入力必須の項目になります。
● 名前
フォーム項目の名前です。
※他の項目と同じ名前にはできません。
● デフォルト値
項目に初期表示される値です。
※このテキストを項目のプレースフォルダーとして使用するにチェックすると
入力域に薄く入力例としてテキストが表示されるようになります。
● Akismet
スパム対策のプラグインAkismetが有効化されている場合は
フォームの入力値を検証し、スパム判定してくれます。
● ID 属性
HTMLコードのidに付加する値となります。
※cssを使い装飾や、JavaScriptを使い何らかのアクションをさせる場合は設定してください。
● クラス属性
HTMLコードのclassに付加する値となります。
※ID属性同様、cssを使い装飾や、JavaScriptを使い何らかのアクションをさせる場合は設定してください。
上記、項目タイプやデフォルト値を設定しておくことで
必須項目や、入力時の記入例を表示させることが可能です。
一通り入力し、設定が出来たら
タグを挿入のボタンをクリックしましょう。
フォームの編集エリアにあなたが設定したタグが挿入されます。
3）メールの設定
メールタブでは、オウンドメディアの運営者であるあなたに
お問い合わせ内容をメール送信するための設定を行います。
ここのメールタブの設定では
- （お問い合わせの）送信先
- （お問い合わせの）送信元
- （お問い合わせの）題名
- 追加ヘッダー
- （お問い合わせの）メッセージ本文
- ファイル添付
をそれぞれ設定していきます。
● 送信先
お問い合わせがあった時に、あなたが受け取るための
送信先メールアドレスを入力します。
※いつでもすぐに確認できるアドレスを設定しましょう。
● 送信元
メール送信元のアドレスになります。
● 題名
メールを受信した時に表示される題名です。
※サイトからのお問い合わせと分かるよう、分かりやすい題名を設定しましょう。
● 追加ヘッダー
ここの設定はWeb知識が必要となります。Web知識のない方は
触らずに置いておくか、空白にしてください。
● メッセージ本文
メール本文の設定箇所です。文章はこのままでも構わないですし
必要に応じて調整してください。
● ファイル添付
必要に応じて設定してください。
メールの設定ができたら、続いて
自動返信メールの設定を行っていきます。
4）自動返信メールの設定
メールの設定画面をそのまま下までスクロールすると
メール（2）という項目があります。
ここのメール（2）を使用の部分にチェックを入れることで
自動返信メールの設定ができるようになります。
ここの設定に関しては先ほどとは異なり、
あなたのサイト訪問者であるお客様に届くメールの設定となります。
自動返信メールの設定は上記画像を参考に
文章はできるだけ丁寧にかつ、本文は分かりやすくし
好印象をもってもらえるようにしっかりと編集しておきましょう。
自動返信は必須項目ではありませんが
コーポレートサイトの場合は特に
しっかりと設定しておく方がより親切ですね。
5）メッセージ設定
続いてメッセージタブの設定です。
メッセージタブではユーザーが
お問い合わせフォームで送信を行った時に
表示される各種メッセージの設定ができます。
ただし、表示メッセージに関しては
あなたによほどのこだわりがない限り
デフォルトのままで全然問題ありません＾＾
ご自身で新たに設定したい場合は
改めて表示テキストを編集してくださいね。
6）その他の設定
その他の設定タブはコンタクトフォームを
カスタマイズするため設定項目になります。
ここも特に難しい設定や、何か動作や処理を
起こさせる必要がない場合は空欄で大丈夫です。
7）Contact Form 7の設定が完了したら保存
全ての設定が完了したら、必ず保存ボタンを押してください。
保存し忘れないように気をつけましょう。
上記、画面右上に設定を保存するためのボタンがあります。
お問い合わせをページに表示させる
Contact Form 7の設定が完了したら
いよいよ固定ページやウィジェットに
お問い合わせフォームを設置します。
お問い合わせフォームの設置は
WordPressのショートコードを使用します。
以下、コンタクトフォーム編集画面のタイトル下に
ショートコードが表示されているので
［contact-form-7 〜 お問い合わせ］までの一行を全てコピーします。
続いて、今コピーした一行を
新たに作成したお問い合わせページ（固定ページ推奨）に
以下のようにペーストして貼り付けます。
固定ページにお問い合わせフォームを設置する場合
パーマリンクはcontactにしましょう。
※パーマリンクはあなたが分かりやすい名前で構いません。
実際に完成したお問い合わせフォームがこちら…。
お問い合わせフォームの動作確認をする
お問い合わせフォームが固定ページに設置できたら、
実際に稼働するかどうか必ず確認してくださいね。
せっかくがんばって設置できても
メールが届かなければ意味がありません…＾＾；
設置したお問い合わせフォームに自分で必須項目を入力し送信。
↓ 管理者宛のメールを確認
↓ 自動返信メールも確認
最後に自分と自動返信メールの両方が無事確認できれば完璧です.
※自動返信メールを設定していない場合は自分の方だけ確認してください。
reCAPTCHAでさらにスパム対策を強化しよう！
お問い合わせフォームが設置できたら、さらに
reCAPTCHAを導入し、スパム対策を強化しましょう。
reCAPTCHAとは何か？ですよね。
↓ こういうもの見たことありませんか？
そう、これです。あなたも一度は経験したことがあるはずの
「私はロボットではありません」チェック…＾＾
スパム（迷惑）メールは自動化されたメールで
送られてくることが多いです。
だから、こういった人の手で
必ずチェックしなければならないツールがあると
ほぼ確実にスパムメールをはね除けることができます。
私の場合はさらにスパムコメント対策のプラグイン
Akismet Anti-Spamも導入しているので
スパム対策はほぼ完璧。※Akismet はWordPressインストール時にデフォルトで入っています。
contact-form-7さえ導入すれば
このreCAPTCHAも簡単に設置できるので
ついでに設置方法もお伝えしておきますね。
reCAPTCHAの導入方法
それでは順番に説明していきます。
設置に必要な時間は約3分です。
すぐにできるので、ぜひ導入してみてください。
reCAPTCHAのアカウントを発行しよう
reCAPTCHAはGoogleが提供している無料サービス。
なので、Googleアカウント（Gmailアカウント）が必要になります。
Googleアカウント（Gmailアカウント）をお持ちでない場合は
こちらの記事に取得方法を記載していますので
先にアカウントを取得してくださいね。
Googleアカウント（Gmailアカウント）を
お持ちの場合は以下の手順に従って進めていきましょう。
ダッシュボードメニューから
お問い合わせ → インテグレーションをクリックします。
↓ 以下の画面が表示されたら、右上のgoogle.com/recaptchaをクリック。
そうするとgoogleのreCAPTCHAサイトに移動しますので
続いて、右上のMy reCAPTCHAをクリックしてください。
My reCAPTCHAをクリックすると
Googleのログイン画面に移動します。
My reCAPTCHAを取得したいGoogleアカウントを選択し
ログインしましょう。
ログインすると以下のような画面が表示されますので
画像の通りに設定しましょう。
- Label：あなたが分かりやすい名前を付けてください。
- Choose the type of reCAPTCHA：reCAPTCHA v2でOK
- Domein：reCAPTCHAを使いたいあなたのサイトドメインを入力
- Accept the reCAPTCHA Terms of Service：利用規約に同意するにチェック
- Send alerts to owners：こちらもチェック
全て設定ができたら、最後にRegisterにチェックを入れて確定させます。
設定が完了すると、Site keyとSecret Keyが発行されます。
（1）Site keyと（2）Secret Keyをコピー使いますので
この画面を表示させたままWordPressのダッシュボード画面を開きましょう。
ダッシュボード画面を開いたら、最初と同じく
ダッシュボードメニューから
お問い合わせ → インテグレーションをクリック。
続いて、キーを設定するをクリックします。
キー設定の画面が表示されたら、先ほどのreCAPTCHAキーコード
（1）Site keyと（2）Secret Keyをコピーして以下の部分に貼り付けます。
設定が保存ができた時点で、reCAPTCHAを使う準備は完了です。
お問い合わせフォームにreCAPTCHAを設置しよう
reCAPTCHAを設置する準備ができたので
あとは、先ほどあなたが作った
お問い合わせフォームに設置するだけです。
ダッシュボードメニューから
お問い合わせ → コンタクトフォームをクリックし
先ほどあなたが作成したお問い合わせフォームを開きましょう。
reCAPTCHAの設定が正常に完了していれば
新たにreCAPTCHAのタグが表示されています。
reCAPTCHAの挿入場所を決めたら
reCAPTCHAのタグをクリックしてください。
そうすると、reCAPTCHAの設定画面が開くので
あなたのお好みのreCAPTCHAデザインを選び
タグを挿入をクリックします。
タグを挿入すると、先ほどあなたが決めた挿入場所に
reCAPTCHAタグが挿入されます。
最後に、reCAPTCHAがちゃんと設置できたか
プレビュー画面で確認してみましょう。
上記のようにreCAPTCHAが表示されていれば完璧です＾＾
reCAPTCHA導入後は必ず送信チェックしよう！
reCAPTCHA導入後、お問い合わせフォームから
正常に送信できるかどうか必ずチェックしておきましょう。
reCAPTCHAにチェックを入れた場合、送信ができて
reCAPTCHAにチェックを入れない場合
「あなたがロボットじゃないことを証明してください」と表示がでればOKです。
reCAPTCHAのデザインを変更する場合は？
先ほど、reCAPTCHAのデザイン設定を飛ばしましたが
reCAPTCHAには4種類のデザインバリエーションがあります。
↓ reCAPTCHAのデザインはこの画面で設定できます。
以下、reCAPTCHAのデザインサンプルを並べておきますので
あなたのお好みで設定してくださいね。
（1）サイズ：ノーマル テーマ：明るい
（2）サイズ：ノーマル テーマ：暗い
（3）サイズ：コンパクト テーマ：明るい
（4）サイズ：コンパクト テーマ：暗い
お問い合わせフォームの作り方まとめ
今回は、お問い合わせフォームの設置方法を
図説で詳しく解説しました。
これからあなたのオウンドメディアを構築し
コーポレートサイトやブログアフィリエイトなどで
収益化しようという場合は…
お問い合わせフォームを設置することで
あなたが紹介している商品に関する質問など
お客様からメールでいただくことが必ずあります。
実際にそういったお客様のお問い合わせに
誠実に対応することであなたの信用度も確実にアップします。
また、サイト運営者に連絡が取れることで
あなたのサイトを誠実に運営している姿勢というのも
理解してもらえますので
お問い合わせフォームはよほどの理由がない限り
必ず設置するようにしてくださいね。
お問い合わせフォームの設置に関し、ご不明な点があれば
いつでも気軽にお問い合わせくださいね。
最後までお読みいただきありがとうございました！
