WordPressで reCAPTCHAの設定も出来るWPFormsという便利なプラグインがとても使い勝手が良い件

WordPressで使うお問い合わせフォームのプラグインといえば、「Contact Form 7」がお馴染みです。

とても便利なプラグインですが、初めて使った時は手間取ったのを憶えています。しかし、最近になって「Contact Form 7」よりも設定が簡単な「WPForms」というプラグインがあると聞いて、実際に使ってみました。

WPFormsのインストール

左メニュー プラグイン > 新規追加 をクリックします。

プラグインの検索に「WPForms」と入力し、「今すぐインストール」をクリック、「有効化」をクリックします。

WPFormsでフォームを作成

左メニュー WPForms > 新規追加 をクリックします。

フィールドを追加

「フォームに名前を付ける」のテキストボックスに任意の名前を入れます。
「テンプレートを選択」で好きなテンプレートを選びます。
今回は「空白のフォームを作成する」を選択しました。

「フィールドを追加」から使いたいフィールドをクリック、または右の画面へドラッグ&ドロップします。

フィールドを編集

追加されたフィールドをクリックすると、フィールド設定ができます。
ラベルの変更や、説明の追加、必須の選択を行います。

編集が終わったら、「フィールドを追加」をクリックし、次々に必要な項目を追加します。
先ほどと同じ手順でラベルの変更等を繰り返します。
順番を入れ替えたい時はドラッグ&ドロップで簡単に入れ替えることができます。
入力が終わったら、右上の「保存」ボタンをクリックしましょう。

通知の編集

フォームから情報が送信された時、デフォルトではWordPressで設定しているアドレス宛に通知メールが届きます。

お客様にも、自動返信メールが届くように設定を変更します。
左メニュー「設定」>「通知」をクリックします。

「送信先メールアドレス」の変更

「送信先メールアドレス」には、{admin_email}が入力されています。
右上の「スマートタグを表示」をクリックします。

「メールアドレス」をクリックします。

すると、{admin_email}の横に{field_id=”*”}が表示されます。(*の数字は設定によって異なります)
{admin_email}と{field_id=”*”}の間に半角のカンマ「,」を追加します。

設定をミスすると、どちらのアドレスにもメールが送信されなくなるので注意してください。

メール件名やメールメッセージの変更

仕様上、お客様と自分宛に届く通知メールが同じ内容になるため、お客様に向けたメール内容になるよう編集します。

メール件名やメールメッセージを変更すると良いでしょう。メールメッセージ内の{all_fields}は、お客様の入力してくださった内容をメール内に表示させるタグなので、消さないように注意してください。

入力が終わったら、右上の「保存」ボタンをクリックします。

reCAPTCHAの設定

スパム対策のため、reCAPTCHAを設定していきます。
右上の「×」ボタンをクリックし、フォームの概要ページに戻ったら、左メニューから「設定」をクリックします。

「CAPTCHA」をクリックし、「reCAPTCHA」をクリックします。

下にスクロールすると、サイトキーなどの入力画面が表示されるため、そこに必要な情報を入力し「設定を保存」ボタンをクリックします。

reCAPTCHAのキーが不明な場合、以下の手順で取得してください。

reCAPTCHAのキー取得

Googleにログインした状態でhttps://www.google.com/recaptcha/about/にアクセスし、「v3 Admin Console」をクリックします。

新しいサイトを登録する画面が表示されるので、情報を入力します。


ラベル…サイトのドメインを入力
reCAPTCHA タイプ…reCAPTCHA v3を選択
ドメイン…サイトのドメインを入力
reCAPTCHA 利用条件に同意する…チェックを入れる
「送信」ボタンをクリックする。

登録が完了し、サイトキーとシークレットキーが表示されます。

フォームへreCAPTCHAを設定

フォームの編集画面に入り、「reCAPTCHA」をクリックし保存します。

フォームを設置

いよいよ、ページにフォームを設置していきます。
左メニューから「すべてのフォーム」をクリックし、先ほど作成したフォームの「編集」をクリックします。

右上の「埋め込む」をクリックします。

「新規ページを作成」をクリックします。

任意の名前をつけ、右のボタンをクリックします。

新規固定ページ作成の画面が表示されるので、「公開」ボタンをクリックします。
必要に応じて、パーマリンクやアイキャッチ画像など変更してください。

このようなフォームを作ることができました。
必要に応じてCSSで見た目の調整を行ってください。

動作確認をして、問題なければ完成です!

まとめ

この記事を書くにあたって初めて「WPForms」を使いましたが、初めて使うプラグインなのに全くストレスを感じることなく使うことができました。

「Contact Form 7」と比べて、機能も遜色なく直感的にフォームを作ることができるので、初心者の方には「WPForms」の方がおすすめできると感じました。普段から「Contact Form 7」を使いこなしている方からすると、一部のフィールド(電話・日付/時間・サイト/URL等)と、メール通知の分岐が有料なのが不満に感じる点かもしれません。

どちらも優れたプラグインなので、柔軟に使い分けていきたいと思います。

「設定でつまづいた」「作業する時間が無い」という方、エクセレントでの代行も可能です。お気軽にご相談ください。

メールでのお問い合わせ

お問い合わせはこちら

メールフォームの内容をご確認頂きまして送信してください。

LINEでのお問い合わせ

お友達登録はこちら

お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。

弓取 恭代

弓取 恭代

デザイン制作を中心に、サイト運営に関わる作業全般を担当しています。画像の編集・加工~動画制作まで、なんでも行います。

関連記事

無料相談行っています!!お気軽にご利用ください。
最近の記事 おすすめ記事
  1. Instagram(インスタグラム)の魅力的なプロフィールの書き方を解説します

  2. Instagram(インスタグラム)まとめ記事 プロフィールについて

  3. Instagram(インスタグラム)とは?いまさら聞けないInstagramの基礎知識

  4. あなたのビジネスをインスタ集客×ブログ接客で売上を3倍にする方法

  5. インスタグラム(Instagram) まとめ記事 業種別 インスタグラム運用の参考になるアカウントを紹介します

  6. Instagramのショッピング機能(Shop Now)の審査が通らない原因や再審査方法を紹介します。

  7. Instagram(インスタグラム)インスタショップ-Shop Now-の設定方法 【2022年最新版】

  8. インスタグラム(Instagram) まとめ記事 ストーリーズ投稿動画とは? ストーリーズ投稿についての基礎知識を解説します

  9. インスタグラム(Instagram) まとめ記事 リール動画とは? リール動画についての基礎知識を解説します

  10. インスタグラムマーケティングとは?Instagram運用に向いている企業と向いていない企業

  1. Instagram(インスタ)のリールの音源を保存して活用する方法

  2. Instagramのリール動画やTicktockやYoutubeのショート動画にたくさんの会社が力を入れている理由

  3. Instagram(インスタグラム)で集客を始める時に知っておくべき集客のコツ12選

  4. 初心者が知っておくべき基本的なSEO対策とは?上位表示に必要なやり方・方法について解説します。

  5. 検索意図とは?SEO対策で重要な調べ方と考え方を解説します。

  6. ホームページが検索結果に表示されない時の原因と対処方法を徹底解説!

  7. 【2022年版】Web集客の種類とその方法を集客にお困りのあなたに分かりやすく解説します

  8. SEO対策の内製化を積極的に取組んでいる中小企業の多くは自社でするSEO対策に迷走している。

  9. 売れているホームぺージ = 集客型ホームぺージに共通しているぺージ構成の法則

  10. これを見れば完璧!Google Maps API 取得方法をご紹介します。

資料を無料ダウンロード

弊社の会社概要と、ご提供サービスのご紹介資料です。
ご覧いただき、お気軽にお問い合わせください。

TOP