4/5(金) まで最大55%OFF1,000円クーポン(コノハウィング)

SWELLでメール設定【WPFormsの使い方】reCAPTCHA

プロモーションが含まれる場合があります
recaptcha-wpform
  • URLをコピーしました!
質問

SWELL(スウェル)でWPForms(WPフォームズ)を使いたいです。

ブログにフォームが設置されてないと、アフィリエイトができません。

なぜなら審査で引っかかるからです。SEO的にもよくありません。

でも、メールの設定って、なんだか難しそうですよね。

そこでおすすめなのが、WPForms(ダブリューピーフォームズ)を使うこと。マウスで設置できるため、パソコンが苦手な人でもメールが設定できます。

やたろう

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

SWELL推奨プラグインを見る

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

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

この記事を書いている人
プロフィール
筆者のプロフィール画像
やたろう
  • ConoHaWINGユーザー4年目
  • SWELLユーザー3年目
  • SEO検定一級合格
  • 月収6ケタ(プラチナランク)
  • 某ASPの社員
A8プラチナ会員
A8:プラチナ会員

スクロール&拡大できます

SEO検定1級
SEO検定1級
登場人物
登場人物
SWELLロゴ

クリックだけで美しいサイトが作れる

HTMLやCSSなどの知識不要。買い切りなので、一度購入すれば一生モノです。

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

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

reCAPTCHAv2
reCAPTCHAv2

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

WPFormsとreCAPTCHAを連携することで、より安全にフォームが使える

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

どちらも完全無料です。

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

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

詳細を解説します。

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

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

WPFormsとは、問い合わせフォームが作れるプラグイン。インストールして、管理画面からドラックするだけ。

初心者でも簡単に問い合わせフォームが作成できます。

wpforms新規追加
wpforms新規追加

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

検索画面で「WPForms」を検索。
wpforms

検索画面で「WPForms」を検索。

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

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

reCAPTCHA歴史
reCAPTCHA歴史

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

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

Webサイトで一度は見たことあるのではないでしょうか?

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

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

やたろう

v3では、ロボット側が自動で識別してくれます。

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

メール設定手順【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を反映させたところ、送信成功しました!

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

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

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

これで設定終了です。

お疲れ様でした。

WPFormsとreCAPTCHAで、簡単にメール設定できます【まとめ】

まとめ
まとめ

まとめです。

WPFormsとreCAPTCHAを使えば、簡単にメール設定ができます。

ココがポイント

WPFormsは、SWELL開発者の了さんも推奨しているメールプラグインです。

Googleが無料提供している「reCAPTCHA」を使うことで、セキュリティーの高い設定が実現できます。

サイト乗取りや、スパム対策に有効なので、おすすめです。

よかったらシェアしてね!
  • URLをコピーしました!
この記事でわかること(もくじ)