メール欄
安心してメールアドレスを収集できます。お問い合わせフォームから、二重入力確認、ドメイン制限、ブラウザのオートコンプリート機能を備えた登録まで、メールアドレスフィールドは組み込みの検証機能と入力ミス防止機能により、正確なメールアドレス収集を実現します。
スマート検証によるプロフェッショナルなメール収集
完璧なもの:
あらゆるユースケースに対応する強力な機能
✅ メール確認フィールド
二重入力の誤入力防止:
ユーザーがメールアドレスを再入力するための「メールアドレス確認」フィールドを2つ追加します。これにより、入力ミスを防ぎ、正確なメールアドレス収集が可能になります。
使い方:
- プライマリメールフィールドが最初に表示されます
- 「メールの確認」フィールドが下に表示されます
- システムは両方のエントリが一致することを検証します
- 視覚的なフィードバックで一致ステータスが表示されます(緑 = 一致、赤 = 不一致)
- メールアドレスが一致するまでフォームは送信されません
確認を使用する理由:
- コストのかかるタイプミスを防止([メール保護] gmail.comと比較
- 重要なメールの配信を確実にする
- 直帰率を下げる
- 重要なフォームに関する専門的なベストプラクティス
- ユーザーは自分のミスに気づく
パーフェクト:
- アカウント登録(パスワードリセットメール)
- 注文確認(領収書の配送)
- イベント登録(チケットメール)
- 支払い通知
- メールの正確性が重要となるあらゆるフォーム
ユーザー体験:
リアルタイム検証と色分けされたフィードバック。ユーザーはフォームの送信を待たずに、メールアドレスが一致しているかどうかをすぐに確認できます。
🏢 ドメイン制限
特定の電子メールドメインをホワイトリストに追加:
「許可されたメールドメインを制限する」を有効にすると、特定のドメインからのメールのみを許可できます。企業専用のフォーム、プライベート登録、またはアクセス制限のあるメールなどに最適です。
使い方:
- 許可されたドメインを入力してください(1行に1つずつ)
- システムは送信時にメールドメインを検証します
- 一致するドメインのみが受け入れられます
- 拒否されたドメインのエラーメッセージをクリアする
一般的な使用例:
会社メールのみ:
社内フォーム、従業員アンケート、スタッフ登録には `@yourcompany.com` のメールのみを許可します。
教育機関:
学生専用のフォーム、キャンパス アンケート、学術登録については、`@university.edu` に制限してください。
複数のパートナー:
パートナー ポータルまたは B2B フォームでは、`company1.com`、`company2.com`、`partner3.com` などの複数のドメインを許可します。
検証済みの組織:
メンバー限定コンテンツ、限定オファー、検証済みアクセスのために特定の組織をホワイトリストに登録します。
例:
- 従業員のフィードバック: `yourcompany.com` のみ
- 学生ポータル: `school.edu`、`university.edu`
- パートナー登録: `partner1.com, partner2.com, partner3.com`
- メンバーアクセス: `org1.org、org2.org、nonprofit.org`
メリット:
- 正当な提出を保証する
- 不正アクセスを防止
- 組織所属を検証する
- 公開メールからのスパムを削減
- 制限されたフォームへのアクセスを制御する
🔄ブラウザのオートコンプリート
より速いメール入力:
「ブラウザの候補を許可」を有効にすると、ブラウザが以前使用したメールアドレスを提案します。ユーザーは保存したメールアドレスをワンクリックで選択できます。
使い方:
ブラウザはメールフィールドを認識します
保存したメールアドレスを提案します
ユーザーが自動入力の提案をクリックする
即時フォーム完了
メリット:
フォームの完了が速くなります(1 回のクリックと入力)
タイプミスを削減(手動入力不要)
ユーザーエクスペリエンスを向上させる
完了率の向上
モバイルで特に便利
プライバシーに配慮:
ブラウザが保存する内容をユーザーが制御します。オートコンプリートはブラウザのプライバシー設定とユーザーの設定を尊重します。
有効にする場合:
お問い合わせフォーム(リピーター)
ニュースレターの登録(リピーター)
クイック問い合わせフォーム
繰り返し使用される公共フォーム
無効にする場合:
機密性の高い登録
共有コンピュータのシナリオ
高セキュリティフォーム
メールアドレスを手動で入力する必要がある場合
✉️ 組み込みのメール検証
自動フォーマットチェック:
メールフィールドにはHTML5検証が組み込まれています。ブラウザは送信前にメール形式を自動的に検証します。
検証ルール:
`@` 記号を含める必要があります
`@` (ユーザー名) の前にテキストが必要です
`@` の後にドメインが必要です
有効なドメイン拡張子(.com、.org など)が必要です
スペースや無効な文字は使用できません
リアルタイムのフィードバック:
ブラウザには、「メールアドレスに '@' を含めてください」や「'@' の後にメールアドレスを入力してください」などの検証メッセージが表示されます。
よく発生するエラー:
`@` がありません: `useremailcom` ✗
ドメインがありません: `user@` ✗
拡張子がありません: `user@domain` ✗
スペース: `user @email.com` ✗
無効な文字: `user@@email.com` ✗
📝 デフォルトのメールアドレス
メールアドレスの事前入力:
フォームの読み込み時に表示されるデフォルトのメールアドレスを設定します。サポートメール、デフォルトの連絡先、デモフォームなどに便利です。
使用事例:
- コールバックリクエストのサポートメールを事前入力する
- メール形式の例を表示([メール保護])
- データベースから既知のユーザーのメールアドレスを設定する
- 組織のデフォルトの連絡先
編集可能:
ユーザーはデフォルト値を簡単に変更または置き換えることができます。これは出発点であり、固定された値ではありません。

🎯 ユーザーエクスペリエンスの向上
スマートな機能が内蔵:
- メール専用キーボード – モバイルデバイスでは、@ キーと . キーを備えた最適化されたキーボードが表示されます。
- オートコンプリート属性 – メールフィールドの適切な HTML5 オートコンプリート
- 空白のトリム – 偶発的なスペースの自動削除
- 小文字変換 – 一貫性を保つために小文字に変換するオプション
- 視覚的な検証 – 確認マッチングのための色分けされたフィードバック
- 明確なエラーメッセージ – 具体的な検証フィードバック
- 必須検証 – メールの入力を必須にする
- ヘルプテキストのサポート – メール形式のヒントを追加
- カスタムCSSクラス – カスタムスタイルを適用する
- アクセシビリティサポート – ARIAラベル、スクリーンリーダー対応
- プレースホルダーテキスト – メール形式のヒントを表示
- コピー&ペースト対応 – メールアドレス全体をきれいに貼り付けられます
🔀 条件付きロジック
動的メールフィールドの表示:
他のフォームの値に基づいてメールフィールドを表示または非表示にします。関連する場合にのみメールコレクションを表示します。
高度なロジックルール:
- ANDロジック – すべての条件を満たす必要がある
- ORロジック – 任意の条件でアクションをトリガーできます
- 8 つの演算子 – 等しい、等しくない、より大きい、より小さい、含む、空、など
使用事例:
- 顧客タイプが「ビジネス」の場合のみ「ビジネスメール」を表示します
- ユーザーが「予備の連絡先を追加」をチェックすると「予備のメールアドレス」が表示されます
- 登録タイプが「法人」の場合、「会社のメールアドレス」を表示する
- 連絡先設定が「電話のみ」の場合、「個人用メール」を非表示にする
3ステップの簡単セットアップ
数分でメールフィールドを準備しましょう
メールフィールドを追加
基本フィールドセクションからメールフィールドをフォームにドラッグ アンド ドロップします。
確認を有効にする(オプション)
「確認フィールドを追加する」をチェックすると、二重入力の検証が必須となり、重要なフォームでの入力ミスを防止できます。
制限を設定する(オプション)
会社専用のメールに対してドメイン制限を有効にし、利便性のためにブラウザのオートコンプリートをオンにして、必要に応じてデフォルト値を設定します。
???? これで完了です。スマート検証とタイプミス防止機能を備えたメールフィールドが準備完了です。
実際のアプリケーション
フィールドオプションを完了する
基本構成
- フィールドラベル – メールフィールドの上に表示されるタイトル
- 説明/ヘルプテキスト – ユーザー向けの追加ガイダンス
- 必須フィールド – メールアドレスの入力を必須にする
- プレースホルダテキスト – ユーザーが入力する前に表示されるヒント(例:「[メール保護]")
デフォルト値
デフォルト値 – フォームの読み込み時に事前に入力されるメールアドレス
メール確認
- 確認フィールドを追加 – 入力ミスを防ぐためにユーザーがメールアドレスを再入力する必要がある2番目のフィールドを追加します。
- 両方のエントリが一致することを自動的に検証します
- リアルタイムで色分けされたフィードバックを表示
- メールアドレスが一致するまでフォームの送信を禁止します
ブラウザの統合
ブラウザの候補を許可 – ブラウザが以前使用したメールアドレスを提案し、より早く完了できるようにします。
ドメイン制限
許可されたメールドメインの制限 – 特定のドメインからのメールアドレスのみを許可します(例:会社のメールのみ)
- 許可されたメールドメイン – 許可されたドメインをそれぞれ新しい行に入力します(@記号なし)
- 例: `gmail.com`、`outlook.com`、`yourcompany.com`
- 1行に1つのドメイン
- システムは送信時にドメインを検証します
条件付きロジック
- 条件付きロジックを有効にする – 条件に基づいて表示/非表示を切り替える
- ロジックタイプ
- すべての条件を満たす必要があります(AND)
- いずれかの条件を満たすことができる(OR)
- 条件ルール
- 表示/非表示 – 実行するアクション
- フィールド – チェックするフィールド
- 演算子 – 等しい、等しくない、含む、より大きい、より小さい、空、空でない
- 値 – 比較値
- 複数の条件 – 無制限のルールを追加
高度なオプション
- 隠しフィールド – フィールドを非表示にしますが、送信内容にメールアドレスを含めます
- カスタムCSSクラス – カスタムスタイルを適用する
- アクセシビリティ属性 – スクリーンリーダー用のARIAラベル
- テキスト変換 - オプションの小文字変換
- 空白のトリミング – 自動スペース削除

当社のメールフィールドを選択する理由
✅ タイプミス防止 –
確認フィールドにより正確なメール収集が可能
✅ ドメイン制限 –
アクセスを制御するために特定のドメインをホワイトリストに登録する
✅ ブラウザのオートコンプリート –
保存したメールの候補で入力が高速化
✅ 組み込み検証 – HTML5メールフォーマットの自動チェック
✅ モバイル向けに最適化 – モバイルデバイス上のメール専用キーボード
✅ 視覚的フィードバック – 確認のためのリアルタイムの一致検証
✅ スパム削減 – ドメイン制限により偽メールを防止
✅ 使いやすい – 明確な検証メッセージとヒント
✅ プローブとオシロスコープとの統合 – すべてのフォーム機能とシームレスに連携
よくある質問
Q: メール確認フィールドの目的は何ですか?
ユーザーがメールアドレスを再入力する必要がある「メールアドレスの確認」フィールドを追加します。 [メール保護] gmail.comの代わりに、両方のフィールドが一致している必要があります。
Q: ドメイン制限はどのように機能しますか?
有効にして、yourcompany.com のように許可するドメイン(1行に1つずつ)を入力してください。これらのドメインで終わるメールのみが受信されます。
Q: 複数のドメインを許可できますか?
はい。company1.com、company2.com、partner.comのように、1行に1つずつ複数のドメインを入力してください。どのドメインでも受け付けられます。
Q: すべてのフォームに電子メールによる確認を使用する必要がありますか?
登録、注文、イベントチケットなどの重要なフォームには使用してください。シンプルなお問い合わせフォームには使用せず、ユーザーの操作を迅速化しましょう。
Q: 「ブラウザの提案を許可する」は何をしますか?
ブラウザのオートコンプリートが有効になり、ユーザーは手動で入力する代わりに、保存した電子メール アドレスから選択できるようになります。
Q: ユーザーは電子メールの検証をバイパスできますか?
いいえ。ブラウザは電子メールの形式ルールを自動的に適用し、user@ や @domain.com などの誤った形式をブロックします。
Q: 会社のメールのみに制限するにはどうすればよいですか?
「許可するメールドメインを制限する」をオンにして、会社のドメインを入力してください。そのドメインを使用したメールのみが受信されます。
Q: 確認フィールドは同じ行に表示されますか?
いいえ。メインのメールフィールドのすぐ下に「メールの確認」というラベルとともに表示されます。
Q: モバイルにはどのようなキーボードが表示されますか?
モバイル デバイスには、@、ピリオド、一般的なドメインのショートカットを備えた電子メールに適したキーボードが表示されます。
Q: 条件付きロジックでメール フィールドを使用できますか?
はい。「空である」、「空ではない」、「等しい」などの条件を使用して、ユーザーの選択に基づいてメールフィールドを表示または非表示にすることができます。
Q: ドメインが一致しない場合はどうなりますか?
ユーザーには、「メールドメインが許可されていません。承認されたドメインを使用してください。」などのメッセージが表示されます。
Q: セキュリティ上の理由から、オートコンプリートを有効にする必要がありますか?
状況によります。公開フォームでは利便性を考慮し有効にしてください。共有システムや機密性の高いシステムでは、手動入力が必要な場合に無効にしてください。