SWELL(スウェル)でWPForms(WPフォームズ)を使いたいです。
ブログにフォームが設置されてないと、アフィリエイトができません。
なぜなら審査で引っかかるからです。SEO的にもよくありません。
でも、メールの設定って、なんだか難しそうですよね。
そこでおすすめなのが、WPForms(ダブリューピーフォームズ)を使うこと。マウスで設置できるため、パソコンが苦手な人でもメールが設定できます。
SWELLは、WPFormsのプラグイン導入を推奨しております。セキュリティーに強いのでおすすめです。
そこでこの記事は、SWELLでプラグイン「WPForms」を導入する手順をご紹介します。
この記事を読めば、アフィリエイト審査に最短で合格できるでしょう。
この記事を書いている人
- ConoHaWINGユーザー4年目
- SWELLユーザー3年目
- SEO検定一級合格
- 月収6ケタ(プラチナランク)
- 某ASPの社員
スクロール&拡大できます
クリックだけで美しいサイトが作れる
HTMLやCSSなどの知識不要。買い切りなので、一度購入すれば一生モノです。
WPFormsとreCAPTCHAをダウンロード【SWELLメール設定】
前提、WPForms(だぶりゅーぴーふぉーむず)を利用するには、reCAPTCHA(リキャプチャ)が必要となります。
reCAPTCHAは、Googleが無料で提供しているセキュリティーツールです。
どちらも完全無料です。
WPFormsとreCAPTCHAを連動させることでセキュリティーの高いフォームが実現できます。
(難しい作業ではないし、完全無料なのでご安心を)
詳細を解説します。
WPForms(だぶりゅーぴーふぉーむず)とは?
WPFormsとは、問い合わせフォームが作れるプラグイン。インストールして、管理画面からドラックするだけ。
初心者でも簡単に問い合わせフォームが作成できます。
まず、ワードプレスのプラグインから「新規追加」をクリックします(上画像赤枠)
検索画面で「WPForms」を検索。
ダウンロードできたら有効化します。
reCAPTCHA(リキャプチャ)とは【Googleの無料ツール】
reCAPTCHA(リキャプチャ)とは、Googleが無料て提供しているセキュリティーツールです。
「わたしはロボットではありません」に、チェックマークをつける機能です。
Webサイトで一度は見たことあるのではないでしょうか?
「reCAPTCHA v2」は、いちいち画像認証が入り、面倒くさいと感じた方も多いのではないでしょうか。
v3では、ロボット側が自動で識別してくれます。
v3は、めんどうな認証が不要になるので、ユーザーページ離脱を抑制する効果があります。
メール設定手順【WPFormsとreCAPTCHA】
WPFormsを導入
では、実際にWPFormsを導入していきましょう。
Googleアカウントのログインした状態で、reCAPTCHAのトップページへ。
reCAPTCHAトップに移動しました。
画像赤枠①の「v3管理コンソール」をクリック。
画像赤枠「+作成」をクリック。
Amazonのアカウント作成のようなもので、サイトを管理するマイページを作成します。
- ラベルにサイトURLをペースト
- reCAPTCHA v3を選択(最新版)
- ドメイン入力
- オーナー(自分で管理できるメールアドレスを入力)
新しいプロジェクト作成します。
プロジェクトとは「作業BOX」のようなものです。
オーナー設定で、利用規約に同意します。
- reCAPTCHAの利用規約に同意します
- アラートをオーナーに送信する
- 送信
2つのキーを発行します。
ダウンロードしたプラグイン「WPForms」とreCAPTCHAを、連動させるためのキーです。
- 登録したURLを確認
- サイトキーをコピー
- シークレットキーをコピー
- 設定に移動
reCAPTCHAはAMP(アンプ)ページにも対応してます。
利用する場合、チェックいれて保存しましょう。
WPFormsとreCAPTCHAを連動させる方法
WPFormsとreCAPTCHAを連動させて、フォームを作成します。
- WPForms
- 新規追加フォーム
フォームを作成する方法は、2通りあります。
- 空からフォーム作る
- テンプレートを利用する
おすすめは、空からフォームを作る方法です。
なぜなら、自由度が高いフォームが作成できるからです。
テンプレートを利用すると、おしゃれなフォームが手軽に作成できます。が、自由度は小さいです。
ここでは「空白のフォームを作成する」手順を記載します。
- セットアップ
- フォームの名前を付ける(任意)
- 空白のフォームを作成する
まず、reCAPTCHAをwpformsに反映します。
①ReCAPTCHAをクリックします。
reCAPTCHAでコピーしたキーを、WPFormsに連携します。
- reCAPTCHA v3
- サイトキーをペースト
- シークレットキーをペースト
- 設定を保存
10秒ほど待つと、表示が切り替わります。「設定が正常に保存されました」が表示されたら、紐付け完了です。
WPFormsに戻り、必要項目をドラックします。
最低限必要な項目は、以下3つす。
- 名前
- メール
- お問い合わせ内容
③は、左赤枠「一行テキスト」に入力した文字が反映されます。
任意の名前をつけましょう。
画像①の「reCAPTCHA」をフォーム項目へドラックすれば、reCAPTCHAが反映されます。
- reCAPTCHA をクリック
- 右上に reCAPTCHA マークが表示されているか
- 保存
- プレビュー
保存して、プレビュー画面を表示します。
反映したフォームが、表示されてますね。
WPFormsが動くか、自分のメールアドレスを入れて、テストしてみましょう。
プレビューだからか、確認失敗してしまいました。
てことで、本番環境で試してみます。
ワードプレスの固定ページに、WPFormsを設置して、再テストします。
ワードプレスの固定ページに、WPFormsを反映させる方法は、2つあります。
- 固定ページに新規追加する方法
- 既存固定ページに埋め込む方
新規ページへ作りたい場合、「新規ページを作成」ボタンをクリックします。
「新規ページを作成」ボタンをクリックするだけで、固定ページに反映されてました。
初めてフォームを作る場合、この方法がもっともラクです。
わたしは、過去に「Contact Form 7」でフォームを作ってあったので、「既存のページを選択」で進めます。
「既存のページを選択」 すると、埋め込みたい固定ページが、プルダウンメニューで選択できます。
固定ページを選択すると、固定ページに遷移(せんい)します。
- 固定ページに左上「+」をクリック
- 検索ボックス「WPForms」で検索
ブロックエディタで、WPFormsを呼び出します。
WPFormsで作成したフォームを選択※先の例ではコンタクトフォーム(お問い合わせ)
固定ページを保存してプレビュー。
固定ページに、フォームが反映されているか確認します。
- 既存の固定ページに反映されてていること、確認できました
- 「reCAPTCHA v3」も表示されてます
- ふたたび、メールアドレスが送信できるかチェックします
固定ページにWPFormsを反映させたところ、送信成功しました!
ちゃんとメールが届いているか念の為確認します。
固定ページからテストしたメール、無事届いておりました。
これで設定終了です。
お疲れ様でした。
WPFormsとreCAPTCHAで、簡単にメール設定できます【まとめ】
まとめです。
WPFormsとreCAPTCHAを使えば、簡単にメール設定ができます。
WPFormsは、SWELL開発者の了さんも推奨しているメールプラグインです。
Googleが無料提供している「reCAPTCHA」を使うことで、セキュリティーの高い設定が実現できます。
サイト乗取りや、スパム対策に有効なので、おすすめです。