【簡単】WordPressでお問い合わせのメールフォームを作る2つの方法と手順

「WordPressでお問い合わせのメールフォームを作りたい。ついでに、迷惑メール対策も合わせて教えて欲しい。」

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

本記事の内容

  • WordPressでお問い合わせフォームを作る2つの方法
  • 迷惑メール対策「reCAPTCHA v3」の設定方法と使い方

広告主やASPが自分のブログに興味を持ち、連絡しようとする際に連絡手段がないと、せっかくの機会を失ってしまいます。

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

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

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

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

お問い合わせフォームを作る方法

  • その1:プラグインを利用する方法
  • その2:Googleフォームで作る方法

結論として、、、理由は後述しますが、プラグインを利用する方法をおすすめします。

それぞれ解説します。

その1:プラグインを利用する方法

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

  • 定番1:Contact Form 7
  • 定番2:Contact Form by WPForms

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

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

「ContactForm7」使い方の手順

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

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

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

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

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

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

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

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

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

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

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

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

ちなみに、Contact Form by WPFormsの使い方は、海外プラグインによくあるドラッグ&ドロップです。視覚的にフォームを作れるのでわりと簡単です。

その2: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ドキュメントやスプレッドシートを使う習慣がないとスルーしがちだと思います。

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

個人的には、もう少しカスタマイズできればいいなーと思ってます。

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

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

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


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

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

「reCAPTCHA」とは?
問い合わせしているのがロボットか人間か自動で判断し、悪質なアクセスを遮断するセキュリティ対策のシステムです。今はv3が最新のバージョンです。


こんな感じのシステムです。金融機関や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マークを非表示にするコードは以下の通りです。

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

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

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

Googleフォームには既にreCAPTCHAが実装されているので、特に設定を行う必要はないです。

というわけで以上です。