MENU
テリオス
古代ギリシャ語で〈願いを叶える〉を意味する TERIOS をハンドルネームに冠し、マネタイズに関する有益な情報を発信するサイト『TERIOSNET−MONETIZE』を2024年1月から運営しています。
マネタイズについて、管理人テリオスが実践・経験して培ったノウハウを、初心者の方でも分かりやすいように、講義形式で情報発信しています。
当サイトは【 SWELL 】で作成しています 導入はこちら

『SWELL』環境下での推奨プラグイン~Contact Form by WPForms

本記事では、ブログ・サイトの信頼性を高めるために必要なお問い合わせを簡単に作成できるプラグインContact Form by WPForms設定方法と使い方を画像を用いてわかりやすく解説します。

テリオス

テリオス(@TERIOS_INFO)が解説させていただきますね。

記事を読んで分かること =【 結論 】
  • Contact Form by WPForms(WPForms Lite)の設定方法と使い方がわかる
目次

Contact Form by WPForms とは?

Contact Form by WPForms

Contact Form by WPForms は、お問い合わせフォーム(コンタクトフォーム)や申し込みフォームを作成できるWordPressプラグインです。

このうち無料版があって、WPForms Lite という名前で公開されています。

「WPForms Lite」でできること
  • 雛形(テンプレート)を使用することで簡単に作成できる
  • 自動返信メールを設定できる
  • サンクスページ(送信完了ページ)を設定できる
  • reCAPTCHAでスパムメール(迷惑メール)対策ができる

WPForms Lite の導入

インストール・有効化

テリオス

プラグインのインストール方法は、下の記事で解説しているので、参考にしてくださいね。

お問い合わせページを作成

WordPress管理画面のサイドバーで、WPForms新規追加とクリックします。

WPForms

行きましょう!をクリックします。

赤点線枠内にある「簡単なお問い合わせフォーム」のテンプレートを使用をクリックします。

WPFormsのテンプレート選択画面
テリオス

何回か『完了』ボタンのついたポップアップが表示されることがありますが、そのまま押してかまいません。

下の画面が表示されるので、新規ページ作成をクリックします。

WPFormsの簡単なお問い合わせフォーム作成画面

ページタイトルにお問い合わせと入力し、行きましょう!をクリックします。

WPFormsの簡単なお問い合わせフォーム作成画面

をクリックします。

右側の設定メニューの①URLをクリックし、②「パーマリンク」にcontactと入力して、③公開をクリックします。

WPFormsの簡単なお問い合わせフォーム作成画面

これで、お問い合わせページはもう公開されています。以上で、お問い合わせフォーム(コンタクトフォーム)の作成は完了です。

Googleリキャプチャの設定

お問い合わせフォームを公開しただけの状態では、スパムメール(迷惑メール)対策ができていません。

そのため、Googleの reCAPTCHA(リキャプチャ)を利用したスパム対策(ロボット対策)を解説します。

Googleリキャプチャとは

Googleリキャプチャは、ユーザー挙動や画像認証によって、ロボット判定して送信拒否されるサービスです。

Checkbox reCAPTCHA v2 の場合、チェックボックスをクリックすることで、ロボットかどうか判定されます。

Checkbox reCAPTCHA v2

画像認証が利用できる場合は、タイル(画像)を選択することで、ロボットか判定されます。

reCAPTCHAの画像認証

Invisible reCAPTCHA v2 や reCAPTCHA v3 の場合、以下のようなバッジが表示されるだけで、自動的にロボットか判定されます。

reCAPTCHA で保護されています

Googleリキャプチャに登録

Googleリキャプチャの公式サイトにアクセスします。

以下の画面が表示されたら、v3 管理コンソールをクリックします。

Google reCAPTCHA
テリオス

Googleログイン画面が表示された場合は、Googleアカウントでログインしてください。

ラベル(ドメイン名)、reCAPTCHA タイプ(v2 非表示)、ドメイン、同意チェックを設定して送信をクリックします。

Google reCAPTCHA 設定画面

「WPForms」では「reCAPTCHA v2 非表示(Invisible reCAPTCHA v2)」を選択するようにしてください。「Checkbox reCAPTCHA v2」は、手動の画像認証でロボットか判定して送信
「Invisible reCAPTCHA v2」は、自動でロボットか判定して、手動の画像認証も可能
「reCAPTCHA v3」は、自動でロボットか判定して、手動の画像認証は不可
「v3」の場合、ロボットと誤判定されてしまうと、本当に問い合わせしたい人も送信不可(足切り)になってしまいます。

サイトキーをコピーとシークレットキーをコピーするか、画面を開いたままにしておきます。

Google reCAPTCHA キーの取得画面

WPForms にリキャプチャを設定

WordPress管理画面のサイドバーで、WPForms設定とクリックし、CAPTCHAタブをクリックします。

WPFormsの設定画面

reCAPTCHAをクリックし、タイプでInvisible reCAPTCHA v2を選択し、コピーしておいたサイトキー、シークレットキーを入力して設定を保存をクリックします。

WPFormsのCAPTCHA設定画面

お問い合わせにリキャプチャを設置

WordPress管理画面のサイドバーで、WPFormsすべてのフォームとクリックし、先ほど作成したお問い合わせフォームをクリックします。

WPForms

reCAPTCHAをクリックします。

WPFormsのお問い合わせフォーム作成画面

下のように表示されるので、OKをクリックします。

WPForms

右上にreCAPTCHAバッジが表示されるのを確認し、保存をクリックします。

WPFormsのお問い合わせフォーム作成画面

以上で、Google reCAPTCHA の導入は完了です。

お問い合わせの動作確認

お問い合わせページにアクセスして、画面右下に reCAPTCHAバッジ が表示されているか確認します。

https://ドメイン名/contact でアクセス

reCAPTCHAバッジの表示

テストをしてみましょう。

お問い合わせのテスト

テスト送信すると、以下のような画面に切り替わります(画面が自動スクロールします)。

お問い合わせでの送信結果

テスト送信すると、以下のような受信メールが届きます。(なりすましメールと判定されるのは正常です。)

お問い合わせ受信メール
テリオス

メールが届かない場合は、「迷惑メール」フォルダに自動的に振り分けられている可能性があります。

以上で、お問い合わせフォーム(コンタクトフォーム)の動作確認(動作検証)は完了です。

お問い合わせのカスタマイズ

WordPress管理画面のサイドバーで、WPFormsすべてのフォームとクリックし、先ほど作成したお問い合わせフォームをクリックします。

WPForms

フィールド画面が開くので、①フィールド設定タブをクリックし、②「名前」フィールドをクリックして選択し、③フォーマットを[名、姓]から[シンプル]に変更します。

「メール」フィールドをクリックして選択し、ラベルをメールアドレスに変更します。

WPFormsフォーム変更画面

「コメントまたはメッセージ」フィールドをクリックして選択し、ラベルをメッセージに変更します。

WPFormsフォーム変更画面

①左アイコンの設定をクリックし、②一般設定画面を開きます。③「フォーム名」をお問い合わせフォームに変更します。

①通知設定画面をクリックし、②「送信先メールアドレス」③「メール件名」④「メールメッセージ」を変更します。

WPFormsフォーム変更画面

「{field_id=”1″}」は、お問い合わせフォームに入力されたメールアドレスです。「メールアドレスへ送る」設定に「{field_id=”1″}」を追加することで、送信者に自動返信メールを送ることができます。ちなみに、「{admin_email}」はWordPress(ワードプレス)の管理者メールアドレスです。

①確認設定画面をクリックし、②「確認メッセージ」を変更します。③最後に保存をクリックします。

「確認」設定画面は、送信完了ページの設定項目です。

「確認タイプ」を[メッセージ]にすると、送信完了画面に設定したメッセージを表示することができます。「確認タイプ」を[ページを表示]にすると、自分で作成した固定ページに飛ばすことができます。「確認タイプ」を[URLに移動(リダイレクト)]にすると、外部ページにジャンプさせることができます。

以上で、お問い合わせフォーム(コンタクトフォーム)の設定変更は完了です。

再度テスト送信で動作確認をしてみてください。

その他の設定

「WPForms」をインストール・有効化すると、WordPress管理画面の上部にWPFormsの「管理バーメニュー」が追加されます。当サイトでは特に不要と考え、非表示にしています。

WordPress管理画面のサイドバーで、WPForms設定とクリックし、その他タブをクリックします。

「管理バーメニューを非表示」と「メールの概要を無効化」をチェックONにして設定を保存をクリックします。

その他

以上で、その他の設定変更は完了です。

なりすましメール対策

総括

結論 & まとめ

ブログ・サイトにお問い合わせを配置することで、記事を読んだ読者からのコンタクトが期待できます。
もしかすると、企業からあなたに記事掲載の依頼が直接するかもしれません。
いろいろな可能性が広がるかもしれないお問い合わせを、ぜひ配置してみてください。

テリオス

本記事が、あなたのお役に立てたのなら幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

57歳Web職人#SWELLマニア

目次