SWELL:WPFormsとreCAPTCHAでメール設定する手順【44枚画像】

recaptcha-wpform

こんなお悩みありませんか?

  • SWELL(スウェル)でWPForms(WPフォームズ)を使いたい
  • WPFormsでフォームを作る手順を確認したい…
  • 迷惑メールが多くて困っている…

Webサイトにフォームが設置されていないと、アフィリエイト審査に通らないことがあります。また、フォームがないサイトは、ユーザーと窓口を遮断するのでSEO的にもよくないです。

そこでおすすめなのが、WPFormsです。マウス操作でフォームが設置できるので、パソコンが苦手な人でも設置できます。

キャベツ太郎

SWELLは、WPFormsのプラグイン導入を推奨しております。セキュリティーにも優れているのでおすすめです。

SWELL推奨プラグインを見る

そこでこの記事は、SWELLでプラグイン「WPForms」を導入する手順を解説します。

44枚の画像を使い丁寧に解説します。

この記事を読めば、最短でアフィリエイト審査に合格できるでしょう。

この記事を書いている人
この記事を書いている人
登場人物
この記事でわかること(もくじ)

WPFormsとreCAPTCHAをダウンロード【SWELLメール設定】

reCAPTCHAv2

前提、WPForms(だぶりゅーぴーふぉーむず)を設定するためには、reCAPTCHA(リキャプチャ)が必要となります。

WPFormsは、ワードプレスプラグインです。

reCAPTCHAは、Googleが無料で提供しているセキュリティーツールです。「Googleドライブ」のように無料で使えます。

WPFormsとreCAPTCHAを連動させることでセキュリティーの高いフォームが実現できます。

(難しい作業ではないし、完全無料なのでご安心を)

詳細を解説します。

WPForms(だぶりゅーぴーふぉーむず)とは?

プラグインダウンロード
プラグイン

WPFormsとは、問い合わせフォームが作れるプラグインです。

プラグインをインストールして、管理画面からドラックするだけ。初心者でも簡単に問い合わせフォームが作成できます。

キャベツ太郎

私は今まで、コンタクトフォーム7を使っておりました。迷惑メールが多いので、WPFormsに変更しました。

wpforms新規追加
wpforms新規追加

事前準備は、WPFormsをワードプレスに追加すること。

ワードプレス、プラグインから「新規追加」をクリックします(上画像赤枠)

wpforms

検索画面で「WPForms」を入力して検索します。

ダウンロードできたら有効化します。

reCAPTCHA(リキャプチャ)とは【Googleの無料ツール】

reCAPTCHA歴史
reCAPTCHA歴史

reCAPTCHA(リキャプチャ)とは、Googleが無料て提供しているセキュリティーツールです。

わたしはロボットではありません」に、チェックマークをつける機能です。

2022年時点の最新バージョンは「reCAPTCHA v3」です

「reCAPTCHA v2」は、いちいち画像認証が入り、面倒くさいと感じた方も多いのではないでしょうか。

キャベツ太郎

v3では、ロボット側が自動で識別するので、認証が不要になりました。

v3は、めんどうな認証が不要になるので、ユーザーのページ離脱を抑制する効果があります。

44枚画像で解説【WPFormsとreCAPTCHAでメール設定する手順】

WPFormsを導入

WPFormsを導入

では、実際にWPFormsを導入していきましょう。

Googleアカウントのログインした状態で、reCAPTCHAのトップページへ。

reCAPTCHA(リキャプチャ)

ReCAPTCHAトップページ
ReCAPTCHAトップページ

reCAPTCHAトップに移動しました。

画像赤枠①の「v3管理コンソール」をクリック。

 ReCAPTCHA「作成」
ReCAPTCHA「作成」

画像赤枠「+作成」をクリック。

自分のサイトを登録する
自分のサイトを登録する

Amazonのアカウント作成のようなもので、サイトを管理するマイページを作成します。

  1. ラベルにサイトURLをペースト
  2. reCAPTCHA v3を選択(最新版)
  3. ドメイン入力
  4. オーナー(自分で管理できるメールアドレスを入力)
新しいプロジェクト作成
新しいプロジェクト作成

新しいプロジェクト作成します。

プロジェクトとは「作業BOX」のようなものです。

オーナー設定
オーナー設定

オーナー設定で、利用規約に同意します。

  1. reCAPTCHAの利用規約に同意します
  2. アラートをオーナーに送信する
  3. 送信
キーを発行
キーを発行

2つのキーを発行します。

ダウンロードしたプラグイン「WPForms」とreCAPTCHAを、連動させるためのキーです。

  1. 登録したURLを確認
  2. サイトキーをコピー
  3. シークレットキーをコピー
  4. 設定に移動
AMP設定
AMP設定

reCAPTCHAはAMP(アンプ)ページにも対応してます。

利用する場合、チェックいれて保存しましょう。

WPFormsとreCAPTCHAを連動させる

フォーム新規追加

WPFormsとreCAPTCHAを連動させて、フォームを作成します。

  1. WPForms
  2. 新規追加フォーム
空白のフォームを作成する
空白のフォームを作成する

フォームを作成する方法は、2通りあります。

  1. 空からフォーム作る
  2. テンプレートを利用する

おすすめは、空からフォームを作る方法です。

なぜなら、自由度が高いフォームが作成できるからです。

テンプレートを利用すると、おしゃれなフォームが手軽に作成できます。そのかわり、自由度は小さいです。

ここでは「空白のフォームを作成する」手順を記載します。

  1. セットアップ
  2. フォームの名前を付ける(任意)
  3. 空白のフォームを作成する
reCAPTCHA設定
reCAPTCHA設定

まず、reCAPTCHAをwpformsに反映します。

ReCAPTCHA反映
ReCAPTCHA反映

①ReCAPTCHAをクリックします。

キーを追加
キーを追加

reCAPTCHAでコピーしたキーを、WPFormsに連携します。

  1. reCAPTCHA v3
  2. サイトキーをペースト
  3. シークレットキーをペースト
  4. 設定を保存
reCAPTCHA設定完了
reCAPTCHA設定完了

10秒ほど待つと、表示が切り替わります。「設定が正常に保存されました」が表示されたら、紐付け完了です。

標準フィールド作成
標準フィールド作成

WPFormsに戻り、必要項目をドラックします。

名前、メール、問い合わせ内容ドラック

最低限必要な項目は、以下3つす。

  1. 名前
  2. メール
  3. お問い合わせ内容

③は、左赤枠「一行テキスト」に入力した文字が反映されます。

任意の名前をつけましょう。

reCAPTCHA反映確認
reCAPTCHA反映確認

画像①の「reCAPTCHA」をフォーム項目へドラックすれば、reCAPTCHAが反映されます。

  1. reCAPTCHA をクリック
  2. 右上に reCAPTCHA マークが表示されているか
  3. 保存
  4. プレビュー

保存して、プレビュー画面を表示します。

プレビュー
プレビュー

反映したフォームが、表示されてますね。

送信テスト
送信テスト

WPFormsが、きちんと動くか、自分のメールアドレスを入れて、テストしてみましょう。

送信失敗
送信失敗

プレビューだからか、確認失敗してしまいました。てことで、本番環境で試してみます。

ワードプレスの固定ページに、WPFormsを設置して、再テストします。

新規追加、既存追加
新規追加、既存追加

ワードプレスの固定ページに、WPFormsを反映させる方法は、2つあります。

  1. 固定ページに新規追加する方法
  2. 既存固定ページに埋め込む方

新規ページへ作りたい場合、「新規ページを作成」ボタンをクリックします。

固定ページへ新規追加
固定ページへ新規追加

「新規ページを作成」ボタンをクリックするだけで、固定ページに反映されてました。

キャベツ太郎

初めてフォームを作る場合、この方法がもっともラクです。

わたしは、過去に「Contact Form 7」でフォームを作ってあったので、「既存のページを選択」で進めます。

既存追加(ページに埋め込む)
既存追加(ページに埋め込む)

「既存のページを選択」 すると、埋め込みたい固定ページが、プルダウンメニューで選択できます。

既存ページ埋め込み方法
既存ページ埋め込み方法

固定ページを選択すると、固定ページに遷移(せんい)します。

  1. 固定ページに左上「+」をクリック
  2. 検索ボックス「WPForms」で検索

 ブロックエディタで、WPFormsを呼び出します。

フォームを選択
フォームを選択

WPFormsで作成したフォームを選択※先の例ではコンタクトフォーム(お問い合わせ)

固定ページを保存してプレビュー。

固定ページに、フォームが反映されているか確認します。

プレビュー
プレビュー
  1. 既存の固定ページに反映されてていること、確認できました
  2. 「reCAPTCHA v3」も表示されてます
  3. ふたたび、メールアドレスが送信できるかチェックします
送信成功

固定ページにWPFormsを反映させたところ、送信成功しました!

ちゃんとメールが届いているか念の為確認します。

メールが届く
メールが届く

固定ページからテストしたメール、無事届いておりました。

これで設定終了です。

お疲れ様でした。

まとめ【SWELL:WPFormsとreCAPTCHAでメール設定する手順】

まとめ
まとめ

まとめです。

今回は、WPFormsでメール設定する手順をお伝えしました。

SWELLは、SWELL公式でも、WPFormsでメール設定することを推奨しております。

ココがポイント

WPFormsは、reCAPTCHAと連携することで、簡単に設定できます。

また、Googleが無料提供している「reCAPTCHA」を使うので、迷惑メールが届きません。

サイト乗取りや、スパム対策にも有効です。「サイト復旧作業」という、無駄な時間を過ごしたくない人におすすめです。

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

コメント

コメントする

CAPTCHA


この記事でわかること(もくじ)