WordPressのお問い合わせフォームで、確認画面と完了画面がつけられるプラグインないかな？MW WP Formはクローズされるみたいだし。
Snow Monkey Formsがいいらしいって聞くけど、何ができるんだろう？使い方を詳しく知りたい。
この記事ではこんな疑問に答えます。
長らくWeb制作のWordPress案件では「MW WP Form」というお問い合わせプラグインが使われていました。
重宝していたので、このサイトでも解説しています。
しかし今後クローズされるみたいなので（2023年9月現在）、同じ制作者の正式な後続プラグイン「Snow Monkey Forms」を紹介しようと思ったわけです。
実はContact Form 7でもプラグイン無しで完璧な確認画面付きのフォームをJSを書いて実装することができます。
もしWeb制作などでデザイン通りにフォームを実装したい！という場合は以下の記事が役にたつと思います。革命的に便利です👇
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
Snow Monkey Formsとは？
『Snow Monkey Forms』は、お問い合わせフォームが作れるWordPressプラグインです。
以下のようなプログレストラッカー付きの企業フォームを5分で設置できます。
と思われるかもですが、CSSで若干調整が必要になる場合もあるものの、基本的に問題なく使えます。
WordPressの「ブロックエディタ」に対応しているため、初心者の方でも簡単に扱えます。
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つのデフォルトデザインが用意されています。
基本的にここからフォームデザインを選ぶことになります。
デフォルト
Simple table
Letter
Business
Snow Monkey Formsでお問い合わせフォームを作る方法
❶超速でSnow Monkey Formsを設置してみる
まずは試しに以下のビジネステンプレートのフォームを3分で設置してみます。
プラグインページから「今すぐインストール→有効化」をします。
その後、左のメニューに「Snow Monkey Forms」が出現するので、「新規追加」を押します。
❷フォーム項目を編集する
まずはタイトルを入力して、「下書き保存」しておきます。
その後、「フォーム設定を開く」を押し、「確認画面を使用する」「プログレストラッカーを使用する」をオンにして、フォームスタイルを「Business」にして、「公開」します。
現在の進行状況をユーザーに知らせるバーです。フォーム離脱率の低下などに寄与します。スクラッチ実装だと地味に大変な部分です。
次にお問い合わせページを固定ページで作成します。
お問い合わせと分かるタイトルを入力したら、入力欄にSnow Monkey Form独自ブロックを追加します。
先程作ったフォームを選択します（数字部分は各フォームに割り当てられているIDです）
その後、「下書き保存」後に、URLをお問い合わせと分かりやすいものにし、「保存」します。
今回はcontact-formにしました。
その後、指定したURL(今回だと〇〇.com/contact-form)にアクセスすると表示できているのが分かります。
確認画面に遷移することも確認できました。
まだメール設定を行っていませんが、もうほとんどお問い合わせフォームの体を成していますね👀
❷必要項目を揃えていく
さて、今回は各項目の編集の仕方を練習するために、以下の企業フォームを作成してみます。
お名前(必須)
まずラベルを編集します。今回はお名前を必須項目にするので、お名前(必須)とします。
その後、入力欄をクリックし、「バリデーション必須」とします。
NAMEについてはメール設定で使うので、分かりやすい名前にします。
PLACEHOLDERは入力欄に薄地で書いてある例）sample太郎がそれです。
ユーザーフレンドリーで、フォーム離脱率を下げる効果があります。
基本はこのような操作を各入力項目ごとに繰り返すだけです。
会社名
まずは下に入力項目を増やすために、お名前を「複製」します。
その後は以下画像の部分を設定してください。
会社名は必須項目ではないので、「バリデーション必須をオフ」にします。
nameはcompany_nameとしました。
メールアドレス(必須)
メールアドレスは複製せず、デフォルトのものをそのまま活用します。
電話番号(必須)
下に項目を追加するため、「複製」します。
複製された入力項目はメールアドレスなので、「ブロックを追加」します。
その後、「Tel」を選択。
メールアドレスの入力項目は消して下さい。
その後、バリデーションやNAME,PLACEHOLDERを設定します。
お問い合わせ種別(必須)
ここではラジオボタンを設置します。「複製」した後、「ラジオボタン」ボックスを追加してください。
すると、以下のようなラジオボタンが出現したかと思います。この項目名を変えていきます。
画面右の「OPTIONS」から変更していきます。
今回は以下の項目名にしました。
お問い合わせ内容(必須)
既存の「メッセージ」を流用しました。お問い合わせ内容にPLACEHOLDERはいらないので、そのままにしています。
❸完了画面の設定
フォーム設定画面の下にスクロールしてください。
そこで完了画面で表示するメッセージを変更することができます。
Snow Monkey Formsでは入力画面、確認画面、送信完了画面が全て同じURLで表示されるので、ページ毎の設定が必要ありません。便利！！
❹メール設定
ここから「管理者宛メール」「自動返信メール」の２つを設定していきます。
管理者宛メール設定
まずは管理者宛メール設定を行います。
「TO（メールアドレス）」には、管理者のメールアドレスを設定します。ここにお問い合わせメールが来ます。
「件名」は「お問い合わせがありました」が無難。
「BODY」は実際のお問い合わせ内容が入ります。
ここに先程設定した「NAME」を{email}のように入力すれば、お問い合わせ内容をそれぞれ項目ごとに表示することが可能で、私は今回以下のようにしました。
【お名前】{fullname}
【会社名】{company_name}
【メールアドレス】{email}
【電話番号】{tel}
【お問い合わせ種別】{radio-buttons}
【お問い合わせ内容】{message}デフォルトの{all-fields}でも全部表示してくれますが、メール表示が分かりにくいので、個別に設定するのがおすすめです。
自動返信メール設定
次にユーザー向けの自動返信メール設定です。
「TO（メールアドレス）」にはユーザーが入力したメールアドレスが自動で渡るように、メールアドレスのNAMEを入れておきます。今回は初期値のままなので、{email}のままです。
「件名」は【自動返信メール】お問い合わせいただきありがとうございますのように、自動返信だと分かる命名にしています。
「BODY」に関しては自動返信でユーザーに送られる文面です。
BODYに関して以下のようにしました。
この度はお問い合わせいただき、誠にありがとうございます。
以下の内容で受け付けました。
【お名前】{fullname}
【会社名】{company_name}
【メールアドレス】{email}
【電話番号】{tel}
【お問い合わせ種別】{radio-buttons}
【お問い合わせ内容】{message}
3営業日以内に、担当者からご連絡いたしますので、もう少々お待ち下さいませ。
「REPLY-TO（メールアドレス）」はユーザーが返信したときに送られる先です。
「FROM（メールアドレス）」は送信元メールアドレスで、このメールアドレスからユーザーに自動返信されることになります。
送信元メールアドレスは基本的にホームページと同じメールアドレスが推奨されます。
それ意外のGmailなどだと迷惑メールに入ったり送信されない可能性があります。自動返信メールは特に顕著です。
例えばこのサイトshogo-log.comであれば、〇〇@shogo-log.comというメールアドレスです。レンタルサーバー各社で簡単に取得できます。
それでも他のメールアドレスを使用する場合は後述の「WP Mail SMTP」の利用を検討してください。
「送信者」はユーザーに表示される送信者名です。
分かりやすくサイト名などにしておくといいでしょう。
❻送信テスト
最後に送信テストを行います。
管理者宛メールと、自動返信メールが届くことを確認してください。
Web制作案件の場合は、必ずクライアントのメールでも問題ないことを確認してください。
メールが送信されない場合
プラグインの設定に問題がないならば、サーバー側で弾かれている可能性があります。
その時は以下の記事で「WP Mail SMTP」の利用を検討してください。
❼スパムメール対策もセットで行う
ここまで来たら、近年増加傾向にあるスパムメール対策も行いましょう。
「reCAPTCHA v3」の導入方法を解説します。
まずはhttps://www.google.com/recaptcha/about/にアクセスして、「v3 Admin Console」をクリック。
その後、下記項目を埋めていき、「送信」をクリック。
その後表示される「サイトキー」「シークレットキー」が超重要なので、控えて下さい。
その後、WordPress管理画面から「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でプラグイン無しで、確認画面・送信完了画面を出せるので、どんなフォームでも実装可能です。
このブログではContact Form 7についても色々解説していますので、合わせて検討してみてください。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
