> ## Documentation Index > Fetch the complete documentation index at: https://docs-dev-chore-events-autoupdate.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. > Forms を使用してレンダリングできる利用可能なノードと入力フィールドコンポーネントについて説明します。 # ノードとコンポーネント Forms では、フィールド、ブロック、ウィジェットなど、ユーザーがフォームを操作するためのノードやコンポーネントを追加できます。さらに、コンポーネントに入力されたデータは、フォームやフロー内で参照できます。

フォームノード

フォームノードには、Start、Step、Flow、Router、Ending screen の5種類があります。これらのノードは、フォームの構造においてそれぞれ特定の役割を担っています。 Dashboard > Forms > Form Editor

ステップノード

ステップノードは、フォームを視覚的に表したものです。ユーザーがデータを入力できるフィールド、ブロック、ウィジェットなど、任意の数のコンポーネントを含めることができます。 Dashboard > Foms > ステップノード

フィールドコンポーネント

フィールドは、Forms でユーザーが情報を入力するための UI コンポーネントです。 Dashboard > Forms > Fields

フィールド設定

フィールドには、要件に合わせて設定できる既定の項目がいくつかあります。 既定のフィールド設定は次のとおりです。 | 設定 | 説明 | | - | - | | ID | 一意の ID | | ラベル | ラベルの表示/非表示 | | 必須 | 入力値が必須 | | ヒントテキスト | ヒントテキストを表示 | | プレースホルダーテキスト | ユーザーに表示されるテキスト | | デフォルト値 | ユーザーに表示されるデフォルト値 | | 一時的 | データマスクの有効/無効 |

フィールドの検証ルール

| 設定 | 説明 | | - | - | | 最小長 / 最大長 | 入力値の長さを制限します。 | | 最小値 / 最大値 | 数値の範囲を制限します。 |

Formsで利用できるフィールド

利用可能なフィールドと、それぞれの固有の設定およびデータ出力型は次のとおりです。 標準入力では、ユーザーは任意の文字列を入力できます。
テキストフィールドの設定
テキストフィールドの設定は次のとおりです。 | 設定 | 説明 | | - | - | | 複数行 | 複数行のテキスト入力を有効にします。 |
テキストフィールドの出力値
テキストフィールドの出力値のデータ型は `string` です。 ```json lines theme={null} { "text_field_id": "Auth0" } ``` 標準入力では、ユーザーがメールアドレスを文字列として入力できます。
メールフィールドの出力値
メールフィールドの出力値のデータ型は`string`です。 ```json lines theme={null} { "email_field_id": "username@domain.com" } ``` 標準入力では、ユーザーは電話番号を入力できます。
電話フィールドの設定
電話フィールドの設定は次のとおりです。 | Settings | Description | | - | - | | 国選択 | 国選択の有効 / 無効を切り替えます。既定では、ユーザーの IP アドレスに基づく所在地が表示されます。 | | フィルタのプレースホルダーテキスト | 国検索ウィンドウでユーザーに表示されるテキスト。 |
電話フィールドの出力値
電話フィールドの出力値のデータ型は、`string`、または国選択が有効な場合は `object` です。 電話フィールドの出力データ型の値が `string` の場合: ```json lines theme={null} { "phone_field_id": "8005550175" } ``` 電話フィールドの出力データ型の値は、`object`です: ```json lines theme={null} { "phone_field_id": { "national_number": "8005550175", "national_format": "(800) 555-0175", "international_number": "+18005550175", "international_format": "+1 800-555-0175", "country_code_iso": "US", "country_code_number": "1" } } ``` ユーザーが単一または複数の選択肢から値を選択できる標準入力です。
Choice フィールドの設定
Choice フィールドの設定は次のとおりです。 | Settings | Description | | - | - | | 複数選択 | 複数の選択肢を有効にします。 | | その他 | ユーザーが独自の選択肢を入力できるようにします。 | | Advanced > Internal values | 各選択肢に内部値を割り当てます。 | | Advanced > Bulk edit | ラベルと各選択肢の内部値を一括編集します。 |
Choice フィールドの出力値
Choice フィールドの出力値のデータ型は、`string`、または複数選択が有効な場合は `array of strings` です。 `string` としての Choice フィールド出力値: ```json lines theme={null} { "choice_field_id": "Option A" } ``` 選択フィールドの出力データ型の値は `array of strings` です: ```json lines theme={null} { "choice_field_id": ["Option A", "Option B"] } ``` ユーザーが画像の選択肢を単一または複数選択できる標準入力です。
カードフィールドの設定
カードフィールドの設定は次のとおりです。 | 設定 | 説明 | | - | - | | 複数選択 | 複数の選択肢を有効にします。 | | ラベルを非表示 | カードのラベルを非表示にします。 | | Advanced > Internal values | 各選択肢に内部値を割り当てます。 |
カードフィールドの出力値
カードフィールドの出力値のデータ型は、`string`、または複数選択が有効な場合は `array of strings` になります。 `string` としてのカードフィールドの出力データ型の値: ```json lines theme={null} { "card_field_id": "Option A" } ``` cards フィールドは、データ型の値を`array of strings`として出力します。 ```json lines theme={null} { "card_field_id": ["Option A", "Option B"] } ``` 標準入力では、ユーザーはURLを入力できます。
URL フィールドの出力値
URL フィールドの出力値のデータ型は文字列です: ```json lines theme={null} { "url_field_id": "https://auth0.com" } ``` ユーザーがパスワードや秘密の値を入力できる標準的な入力欄です。
パスワードフィールドの設定
パスワードフィールドの設定は次のとおりです。 | Settings | Description | | - | - | | 複雑なパスワードを必須にする | パスワードには、大文字、小文字、記号、数字を含める必要があります。 | | NIST ガイドラインを適用する | パスワードは 8 文字未満にはできません。また、過去の漏えいデータに含まれるパスワード、辞書語、同じ文字の繰り返しや連続する文字列、内容に関連する語句は使用できません。 | | 強度メーターを追加する | パスワード入力の強度を示すため、赤・黄・緑のスケールを持つグラフィカルなメーターがパスワードフィールドの下に表示されます。 | | ハッシュ化 | 入力値をブラウザー内で直接ハッシュ化するためのアルゴリズムを選択します。 |
パスワードフィールドの出力値
パスワードフィールドの出力値のデータ型は、マスクされた `string` です。 ```json lines theme={null} { "password_field_id": "███" } ``` 決済プロバイダーを使用して、ユーザーが支払い情報を入力できる標準入力フィールドです。支払いは Ending ノードに到達する前に処理されます。
支払いフィールドの設定
支払いフィールドの設定は次のとおりです。 | Settings | Description | | - | - | | Payment type | 1 回限りの支払い (Charge) または継続課金 (Subscription) のいずれかを選択します。 | | Amount | 1 回限りの支払い (Charge) の金額を指定します。 | | Currency | 1 回限りの支払い (Charge) の通貨を指定します。 | | Subscription action | 既存のサブスクリプションを新規作成するか、更新するかを選択します。 | | Customer action | 顧客を新規作成するか、既存の顧客を更新するかを選択します。 | | Display options | カード番号、有効期限、セキュリティコードのラベルとトラストマークの表示・編集を行います。 |
支払いフィールドの出力値
支払いフィールドの出力値のデータ型は、送信後フローでは `string` または `object` です。 `string` としての支払いフィールドの出力値のデータ型: ```json lines theme={null} { "payment_field_id": "pm_1P19e..." } ``` サブスクリプションの支払いフィールドの出力値のデータ型は `object` です： ```json lines theme={null} { "payment_field_id": { "payment_method_id": "pm_1P19e...", "customer_id": "cus_PqrM...", "price_ids": [ "price_1ONHR..." ], "subscription_id": "sub_1P1A...", "payment_intent_id": "pi_3P19e5..." } } ``` charge の支払いフィールドの出力値のデータ型は `object` です: ```json lines theme={null} { "payment_field_id": { "payment_method_id": "pm_1P19e...", "customer_id": "cus_PqrM...", "amount": 100, "payment_intent_id": "pi_3P19e5..." } } ``` 法的な文言とチェック入力を追加する標準フィールド。 Legal フィールドの出力値のデータ型は `boolean` です。 ```json lines theme={null} { "legal_field_id": true } ``` ユーザーがドロップダウンから単一または複数の選択肢を選べる標準入力です。 ドロップダウンフィールドの設定は次のとおりです。 | Settings | Description | | - | - | | 複数選択 | 複数の選択肢を有効にします。 | | Advanced > 内部値 | 各オプションに内部値を割り当てます。 | | Advanced > 一括編集 | ラベルと内部値を一括で編集します。 | ドロップダウンフィールドの出力値のデータ型は、`string`、または複数選択が有効になっている場合は`array of strings`です。 `string`型のドロップダウンフィールド出力値: ```json lines theme={null} { "dropdown_field_id": "Option A" } ``` ドロップダウンフィールドの出力データ型の値は `array of strings` です: ```json lines theme={null} { "dropdown_field_id": ["Option A", "Option B"] } ``` ユーザーが数値を入力できる標準的な入力フィールドです。
数値フィールドの出力値
数値フィールドの出力値のデータ型は `number` です。 ```json lines theme={null} { "number_field_id": 123 } ``` ユーザーが日付または時刻の値を入力できる標準入力フィールドです。
日付 / 時刻フィールドの設定
日付 / 時刻フィールドの設定には、次の項目があります。 | Key | Description | | - | - | | Format | 日付形式または時刻形式を選択します。 |
日付 / 時刻フィールドの出力値
日付 / 時刻フィールドで日付を選択した場合、出力データ型の値は `string` です。 ```json lines theme={null} { "date_time_field_id": "2023-04-11" } ``` 日付/時刻フィールドの出力データ型では、時刻の値は `string` です。 ```json lines theme={null} { "date_time_field_id": "23:15" } ``` ユーザーが true または false の値を入力できる標準的な入力フィールドです。
Boolean フィールドの出力値
Boolean フィールドの出力値のデータ型は boolean です。 ```json lines theme={null} { "boolean_field_id": true } ``` 独自のフィールドを作成できるようにカスタマイズ可能な標準フィールドです。
カスタムフィールドの設定
カスタムフィールドの設定は次のとおりです。 | Settings | Description | | - | - | | Params | カスタムフィールドのソースコード内で参照するキーと値のペアを追加します。 | | Source code | カスタムフィールドに JavaScript コードを追加します。 | | JSON Schema | デフォルトでは、カスタムフィールドはあらゆる形式の値を受け付けます。ただし、JSON Schema を使用して値を検証できます。 | 詳しくは、[フォームのカスタムフィールドコンポーネント](/docs/ja-jp/customize/forms/custom-field-components)をお読みください。

ブロックコンポーネント

ブロックは、フォームに機能を追加するためのUIコンポーネントで、ユーザー情報は収集しません。 Dashboard > Forms > コンポーネント > ブロック

Forms で使用できるブロック

使用できるブロックは次のとおりです。 ユーザーが次のフォームノードに進むためのボタンです。 * 続行前に、フィールドのバリデーションルールがクライアント側とサーバー側の両方で適用・検証されます。バリデーションに失敗した場合は、ユーザーが内容を確認できるようエラーメッセージが表示されます。 * 次のノードがフローノードの場合は、フローが完了するまでスピナーが表示されます。フローが失敗した場合、またはカスタムエラーメッセージが返された場合は、エラーメッセージが表示されます。 ユーザーが前のステップノードに戻るためのボタンです。 ユーザーが戻るボタンを選択した場合、続行前に入力データが変更されていなくても、フィールドのバリデーションルールが再実行されます。 ユーザーが現在のステップをスキップして、遷移先ノードに直接移動するためのボタンです。 現在のステップをスキップする場合、そのステップで入力された情報は検証も収集もされません。 ユーザーがフローを再実行して、新しい OTP コードを生成・送信できるコンポーネントです。 ユーザーが再送ボタンを選択すると、関連するフローによって新しい OTP コードが生成され、送信されます。 | Settings | Description | | - | - | | Text alignment | テキストの配置を左、中央、右から選択します | | Text | ユーザーが再送ボタンを選択したときに表示されるデフォルトのテキスト | | Button text | ボタンのテキスト | | Waiting text | ユーザーが再送ボタンを選択したときに表示されるテキストです。`Text` および `Button text` の設定の代わりに表示されます。`“{{remaining_seconds}}”` 変数を使用すると、送信ボタンが再び有効になるまでの残り秒数を動的に表示できます。例: “`{{remaining_seconds}}` 秒後に再送” | | Flow | ユーザーが再送ボタンを選択した後に実行されるフロー | | Max attempts | ユーザーが再送ボタンを選択できる最大回数 | | Waiting time | 試行間の待機時間 (秒) | 追加情報を表示してステップノードをカスタマイズするためのリッチテキストブロックです。 ステップノード内の異なるセクションを区切るための線です。短いテキストを含めることもできます。 カスタム UI を作成するための HTML ブロックです。 画像を追加してステップをカスタマイズするための画像ブロックです。

Widgets コンポーネント

Widgets は、サードパーティ連携が組み込まれた事前構築済みのコンポーネントで、フォームにクライアントサイドとサーバーサイドのロジックを追加できます。 Dashboard > Forms > Components > Widget

Forms で使用できるウィジェット

使用できるウィジェットは次のとおりです。 ユーザーが住所を入力して検証できるウィジェットです。
Google Address ウィジェットの設定
Google Address ウィジェットの設定は次のとおりです。 | Settings | Description | | - | - | | API key | リクエストの認証には Google Maps API キーが必要です。 |
Google Address ウィジェットの出力値
Google Address ウィジェットの出力値のデータ型は `object` です。 ```json lines theme={null} { "google_address_widget_id": { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -73.9654415, 40.8054491 ] }, "properties": { "geocoding": { "type": "house", "housenumber": "2880", "street": "Broadway", "city": "New York", "county": "New York County", "state": "New York", "country": "United States", "postcode": "10025" } } } } ``` ユーザーが人間でありボットではないことを検証することで、Web サイトをスパムや不正利用から保護するのに役立つウィジェットです。 このウィジェットでは、次のタイプをサポートしています。 * スコアベース (v3) * チャレンジ (v2) * 非表示の reCAPTCHA バッジ `v2` と `v3` の違い: * `v2` では、チェックボックスをクリックしたりパズルを解いたりするなど、表示されるチャレンジに対するユーザー操作が必要です。 * `v3` はバックグラウンドで実行され、ユーザー操作なしで、ユーザーの行動に基づくスコアを提供します。このバージョンを使用する場合は、スコアを処理し、追加の対応が必要かどうかを判断するためのビジネスロジックを必ず実装してください。
Google reCAPTCHA ウィジェットの設定
Google reCAPTCHA ウィジェットの設定は次のとおりです。 | Settings | Description | | - | - | | Site key | Web サイトで reCAPTCHA を初期化するために使用する公開サイトキーです。[Google reCAPTCHA console](https://www.google.com/recaptcha/admin/create) または Google Cloud Platform プロジェクトで作成できます。 | | Secret key | サーバー側で reCAPTCHA サービスと安全に通信するために使用するシークレットキーです。[Google reCAPTCHA console](https://www.google.com/recaptcha/admin/create) または Google Cloud Platform プロジェクトで作成できます。 |
Google reCAPTCHA の出力値
Google reCAPTCHA ウィジェットの出力値のデータ型は `object` です。 `v2` レスポンスの例: ```json lines theme={null} { "recaptcha_widget_id": { "success": true, "challenge_ts": "2025-03-26T11:22:18Z", "hostname": "auth.example.com" } } ``` `v3` レスポンスの例: ```json lines theme={null} { "recaptcha_widget_id": { "success": true, "challenge_ts": "2025-03-26T11:22:18Z", "hostname": "auth.example.com", "score": 0.9 } } ``` デジタルウォレットに保存された検証可能な資格情報を使用して、ユーザーが本人確認を行えるようにするウィジェットです。
Verifiable Credentials ウィジェットの設定
Verifiable Credentials ウィジェットの設定は次のとおりです。 | Settings | Description | | - | - | | URL | QR コードの生成に使用する URL 値です。この値は、検証リクエストの `engagement` プロパティで返されます。 | | Link text | QR コードをスキャンできず、代わりに自分のデバイスでリンクを直接開きたいユーザー向けに表示される代替テキストです。 | | Size | QR コードのサイズです。 | | Public token | ポーリングエンドポイントを利用するために必要なアクセストークンです。他のリソースへのアクセスが公開されないよう、このトークンは `read:verification_request` スコープのみで生成されていることを確認してください。 | | Verification ID | 検証リクエストの開始時に生成される検証 ID です。 | | Maximum waiting time | 検証プロセスの完了を待機する最大時間です。設定した時間に達すると、検証ステータスに関係なくポーリングは停止し、エラーがスローされます。 |
Verifiable Credentials の出力値
Verifiable Credentials ウィジェットの出力値のデータ型は `object` です。 ```json lines theme={null} { "verifiable_credentials_widget_id": { "state": "honored", "reason": "...", // reason フィールドには、検証リクエストの state に関する追加情報（利用可能な場合）が含まれます。 "presentation": {} // presentation には、presentation definition への応答としてウォレットから提供されたクレームが含まれます。 } } ```

ルーターノード

ルーターノードでは、ルールを追加して、ノード間の条件分岐を作成できます。 デフォルトでは、ルーターノードには **Default Case** という名前の通過ルールが 1 つあり、他のノードに接続されます。さらに、変数が満たす条件のセットに基づいてルールを追加し、他のノードに接続できます。詳しくは、[Router](/docs/ja-jp/customize/forms/routers) をご覧ください。 Dashboard > Forms > Routers

フローノード

フローノードを使用すると、フォームにカスタムロジックや統合フローを追加し、作成できます。詳しくは、[Flows](/docs/ja-jp/customize/forms/flows)をご覧ください。 Dashboard > Forms > Flow Dashboard > Forms > Flow > Editor

開始ノード

開始ノードはユーザーには表示されません。ここでは、[Action を使用してフォームをレンダリングする](/docs/ja-jp/customize/forms/render)際のユーザー属性など、非表示フィールド変数を設定できます。 Dashboard > Forms > 開始ノード

終了画面ノード

すべてのフォームには終了画面ノードがあります。既定では、このノードで認証フローが再開され、ここで送信後フローを設定できます。 Dashboard > Forms > 終了画面ノード