この記事で解決できる悩み
こんな悩みを解決する記事を用意しました！
この記事を書いた人
みち しるべ
- 33歳からプログラミングを独学
- 士業のWebマーケティング会社勤務
- Web全般の困りごとを解決し、Webに関する情報を初心者の方に向けてわかりやすく発信しています
サイト制作に必要不可欠なページ、それはお問い合わせページです。
でも、いざフォームを作ろうとすると、どのプラグインを使えばいいか迷ったり「バリデーション？」「NAME？」といった専門用語に戸惑ったりして、手が止まってしまう方も多いのではないでしょうか。
本記事では、「Snow Monkey Forms」の使い方を、初心者の方がつまずきやすいポイントとあわせて解説します。
テキスト・メールアドレスなど、Snow Monkey Formsで使える全11種類の入力欄を実際に使いながらフォームを作成していくので、手順どおりに進めるだけで実用的なお問い合わせフォームが完成します。
各設定の意味もひとつずつ解説し、設定値やメール本文の例もそのまま使える形で紹介しています。
また、多くの人がハマる「自動送信メールが届かない問題」の原因と対策や、reCAPTCHAによるスパム対策の方法まで解説しているので、公開後も安心して運用できるフォームを作りたい方は、ぜひ最後まで読んでみてください。
Snow Monkey Formsとは？
WordPressのブロックエディタ上で、コードを書かずに直感的かつ簡単にお問い合わせフォームを作成できるプラグインです。
開発者のTakashi Kitajima氏は、人気フォームプラグインの「MW WP Form」も開発されていました。
Snow Monkey Formsのメリット・デメリット
メリット
- 簡単かつ直感的にお問い合わせフォームが作れる
- デザインが何もしなくても最初から整っている
- 確認画面の有無を選べる
デメリット
- バリデーションルールが少ない
- 完了画面が別ページとして独立していない（※コンバージョン測定に不向き）
- フォームの入力欄の種類が少ない
※コンバージョン測定ができないわけではありません。
Snow Monkey Formsのインストール
管理画面のサイドバーから「プラグイン」>「プラグインを追加」をクリック。
プラグインの検索から「Snow Monkey Forms」と入力して「今すぐインストール」をクリック。
Snow Monkey Formsがインストールできたら「有効化」をクリック。
サイドバーにSnow Monkey Formsの項目が確認できたらインストール完了です。
お問い合わせフォームの新規作成
ここからは実際にフォームを作成していきます。
これから作成するフォームの完成形はこちらです👇
Snow Monkey Formsで使用できるすべての項目を使ったフォームです。
作りながら操作方法などを説明していくので安心してください。
まずは、管理画面のサイドバーから「Snow Monkey Forms」>「投稿を追加」をクリック。
入力画面の作成
フォームのタイトルを入力します。
「お問い合わせフォーム」としました。
デフォルトの項目を削除
デフォルトの項目をすべて削除します。
削除したい「項目」を選択。
ここで選択されたのが「項目」であることを左下のパンくずリストから確認してください。
「項目」がパンくずリストの最後の表示になっていれば選択されています。
もし、最後の表示が「テキスト」などになっている場合は「項目」をクリックしてください。
「項目」が選択された状態で「オプションボタン」>「削除」をクリックすると項目の削除ができます。
同じ方法で残りの項目すべて削除してください。
項目の追加
以下の項目をフォームに追加していきます。
フォーム内の項目一覧
- お名前（テキスト）
- メールアドレス（email）
- 電話番号（Tel）
- 現在のサイトURL（URL）
- ご相談の種類（セレクトボックス）
- ご予算（ラジオボタン）
- ご希望のサービス（チェックボックス）
- 打ち合わせ希望日（日付）
- 公開希望時期（月）
- 参考資料（ファイル）
- ご相談内容（テキストエリア）
入力画面の任意の場所をクリックすると「+」マークが表示されるので「項目」を選択。
項目が追加されたので以下を入力します。
- ラベル
-
お名前【必須】
- 説明
-
法人の場合はご担当者様のお名前をご入力ください。
項目の中の「+」>「すべて表示」をクリック。
サイドバーが表示されるので下にスクロールして「テキスト」をクリック。
テキストが追加されました。
同じ要領で残りの項目を追加します。
ラベルと説明は以下を参考にして入力してください。
メールアドレス（email）
- ラベル
-
メールアドレス【必須】
- 説明
-
ご返信はこちらのアドレスにお送りします。携帯キャリアのアドレスの場合、受信設定をご確認ください。
電話番号（Tel）
- ラベル
-
電話番号【任意】
- 説明
-
お急ぎの場合はお電話でご連絡することがあります。ハイフンなしでも入力できます。
現在のサイトURL（URL）
- ラベル
-
現在のサイトURL【任意】
- 説明
-
リニューアルをご希望の場合は、現在のサイトのURLをご入力ください。
ご相談の種類（セレクトボックス）
- ラベル
-
ご相談の種類【必須】
- 説明
-
最も近いものをお選びください。
ご予算（ラジオボタン）
- ラベル
-
ご予算【必須】
- 説明
-
おおよその目安で構いません。
ご希望のサービス（チェックボックス）
- ラベル
-
ご希望のサービス【任意】
- 説明
-
複数選択できます。
打ち合わせ希望日（日付）
- ラベル
-
打ち合わせ希望日【任意】
- 説明
-
オンライン・対面どちらでも対応可能です。平日10:00〜18:00の間でご希望日をお選びください。
公開希望時期（月）
- ラベル
-
公開希望時期【任意】
- 説明
-
特に決まっていない場合は空欄で構いません。
参考資料（ファイル）
- ラベル
-
参考資料【任意】
- 説明
-
会社案内や参考サイトのキャプチャなどがあれば添付してください（PDF・JPG・PNG、5MBまで）。
ご相談内容（テキストエリア）
- ラベル
-
ご相談内容【必須】
- 説明
-
現在お困りのことや、実現したいことを自由にご記入ください。
項目のブロック設定
項目をクリックすると右側のサイドバーにブロック設定が表示されます。
項目名の表示・非表示を切り替えられます。
オンにすると「お名前」「メールアドレス」などの項目名が表示されます。
通常はオンのままで問題ありません。
オフにするのは、項目名を表示したくない場合です。
例えば、検索フォームのように入力欄だけを置きたいときや、「姓」「名」のように項目名がなくても分かる欄を横に並べたいときに使います。
項目名と入力欄を紐づけるための設定。
属性で設定したIDを入力すると両者が結びつきます。
紐づけると、項目名をクリックしたときにカーソルが入力欄に移動するようになります。
また、音声読み上げソフトを使う方に正しく情報が伝わるようになります。
＜使用例＞
属性のIDを設定後、同じIDをLABEL FORに入力します。
- 属性のID：your-name
- LABEL FOR：your-name
バリデーションの設定
フォームに入力された内容が正しい形式・ルールに合っているかをチェックする仕組みのことです。
入力が必須となっている項目の入力欄（例：テキストやemailなど）をクリックすると、右側のサイドバーにバリデーションの設定項目が表示されるので「必須」にします。
バリデーションを必須にすることで、必ず入力して欲しい項目を空欄のまま送信できないようにしています。
バリデーションを設定するのは以下の入力欄です。
- お名前（テキスト）
- メールアドレス（email）
- ご相談の種類（セレクトボックス）
- ご予算（ラジオボタン）
- ご相談内容（テキストエリア）
バリデーションを設定しても特に見た目は変わりません。
属性
入力欄の細かい設定を行う場所です。
見本（プレースホルダー）の文字や、文字数の上限などがここで設定できます。
各属性の説明
入力項目を識別するための名前。
システムがどの欄に何が入力されたかを区別するために使います。フォーム内で重複しない名前にする必要があります。
複数の選択肢をひとつのまとまりとして扱い、そのまとまりに見出しを付ける機能です。
オンにすると、HTMLの「fieldset」と「legend」タグで選択肢が囲まれます。
例えば「ご希望の連絡方法」という質問に「メール」「電話」「郵送」という選択肢がある場合、この3つは「ご希望の連絡方法」についての選択肢です。ということが、ブラウザや音声読み上げソフトに正しく伝わります。
目の見えない方が読み上げソフトを使ったとき、どの質問に対する選択肢なのかが分かりやすくなるので、アクセシビリティの向上が主な目的となります。
選択肢の中身を入力する場所で、1行に1つずつ選択肢を書きます。
書き方は2通りあります。
ひとつはvalueだけを書く方法です。
メール
電話この場合、画面に表示される文字とサーバーへ送信される内容が同じになります。
もうひとつは "value" : "label" の形で書く方法です。
"mail" : "メールで連絡を希望"
"tel" : "電話で連絡を希望"label（右側）が画面に表示される文字、value（左側）がサーバーへ送信される情報です。
テキストエリアの高さを何行分で表示するかを決めることができます。
入力欄に最初から入っている値です。
プレースホルダーは入力すると消える「見本」でサーバーへ送信されませんが、VALUEは実際に入力済みの文字として扱われ、ユーザーが消さなければその値がサーバーへ送信されます。
チェックボックスのように複数の選択肢を同時に選べる項目で、選ばれた内容をつなぐときに間に入れる文字です。
例えば「ご希望のサービス」で「デザイン制作」「WordPress構築」「ドメイン・サーバー取得」の3つにチェックを入れて送信した場合、区切り文字が「,」なら通知メールや確認画面には次のように表示されます。
デザイン制作,WordPress構築,ドメイン・サーバー取得入力欄が空のときに、入力内容のヒントとして表示されるテキストのことです。
入力できる最大文字数が指定できます。
入力欄の横幅を「文字数」で指定できます。
ユーザーがブラウザに保存している情報（名前やメールアドレスなど）をワンクリックで入力できるようになります。
入力欄に付ける固有の名前で、CSSやJavaScriptで特定の欄だけを操作したいときに使います。
同じページ内でIDを重複させることはできません。
CSSでデザインを調整するための名前。
IDとは違いCLASSは重複しても問題ありません。
属性の設定
属性設定は、テキストやemailなどの入力欄をクリックすると表示される右側のサイドバーから行います。
「空」は何も入力しないという意味となります。
お名前（テキスト）
- NAME：your-name
- VALUE：空
- PLACEHOLDER：山田 太郎
- MAXLENGTH：0
- SIZE：0
- AUTOCOMPLETE：name
- ID：空
- CLASS：空
メールアドレス（email）
- NAME：your-email
- VALUE：空
- PLACEHOLDER：example@example.com
- MAXLENGTH：0
- SIZE：0
- ID：空
- CLASS：空
電話番号（Tel）
- NAME：your-tel
- VALUE：空
- PLACEHOLDER：09012345678
- MAXLENGTH：0
- SIZE：0
- AUTOCOMPLETE：tel-national
- ID：空
- CLASS：空
AUTOCOMPLETEの「tel」「tel-national」の違い
国番号を含む完全な電話番号。ブラウザによっては「+81 9012345678」のように、日本の国番号「+81」付きで自動入力されることがあります。
国番号を除いた国内向けの電話番号。
「09012345678」のように、普段私たちが使う形で自動入力されます。
現在のサイトURL（URL）
- NAME：your-url
- VALUE：空
- PLACEHOLDER：https://example.com
- MAXLENGTH：0
- SIZE：0
- AUTOCOMPLETE：url
- ID：空
- CLASS：空
AUTOCOMPLETEの「url」「photo」の違い
ホームページやWebサイトのURL。「御社のホームページURL」「参考サイト」のような欄で使います。
プロフィール写真など、その人を表す画像のURL。
写真そのものをアップロードするのではなく、画像が置いてある場所のアドレスを入力する、という少し特殊な用途です。
ご相談の種類（セレクトボックス）
- NAME：your-consult-type
- OPTIONS：
“” : “選択してください”
ホームページの新規制作
ホームページのリニューアル
保守・運用のご相談
その他 - VALUE：空
- AUTOCOMPLETE：指定しない
- ID：空
- CLASS：空
ご予算（ラジオボタン）
- NAME：your-budget
- グループ化：オフ
- OPTIONS：
〜30万円
30万〜50万円
50万〜100万円
100万円以上
未定 - VALUE：空
ご希望のサービス（チェックボックス）
- NAME：your-service
- グループ化：オフ
- OPTIONS：
デザイン制作
WordPress構築
ドメイン・サーバー取得
SEO対策
アクセス解析の設定
Google Workspaceの導入 - VALUE：空
- 区切り文字：,
打ち合わせ希望日（日付）
- NAME：your-meeting-date
- VALUE：空
- 最小の日付：指定しない
- 最大の日付：指定しない
- ID：空
- CLASS：空
公開希望時期（月）
- NAME：your-launch-month
- VALUE：空
- 最小の月：指定しない
- 最大の月：指定しない
- ID：空
- CLASS：空
参考資料（ファイル）
- NAME：your-file
- ID：空
- CLASS：空
ご相談内容（テキストエリア）
- NAME：your-message
- ROWS：5
- VALUE：空
- PLACEHOLDER：例）現在のサイトがスマートフォンに対応しておらず、リニューアルを検討しています。お問い合わせを増やしたいと考えています。
- MAXLENGTH：0
- AUTOCOMPLETE：指定しない
- ID：空
- CLASS：空
設定したname属性の値を自動送信メールの設定で使用しますが、詳しい設定方法は「自動送信メールの設定」で解説しています。
ブロック設定と高度な設定
ブロック設定の「説明」は、入力欄の下に表示され入力中も消えない案内文です。
その入力欄に関する注意事項やルールを書くのに向いています。
項目の説明は項目名の下に表示され、質問全体への案内に使います。
1つの項目に入力欄が複数あり、それぞれに案内を付けたいときはブロックの説明を使います。
プレースホルダーは入力欄の中に表示され、入力すると消える見本なので、入力例はプレースホルダー、注意事項は説明と使い分けます。
このブロックだけ見た目を変えたいときに、CSSを書き込む場所です。
完了画面の作成
完了画面とは、お問い合わせフォームの送信が完了した後に表示される画面です。
Snow Monkey Formsでは、完了画面は別ページに移動せず、フォームと同じページ内に表示されます。
送信が完了するとフォームがあった場所に完了画面の内容が表示される仕組みです。
なお、お問い合わせフォームのプラグインによっては、送信後に別ページへ移動させる設定ができるものもあります。
完了画面の設定は「完了画面」から行います。
既存のテキスト部分をクリックすると編集できるようになるので、今回は以下の内容に変更します。
お問い合わせいただき、ありがとうございます。
内容を確認のうえ、担当者よりご連絡いたします。
また、右側のサイドバーからテキストサイズやカラー、パディングやマージンなどのデザインに関連する設定ができます。
自動送信メールの設定
お問い合わせフォームを作成する上で、初心者の方が最もハマるポイントが自動送信メールの設定です。
注意すべきポイントをわかりやすく解説していくので安心してください。
管理者宛メール設定
「フォーム設定を開く」をクリックすると右側のサイドバーに表示される「管理者宛メール」から設定します。
各設定項目の説明
お問い合わせを受け取るメールアドレスを入力します。
メールの件名。
メールの本文。
受け取ったメールで「返信」ボタンを押したときの返信先です。
メールの差出人として表示されるメールアドレスです。
メールの差出人として表示される名前です。
設定した内容は以下のとおりです。
- TO（メールアドレス）：example@example.com
- 件名：【うぇぶのみちしるべ】ホームページからのお問い合わせ
- BODY：
ホームページよりお問い合わせがありました。
内容をご確認のうえ、ご対応をお願いいたします。
――――――――――――――――――――
■お名前
{your-name}
■メールアドレス
{your-email}
■電話番号
{your-tel}
■現在のサイトURL
{your-url}
■ご相談の種類
{your-consult-type}
■ご予算
{your-budget}
■ご希望のサービス
{your-service}
■打ち合わせ希望日
{your-meeting-date}
■公開希望時期
{your-launch-month}
■参考資料
{your-file}
■ご相談内容
{your-message}
―――――――――――――――――――― - REPLY-TO（メールアドレス）：{your-email}
- FROM（メールアドレス）：contact@example.com
- 送信者：うぇぶのみちしるべ
BODYには {your-name} のような記載があります。
波かっこ {} の中にname属性で指定した名前を書くと、ユーザーが入力した内容がその部分に差し込まれる仕組みです。
{} を付けずに your-name とだけ書いても反映されないので、必ずこの書き方で記載しましょう。
今回は、例としてフォーム内の項目すべてをBODYに反映させていますが、メールの本文に含めたくない項目があれば削除して使ってください。
FROMにはサイトと同じドメインのメールアドレスを設定してください。
例えばサイトのドメインが「example.com」の場合、「example@gmail.com」のような別ドメインのアドレスではなく、「example@example.com」のようにサイトと同じドメインのアドレスを設定します。
この設定に不備があると、メールが迷惑メールと判定され届かなくなることがあります。
自動返信メール設定
設定した内容は以下のとおりです。
「空」は何も入力しないという意味です。
- TO（メールアドレス）：{your-email}
- 件名：【うぇぶのみちしるべ】ホームページからのお問い合わせ
- BODY：
{your-name} 様
このたびはお問い合わせいただき、ありがとうございます。
以下の内容でお問い合わせを受け付けました。内容を確認のうえ、担当者よりご連絡いたします。
今しばらくお待ちください。
――――――――――――――――――――
■お名前
{your-name}
■メールアドレス
{your-email}
■電話番号
{your-tel}
■現在のサイトURL
{your-url}
■ご相談の種類
{your-consult-type}
■ご予算
{your-budget}
■ご希望のサービス
{your-service}
■打ち合わせ希望日
{your-meeting-date}
■公開希望時期
{your-launch-month}
■参考資料
{your-file}
■ご相談内容
{your-message}
――――――――――――――――――――
※このメールは送信専用のアドレスから自動で送信しています。
心当たりのない場合は、お手数ですがこのメールを破棄してください。
――――――――――――――――――――
〇〇〇〇（会社名・サイト名）
https://example.com
―――――――――――――――――――― - REPLY-TO（メールアドレス）：空
- FROM（メールアドレス）：contact@example.com
- 送信者：うぇぶのみちしるべ
なお、「送信専用のアドレスから送信」と書いた場合、ユーザーが返信しても届かない前提になります。
返信を受け付けたい場合は、この一文を「ご不明な点がございましたら、このメールにご返信ください。」などに差し替えてください。
あわせて「REPLY-TO（メールアドレス）」には返信を受け取るアドレス（例：contact@example.com）を設定してください。
送信者ブロック設定
「送信者ブロック」は、特定のメールアドレスやドメインからの送信を拒否する機能です。
この機能はあらかじめ登録した相手だけを止める仕組みなので、これだけで迷惑メール全般を防げるわけではありません。
広く対策をしたい場合は、reCAPTCHAの設定を併用するのが一般的です。
詳しくは「reCAPTCHAの設定（スパム対策）」で解説しています。
送信者ブロックの使い方
判定に使うメールアドレス欄のname属性を、{}で囲んで入力します。
今回のフォームなら{your-email}となります。
この欄に入力されたアドレスをチェックするという指定になります。
拒否したい相手を入力して「追加」を押します。
書き方は2通りあります。
「spam@example.com」のようにアドレス全体を書くと、そのアドレスだけをブロックします。
「example.com」のように「@」を含めずに書くと、ドメインとして扱われ、そのドメインのアドレスすべてをブロックします。
フォーム設定
フォーム設定では、フォーム全体のデザインや確認画面の有無などを調整することができます。
「フォーム設定を開く」をクリックすると右側のサイドバーに表示される「フォーム設定」から設定します。
設定内容は以下のとおりです。
- 確認画面を使用する：オン
- プログレストラッカーを使用する：オフ
- フォームスタイル：Letter
- 確認ボタンのラベル：確認画面へ
- 戻るボタンのラベル：空（空の場合は「戻る」と表示される）
- 送信ボタンのラベル：空（空の場合は「送信」と表示される）
今どの段階にいるのかを示す進捗表示のことです。
Snow Monkey Formsでは、フォームの上部に「入力 → 確認 → 完了」という3つのステップが並んで表示され、現在の画面が強調される仕組みになっています。
確認画面に進むと「確認」が、送信が終わると「完了」がハイライトされます。
フォームが完成したので「公開」をクリック。
reCAPTCHAの設定（スパム対策）
reCAPTCHAとは？
フォームへの送信が人間によるものか、自動プログラムによるものかをGoogleが判定してくれる仕組みです。
reCAPTCHAを導入する理由は？
フォームからのスパムメールを自動でブロックできるためです。
スパムはプログラムが自動で送ってきます。
サイトの知名度やアクセス数は関係なく、フォームが設置されているページを機械的に見つけて送信してくるため、開設したばかりのサイトにも届きます。
何も対策をしていないと受信箱がスパムメールで埋まり、本当に必要な問い合わせを見落とすことになります。
reCAPTCHAを導入しておけば、このようなスパムメールを対策することができます。
reCAPTCHAは無料で導入できるの？
導入可能です。
ただし、無料で判定できるのは月10,000件までです。
この10,000件はサイトごとではなく、組織（アカウント）単位の合計数になります。
個人サイトのお問い合わせフォームであれば、まず超える可能性は低いです。
無料枠を超えた場合の動作や料金については、Google公式のドキュメントをご確認ください👇
reCAPTCHA の課金に関する情報 – Google Cloud
reCAPTCHA導入方法
reCAPTCHAの設定は、必ずサイトを本番環境に公開したあとに行ってください。
reCAPTCHAは、キーの発行時に登録したドメインでしか正しく動作しないため、ローカル環境で設定するとフォームが送信できなくなります。
サイトキー（ID）・シークレットキーを取得
https://console.cloud.google.com/ にログインします。
サイドバーから「セキュリティ」>「Fraud Defense」をクリック。
「プロジェクトの作成」をクリック。
設定内容は以下のとおりです。
- プロジェクト名：example-com
- プロジェクト ID：デフォルトのまま
- 親リソース：組織なし
プロジェクト名は、サイトドメインとしましたがお好きな名前で構いません。
「親リソース」は「組織なし」のままで進めてください。
「作成」をクリック。
reCAPTCHA Enterprise APIの「有効にする」をクリック。
「reCAPTCHA 保護の設定」をクリック。
設定内容は以下のとおりです。
- 表示名：うぇぶのみちしるべ
- アプリケーションの種類：ウェブ
- ドメインリスト：example.com
- ドメインの所有権の証明を無効にする：デフォルトのまま
- このキーが Accelerated Mobile Pages（AMP）に対して機能するようにする：デフォルトのまま
「表示名」はサイトの名前としています。
ドメインリストにはあなたのサイトのドメインを追加してください。
「Create key」をクリック。
「キーを編集」をクリック。
「ID」と「Secret key」をコピーします。
「Secret key」がコピーできない場合は「Reveal」をクリックするとコピーできるようになります。
サイトキー（ID）とシークレットキーの取得が完了しました。
取得したサイトキー（ID）・シークレットキーを設定
WordPressの管理画面から「Snow Monkey Forms」>「reCAPTCHA」をクリック。
設定内容は以下のとおりです。
- Site Key：取得した「ID」を入力
- Secret Key：取得した「Secret key」を入力
「変更を保存」をクリック。
reCAPTCHA バッジについて
reCAPTCHAが正常に導入されるとサイトの右下にバッジが表示されます。
バッジを消したい場合は、以下の手順で非表示にすることができます。
reCAPTCHA よくある質問 – Google for Developers
CSSでバッジを非表示にする
お使いのテーマの手順に沿って以下のCSSを追加してください。
.grecaptcha-badge { visibility: hidden; }reCAPTCHAの表記をユーザーフローに入れる
フォームの送信ボタン付近など、ユーザーが操作する流れの中で目に入る場所に次のHTMLコードを入れます。
このサイトはreCAPTCHAによって保護されており、Googleの
<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と
<a href="https://policies.google.com/terms">利用規約</a>が適用されます。「カスタムHTML」を利用すると簡単にHTMLコードを入れることができます。
以上の手順でreCAPTCHA バッジを非表示にすることができます。
作成したお問い合わせフォームの使い方
お問い合わせページを作成
WordPressの管理画面から「固定ページ」>「固定ページを追加」をクリック。
設定内容は以下のとおりです。
- タイトル：お問い合わせ
- スラッグ：contact
タイトルとスラッグはお好きな名前に設定してください。
お問い合わせフォームの設置
本文エリアをクリックすると「+」ボタンが表示されるのでクリックします。
そこに「Snow Monkey Form」が表示されていればクリック。
表示されていなければ「すべて表示」をクリックして、左側のサイドバーから「Snow Monkey Form」を探してクリックします。
「フォームを選択してください」をクリックして、作成した「お問い合わせフォーム」を選択します。
本文エリアの端の方をクリックするとお問い合わせフォームが表示されます。
「公開」をクリックしてお問い合わせページを公開して完了です。
お問い合わせフォームのテスト
お問い合わせフォームが完成したら最低限以下のテストを実施しましょう。
- バリデーションは機能しているか（必須項目を空にしたり、メールアドレスを間違えた形式で入れたりしたときエラーが出るか）
- 管理者宛メールが届くか
- 自動返信メールが入力者に届くか
- 迷惑メールフォルダにメールが届いてないか
- 管理者宛メールで「返信」を押すと問い合わせした人宛てになるか
- スマホから送信できるか
- ログアウトした状態で送信できるか
- シークレットウィンドウから送信できるか
- メールの本文・差出人名・件名が正しいか
公開前にフォームの動作を確かめたい場合は、ローカル環境でテストするのがおすすめです。
Localアプリに内蔵されている「Mailpit」を使えば、実際の宛先にメールを送ることなく管理者宛メールと自動返信メールの内容を確認できますよ。
詳しい手順は、以下の記事で解説しています👇
【Q&A】Snow Monkey Formsに関する「よくある質問」
【まとめ】Snow Monkey Formsを使ったフォームの作り方
お問い合わせフォームプラグインのSnow Monkey Formsについて解説しました。
まとめ
- Snow Monkey Formsは、ブロックエディタ対応で直感的かつ簡単にお問い合わせフォームが作れる
- 自動送信メールの「FROM」は、サイトドメインと同じドメインのメールアドレスを使う
- スパム対策としてreCAPTCHAを導入する
- reCAPTCHAの導入はローカル環境ではなく本番環境（登録したドメインのサイト）で行う
- フォームが完成したら必ずテストを実施する
初心者の方がフォーム作成で最もハマるポイントは自動送信メールの設定です。
本記事では、設定値やメール本文の例までそのまま使える形で紹介しているので、手順どおりに進めればスムーズにフォームが完成します。
フォームのテストをまだ行っていない場合はローカル環境で確認しておくと安心です。
フォームが完成したら次はサイトの公開です。
それぞれ以下の記事で解説しているので、ぜひ参考にしてください👇