> ## Documentation Index > Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. > Form ノードと利用可能なコンポーネントについて学習します。 # ノードとコンポーネント Forms では、ユーザーがフォームを操作できるように、フィールド、ブロック、ウィジェットなどのノードやコンポーネントを追加できます。続いて、コンポーネントで入力されたデータをフォームやフロー内で参照できます。
## フォームノード
フォームノードには、Start、Step、Flow、Router、Ending screen の5種類があります。これらのノードは、フォームの構造の中でそれぞれ特定の役割を担います。 Dashboard > Forms > Form Editor
## Step ノード
Step ノードは、フォームを視覚的に表す要素です。ユーザーがデータを入力できるフィールド、ブロック、ウィジェットなど、任意の数のコンポーネントを含めることができます。 Dashboard > Foms > Step ノード
### フィールドコンポーネント
フィールドは、Forms 内でユーザーが情報を入力するための UI コンポーネントです。 Dashboard > Forms > Fields
#### フィールド設定
フィールドには、要件に応じて設定できるデフォルト設定がいくつかあります。 デフォルトのフィールド設定は次のとおりです。 | 設定 | 説明 | | ---------------- | ---------------------- | | ID | 一意の ID | | Label | ラベルの表示 / 非表示 | | Required | 入力値を必須にする | | Hint text | ヒントテキストを表示する | | Placeholder text | ユーザーに表示されるプレースホルダーテキスト | | Default value | ユーザーに表示されるデフォルト値 | | Transient | データのマスキングを有効または無効にする |
#### フィールドのバリデーションルール
| 設定 | 説明 | | --------- | ------------- | | 最小長 / 最大長 | 入力値の長さを制限します。 | | 最小値 / 最大値 | 数値の範囲を制限します。 |
#### 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" } ``` choice フィールドの出力データ型は、`array of strings` です。 ```json lines theme={null} { "choice_field_id": ["Option A", "Option B"] } ``` ユーザーが画像付きの選択肢を単一または複数選択できる標準入力です。 ##### Cards フィールドの設定 Cards フィールドの設定は次のとおりです。 | Settings | Description | | -------------------------- | ------------------ | | 複数選択 | 複数の選択肢を有効にします。 | | ラベルを非表示 | カードのラベルを非表示にします。 | | Advanced > Internal values | 各オプションに内部値を割り当てます。 | ##### Cards フィールドの出力値 Cards フィールドの出力値のデータ型は、`string`、または複数選択が有効な場合は `string` の配列です。 Cards フィールドの出力値が `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" } ``` ユーザーがパスワードまたはシークレット値を入力できる標準の入力フィールドです。 ##### パスワードフィールドの設定 パスワードフィールドの設定は次のとおりです。 | 設定 | 説明 | | ---------------- | -------------------------------------------------------------------------------------------- | | 複雑なパスワードを必須にする | パスワードには、大文字、小文字、記号、数字を含める必要があります。 | | NIST ガイドラインを適用する | パスワードは 8 文字以上である必要があり、過去の漏えいデータに含まれるパスワード、辞書に載っている単語、同じ文字の繰り返しや連続した文字列、コンテンツに関連する語句は使用できません。 | | 強度メーターを追加する | パスワードフィールドの下に、赤・黄・緑のスケールを持つグラフィカルなメーターが表示され、入力されたパスワードの強度を示します。 | | ハッシュ | アルゴリズムを選択して、入力値をブラウザー内で直接ハッシュ化します。 | ##### パスワードフィールドの出力値 パスワードフィールドの出力値のデータ型は、マスクされた `string` です。 ```json lines theme={null} { "password_field_id": "███" } ``` 支払いプロバイダーを使用して、ユーザーが支払い情報を入力できる標準入力です。支払いは Ending ノードの前に処理されます。 ##### Payment field settings Payment フィールドの設定は次のとおりです。 | Settings | Description | | ------------------- | ------------------------------------------------------ | | Payment type | 1 回限りの支払い (Charge) または継続課金 (Subscription) のいずれかを選択します。 | | Amount | 1 回限りの支払い (Charge) の金額を指定します。 | | Currency | 1 回限りの支払い (Charge) の通貨を指定します。 | | Subscription action | 既存のサブスクリプションを作成するか、更新するかを選択します。 | | Customer action | 既存の顧客を作成するか、更新するかを選択します。 | | Display options | カード番号、有効期限、セキュリティ code のラベルとトラストマークを表示および編集します。 | ##### Payment field output value 送信後フローでは、Payment フィールドの出力値のデータ型は `string` または object です。 `string` としての Payment フィールドの出力値のデータ型: ```json lines theme={null} { "payment_field_id": "pm_1P19e..." } ``` サブスクリプションの payment フィールドの出力値のデータ型は `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 の payment フィールドの出力値のデータ型は `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 フィールドの出力値 Legal フィールドの出力値のデータ型は `boolean` です。 ```json lines theme={null} { "legal_field_id": true } ``` ユーザーがドロップダウンから単一または複数の選択肢を選べる標準入力です。 ##### ドロップダウンフィールドの設定 ドロップダウンフィールドの設定は次のとおりです。 | 設定 | 説明 | | --------- | ------------------ | | 複数選択 | 複数の選択肢を有効にします。 | | 詳細 > 内部値 | 各オプションに内部値を割り当てます。 | | 詳細 > 一括編集 | ラベルと内部値を一括で編集します。 | ##### ドロップダウンフィールドの出力値 ドロップダウンフィールドの出力値のデータ型は、`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" } ``` 日付/時刻フィールドにおける time の出力データ型の値は `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 を使用して値を検証できます。 | 詳細については、[Forms のカスタムフィールドコンポーネント](/ja/docs/customize/forms/custom-field-components)を参照してください。
### ブロックコンポーネント
ブロックは、フォームに機能を追加する UI コンポーネントであり、ユーザー情報は収集しません。 Dashboard > Forms > Components > ブロック
#### Forms で使用可能なブロック
使用可能なブロックは次のとおりです。 ユーザーが次のフォームノードに進むためのボタンです。 * 続行前に、フィールドのバリデーションルールがクライアント側とサーバー側の両方で適用され、検証されます。バリデーションに失敗した場合は、ユーザー向けにエラーメッセージが表示されます。 * 次のノードがフローノードである場合は、フローが完了するまでスピナーが表示されます。フローが失敗した場合、またはカスタムエラーメッセージを返した場合は、エラーメッセージが表示されます。 ユーザーが前のStep ノードに戻るためのボタンです。 ユーザーが前へボタンを選択すると、続行前に入力データが変更されていない場合でも、フィールドのバリデーションルールが再実行されます。 ユーザーが現在のステップをスキップし、遷移先ノードに直接移動するためのボタンです。 現在のステップをスキップする場合、そのステップで入力された情報は検証も収集もされません。 ユーザーがフローを再実行して新しい OTPコードを生成し、送信できるコンポーネントです ユーザーが再送ボタンを選択すると、関連付けられたフローによって新しい OTPコードが生成され、送信されます。 | Settings | Description | | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | テキストの配置 | テキストの配置を左、中央、右から選択します | | テキスト | ユーザーが再送ボタンを選択できるときに既定で表示されるテキスト | | ボタンテキスト | ボタンに表示するテキスト | | 待機テキスト | ユーザーが再送ボタンを選択した後に表示されるテキストです。`Text` および `Button text` の設定に代わって表示されます。`“{{remaining_seconds}}”` 変数を使用すると、送信ボタンが再度有効になるまでの残り秒数を動的に表示できます。例: `{{remaining_seconds}}` 秒後に再送 | | フロー | ユーザーが再送ボタンを選択した後に実行されるフロー。 | | 最大試行回数 | ユーザーが再送ボタンを選択できる最大回数 | | 待機時間 | 試行間の待機時間 (秒) 。 | 追加情報を加えてStep ノードをパーソナライズするためのリッチテキストブロックです。 Step ノード内の異なるセクションを区切るための線です。短いテキストを含めることもできます。 カスタム UI を作成するための HTML ブロックです。 画像を追加してステップをパーソナライズするための画像ブロックです。
### ウィジェットコンポーネント
ウィジェットは、サードパーティ統合を備えた事前構築済みコンポーネントで、フォームにクライアントサイドおよびサーバーサイドのロジックを追加します。 Dashboard > Forms > Components > Widget
#### Forms で使用できるウィジェット
使用できるウィジェットは次のとおりです。 ユーザーが住所を入力して検証できるウィジェットです。 ##### Google Address ウィジェットの設定 Google Address ウィジェットの設定項目は次のとおりです。 | 設定 | 説明 | | ------- | ----------------------------------- | | 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 ウィジェットの設定項目は次のとおりです。 | 設定 | 説明 | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Site key | Web サイトで reCAPTCHA を初期化するために使用する公開サイトキーです。[Google reCAPTCHA コンソール](https://www.google.com/recaptcha/admin/create) または Google Cloud Platform プロジェクトで作成できます。 | | Secret key | サーバー側で reCAPTCHA サービスと安全に通信するために使用するシークレットキーです。[Google reCAPTCHA コンソール](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 ウィジェットの設定項目は次のとおりです。 | 設定 | 説明 | | -------------------- | ------------------------------------------------------------------------------------------------------------ | | 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 には、プレゼンテーション定義に応じてウォレットから提供されたクレームが含まれます。 } } ```
## ルーターノード
ルーターノードでは、ルールを追加して、ノード間の条件付きロジック分岐を作成できます。 デフォルトでは、ルーターノードには **Default Case** という名前のパススルールールが 1 つあり、他のノードに接続します。変数が満たす一連の条件に基づいてルールを追加し、他のノードに接続できます。詳しくは、[Router.](/ja/docs/customize/forms/routers) を参照してください。 Dashboard > Forms > Routers
## フローノード
フローノードを使用すると、フォームにカスタムロジックや統合フローを追加できます。詳しくは、[Flows](/ja/docs/customize/forms/flows)を参照してください。 Dashboard > Forms > フロー Dashboard > Forms > フロー > エディター
## 開始ノード
開始ノードはユーザーには表示されません。ここでは、[Action を使用してフォームをレンダリングする](/ja/docs/customize/forms/render)際のユーザー属性など、非表示フィールド変数を設定できます。 Dashboard > Forms > Start node
## 終了画面ノード
すべてのフォームには、終了画面ノードがあります。デフォルトでは、このノードで認証フローが再開されます。ここで、送信後フローを設定できます。 Dashboard > Forms > Ending screen node