フォームの検証ガイドを使用すると、フォームのフィールドに入力されたデータを指定し、検証することで、入力の一貫性、正確性、完全性を確保できます。具体的には、フォームの検証ガイドは以下を提供します。
- フォーム内の各入力フィールドに関するガイダンスと想定される入力内容に関する追加情報。
- 入力された情報がそのフィールドに必要な基準を満たしているかどうかを確認するための入力検証。
フォーム内の個々のフィールドに、次の形式を要求するように設定できます。
- メールアドレス。これは次の形式である必要があります。
username@domain.domainsuffix例：jane.doe@example.com - 電話番号。これにより、スペース、ハイフン、ピリオド、括弧が使用可能になります（例：123-456-7890）。番号の先頭にプラス記号 (+) を付けて場所を示すこともできます（米国の場合は +1）。+1 (123) 456 7890
- 日付。これは、MM/DD/YYYY、DD/MM/YYYY、MM-DD-YYYY、DD-MM-YYYY、DD-MM-YYY、YYYY-MM-DDのいずれかの形式である必要があります。
- URL。これは標準的なリンク形式に従う文字列でなければなりません。
- 文字の長さ。ユーザーは、応答の最低文字数が必要か、または一定文字数未満である必要があるかを選択できます。
-
数値。このルールは、入力が数値であることを確認します。このルールには、小数点を許可するオプションがあります。
権限
ガイドの役割には、ガイド作成者、ガイド公開者、およびガイドコンテンツ編集者という3つがあり、それぞれ権限が異なります。管理者ユーザーは以下のすべての権限を持っています。
- ガイド作成者の役割の権限を持つPendoユーザーは、ゼロからガイドを作成および編集することができます。また、公開されていない既存のガイドを編集することもできます。
- ガイド作成者またはガイドコンテンツ編集者の役割の権限を持つPendoユーザーは、レイアウトやテンプレートからガイドを作成および編集することができます。
- ガイド公開者の役割の権限を持つPendoユーザーは、ガイドを公開し、スケジュールすることができます。
- すべてのガイドの役割は、ドラフト、ステージング、無効のガイドを削除することができます。
必要に応じて、以下のガイド権限を組み合わせてカスタムユーザーの役割を作成することもできます。
- ゼロからガイドを作成、編集する。
- レイアウトからガイドを作成および編集する。
- ガイドを公開する。
- 公開ガイドを編集、削除する。
- ドラフト、ステージング、無効のガイドを削除する。
詳細については、「役割と権限」を参照してください。
フォームの検証のエンドユーザー体験
訪問者が、上記いずれかの形式を必須とするように設定したフィールドを選択すると、フォームの検証ガイドを作成する際に指定したヘルプテキスト（例：「メールアドレスを入力してください」）とルールテキスト（例：「有効なメールアドレスである必要があります」）が表示されます。
フォームの検証は、訪問者がそのフィールドを読み終えるまで、エントリーの有効性に関するフィードバックを提供しません。訪問者が間違った形式で入力した後にEnterキーを選択するか、フィールド以外の場所を選択すると、フィールドの境界線が赤に変わります。
訪問者が修正フィールドを再選択すると、ルールテキストが赤色でハイライトされ、横に十字（X）アイコンが表示されます。訪問者が有効な入力を入力すると、ルールテキストのハイライトが緑色に変わり、その横にチェックマークが表示されます。
フォームの検証を作成する
まず、フォームの検証ガイドの作成を開始します。
- ［ガイド］>［フォームの検証］に移動し、［フォームの検証を作成］を選択します。これにより［フォームの検証を作成］ウィンドウが開きます。
- サブスクリプションに複数のアプリケーションがある場合は、［アプリケーション］ドロップダウンメニューからそのアプリケーションを選択してください。
- フォームの検証ガイドの名前を［フォーム名］に入力してください。
- ウィンドウの右下にある［作成］を選択します。これにより、新しく作成されたフォームの検証ガイドの詳細ページが開きますが、まだコンテンツは含まれていません。
新しく作成したフォームの詳細ページには、フォームの検証を追加するまでは何も表示されません。フォームの検証を追加するには、［自分のアプリで編集］を選択し、アプリケーションのURLを入力して、［デザイナーを起動］を選択します。これにより、アプリケーション上にビジュアルデザインスタジオ（Visual Design Studio）が新しいタブで開きます。
- ［フォームを編集］ウィンドウで、［+フォームを追加］を選択します。これにより選択モードが開きます。
- フォーム入力フィールド（フォームコンテナ）を含むアプリケーション領域を選択してください。マウスを画面上で動かすと、ページ上の領域を囲む赤い点線の枠が表示されるので、選択範囲を確認できます。これにより、［フォームを編集］ウィンドウに［+フィールドを追加］オプションが表示されます。
- ［フォームを編集］ウィンドウで［+フィールドを追加］を選択します。これで選択モードが再び開きます。
- フォーム内の入力フィールドを選択します。これにより［フィールド設定］ウィンドウが開きます。フォームコンテナ内でマウスを動かすと、フォーム要素を囲む赤い点線の枠が表示され、どのフィールドが選択されているかを確認できます。
- 入力フィールドにわかりやすい名前を入力します。［フィールド設定］ウィンドウの上部で、編集するフィールド名にカーソルを合わせて選択します。
- 入力フィールドにヘルパーテキストを追加してください。これは訪問者がフォームフィールドを選択する際に表示されるテキストです。例えば、メールアドレス入力欄にフォームの検証機能を追加する場合、ヘルパーテキストには「メールアドレスを入力してください」といった指示や、「jane.doe@example.com」といったヒントテキストが含まれる可能性があります。
- メールアドレス、電話番号、日付でフィールドを検証するルールを選択してください。
- オプションとして、ルール本文を編集してください。これは訪問者に、どのような基準を満たす必要があるか、そしてその基準を満たしているかどうかを知らせるテキストです。例えば、メールアドレス入力欄にフォームの検証を追加する場合、ルールテキストには「有効なメールアドレスを入力してください」といった文言が含まれるでしょう。
- ［フィールド設定］ウィンドウの右下隅にある［完了］を選択します。
- オプションとして、フォームの検証を追加したい各フィールドごとにステップ8から14を繰り返します。
- ［フォームを編集］ウィンドウの右下隅にある［完了］を選択します。
- オプションとして、フォームの検証をプレビューすることもできます。ページ上部のアクションバーから［プレビュー］を選択し、プレビューを表示したい場所（新しいタブ、同じタブ、新しいウィンドウ）を選択し、［プレビューを起動］します。機能テストが完了したら、アクションバーの右上隅にある［プレビューを終了］を選択してください。
作業が完了したら、ページ右上隅の［保存］を選択し、［終了］を選択して、フォームの検証ガイドを保存し、ビジュアルデザインスタジオを閉じます。
フォームの検証ガイドを一覧表示する
既存のフォームの検証ガイドはPendoのフォームの検証ページに記載されています。フォームの検証ガイドの一覧を表示するには、［ガイド］>［フォームの検証］に移動してください。この画面では、以下の操作を行うことができます。
- ページ上部のドロップダウンフィルターを使用して、アプリケーションとステータスで既存のフォームの検証ガイドを絞り込むことができます。
- フィルターセクションの右上にある［検索］バーを使って、特定のフォームの検証ガイドを検索します。
- 表の中からフォームの検証ガイドの名前を選択して、フォームの検証ガイドを開きます。
- 表の列（フォーム名、アプリ、ステータス、セグメント、ページ）に基づいて、フォームの検証ガイドを並べ替えます。
- テーブルの［ステータス］列にあるドロップダウンメニューを使用して、各フォームの検証ガイドのステータスを変更します。
フォームの検証フィールドを確認する
フォームの検証ガイドを作成すると、検証フォームガイドに含まれるフィールドの一覧が表示されます。［ガイド］>［フォームの検証］のリストから、作成したフォームの検証ガイドを見つけて開いてください。ここから、［フィールド］テーブルには、検証機能を含むすべてのフィールドが一覧表示されます。
- フィールド名。
- フィールド用のCSSセレクター。
- フィールドに追加されるヘルパーテキスト。
- フィールドの検証に使用されるルール。
フォームの検証のプレビューと公開
ビジュアルデザインスタジオからフォームの検証をプレビューできます。
- ［ガイド］>［フォームの検証］のリストからフォームの検証ガイドを見つけて開きます。
- ［自分のアプリで編集］を選択します。
- アプリケーションのURLを入力し、［デザイナーを起動］を選択します。これにより、アプリケーション上でビジュアルデザインスタジオが起動されます。
- ページ上部のアクションバーから［プレビュー］を選択し、ビジュアルデザインスタジオを新しいタブ、同じタブ、または新しいウィンドウで起動するかどうかを選択します。
- ［プレビューを起動］を選択してください。
- 完了したら、ページの右上隅にある［保存］を選択し、次に［終了］を選択します。