[ワードプレス]お問い合わせフォームの作り方を画像付きで解説します!

[ワードプレス]お問い合わせフォームの作り方を画像付きで解説します!

 

ここあです。

 

企業サイトでも、個人ブログでも

オウンドメディアとしてWebサイトを開設したら

お問い合わせフォームはぜひ設置しておきたいもの。

 

というのも、お問い合わせフォームは

ネットビジネスでは非常に重要な役割を果たすからです。

 

特に以下のような

  • ブログアフィリエイトを行う場合
  • Googleアドセンスを取得する場合

それぞれにおいて

お問い合わせフォームの設置は必須です。

 

また、コーポレートサイトを立ち上げる場合も

見込み客であるユーザーとコミュニケーションを

取れる環境があるに越したことはありません。

 

ということで、今回は

オウンドメディアの運営には必須とも言うべく

お問い合わせフォームの作り方を詳しく解説していきます。

 

お問い合わせフォームを設置できる

WordPressのプラグインはいくつかありますが

 

今回はWordPress初心者でも比較的簡単に

お問い合わせフォームの作成・設置ができる

Contact Form 7での作り方をご紹介します。

 

Contact Form 7”はすでに100万人を超える

ワードプレスユーザーが利用していますので

ユーザーの評価が高いプラグンとしての定評もあります。

 

この機会にぜひ“お問い合わせフォーム”を

設置してみてくださいね。

 

なぜお問い合わせフォームが必要か?

 

ただの“趣味ブログ”や“日記ブログ”を書くような人であれば

コメント欄だけあれば十分”です。

 

しかし、Googleアドセンス

ASP(アフィリエイト・サービス・プロバイダ)を使い

ネットビジネスとしてブログを始めた場合は何かしらの商品を扱いますよね。

 

お問い合わせフォーム”がなければ

せっかく素晴らしい商品を扱っていても

読者の方から問い合わせをすることができず

 

商品が売れる可能性も低くなってしまいます。

 

逆にお問い合わせフォームがあれば

あなたが扱っている商品がどんなものか?

読者の方に問い合わせしてもらうことができ

 

あなたがちゃんとその商品の

説明をすることさえできれば

 

“読者の方の信用を得ることができ

商品を購入してもらえる可能性が高くなります。
※実際にアフィリエイト商品は問い合わせしてもらう方が明らかに成約率はアップします。

 

読者の方を自分のファンにできるツール

というと大げさに聞こえるかもしれませんが

 

“問い合わせフォーム”はネットビジネスをする上では

ブログの読者との信頼関係を築ける

大切なコミュニケーションツールにもなりうるのです。
※ツールという言い方をしてしまうと語弊があるかもしれませんが…

 

ワードプレスプラグイン「Contact Form 7」

それではワードプレスプラグイン

Contact Form 7の使い方について説明していきます。

 

「Contact Form 7」の特徴は…

まずは簡単に

Contact Form 7”でできることをご紹介します。

  • お問い合わせがあった場合、管理者へメールの通知ができる
  • お問い合わせしてくれた方へ自動返信メールを送れる
  • 選択式のボタンが設置でき、複数の商品があっても対応できる
  • アンケートをとることができる

 

また、

  • ワードプレスの管理画面でフォームの作成ができる
  • 入力必須項目とそうでない項目を自由に設定できる
  • お問い合わせ内容をカスタマイズしたり、設置するのも簡単

など…

 

よほど凝ったお問い合わせフォームを作ろうと思わなければ、

“Contact Form 7のプラグインを導入するだけで

ある程度使い勝手の良いお問い合わせフォームを設置することができます。

 

「Contact Form 7」でお問い合わせフォームを設置するまでの流れ

お問い合わせフォーム”は

プラグインをインストールするだけでは設置できません。

 

以下のような手順でお問い合わせフォームを作成し

設置する必要があります。

  1. Contact Form 7をインストールする
  2. お問い合わせフォームのテンプレートを作成する
  3. お問い合わせフォームを固定ページやウィジェットに設置し表示させる

 

「Contact Form 7」をインストールする

ここからはひとまず、“Contact Form 7

インストールするための流れを簡単に説明していきます。

 

ダッシュボードの“プラグイン”をクリックし

この画面でさらに“新規追加”をクリックします。

contactform7プラグイン画面

 

 

または、“プラグイン”の上にマウスを乗せると

↓のようなメニューが出てくるので“新規追加”をクリックします。※どちらのやり方でもOKです。

contactform7プラグイン追加画面

 

 

プラグンを追加する画面でContact Form 7とプラグイン名を入力し、検索します。

contactform7プラグイン検索画面

 

 

すると、富士山の絵が特徴的な“Contact Form 7のプラグインが見つかります。

contactform7プラグイン検索画面

 

 

今すぐインストールをクリックして

Contact Form 7のプラグインをインストールします。

プラグインはインストールするだけではいけません。

 

インストールした後は必ず

プラグインを有効化する必要があります。

contactform7プラグインの有効化

 

プラグンの有効化ができたら、ひとまずは

Contact Form 7のプラグインが

インストールできたということになります。

 

プラグインによっては、これらの手順でインストールし

有効化をするだけですぐに使えるプラグインもたくさんあります。

 

ですが、Contact Form 7は設定が必要となりますので

引き続き設定の仕方についても説明していきますね。

 

「Contact Form 7」の設定方法

Contact Form 7”のプラグインが正常にインストールされると

ダッシュボードのメニュー項目に

お問い合わせという項目が追加されているはずです。

 

この管理画面に追加された“お問い合わせ”メニューから

お問い合わせフォームのテンプレートを作成していきます。

 

先ほどのプラグンと同様

お問い合わせ”をクリックし、“新規追加”をクリックするか

contactform7新規追加画面

 

 

ダッシュボードメニューの

お問い合わせ”の項目にマウスを合わせて

新規追加をクリックしてください。

contactform7新規追加画面

 

 

もしくは、“Contact Form 7”のプラグインをインストールした時点で

サンプルとして“コンタクトフォーム1”という

テンプレートが用意されています。

 

そちらのテンプレートを使用しながらの編集も可能です。

 

「Contact Form 7」の設定内容

Contact Form 7」の設定箇所は基本的に以下の5項目を編集します。

 

contactform7の設定内容

 

  • 問い合わせフォームの「タイトル」
  • 「フォーム」
  • 「メール」
  • 「メッセージ」
  • 「その他の設定」

これらを順番にカスタマイズしていきます。

 

1)タイトルの設定

コンタクトフォームの編集画面で設定するタイトルは実際のブログに表示されるものではありません。

あなたの管理用のタイトルになりますので

あなたが管理しやすいタイトルを付けてください。

contactform7タイトルの設定

 

 

2)各フォーム項目の設定

contactform7フォーム項目の設定

 

上記、赤枠で囲んだ、それぞれのボタンをクリックして

問い合わせフォームに設置したい項目を追加していきます。

contactform7フォーム設置画面

 

「テキスト」、「メールアドレス」などのボタンを押すと

フォーム項目の詳細な設定を行う画面が表示されます。

 

フォームタグ生成画面の設定内容は以下の通りです。

項目タイプ
必須項目”にチェックを入れると、入力必須の項目になります。

名  前
フォーム項目の名前です。
※他の項目と同じ名前にはできません。

デフォルト
項目に初期表示される値です。
※下の「このテキストを項目のプレースフォルダーとして使用する」にチェックすると
 入力域に薄く入力例としてテキストが表示されるようになります。

Akismet
スパム対策のプラグイン“Akismet”が有効化されている場合は、フォームの入力値を検証し、スパム判定してくれます。

ID属性
HTMLコードのidに付加する値となります。
※cssを使い装飾や、JavaScriptを使い何らかのアクションをさせる場合は設定してください。

クラス属性
HTMLコードのclassに付加する値となります。
※ID属性同様、cssを使い装飾や、JavaScriptを使い何らかのアクションをさせる場合は設定してください。

 

「Contact Form 7」でできる簡単スパム対策!
承認確認”のタグを使い、承認タグの横に
[acceptance acceptance-●●●]メッセージの内容はこれでよろしいでしょうか?
OKでしたらチェックして送信ボタンをクリックしてください。
と入力し、
承認確認のボタンを作っておくだけで、簡単にスパム対策ができるようになります。

 

ここで、“必須項目”や、入力の際の“記入例”を表示させる値を設定することが可能です。

一通り入力し設定が出来たらタグを挿入のボタンを押すと

フォームの編集エリアにあなたが設定したタグが挿入されます。

 

 

3)メールの設定

メールタブ”では、ブログの運営者であるあなたに

お問い合わせ内容をメール送信するための設定を行います。

contactform7メールタブ

 

ここのメールタブの設定では

  • (お問い合わせの)送信先
  • (お問い合わせの)送信元
  • (お問い合わせの)題名
  • 追加ヘッダー
  • (お問い合わせの)メッセージ本文
  • ファイル添付

をそれぞれ設定していきます。

 

送信先
お問い合わせがあった時に、“あなたが受け取るための送信先メールアドレス”を入力します。
いつでもすぐに確認できるアドレスを設定しましょう。
サイトやブログ管理者のアドレスが一般的です。

送信元
メール送信元のアドレスになります。
※サイトのドメインとメールのドメインが異なる場合は、メールサーバーがスパムと認識し
エラーメッセージが表示される場合があります。

※あなたのちゃんとしたメールがスパム扱いされるのは不本意だと思いますので
できる限り同じドメインのメールアドレスを使用する方が良さそうです。

題 名
メールを受信した時に表示される題名です。
サイトからのお問い合わせと分かるよう、分かりやすい題名を設定しましょう。

追加ヘッダー
ここの設定はWeb知識が必要となります。Web知識のない方は、触らずに置いておくか、空白にしてください。
※あらかじめセットされている“Replay-To:[メールアドレス]”は
 受信メールの返信先を指定するヘッダーとなります。
※サイトから送られてきたメールに対し
 メールソフトの返信で簡単に返信できるようになります。

メッセージ本文
メール本文の設定箇所です。文章はこのままでも構わないですし、必要に応じて調整してください。

ファイル添付
必要に応じて設定してください。

 

 

4)自動返信メールの設定

contactform7自動返信設定

 

メールの設定画面をそのまま下までスクロールすると

メール(2)という項目があります。

 

ここのメール(2)を使用の部分にチェックを入れることで

自動返信メールの設定ができるようになります。

 

ここの設定に関しては先ほどとは異なり、

あなたの読者の方や、お客様に届くメールの設定となります。

文章はできるだけ丁寧にかつ、本文は分かりやすくし

 

好印象をもってもらえるようにしっかりと編集しておきましょう!

自動返信は必須項目ではありませんが、コーポレートサイトの場合には

やはり、しっかりと設定しておく方が親切でいいでしょう。

 

 

5)メッセージ設定

contactform7メッセージ設定

 

メッセージ”タブでは

フォーム”で送信が行われたときに表示される

各種メッセージの設定ができます。

 

表示メッセージに関してはよほどのこだわりがない限り

デフォルトのまま”で問題ありません。

 

 

6)その他の設定

contactform7その他の設定

 

このタブはフォームのカスタマイズをするための設定を行う部分になります。

※ここでも特に難しい設定や、何か動作や処理を

起こさせる必要がない場合は空欄で大丈夫です。

 

 

7)フォームの設定が“完了”したら保存

contactform7設定完了

すべての設定が“完了”したら必ず保存ボタンを押してください。

保存し忘れないように気をつけましょう!

 

フォームをページに表示させる

フォームの設定が完了したら

いよいよ固定ページやウィジェットにフォームを設置します。

フォームの表示はワードプレスの“ショートコード”で設置します。

contactform7ショートコード

 

フォーム編集画面のタイトルのすぐ下

contact-form-7〜お問い合わせ]までの一行を全てコピーします。

 

次にコピーした一行を新たに作成した

お問い合わせページ(固定ページ推奨)にペーストして貼り付けます。

contactform7お問い合わせページに設置

 

また、固定ページにお問い合わせフォームを設置する場合

パーマリンクは“contact”でいいと思います。

実際にできた画面がこちらです!

 contactform7完成図

実際のお問い合わせフォームはこちら

 

お問い合わせフォームの動作確認をする

お問い合わせフォームが固定ページに設置できたら、

実際に稼働するかどうか必ず確認してください。

 

せっかくがんばって設置できても

メールが届かなければ意味がありませんよね?^^;

 

設置したお問い合わせフォームに自分で必須項目を入力し送信。

contactform7動作確認

 

管理者宛のメールを無事確認!

contactform7動作確認

 

↓自動返信メールも無事確認

contactform7動作確認

 

最後に自分と自動返信メールの両方が無事確認できれば完璧です!
※自動返信メールを設定していない場合は自分の方だけ

 

reCAPTCHAでさらにスパム対策を強化しよう!

お問い合わせフォームが設置できたら

さらにreCAPTCHAを導入しスパム対策を強化しましょう。

 

reCAPTCHA」とは何か?ですよね。

↓ こういうもの見たことありませんか?

reCAPTCHA

 

そう、これです。あなたも一度は経験したことがあるはずの

私はロボットではありませんチェック!^^

 

スパムメールは自動化されたメールで送られてくることが多いので

こういった人の手で必ずチェックしないといけないツールがあると

ほぼ確実にスパムメールをはね除けることができます。

 

私の場合はさらにスパムメール対策のプラグイン

Akismet Anti-Spam」入れているので

スパム対策はほぼ完璧^^

 

contact-form-7」さえ導入すれば

この「reCAPTCHA」も簡単に設置できますので

合わせて設置方法もお伝えしておきますね。

 

reCAPTCHAの導入方法

それでは順番に説明していきます。

設置に必要な時間は約3分です。

すぐにできるので、ぜひ導入してください。

 

reCAPTCHAのアカウントを発行しよう

reCAPTCHA」はGoogleが提供している無料サービス

なので、Googleアカウント(Gmailアカウント)が必要になります。

 

Googleアカウント(Gmailアカウント)をお持ちでない場合は

こちらの記事に取得方法を記載していますので

先にアカウントを取得してくださいね。

Gmailアカウントの作成方法と追加の仕方

 

Googleアカウント(Gmailアカウント)

お持ちの場合は以下の手順に従って進めていきましょう。

 

ダッシュボードメニューから

お問い合わせ」→インテグレーションをクリックします。

インテグレーション

 

 

↓ 以下の画面が表示されたら、右上のgoogle.com/recaptchaをクリック。

インテグレーション

 

 

そうするとgoogleの「reCAPTCHA」サイトに移動します。

続いて、右上の「My reCAPTCHAをクリックしましょう。

My reCAPTCHA

 

 

My reCAPTCHA」をクリックすると、Googleのログイン画面に移動します。

My reCAPTCHA」を取得したいGoogleアカウントを選択し、ログインしましょう。

Googleアカウントログイン画面

 

 

ログインすると以下のような画面が表示されますので

画像の通りに設定しましょう。

My reCAPTCHA設定画面

 

 

  1. Label:あなたが分かりやすい名前を付けてください。
  2. Choose the type of reCAPTCHA:reCAPTCHA v2でOK
  3. Domein:reCAPTCHAを使いたい「あなたのサイトドメイン」を入力
  4. Accept the reCAPTCHA Terms of Service:利用規約に同意するに「チェック」
  5. Send alerts to owners:こちらもチェック

最後にRegisterにチェックを入れて確定させます。

 

設定が完了すると、Site key」と「Secret Keyが発行されます。

 

 

(1)「Site key」と(2)「Secret Key」をコピー使いますので

この画面を表示させたままワードプレスのダッシュボード画面を開きましょう。

 

ダッシュボード画面を開いたら、最初と同じく

ダッシュボードメニューから「お問い合わせ」→「インテグレーション」をクリック。

インテグレーション

 

 

続いて、今度は、キーを設定するをクリックします。

インテグレーション:キー設定

 

 

キー設定」画面が表示されたら、先ほどの「reCAPTCHA」のキーコード

(1)「Site key」と(2)「Secret Key」をコピーして以下の部分に貼り付けます。

インテグレーション

 

保存」が出来た時点で「reCAPTCHA」を使う準備は完了です。

 

お問い合わせフォームに「reCAPTCHA」を設置しよう

reCAPTCHA」を設置する準備ができたので

あとは、先ほどあなたが作った「お問い合わせフォーム」に設置するだけです。

 

ダッシュボードメニューから「お問い合わせ」→「コンタクトフォーム」を

クリックし、先ほどあなたが作成した「お問い合わせフォーム」画面を開きましょう。

 

reCAPTCHA」の設定が正常に完了していれば

新たに「reCAPTCHA」のタグが表示されているはずです。

 

 

reCAPTCHA」の設置場所を決めたら

reCAPTCHA」のタグをクリックしてください。

reCAPTCHAを挿入

 

 

そうすると、「reCAPTCHA」の設定画面が開きますので

あなたのお好みの「reCAPTCHA」を選びタグを挿入をクリックします。

reCAPTCHA設定

 

 

タグを挿入」すると、先ほどあなたが決めた挿入場所に

reCAPTCHA」のタグが挿入されます。

「reCAPTCHA」挿入完了

 

 

最後に、「reCAPTCHA」がちゃんと設置できたか

プレビュー画面で確認してみましょう。

お問い合わせフォーム画面

 

reCAPTCHA」導入後も必ず送信チェックしよう!

reCAPTCHA」導入後

正常に送信できるかどうか必ずチェックしておきましょう。

 

reCAPTCHA」にチェックを入れた場合、送信ができて

reCAPTCHA」にチェックを入れない場合

あなたがロボットじゃないことを証明してくださいと表示がでればOKです。

 

reCAPTCHA」のデザインを変更する場合は?

先ほど、「reCAPTCHA」のデザイン設定を

飛ばしましたが、4種類のデザインバリエーションがあります。

reCAPTCHAデザイン変更

 

 

サンプルを並べておきますので

お好みで設定してくださいね。

 

(1)サイズ:ノーマル テーマ:明るい

 

(2)サイズ:ノーマル テーマ:暗い

 

(3)サイズ:コンパクト テーマ:明るい

 

(4)サイズ:コンパクト テーマ:暗い

 

お問い合わせフォームの作り方まとめ

お問い合わせフォームの設置方法をできるだけ

分かりやすいように詳しく画像付きで解説しましたが

いかがでしたでしょうか?

 

これからブログアフィリエイトで

収益化しようという場合は…

 

お問い合わせフォームを設置することで

あなたが紹介している商品に関する質問など

メールでいただくことがあるかもしれませんが

 

実際にそういったお問い合わせのメールに

誠実に対応することで訪問者に対して

あなたの信用度もアップします。

 

また、ブログ運営者に連絡が取れることで

ブログを誠実に運営している姿勢というのも

理解してもらえますので

 

お問い合わせフォームは

よほどの理由がない限り

設置するようにしてくださいね。

 

何か不明な点があれば

いつでも気軽にお問い合わせくださいね。

 

最後までお読みいただきありがとうございました。

 

おすすめのプラグインなどもぜひ参考にしてみてください。

 

合わせて読みたい!

 

[ワードプレス]お問い合わせフォームの作り方を画像付きで解説します!

ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。