Common Use Cases

Here are step-by-step instructions for common form building scenarios:

Show/Hide a Field Based on Dropdown Selection

To show a text field only when a specific option is selected in a dropdown:

1. Add a Select component to your form with options (e.g., "Request Type" with options like "Standard", "Urgent", "Other")
2. Add a Text Field component (e.g., "Please specify other request type")
3. Select the text field and go to the API tab (Technical Properties)
4. In the Conditional section, select Simple Conditional
5. Configure the condition:
   • Show: When
   • requestType: Equals
   • Other

// The equivalent custom conditional code would be:
show = data.requestType === 'Other';

Set Current Date as Default in Date/Time Field

To automatically set today's date as the default value:

1. Add a Date/Time component to your form
2. Select the component and go to the API tab (Technical Properties)
3. In the Custom Default Value field, enter:

// Set to current date in YYYY-MM-DD format
value = new Date().toISOString().split('T')[0];

Create a Calculated Total Field

To calculate a total based on quantity and price fields:

1. Add Number components for "Quantity" and "Price"
2. Add another Number component named "Total"
3. Select the Total field and go to the API tab (Technical Properties)
4. In the Calculated Value field, enter:

// Calculate total from quantity and price
value = data.quantity * data.price;

Format a Phone Number While Typing

To automatically format a phone number as the user types:

1. Add a Phone Number component to your form
2. Select the component and go to the Display tab
3. In the Input Mask field, enter: (999) 999-9999
4. This will automatically format the input as the user types

Create a Dynamic Form with Multiple Steps

To create a multi-step form with different paths based on user choices:

1. Change the form type to Multi-Step Form in the form settings
2. Add multiple pages using the Tabs component
3. Use conditional logic to show/hide entire tabs based on user selections
4. Configure the "Next" button to skip irrelevant tabs

Validate an ID Number with a Specific Format

To validate that an ID follows a specific format (e.g., ABC-12345):

1. Add a Text Field component for the ID
2. Select the component and go to the Validation tab
3. Enable Regular Expression Pattern
4. Enter the pattern: ^[A-Z]{3}-\d{5}$
5. Add a custom error message: "ID must be in format ABC-12345"