[ワードプレス]お問い合わせフォームの作り方を図解で解説!

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

 

ここあです。

 

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

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

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

 

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

ネットビジネスにおいては特に

非常に重要な役割を果たしてくれるからです。

 

特に以下のような

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

それぞれにおいて

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

 

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

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

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

 

ということで、今回は

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

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

 

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

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

 

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

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

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

 

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

WordPressユーザーが利用しており

ユーザー評価も非常に高いプラグンです。

 

あなたもぜひこの機会にお問い合わせフォームを

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

 

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

お問い合わせフォームの設置方法を説明する前に

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

簡単に説明しておきますね。

 

通常、無料ブログを使った

  • 趣味ブログ
  • 日記ブログ

といった…

 

極めて私的なWebサイトであれば

サイト訪問者と共通の話題で盛り上がれる

コメント欄があれば、それで十分です。

 

いわゆる芸能人のブログのようなサイトですね^^

 

しかし、WordPressを使って

  • ブログアフィリエイト
  • サイトアフィリエイト
  • コーポレートサイトなど

 

上記、Webサイトを構築し、何らかの形で

ビジネスへの活用、Webサイトの収益化を考える場合は…

 

たくさんのお客様に見てもらい

興味を持っていただいた方には

ぜひご連絡をいただきたいですよね。

 

つまり、お問い合わせフォームは…

 

私たちオウンドメディアの運営者と

お客様とが直接つながれる

非常に重要な入り口としての役目を担ってくれます。

 

実際にお問い合わせをくれるお客様というのは

あなたが扱う商品、もしくは

あなたに強い関心を持っている場合が多く

 

お問い合わせフォームを活用し

お客様からのお問い合わせに誠実に対応できるかどうかで

ビジネスの成果もかなり大きく変わってきます。

 

だからこそ、お客様の信用や信頼が高まる

安心して使っていただけるお問い合わせフォームを

設置しておかなければなりません。

 

また、特にコーポレートサイトの場合は

お問い合わせフォームがあることで…

  • 企業や個人からの仕事の依頼
  • 見積り請求や資料請求
  • 各サービスへのお申込み
  • 取材の受付
  • 寄稿の提案など

様々なご要望やご相談を受ける可能性もあり

 

お問い合わせフォームを設置しておく方が

これらのご要望にも対応しやすく

 

サイト訪問者のユーザーにも

非常に便利で親切というワケなんですね^^

 

お問い合わせフォームのメリット

お問い合わせフォームのメリットについても

簡単に触れておきますね。

 

一昔前のWebサイトでは

電話番号やメールアドレスを掲載し

電話やメールからのお問い合わせが主流でした。

 

しかし、電話によるお問い合わせの場合は…

  • 業務時間外の対応が困難
  • 記録が残らない

というデメリットがあり

 

最悪の場合は…

「言った、言わない」の堂々巡りになる

リスクさえありますよね…^^;

 

メール(メーラーから)によるお問い合わせの場合は…

ユーザーが必要な情報(会社名・住所・氏名・問合せ事項など)

漏れなく記載する必要があり、非常に手間がかかります。

 

また、迷惑メールいわゆるスパムメールは

企業にとっても、個人にとっても迷惑極まりないし

 

不要なメールを整理する作業が

どれほど非効率で時間の無駄かということは

今更言うまでもありませんよね…^^;

 

お問い合わせフォームを設置すれば

  1. メールアドレスや電話番号の掲載が不要
  2. 運営者が欲しい情報だけが手に入る
  3. メーラーが必要ない
  4. 問い合わせ数も確認しやすい

といったメリットがあります。

 

❶ メールアドレスや電話番号の掲載が不要

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

メールアドレスの掲載が不要なので

スパムメールの餌食になることはありません。

 

❷ 運営者が欲しい情報だけが手に入る

メールアドレスや名前、住所など

必須事項をあらかじめ設定することで

運営者が必要な情報だけを確実に入手することができ

 

  • お問い合わせ
  • 資料請求
  • 申し込みなど

ユーザーへの選択項目をお問い合わせフォームに

設定することで、お問い合わせ内容を

明確に区別することも可能になります。

 

❸ メーラーが必要ない

お問い合わせフォームがあればメーラーも不要。

普段ユーザーが使用している端末だけでなく

 

ユーザーがその時使用している端末からでも

お問い合わせが可能になるので非常に便利です。

 

❹ 問い合わせ数も確認しやすい

さらにお問い合わせフォームに送信完了ページを

設置することで、アクセス解析にて

問い合わせ数(コンバージョン)の確認もできるようになります。

 

オウンドメディアの運営においては

こうしたコンバージョン率の計測は非常に需要で

 

成果の確認、サイト運営の改善を検討する上でも

正確な数字を簡単に把握できるようにすることは

 

ネットビジネスの成功においては欠かせない

非常に重要なデータとなりますので

合わせて覚えておいてくださいね。

 

以上、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の導入は

それほど難しいものではありませんし

 

以下の手順を踏めば、あなたでも十分簡単に

お問い合わせフォームを作成し、設置することができます。

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

 

手順は全てスクリーンショットの画像付きで

解説していきますので、あなたでも迷うことなく

確実に設置できるはずです。

 

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

まずは、WordPressのプラグインContact Form 7を

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

 

プラグインの導入が初めてという場合は

ぜひ参考にしてくださいね。

 

WordPressのプラグインを導入するには

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

  1. プラグインをクリック
  2. 新規追加をクリック

プラグインの新規追加画面を開きます。

contactform7プラグイン画面

 

 

または、ダッシュボードメニューの

プラグインの上にマウスを乗せると…

 

以下のような追加メニューが出てきますので

ここで新規追加をクリックしてもOKです。結果は同じです^^

contactform7プラグイン追加画面

 

 

新規追加をクリックすると…

プラグンを追加する画面に移動するので

 

画面右上の検索ボックスに

Contact Form 7とプラグイン名を入力しましょう。

contactform7プラグイン検索画面

 

 

プラグイン名を入力すると、このようになぜか富士山の絵の(笑)

Contact Form 7が表示されます。

contactform7プラグイン検索画面

 

Contact Form 7が表示されたら

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

Contact Form 7をインストールしてください。

 

プラグインがインストールできたら

プラグインを有効化をクリックし

必ずプラグインを有効化してくださいね。

contactform7プラグインの有効化

 

インストールするだけでは機能しないので

気を付けてください^^;

 

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

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

 

ですが、Contact Form 7の場合は

個別に設定が必要となりますので

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

 

Contact Form 7の設定方法

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

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

お問い合わせという項目が追加されます。

 

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

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

 

先ほどのプラグンと同様

ダッシュボードメニューからお問い合わせをクリックし

新規追加をクリックするか

contactform7新規追加画面

 

 

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

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

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

contactform7新規追加画面

 

 

ただし、お問い合わせフォームに関しては

Contact Form 7をインストールした時点で

 

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

テンプレートがデフォルトで用意されています。

 

なので、お問い合わせフォームの設定に関しては

  • 新規作成から
  • デフォルトのコンタクトフォーム

どちらを使って編集しても構いません^^

 

あなたが使いやすい方を選択してくださいね。

 

Contact Form 7の設定内容

続いて、具体的にお問い合わせフォームの

設置作業に付いて説明していきます。

 

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

contactform7の設定内容

 

 

  1. 問い合わせフォームのタイトル
  2. フォーム
  3. メール
  4. メッセージ
  5. その他の設定

これらを順番に設定していきます。

 

1)お問い合わせフォームのタイトル設定

コンタクトフォームの編集画面で設定するタイトルは

実際にサイト表示されるものではありません。

 

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

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

contactform7タイトルの設定

 

 

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

contactform7フォーム項目の設定

 

 

フォームの設定は上記、赤枠で囲んだ

それぞれのボタンをクリックして

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

 

例えば、一番左のテキストをクリックした場合

以下のようなフォームタグ設定画面が開きます。

contactform7フォーム設置画面

 

また、テキストだけでなく、メールアドレスや

他のボタンをクリックすると

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

 

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

● 項目タイプ

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

 

● 名前

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

 

● デフォルト値

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

 

● Akismet

スパム対策のプラグインAkismetが有効化されている場合は

フォームの入力値を検証し、スパム判定してくれます。

 

● ID 属性

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

 

● クラス属性

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

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

 

上記、項目タイプやデフォルト値を設定しておくことで

必須項目や、入力時の記入例を表示させることが可能です。

 

一通り入力し、設定が出来たら

タグを挿入のボタンをクリックしましょう。

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

 

3)メールの設定

メールタブでは、オウンドメディアの運営者であるあなたに

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

 

contactform7メールタブ

 

 

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

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

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

 

● 送信先

お問い合わせがあった時に、あなたが受け取るための

送信先メールアドレスを入力します。
※いつでもすぐに確認できるアドレスを設定しましょう。

 

● 送信元

メール送信元のアドレスになります。

※サイトのドメインとメールのドメインが異なる場合はメールサーバーがスパムと認識し、エラーメッセージが表示される場合があります。あなたのメールがスパム扱いされるのは不本意だと思いますので、できる限り同じドメインのメールアドレスを使用しましょう。

 

● 題名

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

 

● 追加ヘッダー

ここの設定はWeb知識が必要となります。Web知識のない方は

触らずに置いておくか、空白にしてください。

※あらかじめセットされているReplay-To:[メールアドレス]は受信メールの返信先を指定するヘッダーとなります。サイトから送られてきたメールに対し、メールソフトの返信で簡単に返信できるようになります。

 

● メッセージ本文

メール本文の設定箇所です。文章はこのままでも構わないですし

必要に応じて調整してください。

 

● ファイル添付

必要に応じて設定してください。

 

メールの設定ができたら、続いて

自動返信メールの設定を行っていきます。

 

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

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

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

 

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

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

 

contactform7自動返信設定

 

 

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

あなたのサイト訪問者であるお客様に届くメールの設定となります。

 

自動返信メールの設定は上記画像を参考に

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

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

 

自動返信は必須項目ではありませんが

コーポレートサイトの場合は特に

しっかりと設定しておく方がより親切ですね。

 

5)メッセージ設定

続いてメッセージタブの設定です。

 

メッセージタブではユーザーが

お問い合わせフォームで送信を行った時に

表示される各種メッセージの設定ができます。

 

contactform7メッセージ設定

 

ただし、表示メッセージに関しては

あなたによほどのこだわりがない限り

デフォルトのままで全然問題ありません^^

 

ご自身で新たに設定したい場合は

改めて表示テキストを編集してくださいね。

 

6)その他の設定

その他の設定タブはコンタクトフォームを

カスタマイズするため設定項目になります。

 

contactform7その他の設定

 

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

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

 

7)Contact Form 7の設定が完了したら保存

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

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

 

contactform7設定完了

 

上記、画面右上に設定を保存するためのボタンがあります。

 

お問い合わせをページに表示させる

Contact Form 7の設定が完了したら

いよいよ固定ページやウィジェットに

お問い合わせフォームを設置します。

 

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

WordPressのショートコードを使用します。

 

以下、コンタクトフォーム編集画面のタイトル下に

ショートコードが表示されているので

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

contactform7ショートコード

 

 

続いて、今コピーした一行を

新たに作成したお問い合わせページ(固定ページ推奨)

以下のようにペーストして貼り付けます。

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

 

 

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

パーマリンクはcontactにしましょう。
※パーマリンクはあなたが分かりやすい名前で構いません。

実際に完成したお問い合わせフォームがこちら…。

 contactform7完成図

 

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

 

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

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

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

 

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

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

 

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

contactform7動作確認

 

 

↓ 管理者宛のメールを確認

contactform7動作確認

 

 

↓ 自動返信メールも確認

contactform7動作確認

 

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

 

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

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

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

 

reCAPTCHAとは何か?ですよね。

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

reCAPTCHA

 

 

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

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

 

スパム(迷惑)メールは自動化されたメールで

送られてくることが多いです。

 

だから、こういった人の手で

必ずチェックしなければならないツールがあると

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

 

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

Akismet Anti-Spamも導入しているので

スパム対策はほぼ完璧。
※Akismet はWordPressインストール時にデフォルトで入っています。

 

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アカウントログイン画面

 

 

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

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

インテグレーション

 

 

  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をコピー使いますので

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

 

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

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

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

インテグレーション

 

 

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

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

 

 

キー設定の画面が表示されたら、先ほどの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にチェックを入れた場合、送信ができて

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

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

 

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

先ほど、reCAPTCHAのデザイン設定を飛ばしましたが

reCAPTCHAには4種類のデザインバリエーションがあります。

 

↓ reCAPTCHAのデザインはこの画面で設定できます。

reCAPTCHAデザイン変更

 

 

以下、reCAPTCHAのデザインサンプルを並べておきますので

あなたのお好みで設定してくださいね。

 

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

 

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

 

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

 

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

 

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

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

 

今回は、お問い合わせフォームの設置方法を

図説で詳しく解説しました。

 

これからあなたのオウンドメディアを構築し

コーポレートサイトやブログアフィリエイトなどで

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

 

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

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

お客様からメールでいただくことが必ずあります。

 

実際にそういったお客様のお問い合わせに

誠実に対応することであなたの信用度も確実にアップします。

 

また、サイト運営者に連絡が取れることで

あなたのサイトを誠実に運営している姿勢というのも

理解してもらえますので

 

お問い合わせフォームはよほどの理由がない限り

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

 

お問い合わせフォームの設置に関し、ご不明な点があれば

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

 

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

 

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

 

合わせて読みたいおすすめの記事

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

ABOUTこの記事をかいた人

ここあ

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