ノードとコンポーネント

フォームは、ノードと、フィールド、ブロック、ウィジェットなどのコンポーネントを追加して、ユーザーがフォームを操作できるようにします。その後、フォームやフローでコンポーネントからのデータ入力を参照できます。

フォームノード

フォームノードには開始、ステップ、フロー、経路、終了画面の5種類があります。これらのノードは、フォームの構造に対して非常に明確な目的があります。

Dashboard >  Forms > Form Editor

ステップノード

ステップノードではフォームを視覚的に確認できます。ユーザーがデータを入力できるフィールド、ブロック、およびウィジェットなど、複数のコンポーネントを含むことができます。

Dashboard > Foms > Step node

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

フィールドは、ユーザーがフォームに情報を入力するUIコンポーネントです。

Dashboard > Forms > Fields

フィールド設定

フィールドには、要件を満たすために構成できるデフォルト設定がいくつかあります。

デフォルトのフィールド設定は次のとおりです。

設定 説明
ID 一意のID
Label(ラベル) ラベルを表示または非表示にします
Required(必須) 入力値が必須です
Hint text(ヒントテキスト) ヒントテキストを表示します
Placeholder text(プレースホルダーテキスト) ユーザーに表示されるテキスト
Default value(デフォルト値) ユーザーに表示されるデフォルト値
Transient(一時的) データマスクを有効または無効にします

フィールド検証ルール

設定 説明
Min. length / Max. length(最小長/最大長) 入力値の長さを指定する。
Min. value / Max. value(最小値/最大値) 数値の長さを指定する。

フォームで使用可能なフィールド

特定の設定とデータ出力タイプを持つ使用可能なフィールドは次のとおりです。

/

任意の文字列値を入力できる標準入力。

テキストフィールドの設定

テキストフィールドは以下のように設定されています。

設定 説明
Multiline(複数行) 複数行のテキスト入力を有効にする。

テキストフィールドの出力値

テキストフィールドの出力値のデータ型はstringです。

{
  "text_field_id": "Auth0"
}

Was this helpful?

/

メール文字列値を入力できる標準入力。

メールフィールドの出力値

メールフィールドの出力値のデータ型はstringです。

{
  "email_field_id": "username@domain.com"
}

Was this helpful?

/

電話番号の値を入力できる標準入力。

電話フィールドの設定

電話フィールドは以下のように設定されています。

設定 説明
Country picker(国ピッカー) 国ピッカーを有効または無効にします。デフォルトでは、ユーザーのIPの場所が表示されます。
Filter placeholder text(フィルタープレースホルダーテキスト) 国の検索ウィンドウでユーザーに表示されるテキスト。

電話フィールドの出力値

電話フィールドの出力値のデータ型はstringか、国ピッカーが有効な場合はobjectです。

stringの電話フィールド出力のデータ型の値:

{
  "phone_field_id": "8005550175"
}

Was this helpful?

/

objectの電話フィールド出力のデータ型の値:

{
  "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"
  }
}

Was this helpful?

/

単一または複数選択する値を選択できる標準入力。

選択フィールドの設定

選択フィールドは以下のように設定されています。

設定 説明
Multiple choice(複数選択) 複数の選択肢を有効にします。
Other option(その他のオプション) ユーザーが自分のオプションを入力できるようにします。
Advanced(高度な設定)> Internal values(内部値) 各選択肢に内部値を割り当てます。
Advanced(高度な設定)> Bulk edit(一括編集) ラベルと内部選択肢の値を一括編集します。

選択フィールドの出力値

選択フィールドの出力値のデータ型はstringか、複数選択が有効な場合はarray of stringsです。

stringの選択フィールドの出力データ型の値:

{
  "choice_field_id": "Option A"
}

Was this helpful?

/

array of stringsの選択フィールドの出力データ型の値:

{
  "choice_field_id": ["Option A", "Option B"]
}

Was this helpful?

/

単一または複数選択する画像値を選択できる標準入力。

カードフィールドの設定

カードフィールドは以下のように設定されています。

設定 説明
Multiple choice(複数選択) 複数の選択肢を有効にする。
Hide labels(ラベルを非表示) カードラベルを非表示にする。
Advanced(詳細設定) > Internal values(内部値) 各選択肢に内部値を割り当てる。

カードフィールドの出力値

カードフィールドの出力値のデータ型はstringか、複数選択が有効な場合はarray of stringsです。

stringのカードフィールドの出力データ型の値:

{
  "card_field_id": "Option A"
}

Was this helpful?

/

array of stringsのカードフィールドの出力データ型の値:

{
  "card_field_id": ["Option A", "Option B"]
}

Was this helpful?

/

URL値を入力できる標準入力。

URLフィールドの出力値

URLフィールド出力値のデータ型は文字列です:

{
  "url_field_id": "https://auth0.com"
}

Was this helpful?

/

パスワードまたはシークレット値を入力できる標準入力。

パスワードフィールドの設定

パスワードフィールドは以下のように設定されています。

設定 説明
複雑なパスワードが必要 パスワードには大文字・小文字、記号、数字を含める必要があります。
NISTガイドラインの強制 パスワードは8文字以上で指定し、以前に侵害されたパスワードや辞書に記載されている単語、繰り返しや連続した文字、コンテンツ固有の単語を使用することはできません。
強度メーターの追加 入力したパスワードの強度を示すために、パスワードフィールドの下に赤色、黄色、緑色のスケールで示されたメーターが表示されます。
ハッシュ 入力値をブラウザーに直接ハッシュするためのアルゴリズムを選択します。

パスワードフィールドの出力値

パスワードフィールドの出力値のデータ型はマスクされたstringです。

{
  "password_field_id": "███"
}

Was this helpful?

/

決済プロバイダーを使用して支払い情報を入力できる標準入力。支払いは終了ノードの前に処理されます。

支払いフィールドの設定

支払いフィールドは以下のように設定されています。

設定 説明
Payment type(支払いタイプ) 1回限り(チャージ)または継続払い(サブスクリプション)のいずれかを選択します。
Amount(金額) 1回限り(チャージ)の支払い額を指定します。
Currency(通貨) 1回限り(チャージ)の支払い通貨を指定します。
Subscription action(サブスクリプションの操作) 新規作成するか既存のサブスクリプションを更新するかを選択します。
Customer action(顧客の操作) 新規作成するか既存の顧客を更新するかを選択します。
Display options(表示オプション) カード番号、有効期限、セキュリティコードラベル、およびトラストマークを表示・編集します。

支払いフィールドの出力値

支払いフィールドの出力値のデータ型は、サブミッションフロー後は文字列かオブジェクトです。

stringの支払いフィールド出力値のデータ型:

{
  "payment_field_id": "pm_1P19e..."
}

Was this helpful?

/

objectの支払いフィールド出力値のサブスクリプションのデータ型:

{
  "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..."
  }
}

Was this helpful?

/

objectの支払いフィールド出力値の請求のデータ型:

{
  "payment_field_id": {
    "payment_method_id": "pm_1P19e...",
    "customer_id": "cus_PqrM...",
    "amount": 100,
    "payment_intent_id": "pi_3P19e5..."
  }
}

Was this helpful?

/

法律テキストとチェック入力を追加する標準入力。

法律フィールドの出力値

法律フィールド出力値のデータ型はbooleanです。

{
  "legal_field_id": true
}

Was this helpful?

/

単一または複数のドロップダウン選択値を選択できる標準入力。

ドロップダウンフィールドの設定

ドロップダウンフィールドは以下のように設定されています。

設定 説明
Multiple selector(複数セレクター) 複数の選択肢を有効にします。
Advanced(高度な設定) > Internal values(内部の値) 各オプションに内部の値を割り当てます。
Advanced(高度な設定) > Bulk edit(一括編集) ラベルと内部の値を一括編集します。

ドロップダウンフィールドの出力値

ドロップダウンフィールドの出力値のデータ型はstringか、複数選択が有効な場合はarray of stringsです。

stringのドロップダウンフィールド出力のデータ型の値:

{
  "dropdown_field_id": "Option A"
}

Was this helpful?

/

array of stringsのドロップダウンフィールド出力のデータ型の値:

{
  "dropdown_field_id": ["Option A", "Option B"]
}

Was this helpful?

/

数値を入力できる標準入力。

数字フィールドの出力値

数字フィールドの出力値のデータ型はnumberです。

{
  "number_field_id": 123
}

Was this helpful?

/

日付または時刻の値を入力できる標準入力。

日付/時刻フィールドの設定

日付/時刻フィールドの設定:

キー 説明
Format(形式) 日付または時間の形式を選択する。

日付/時刻フィールドの出力値

日付/時刻フィールド出力の日付のデータ型の値はstringです:

{
  "date_time_field_id": "2023-04-11"
}

Was this helpful?

/

日付/時刻フィールド出力の時刻のデータ型の値はstringです:

{
  "date_time_field_id": "23:15"
}

Was this helpful?

/

trueまたはfalseの値を入力できる標準入力。

ブール値フィールドの出力値

ブール値フィールドの出力値データ型はブール値です。

{
  "boolean_field_id": true
}

Was this helpful?

/

カスタマイズして独自のフィールドを作成できる標準フィールド。

カスタムフィールドの設定

カスタムフィールドの設定は次のとおりです。

設定 説明
パラメーター カスタムフィールドのソースコードで参照するキーと値のペアを追加します。
ソースコード カスタムフィールドにJavascriptコードを追加します。
JSONスキーマ デフォルトでは、カスタムフィールドはあらゆる値のフォーマットを受け入れます。ただし、JSONスキーマを使用して値を検証することができます。

詳細については、フォームのカスタムフィールドのコンポーネントをお読みください。

ブロックコンポーネント

ブロックは、ユーザー情報を収集せずにフォームに機能を追加するUIコンポーネントです。

Dashboard > Forms > Components > Blocks

フォームで使用可能なブロック

使用可能なブロックは次のとおりです。

/

次のフォームノードに進めるボタン。

前のステップノードに移動できるボタン。

現在のステップをスキップして、宛先ノードに直接ジャンプできるボタン。

A component that lets users re-run a flow to generate and send a new OTP code

Settings Description
Text alignment Select text alignment, left, center, or right
Text Default text displayed when users select the resend button
Button text Button text
Waiting text Text displayed when users have selected the resend button. Replaces Text and the Button text settings. Use the “{{remaining_seconds}}” variable to dynamically display the remaining number of seconds until the send button is enabled again. For example: “Resend in {{remaining_seconds}} seconds”.
Flow Flow executed after the user selects the resend button.
Max attempts The maximum number of attempts the user can select the resend button
Waiting time The waiting time between attempts in seconds.

追加情報を使用してステップノードをパーソナライズするリッチテキストブロック。

ステップノードの異なるセクションを仕切る線。小さなテキストを含めることができます。

カスタムUIを作成するためのHTMLブロック。

画像を追加するステップをパーソナライズするための画像ブロック。

ウィジェットのコンポーネント

ウィジェットは、サードパーティ統合が含まれた事前構築されたコンポーネントで、クライアント側とサーバー側のロジックをフォームに追加します。

Dashboard > Forms > Components > Widget

フォームで使用可能なウィジェット

使用可能なウィジェットは次のとおりです。

/

住所を入力して検証できるウィジェット。

Google Addressウィジェットの設定

Google Addressウィジェットは以下のように設定されています。

設定 説明
API key(APIキー) 要求の認証にGoogle MapsのAPIキーを要求する。

Google Addressウィジェットの出力値

Google Addressウィジェットの出力値のデータ型はobjectです。

{
  "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"
      }
    }
  }
}

Was this helpful?

/

A widget that helps protect your website from spam and abuse by verifying that a user is a human and not a bot.

The widget supports:

  • Score-based (v3)

  • Challenge (v2)

    • Invisible reCAPTCHA badge

Differences between v2 and v3:

  • v2 requires user interaction with visible challenges, such as clicking a checkbox or solving puzzles.

  • v3 runs in the background and provides a score based on user behavior, without requiring user interaction. When using this version, make sure to implement additional business logic to handle the score and determine if further action is needed.

Google reCAPTCHA widget settings

The Google reCAPTCHA widget settings include:

Settings Description
Site key The public site key used to initialize the reCAPTCHA on your website. You can create it in Google reCAPTCHA console or your Google Cloud Platform project.
Secret key The secret key used to communicate securely with the reCAPTCHA service server-side. You can create it in Google reCAPTCHA console or your Google Cloud Platform project.

Google reCAPTCHA output value

The Google reCAPTCHA widget output value data type is an object.

Example of v2 response:

{
  "recaptcha_widget_id": {
    "success": true,
    "challenge_ts": "2025-03-26T11:22:18Z",
    "hostname": "auth.example.com"
  }
}

Was this helpful?

/

Example of v3 response:

{
  "recaptcha_widget_id": {
    "success": true,
    "challenge_ts": "2025-03-26T11:22:18Z",
    "hostname": "auth.example.com",
    "score": 0.9
  }
}

Was this helpful?

/

A widget that lets a user verify their identity using verifiable credentials stored in their digital wallet.

Verifiable Credentials widget settings

The Verifiable Credentials widget settings include:

Settings Description
URL The URL value used to generate the QR code. This value is returned in the engagement property of the verification request.
Link text Alternative text that will be displayed for users who cannot scan the QR code and prefer to open the link directly on their device.
Size The size of the QR code.
Public token The access token required to consume the polling endpoint. Please ensure the token is generated with only the read:verification_request scope to avoid exposing access to other resources.
Verification ID The verification ID generated when you start the verification request.
Maximum waiting time The maximum amount of time to wait for the verification process to complete. Once the set time is reached, polling will stop and an error will be thrown, regardless of the verification status.

Verifiable Credentials output value

The Verifiable Credentials widget output value data type is an object.

{
  "verifiable_credentials_widget_id": {
    "state": "honored",
    "reason": "...", // The reason field contains additional information (if available) regarding the state of the verification request. 
    "presentation": {} // The presentation contains the claims provided by the wallet in response to the presentation definition.
  }
}

Was this helpful?

/

経路ノード

経路ノードを使用すると、ノード間で条件付きロジックジャンプを作成するためのルールを追加できます。

デフォルトで、経路ノードにはDefault Case(デフォルトケース)という名前の単一パススルールールがあり、他のノードに接続します。変数が他のノードに接続するために満たさなければならない一連の条件に基づいて、追加のルールを追加することができます。詳細については、「経路」をお読みください。

Dashboard > Forms > Routers

フローノード

フローノードを使用すると、フォームにカスタムロジックと統合フローを追加および作成することができます。詳細については、「フロー」をお読みください。

Dashboard > Forms > FlowDashboard > Forms > Flow > Editor

開始ノード

開始ノードはユーザーには表示されません。ここには、アクションを持つフォームを表示する際のユーザー属性など、隠しフィールド変数を構成することができます。

Dashboard > Forms > Start node

終了スクリーンノード

すべてのフォームに終了スクリーンノードがあります。デフォルトでは、このノードは認証フローを再開し、ここで送信後のフローを構成することができます。

Dashboard > Forms > Ending screen node