WordPressでお問い合わせフォームを作る方法【迷惑メール対策必須】

この記事ではこういった疑問に答えます。

広告主やASPが自分のブログに興味を持ち、連絡しようと連絡手段を探したのに、お問い合わせフォームがなければせっかくの機会を失ってしまいます。

そのため、ブログ運営において、お問い合わせフォームを作っておくことは、収益をあげる上でも重要な戦略です。

そこでこの記事では、WordPressでお問い合わせのメールフォームを作る２つの方法と、迷惑メール対策について解説します。

WordPressでお問い合わせフォームを作る２つの方法

WordPressでお問い合わせフォームを作るには、２つの方法があります。

どちらか悩んだら、プラグインを利用する方法をおすすめします。

それでは、それぞれの方法を解説します。

その１：プラグインを利用する方法

お問い合わせフォームの定番プラグインは２つあります。

どちらのプラグインを使っても、機能や見栄えは似通っているので大差ありません。（両方とも日本語に対応しています。）

ただし、ContactForm7の方が利用者が多く、ネット上にも多くの情報があるので、どちらか悩んだらContactForm7を選んでおけば間違いないです。

「ContactForm7」使い方の手順

ContactForm7の使い方は次の通りです。

STEP.1

「ContactForm7」をインストールして有効化します。

STEP.2

有効化すると管理画面内に「お問い合わせ」という項目が追加されるので、「コンタクトフォーム」をクリックします。

STEP.3

問い合わせフォームのベースが既にデフォルトで作成されているので、「コンタクトフォーム１」をクリックします。

STEP.4

フォーム設定

お問い合わせに必要な内容はこんな感じで既に入力されています。（項目を追加したい場合は、上のタグから追加します。）
アンケートや資料請求などの用途でなければ、デフォルトのままでOKです。

STEP.5

メール設定

自分宛に送信されるメール内容のテンプレートです。
もし、変更するとしたら「送信先」ぐらいです。ここに自分が受信したいメールアドレスを入力します。

STEP.6

メッセージ設定

問い合わせメールが送信された後に、利用者に表示されるメッセージを変更することができます。
特に変更する必要はありません。

STEP.7

その他の設定

フォームをカスタマイズする際に利用します。
例えば、資料請求や講座申込み用途の場合、問い合わせの後にページを遷移させるコードを追記することで、成果測定を行うことができます。
上記以外の用途であれば、特にコードを追記する必要はありません。

STEP.8

設定が完了したら、ページ上部にあるショートコードをコピーします。

STEP.9

固定ページに先ほどコピーしたショートコードを貼り付けます。
ショートコードの上部に注意事項や直接連絡ができるようTwitterのアカウントを入力してもいいと思います。

STEP.10

記事を公開するとこんな感じの表示になります。

STEP.11

設置場所としては、フッターが無難です。

その２：Googleフォームで作る方法

Googleフォームはアンケートを行うことが主な用途ですが、お問い合わせフォーム代わりに利用することもできます。

プラグインを利用せず簡単に設置することができるので、利用しているブロガーを最近ちょこちょこ見かけるようになりました。

「Googleフォーム」使い方の手順

Googleフォームの使い方は次の通りです。

STEP.1

Googleフォームの公式サイトへアクセスして、パーソナル「Googleフォームを使ってみる」をクリックします。
G Suiteは有料サービスなので利用する必要はありません。

STEP.2

新しいフォームを作るため、プラスマークをクリックします。

STEP.3

この設定画面でフォームの内容を決めていきます。

STEP.4

使い方としては、「無題の質問」に名前やメールアドレスなどの文言を。
「セレクトボックス」からどういった形式にするのかを選択します。

STEP.5

項目を追加する際は、横にあるプラスボタンをクリックします。

STEP.6

よくあるお問い合わせ内容のフォーマットにするなら、無難にこんな感じです。

STEP.7

なお、テーマオプションから画像を挿入したり、色を変更したりすることもできます。

STEP.8

設定が完了したら、上部にある「送信」をクリックします。

STEP.9

HTMLコードをコピーします。

STEP.10

固定ページに先ほどコピーしたHTMLコードをペーストします。

STEP.11

記事を公開するとこんな感じの表示になります。

STEP.12

ユーザーからの問い合わせ内容は、フォーム作成画面の別タブである「回答」から確認できます。

STEP.13

補足ですが、問い合わせ内容をこんな感じで、スプレッドシートにエクスポートすることもできます。

問い合わせ内容がメールで届くわけではないので、普段からGoogleドキュメントやスプレッドシートを使う習慣がないとスルーしがちだと思います。

また、フォームの下部に読者の不安を煽りそうな以下の文言があるので、資料請求や講座申込みとして使うには適していない気がします。

この文言はGoogleフォームの仕様なので消せないのです。

迷惑メール対策「reCAPTCHA v3」の設定方法と使い方

お問い合わせフォームを設置したからには、迷惑メール対策は必須です。

インターネット空間には、お問い合わせフォームに自動でメールを送りつけるシステム（bot）が山ほどあるので、対策をしておかないと迷惑メールが山ほど来ます。

迷惑メール対策を怠るとこんな感じで、海外からスパムメールが頻繁にきます。

そして、WordPressで迷惑メール対策を行うには、Googleが提供する「reCAPTCHA（リキャプチャ）」を利用することが一般的です。

こんな感じのシステムです。金融機関やECサイトで決済をする時などに利用した経験があると思います。

「reCAPTCHA」設定の手順

reCAPTCHAの設定手順は次の通りです。

STEP.1

Google reCAPTCHAの公式サイトへアクセスして、「Admin Console」をクリックします。

STEP.2

ラベル

reCAPTCHAを設定するブログが自分で識別できれば、ラベル名はなんでもOKです。

STEP.3

タイプ

reCAPTCHAのv3を選んでください。（Contact Form7ではv2に対応していません。）

STEP.4

ドメイン

ドメイン名を入力します。

STEP.5

利用条件に同意

チェックマークを入れます。

STEP.6

アラート

アラートに関しては、どちらでもOKです。私はチェックマークを外しています。

STEP.7

入力が完了したら「送信」をクリックします。

STEP.8

入力内容が登録されるので、「設定に移動」をクリックします。
サイトキーとシークレットキーは後ほど使います。

STEP.9

もしブログをAMP化していたら、AMPページで動作するようにチェックマークを入れます。
AMP化していなければ特に設定内容を変更する必要はありません。

STEP.10

最後に設定内容を保存します。これで事前準備は完了です。

「ContactForm7」に「reCAPTCHA」を導入する方法

つづいて、ContactForm7にreCAPTCHAを導入します。

STEP.1

管理画面のお問い合わせ内にある「インテグレーション」をクリックします。

STEP.2

reCAPTCHAの「インテグレーションのセットアップ」をクリックします。

STEP.3

事前に設定しておいたreCAPTCHAのサイトキーとシークレットキーを入力して、「変更を保存」をクリックします。

STEP.4

設定が保存されるとこんな感じの表示になります。

STEP.5

reCAPTCHAが動作していることを確認します。ページの右下にreCAPTCHAマークがあれば、システムが動作していることになります。

補足：reCAPTCHAマークを非表示にする方法

reCAPTCHAを導入すると、問い合わせページ以外にもreCAPTCHAマークが反映されるので、ユーザービリティが損なわれます。

そのため、私としては問い合わせページ以外はreCAPTCHAマークを消した方がいいと思います。

reCAPTCHAマークを非表示にするコードは以下の通りです。

add_action( 'wp_enqueue_scripts', function() {
    if(is_page('contact')) return;
    wp_deregister_script( 'google-recaptcha' );
});

このコードをfunctions.phpに貼り付ければOKです。

なお、コード内にある「contact」はお問い合わせフォームのURLなので、自分が設定しているURLに合わせて変更してください。

というわけで以上です。