サイトを運用する上で欠かせないのが「お問い合わせフォーム」です。
企業のホームページはもちろん、アフィリエイト目的でのサイトや個人ブログにおいても、問い合わせフォームを設置する事はサイトの信頼向上に繋がりますし、広告の打診が来るなど思わぬビジネスチャンスに繋がる可能性もあります。
「Contact Form 7」を利用すれば、誰でも簡単に問い合わせフォームが作成可能なので、活用していきましょう。
Contact Form 7とは
Contact Form 7とは、WordPressで作成したサイトに、問い合わせフォームを設置するためのプラグインです。
問い合わせフォームは従来、HTMLやCSSなどプログラミングの知識が必要で初心者には少しハードルが高いものでしたが、Contact Form 7のプラグインを利用すれば簡単な操作のみでフォームを作成することが可能です。
また、開発者が日本人のため日本語の情報が多いことも特徴です。日本語のFAQが充実していたり、問い合わせ窓口への質問もWordPress内で行えたりとサポートも充実しています。
Contact Form 7の基本的な使い方
それでは早速Contact Form 7で問い合わせフォームを作成していきましょう。
WordPressにContact Form 7をインストールする
まずはWordPressにContact Form 7をインストールしましょう。
左メニューの「プラグイン」から「新規追加」をクリックします。
表示されたページの右上のテキストボックスに「Contact Form 7」と入力しましょう。
検索結果にContact Form 7が表示されますので、「今すぐインストール」をクリックしてください。
すると、「有効化」のボタンに変わりますので、再度クリックしましょう。
フォームを作成する
インストールが完了したら、フォームを作成していきましょう。
Contact Form 7をインストールすると左メニューに「お問い合わせ」の項目が追加されますので、そこから「新規追加」をクリックします。
フォーム作成画面が表示されます。まずはタイトルを設定しておきましょう。
フォーム管理用のタイトルですので、わかりやすい名称で大丈夫です。
フォームの内容ですが、上記画像の通り基本的な項目はすでに設定されています。
この状態で出来上がるフォームは下記のようになりますので、これで十分な場合は特に修正する必要はありません。
内容を変更したい場合は、後述する「更にフォームをカスタマイズする方法」をご覧ください。
受信するメールの設定
次に、ユーザーが問い合わせフォームから送信した内容を、どのメールアドレスに送るのか、またメール本文内にどう表示させるのかなどを設定していきます。
「メール」タブをクリックすると、下記のような設定画面が表示されます。
設定に関して、それぞれの項目は下記の通りです。
STEP.1 送信先
問い合わせメールの送信先メールアドレスを指定します。
[_site_admin_email]は、WordPressのインストール時に設定した管理者メールアドレスを挿入する指定となりますので、他のメールアドレスに送信したい場合は任意のものに書き換えましょう。
STEP.2 送信元
問い合わせメールの送信元メールアドレスを指定します。
[_site_title]はWordPressに設定しているサイトタイトルが挿入されます。デフォルトの設定のままですと、下記のような送信元メールの表示になります。
例：◯◯ブログ <wordpress@xxx.com>
サイト名が不要の場合は[_site_title]を削除しても問題ありません。
また、上記例のメールアドレス「@xxx.com」部分のドメイン名は、WordPressに設定しているドメイン名である必要があります。
別のドメインを送信元のメールアドレスとして利用すると、偽装アドレスと認識される可能性があるためです。
利用しているレンタルサーバーで送信元用のメールアドレスを作成し、設定しましょう。
STEP.3 題名
メールを受信する時の件名を設定します。
デフォルトでは[_site_title] “[your-subject]”が設定されており、「サイトタイトル＋問い合わせメールに記載された題名」が挿入されるようになっています。
問い合わせメールだと一目でわかるように、[_site_title]部分を「ブログからの問い合わせ」などに変更すると良いでしょう。
STEP.４ 追加ヘッダー
Reply-To: [your-email]が設定されていますが、これは問い合わせメールに対して返信する際に、自動的にお問い合わせ元のメールアドレスをTOに指定する設定になります。
基本的にはこのままで問題ありません。
受信したメールの本文の形式を指定します。
基本的にはデフォルトのままでも問題ありませんが、差出人とメールアドレスを切り離したい場合には下記のように修正すると良いでしょう。
例： お名前：[your-name] メールアドレス：[your-email] 題名：[your-subject] メッセージ本文：[your-message]
設定が完了したら、ページ下部の「保存」ボタンを押すと、問い合わせフォームに反映されます。
なお、WordPressで記事に挿入する際、クラシックエディタを利用中の場合はショートコードの入力が必要となります。
保存ボタンを押すと、ページ上部にショートコードが表示されますので、コピーしておいてください。
ブロックエディタの場合は必要ありません。
固定ページでお問い合わせページを作成する
作成したフォームを、固定ページに設置しましょう。
左メニュー「固定ページ」から「新規追加」をクリックします。
ページのタイトルを入力し、フォームを設置していきます。
ブロックエディタとクラシックエディタで設置方法が異なりますので、ご注意ください。
ブロックエディタの場合
左メニューのブロックタブ内「ウィジェット」の「Contact Form 7」をクリックします。
Contact Form 7のブロックが挿入されますので、表示されたプルダウンから先ほど設定したタイトルを選択しましょう。
クラシックエディタの場合
テキストのタブに切り替え、先ほどコピーしておいたショートコードを本文に貼り付けてください。
以上で完了です。
プレビューで表示を確認し、問題なければ公開しましょう。
完成したお問い合わせページは下記のようになります。
問い合わせメールをテスト送信してみて、問題なければ、任意の場所にお問い合わせページのリンクを設置するようにしましょう。
フォームをカスタマイズする方法
Contact Form 7では、手軽にフォームを作れるだけでなく、入力フォームのバリエーションを増やしたり、自動返信メールを設定することができます。
入力フォームをカスタマイズする方法
Contact Form 7には様々なフォームのテンプレートが用意されており、必要項目を埋めていくだけで簡単に入力欄を追加、編集することが可能です。
例として、氏名の下に新しくURL入力欄を増やす手順を見ていきましょう。
まずは、本文内にURL入力欄を入れるスペースを用意し、メニューから「URL」をクリックします。
フォームタグ生成画面が出てきますので、必要事項を埋めていきましょう。
STEP.1 項目タイプ
URLの入力欄を必須項目として設定することができます。必ず入力して欲しい項目はチェックボックスを入れておきましょう。
STEP.２ 名前
デフォルトでは「url-xxx」といった数字が設定されていますが、自動返信メールや受信メールを設定する際にこの名前を使用しますので、管理しやすいものに変更しましょう。今回は問い合わせユーザーのURL入力欄のため「your-url」としました。
STEP.３ デフォルト値
デフォルト値とは、フォームに予め入力しておく値になります。
「プレースホルダーとして使用する」のチェックボックスを入れることで、フォームの入力例として使用することができます。
最後に「タグを挿入」ボタンを押すと、URL欄が追加されます。
ショートコードのみ追加されるため、他の項目に合わせて<label>URLのように<label>タグと項目名を設定し、保存します。
フォームを設置した固定ページを更新し、URL欄が追加されている事を確認しましょう。
入力欄を追加したら、受信メールにもその回答が挿入されるように項目を追加する必要があります。
「メール」タブを開きメッセージ本文に、先ほど設定した[your-url]を追加し、保存をクリックします。
以上で、URL欄の追加は完了です。
テストメールを送信してみて、問題ないか確認しましょう。
その他のフォームのテンプレートも、基本的には同じ操作で追加が可能です。
「数値」「日付」「テキストエリア」「ドロップダウンメニュー」「チェックボックス」「ラジオボタン」「承諾確認」「クイズ」「ファイル」の項目を追加した時の表示は下記のようになります。
目的にあった入力欄を設定してみてください。
自動返信メールを設定する方法
自動返信メールとは、お問い合わせをしたユーザーに対して自動で送られる返信メールです。
「お問い合わせを受け付けました」や「注文を受け付けました」といったメールを自動で返信することができます。
設定は、コンタクトフォーム編集画面の「メール」タブをクリックし、画面下部の「メール(2)を使用」から行っていきます。
チェックボックスにチェックを入れると、設定画面が表示されます。
それぞれの項目を任意のものに設定しましょう。
各項目の詳細は以下の通りです。
STEP.1 送信先
自動返信メールの送信先メールアドレスを指定します。
[your-email]でユーザーが入力したメールアドレスが挿入されますので、このままの設定にしておきましょう。
STEP.２ 送信元
問い合わせの送信元メールアドレスを指定します。
[_site_title]はWordPressに設定しているサイトタイトルが挿入されます。デフォルトの設定のままですと、下記のような送信元メールの表示になります。
例：◯◯ブログ <wordpress@xxx.com>
サイト名が不要の場合は[_site_title]を削除しても問題ありません。
また、上記例のメールアドレス「@xxx.com」部分のドメイン名は、WordPressに設定しているドメイン名である必要があります。
別のドメインを送信元のメールアドレスとして利用すると、偽装アドレスと認識される可能性があるためです。
利用しているレンタルサーバーで送信元用のメールアドレスを作成し、設定しましょう。
STEP.３ 題名
メール件名です。デフォルトですと「サイトタイトル＋問い合わせメールに記載された題名」が挿入される設定になっています。
ユーザーにわかりやすい件名にするために「お問い合わせを受け付けました」などの一文を追加するといいでしょう。
例：お問い合わせを受け付けました [_site_title] "[your-subject]"
STEP.４ 追加ヘッダー
自動返信メールに対して返信する際、自動的に指定したメールアドレスをTOに設定する設定になります。
デフォルトですとReply-TO:[_site_admin_email]となっており、WordPressのインストール時に設定したメールアドレスが指定されていますので、別のメールアドレスに返信が欲しい場合は[_site_admin_email]の部分を変更しておきましょう。
STEP.５ メール本文
デフォルトのままですと、問い合わせをしたユーザーが何のメールなのか少し戸惑ってしまう可能性があります。
メール件名と同じく、「お問い合わせを受け付けました」といった内容を追加するといいでしょう。
例：
下記内容でお問い合わせを受け付けました。
返信まで今しばらくお待ちください。
--
お名前：[your-name]
メール：[your-email]
タイトル：[your-subject]
メッセージ本文:
[your-message]
--
設定後「保存」をクリックしたら完了です。
Contact Form 7と他機能を組み合わせてカスタマイズする方法
Contact Form 7では、プラグインやGoogleのサービスを利用することで更に機能を拡張することも可能です。
今回は特におすすめな2つの拡張機能をご紹介したいと思います。
プラグイン「Confirm Plus Contact Form 7」で確認画面を作成
「Confirm Plus Contact Form 7」は、ユーザーが問い合わせメールを送る際、送信前に内容を確認、修正する機能を追加してくれるプラグインです。
難しい手順は一切なく、プラグインをインストールし、有効化するだけでフォームに「確認」と「修正」ボタンを追加することが可能です。
下記は、プラグインをインストールし、有効化したあと問い合わせフォームを開いた直後の画面です。
通常であれば「送信」ボタンが設置されていますが、「確認」ボタンに変わっています。
フォームを入力し、確認ボタンを押すと「修正」「この内容で送信」ボタンが出現します。
「修正」ボタンを押すと前の画面に戻り内容の修正が可能です。
「この内容で送信」ボタンを押すと、メールの送信が完了となります。
Googleの「Google reCAPTCHA」でスパムを防止
WordPressの問い合わせフォームはスパム攻撃の対象となることが多く、対策をしておかないと突然大量のスパムメールが届く事があります。
スパムメールの送信を防ぐ方法として、Googleが提供している「reCAPTCHA」という機能がありますのでぜひ導入しておきましょう。
インターネットを利用している際、「私はロボットではありません」や「◯◯のタイルを選択してください」といったチェックを見たことがあると思いますが、これは「reCAPTCHA」の機能の一つです。
利用するためにまずは、Google reCAPTCHAのサイトにアクセスしましょう。
上部メニューの「v3 Admin Console」をクリックします。
Googleアカウントへのログインが必要となりますので、画面に従ってログインしましょう。
すでにログイン済みの場合は、登録画面に移ります。
STEP.1 ラベル
管理用の名称になりますので、ドメイン名を指定するなどわかりやすい名前を設定しましょう。
STEP.２ reCAPTCHAタイプ
送信する際に画像選択画面を表示するかどうかで異なります。
v2は「私はロボットではありません」と「◯◯の画像をすべて選択してください」の2つをユーザーに選択させて認証を通す方法です。
v3は、アクセス情報やブラウザの動きなどからスパムかどうかを自動で判断してくれるため、v2のようにユーザーが何かを操作する画面は表示されません。
どちらを選んでも構いませんが、ユーザーの手を煩わせない事を考えるとv3がおすすめです。
STEP.３ ドメイン
設置するサイトのドメイン（〇〇.comなど）を入力します。
利用規約に同意するのチェックをつけて「送信」ボタンを押しましょう。
サイトキーとシークレットキーが表示されますので、両方コピーして控えておいてください。
WordPressに戻り、左メニューの「お問い合わせ」から「インテグレーション」を選択します。
すると、外部APIとのインテグレーション画面が開きますので、ページ下部の「reCAPTCHA」欄の「インテグレーションのセットアップ」をクリックしましょう。
サイトキーとシークレットキーを入力するフォームが出てきますので、先ほど控えておいたキーをそれぞれ入力して「変更を保存」を押してください。
以上で設定は完了です。
問い合わせフォームにて、下記マークが設置されていたら問題ありません。
問い合わせフォームの設置はさまざまな機会につながる
サイトを運営するうえで、問い合わせフォームの設置は欠かせません。
その理由として、フォームを設置することでユーザーからの質問などにも対応でき、サイトのファンを獲得することにも繋がります。
また、相互リンクのお願いや、もしくは企業からの商品紹介依頼など、現実的な利益をもたらすことも考えられます。
Contact Form 7は特に初心者におすすめな、簡単に問い合わせフォームが作成できるプラグインです。
また、カスタマイズ性も高いことに加え、日本語でわかりやすいマニュアルやQ&Aなどのサポートも充実しているので、問い合わせフォームの設置で悩んだ際にはぜひ使用してみてください。
最近のコメント
コメントなし