DEBUG · 必須入力と入力形式の検証
お問い合わせフォームの
動きを、その場で確かめる
お名前・会社名・メールアドレス・電話番号の 4 項目について、必須チェックと形式チェックがどう働くか、 そして実際の送信が正しく届くかを 1 画面で確認できます。入力するたびに右側のパネルへ判定結果と送信内容が映ります。
- Fields
- 4 項目
- Required
- お名前・メール
- Format
- メール・電話
- Submit
- CMS へ実送信
Form under test
お問い合わせフォーム
フォームの定義を読み込んでいます…
テストデータをワンクリックで入力
Validation rules
項目ごとの判定ルール
この表は、上のフォームが実際に使っている判定のとおりに書いています。項目の追加や必須の切り替えは CMS 管理画面のフォーム編集から行え、フォームには自動で反映されます。
| 項目 | キー / 種類 | 必須 | 合格の条件 | NG のときの表示 |
|---|---|---|---|---|
| お名前 | name · text | 必須 | 空欄・空白のみは不可。100文字以内 | お名前は必須です |
| 会社名 | company · text | 任意 | 空欄可。入力時は100文字以内 | 100文字以内で入力してください |
| メールアドレス | email · email | 必須 | 「@」の前後に文字があり、ドメインに「.」を含む形式 | メールアドレスの形式が正しくありません |
| 電話番号 | phone · tel | 任意 | 空欄可。入力時は数字10〜11桁 (ハイフン・括弧・空白は無視) | 電話番号は数字10〜11桁で入力してください |
- 判定のタイミング
初期設定では入力中に随時判定します。欄から離れたとき (blur) と送信時にも必ず判定し、ログに記録します。 - 送信の可否
1 件でも NG があれば送信は止まり、最初のエラー項目に自動でフォーカスします。前後の空白は送信時に取り除きます。 - ブラウザ標準チェック
切り替えを ON にすると、ブラウザ自身の必須・メール形式チェックが先に動きます。独自チェックとの違いを見比べられます。
How to use
確認の手順
- 01
接続状態を見る
フォーム右上のバッジが「接続OK」なら、フォームの定義が管理画面から正しく読み込まれています。「404」や「接続エラー」のときは、右側パネルの Connection とログで原因を確認できます。
- 02
テストデータを入れる
フォーム下部の 4 つのボタンで、空欄・形式不正・正しい入力をワンクリックで再現できます。もちろん手入力でも構いません。
- 03
判定を確かめる
各項目の右上に OK / NG が出ます。右側パネルの Field state には、項目ごとの値・判定・エラーメッセージが同時に表示されます。
- 04
送信して結果を見る
エラーが残っていれば送信は止まります。すべて OK なら実際に送信され、サーバーの応答 (HTTP ステータスと本文) が Last response に記録されます。届いた内容は CMS 管理画面の「お問い合わせ」で確認できます。
送信テストが済んだら、CMS 管理画面の「お問い合わせ」でデータの到着と通知メールの設定を確認してください。
検証フォームへ戻る