Snow Monkey Formsは、ブロックエディターでお問い合わせフォームを作れる国産のWordPressプラグインです。設置するだけならすぐに使えますが、実案件では必須マークの表示やプライバシーポリシーの同意など、もう一歩踏み込んだカスタマイズが必要になります。
このページでは基本設定をひととおり解説したうえで、目的別のカスタマイズ記事へ案内します。やりたいことが決まっている場合は目次から飛んでください。
Snow Monkey Formsとは
ブロックエディターで直感的にフォームを組めるお問い合わせフォームプラグインです。Snow Monkeyテーマとの相性が良いプラグインですが、SWELLなど他のテーマでも問題なく動作します。
ブロックで編集できる手軽さが利点である一方、ブロックゆえのクセもあります。たとえばバリデーションを必須に設定しても出力されるHTMLは変化しないため、必須マークをCSSだけで付けることができません。こうした実務でつまずきやすい点は、それぞれの記事で解説しています。
基本設定
フォームを設置したら最初に触るのが、管理者宛メール・自動返信メール・完了画面の3つです。初期状態の文言はそのままだと実務では使いにくいので、標準的な設定をまとめました。
Snow Monkey Formsの管理者宛メール項目まとめ
お問い合わせが発生した時に、管理者に届くメールと、ユーザーに届くメールで内容を分けることができます。
サンプルの文言で届く管理者宛メール例
入力例
TO（メールアドレス）
メールの送信先のメールアドレスを記載します。
デフォルトだとサイトの管理者メールアドレスが記入されています。
admin@example.com件名
デフォルトだと管理者通知と表記されています。
メールの件名が｢管理者通知｣とだけの表記になってしまいますので、しっかり件名をつけましょう。
サンプル
【重要】新しいお問い合わせが届きました - MOTOKI合同会社BODY
デフォルトだと {all-fields}と記載されています。
その場合は下記のような内容の本文がメールに届いてしまうので注意しましょう。
fullname:
test
email:
test@gmail.com
message:
test
より細かく調整するのであれば、 {属性のname}を使って記述しましょう。
- 送信された値は次の形式で埋め込むことができます: {name}
- 送信されたすべての値を次のフォーマットで埋め込むことができます: {all-fields}
サンプル
お名前: {fullname}
メールアドレス: {email}
お問い合わせ内容:
{message}
------------------------------
このメールは自動生成されたものです。
ご不明点がございましたら、support@motoki-design.co.jpまでご連絡ください。
REPLY-TO（メールアドレス）
返信先のメールアドレスが指定できます。
届いたメールを返信する時に指定のメールアドレスにできます。
基本はお客様が入力されたメールアドレスで良いでしょう。
{email}FROM（メールアドレス）
送信元のメールアドレスが指定できます。
管理者ではなく、お問い合わせ用のメールアドレスを表記したい時に便利です。
support@motoki-design.co.jp送信者
メールに届く送信者の名前が変更できます。
デフォルトだとWordPressと無機質な名前になってしまいます。
MOTOKI合同会社 管理者Snow Monkey Formsの自動返信メールの項目まとめ
管理者宛のメールと項目は同じです。
サンプルだけ書いておきます。
入力例
TO（メールアドレス）
{email}件名
【MOTOKI合同会社】お問い合わせを受け付けましたBODY
{fullname}様
この度は、MOTOKI合同会社にお問い合わせいただきありがとうございます。
以下の内容でお問い合わせを受け付けました。
お名前: {fullname}
メールアドレス: {email}
お問い合わせ内容:
{message}
担当者より追ってご連絡いたしますので、しばらくお待ちください。
------------------------------
このメールは自動生成されたものです。
ご不明点がございましたら、support@motoki-design.co.jpまでご連絡ください。
MOTOKI合同会社 運営チームREPLY-TO（メールアドレス）
support@motoki-design.co.jpFROM（メールアドレス）
support@motoki-design.co.jp送信者
MOTOKI合同会社 運営チームSnow Monkey Formsの完了画面の文言
送信後の完了画面の文言ですが、デフォルトは完了しました。と蛋白なので、修正しておきましょう。
お問い合わせありがとうございます。
MOTOKI合同会社にお問い合わせいただき、誠にありがとうございます。
内容を確認後、担当者より追ってご連絡いたしますので、しばらくお待ちください。
なお、自動返信メールが送信されておりますので、ご確認ください。
今後ともどうぞよろしくお願いいたします。
MOTOKI合同会社
完了文言用PタグのCSS
完了文言用にPタグにCSSを入れることを推奨します。
デフォルトは行間がないので、読みづらくなります。
.smf-complete-content p {
margin-bottom: 2em;
}以上です。
入力項目のカスタマイズ
必須マークをつける
バリデーションを必須にしてもHTMLの出力は変わらないため、CSSやJSだけでは必須マークを付けられません。バージョン8系以降と7系以前で方法が異なります。
郵便番号から住所を自動入力する
プラグイン「zipaddr-jp」を入れてIDを登録するだけで実装できます。コードは不要で、入力コストを大きく減らせます。
Snow Monkey Forms│郵便番号から住所を自動登録する方法
初期選択状態を指定する
チェックボックス・ラジオボタン・プルダウンを、あらかじめ選択された状態にできます。コードが必要なため知られていませんが、実装自体は簡単です。
Snow Monkey Forms│初期選択状態を指定する方法
都道府県のプルダウンを作る
セレクトボックスに47都道府県を入れるときのテンプレートです。コピーして貼るだけで使えます。
Snow Monkey Forms│都道府県の入力テンプレート
メールアドレスのダブルチェックを実装する
Snow Monkey Formsにはメールアドレスの再入力確認機能がありません。JavaScriptで実装する方法を解説しています。
Snow Monkey Forms│メールアドレスのダブルチェック確認の実装方法
チェックボックス・ラジオボタンを画像付きにする
標準の選択肢は素っ気ない見た目です。画像を添えるとタップしやすくなり、スマートフォンでの入力離脱を減らせます。
Snow Monkey Forms│チェックボックス･ラジオボタンを画像付きの見た目にする方法
プライバシーポリシーへの対応
プライバシーポリシーを埋め込む
コード無しで埋め込む方法、チェックボックスにリンクを貼るだけの方法、スクロール表示させる方法の3パターンを解説しています。
Snow Monkey Forms│プライバシーポリシーをお問い合わせに埋め込む方法
チェックボックスの文字にリンクをつける
標準ではチェックボックスのラベルにアンカーリンクを設定できません。HTMLのみで対応する方法と、JavaScriptを使う方法があります。同意チェックでリンクを踏ませたいときに使います。
Snow Monkey Forms│プライバシーポリシー用チェックボックスの文字にアンカーリンクをつける方法
見た目の調整
ボタンなどの見た目を整える
Snow Monkey Formsには見た目のプリセットがなく、CSSでの上書きが前提です。SWELLと組み合わせたときに違和感が出ないよう調整した例をまとめています。
Snow Monkey Forms│ボタン等の見た目の調整まとめ
CSS変数を理解して書く
Snow Monkey Formsが定義しているCSS変数の一覧です。変数を把握しておくと、力技で上書きせずきれいにカスタマイズできます。シンプルテーブル・レター・ビジネスの各フォームタイプ別に整理しています。
Snow Monkey Forms│CSSを書くための変数ガイド
送信後の処理と外部連携
サンクスページへリダイレクトする
送信後の画面変化が小さく、送信できたか分かりにくいことがあります。サンクスページへ飛ばすとUXが改善し、コンバージョン計測用のページとしても使えます。
Snow Monkey Forms│送信完了後サンクスページにリダイレクトする方法
スプレッドシートに書き込む
標準ではメール送信のみですが、GASを使えばお問い合わせ内容をスプレッドシートへ同時に記録できます。問い合わせの一覧管理に便利です。
Snow Monkey Forms│お問い合わせ内容をスプレッドシートに書き込む方法
URLパラメータをフォームに反映する
どの経路から問い合わせが来たかを知りたいときに使います。URLに付けたパラメータをフォームの隠し項目に入れ、管理者宛メールに記載できます。
Snow Monkey Forms│URLパラメータをお問い合わせフォームに反映する方法
計測タグを仕込む
LPなどでコンバージョン率を測るために、フォームとサンクスページへ計測タグを設置する方法です。
開発者向け：フックの一覧
本格的にカスタマイズするならフックの利用は避けられません。Snow Monkey Formsに用意されているアクションフック・フィルターフック23個を、用途と使用例つきで全て解説しています。
Snow Monkey Forms│フック23個全まとめ│アクションフック・フィルターフック
まとめ
Snow Monkey Formsはブロックエディターで手軽にフォームを作れる一方、実案件では必須マークやプライバシーポリシー対応など、標準機能では足りない部分が出てきます。ここで紹介したカスタマイズを組み合わせれば、たいていの要件は満たせるはずです。
カスタマイズでお困りの場合はご相談ください。
