質問SWELL（スウェル）でWPForms（WPフォームズ）を使いたいです。設定方法を教えて！
ブログにフォームを設置することは必須です。未設定だとアフィリエイト審査に通過できません。
また、ユーザーとの窓口が遮断されるため、SEO的にもよくありません。
そこでおすすめなのが、WPForms（ダブリューピーフォームズ）です。
マウス操作でフォームを簡単に設置できるため、パソコンが苦手な人でも問題ありません。
キャベツ太郎SWELLは、WPFormsのプラグイン導入を推奨しております。セキュリティーにも優れているのでおすすめです。
そこでこの記事は、SWELLでプラグイン「WPForms」を導入する手順を記載します。
この記事を読めば、最短でWPFormsを設定できるので、アフィリエイト審査に最短合格できるでしょう。
＜プロフィール＞
- ConoHaWING3年目
- SWELL3年目
- SEO検定一級合格
- 月収6ケタ（プラチナランク）
- 某ASPの社員
実績＆資格（クリックで開く）
スクロール＆拡大できます
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を反映させる方法は、２つあります。
- 固定ページに新規追加する方法
- 既存固定ページに埋め込む方
新規ページへ作りたい場合、「新規ページを作成」ボタンをクリックします。
「新規ページを作成」ボタンをクリックするだけで、固定ページに反映されてました。
キャベツ太郎初めてフォームを作る場合、この方法がもっともラクです。
わたしは、過去に「Contact Form 7」でフォームを作ってあったので、「既存のページを選択」で進めます。
「既存のページを選択」 すると、埋め込みたい固定ページが、プルダウンメニューで選択できます。
固定ページを選択すると、固定ページに遷移（せんい）します。
- 固定ページに左上「＋」をクリック
- 検索ボックス「WPForms」で検索
ブロックエディタで、WPFormsを呼び出します。
WPFormsで作成したフォームを選択※先の例ではコンタクトフォーム（お問い合わせ）
固定ページを保存してプレビュー。
固定ページに、フォームが反映されているか確認します。
- 既存の固定ページに反映されてていること、確認できました
- 「reCAPTCHA v3」も表示されてます
- ふたたび、メールアドレスが送信できるかチェックします
固定ページにWPFormsを反映させたところ、送信成功しました！
ちゃんとメールが届いているか念の為確認します。
固定ページからテストしたメール、無事届いておりました。
これで設定終了です。
お疲れ様でした。
WPFormsとreCAPTCHAで、簡単にメール設定できます【まとめ】
まとめです。
WPFormsとreCAPTCHAを使えば、簡単にメール設定ができます。
ココがポイントWPFormsは、SWELL開発者の了さんも推奨しているメールプラグインです。
Googleが無料提供している「reCAPTCHA」を使うことで、セキュリティーの高い設定が実現できます。
サイト乗取りや、スパム対策に有効なので、おすすめです。