Web制作実務役立ち

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】
本ページにはプロモーションが含まれています。
まさひろくん

WordPressのお問い合わせフォームで、確認画面と完了画面がつけられるプラグインないかな?MW WP Formはクローズされるみたいだし。

検討している人

Snow Monkey Formsがいいらしいって聞くけど、何ができるんだろう?使い方を詳しく知りたい。

この記事ではこんな疑問に答えます。

長らくWeb制作のWordPress案件では「MW WP Form」というお問い合わせプラグインが使われていました。

重宝していたので、このサイトでも解説しています。

しかし今後クローズされるみたいなので(2023年9月現在)、同じ制作者の正式な後続プラグイン「Snow Monkey Forms」を紹介しようと思ったわけです。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

Snow Monkey Formsとは?

https://ja.wordpress.org/plugins/snow-monkey-forms/

『Snow Monkey Forms』は、お問い合わせフォームが作れるWordPressプラグインです。

以下のようなプログレストラッカー付きの企業フォームを5分で設置できます。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

ありさちゃん
ありさちゃん
これってWordpressテーマのSnow Monkeyじゃなくても動作するんですか?

と思われるかもですが、CSSで若干調整が必要になる場合もあるものの、基本的に問題なく使えます。

WordPressの「ブロックエディタ」に対応しているため、初心者の方でも簡単に扱えます。

Snow Monkey Formsではお問い合わせフォームに必要な以下の機能を備えています。

Snow Monkey Formsの機能
  • 確認画面OK
  • 送信完了サンクスページもOK
  • 自動返信メールOK

実は、確認画面はContact Form 7の「Multi-Step Forms」というプラグインでもつけることができます。

しかし「Contact Form 7 Multi-Step Forms」では、無料版では長文がダメ(4KB制限)だったりファイル添付ができなかったりするので、実用性の面でSnow Monkey Formsが有利です。

ブロックエディタで組むのが前提なので、デザインカンプ通りにフォームを静的コーディングして、プラグインで置き換える、みたいなMW WP Formでやってたような工程には合わないかなというのが個人的印象です。

なので、Web制作案件で使用する際に別途デザイナーがいる場合は、フォームデザインを相談してください。

Snow Monkey Formsで作れるフォーム4種類

Snow Monkey Formsでは初心者でも簡単にフォームを設置できるように、4つのデフォルトデザインが用意されています。

基本的にここからフォームデザインを選ぶことになります。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

デフォルト

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

 Simple table

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

Letter

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

Business

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

Snow Monkey Formsでお問い合わせフォームを作る方法

❶超速でSnow Monkey Formsを設置してみる

まずは試しに以下のビジネステンプレートのフォームを3分で設置してみます。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

プラグインページから「今すぐインストール→有効化」をします。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

その後、左のメニューに「Snow Monkey Forms」が出現するので、「新規追加」を押します。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

❷フォーム項目を編集する

まずはタイトルを入力して、「下書き保存」しておきます。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

その後、「フォーム設定を開く」を押し、「確認画面を使用する」「プログレストラッカーを使用する」をオンにして、フォームスタイルを「Business」にして、「公開」します。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】
プログレストラッカーとは?

現在の進行状況をユーザーに知らせるバーです。フォーム離脱率の低下などに寄与します。スクラッチ実装だと地味に大変な部分です。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

次にお問い合わせページを固定ページで作成します。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

お問い合わせと分かるタイトルを入力したら、入力欄にSnow Monkey Form独自ブロックを追加します。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

先程作ったフォームを選択します(数字部分は各フォームに割り当てられているIDです)

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

その後、「下書き保存」後に、URLをお問い合わせと分かりやすいものにし、「保存」します。

今回はcontact-formにしました。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

その後、指定したURL(今回だと〇〇.com/contact-form)にアクセスすると表示できているのが分かります。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

確認画面に遷移することも確認できました。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】
しょーご

まだメール設定を行っていませんが、もうほとんどお問い合わせフォームの体を成していますね👀

❷必要項目を揃えていく

さて、今回は各項目の編集の仕方を練習するために、以下の企業フォームを作成してみます。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

お名前(必須)

まずラベルを編集します。今回はお名前を必須項目にするので、お名前(必須)とします。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

その後、入力欄をクリックし、「バリデーション必須」とします。

NAMEについてはメール設定で使うので、分かりやすい名前にします。

PLACEHOLDERは入力欄に薄地で書いてある例)sample太郎がそれです。

ユーザーフレンドリーで、フォーム離脱率を下げる効果があります。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

基本はこのような操作を各入力項目ごとに繰り返すだけです。

会社名

まずは下に入力項目を増やすために、お名前を「複製」します。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

その後は以下画像の部分を設定してください。

会社名は必須項目ではないので、「バリデーション必須をオフ」にします。

nameはcompany_nameとしました。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

メールアドレス(必須)

メールアドレスは複製せず、デフォルトのものをそのまま活用します。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

電話番号(必須)

下に項目を追加するため、「複製」します。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

複製された入力項目はメールアドレスなので、「ブロックを追加」します。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

その後、「Tel」を選択。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

メールアドレスの入力項目は消して下さい。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

その後、バリデーションやNAME,PLACEHOLDERを設定します。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

お問い合わせ種別(必須)

ここではラジオボタンを設置します。「複製」した後、「ラジオボタン」ボックスを追加してください。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

すると、以下のようなラジオボタンが出現したかと思います。この項目名を変えていきます。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

画面右の「OPTIONS」から変更していきます。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

今回は以下の項目名にしました。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

お問い合わせ内容(必須)

既存の「メッセージ」を流用しました。お問い合わせ内容にPLACEHOLDERはいらないので、そのままにしています。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

❸完了画面の設定

フォーム設定画面の下にスクロールしてください。

そこで完了画面で表示するメッセージを変更することができます。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

Snow Monkey Formsでは入力画面、確認画面、送信完了画面が全て同じURLで表示されるので、ページ毎の設定が必要ありません。便利!!

❹メール設定

ここから「管理者宛メール」「自動返信メール」の2つを設定していきます。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

管理者宛メール設定

まずは管理者宛メール設定を行います。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

TO(メールアドレス)」には、管理者のメールアドレスを設定します。ここにお問い合わせメールが来ます。

件名」は「お問い合わせがありました」が無難。

BODY」は実際のお問い合わせ内容が入ります。

ここに先程設定した「NAME」を{email}のように入力すれば、お問い合わせ内容をそれぞれ項目ごとに表示することが可能で、私は今回以下のようにしました。

【お名前】{fullname}

【会社名】{company_name}

【メールアドレス】{email}

【電話番号】{tel}

【お問い合わせ種別】{radio-buttons}

【お問い合わせ内容】{message}

デフォルトの{all-fields}でも全部表示してくれますが、メール表示が分かりにくいので、個別に設定するのがおすすめです。

自動返信メール設定

次にユーザー向けの自動返信メール設定です。

TO(メールアドレス)」にはユーザーが入力したメールアドレスが自動で渡るように、メールアドレスのNAMEを入れておきます。今回は初期値のままなので、{email}のままです。

件名」は【自動返信メール】お問い合わせいただきありがとうございますのように、自動返信だと分かる命名にしています。

BODY」に関しては自動返信でユーザーに送られる文面です。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

BODYに関して以下のようにしました。

この度はお問い合わせいただき、誠にありがとうございます。

以下の内容で受け付けました。

【お名前】{fullname}

【会社名】{company_name}

【メールアドレス】{email}

【電話番号】{tel}

【お問い合わせ種別】{radio-buttons}

【お問い合わせ内容】{message}

3営業日以内に、担当者からご連絡いたしますので、もう少々お待ち下さいませ。
ホームページと同じドメインのメールアドレスを設定しましょう。

REPLY-TO(メールアドレス)」はユーザーが返信したときに送られる先です。

FROM(メールアドレス)」は送信元メールアドレスで、このメールアドレスからユーザーに自動返信されることになります。

送信元メールアドレスは基本的にホームページと同じメールアドレスが推奨されます。

それ意外のGmailなどだと迷惑メールに入ったり送信されない可能性があります。自動返信メールは特に顕著です。

例えばこのサイトshogo-log.comであれば、〇〇@shogo-log.comというメールアドレスです。レンタルサーバー各社で簡単に取得できます。

それでも他のメールアドレスを使用する場合は後述の「WP Mail SMTP」の利用を検討してください。

送信者」はユーザーに表示される送信者名です。

分かりやすくサイト名などにしておくといいでしょう。

❻送信テスト

最後に送信テストを行います。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】
Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】
Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

管理者宛メールと、自動返信メールが届くことを確認してください。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】
Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

Web制作案件の場合は、必ずクライアントのメールでも問題ないことを確認してください。

メールが送信されない場合

プラグインの設定に問題がないならば、サーバー側で弾かれている可能性があります。

その時は以下の記事で「WP Mail SMTP」の利用を検討してください。

❼スパムメール対策もセットで行う

ここまで来たら、近年増加傾向にあるスパムメール対策も行いましょう。

reCAPTCHA v3」の導入方法を解説します。

まずはhttps://www.google.com/recaptcha/about/にアクセスして、「v3 Admin Console」をクリック。

Contact Form 7はスパム対策すべし!reCAPTCHAによるスパムメール対策を解説

その後、下記項目を埋めていき、「送信」をクリック。

スコアベース(v3)をチェックしてください。

Contact Form 7はスパム対策すべし!reCAPTCHAによるスパムメール対策を解説

その後表示される「サイトキー」「シークレットキー」が超重要なので、控えて下さい。

Contact Form 7はスパム対策すべし!reCAPTCHAによるスパムメール対策を解説

その後、WordPress管理画面から「reCAPTCHA」をクリック。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

ここに先程のキーを貼り付けて終了です。

Snow Monkey Formsの使い方を解説【確認画面やサンクスページやreCAPTCHA対応】

ただこのままだと「reCAPTCHA」のロゴが邪魔なので、消したい人は以下の処置を行って下さい。

【公式】reCAPTCHA バッジを非表示にします。どうすればよいですか?

https://developers.google.com/recaptcha/docs/faq?hl=ja#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

まず、フォームの下などに以下コードを入れます。

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

カスタムHTMLブロックなどで入れるといいかと思います。

その後、以下のCSSを適用させればOKです。

.grecaptcha-badge { visibility: hidden; }

Snow Monkey Formsで爆速構築しよう

Snow Monkey Formsを使用すればブロックエディターで軽快にお問い合わせフォームを作成することができます。

ただ、これまでのデザインカンプと寸分違わずにコーディングで再現するWeb制作だとちょっと扱いにくいかもしれません。

しかし、確認画面と送信完了画面をこんなに簡単に、デメリットなく構築できる点は計り知れないです。

このブログでは他にもContact Form 7について解説していますので、そちらも合わせて検討してみてください。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

あなたに是非読んでほしい記事です!