Skip to main content

Input Components

Input components are the building blocks for your forms. They handle various types of user input, from simple text to complex data structures.

Available Input Components​

  • Text Field: Single-line text input
  • Hidden: Invisible field for storing data
  • Text Area: Multi-line text input
  • Number: Numeric input field
  • Date/Time: Calendar and time selection
  • Checkbox: Multiple-option selection
  • Select: Dropdown list of options
  • Currency: Monetary value input with currency symbol
  • Location: Captures geographic location coordinates
  • Radio: Single-option selection from multiple choices
  • File: Allows users to upload files
  • Email: Input field specifically for email addresses
  • Phone Number: Input field for phone numbers with formatting
  • Data Grid: Tabular data entry component
  • Password: Masked input for sensitive information
  • Survey: Multi-question rating or feedback collection
  • Signature: Captures electronic signatures

Using Input Components​

To add an input component to your form:

  1. Locate the component in the Input Components section of the sidebar
  2. Drag the component onto the form canvas
  3. Click on the component to select it
  4. Configure its properties in the Component Settings Panel

Input Component Details​

Text Field​

Purpose: Collects single-line text input from users.

Configuration Options:

  • Label: The field name displayed to users
  • Placeholder: Example text shown before user input
  • Description: Additional information about the field
  • Default Value: Pre-filled text when the form loads
  • Prefix/Suffix: Text or icons displayed before/after the field
  • Input Mask: Format the input as users type (e.g., phone numbers, dates)
  • Multiple Values: Allow users to enter multiple values
  • Transform to Hyperlink: Automatically convert URL values to clickable hyperlinks in form submissions
  • Validation: Set required, minimum/maximum length, pattern matching

Purpose: Automatically converts URL text values into clickable hyperlinks in form submissions.

How to Enable:

  1. Select the Text Field component in your form
  2. Navigate to the Display tab in Component Settings
  3. Check the "Transform to Hyperlink" checkbox
  4. Save your form configuration

How It Works:

  • When enabled, text field values containing URLs will be displayed with a clickable button addon in form submissions
  • The original text value remains visible as a disabled input field
  • A button with an external link icon appears next to the field
  • Clicking the button opens the URL in a new browser tab

Supported URL Formats:

  • https://example.com
  • http://example.com
  • example.com (automatically adds http://)
  • subdomain.example.com
  • example.com/path/to/page
  • Various TLDs (.com, .org, .co.uk, etc.)

Best Practices:

  • Use clear, concise labels
  • Provide placeholder text as examples
  • Use input masks for formatted data (e.g., phone numbers)
  • Set appropriate validation rules

Text Area​

Purpose: Collects multi-line text input from users.

Configuration Options:

  • Label: The field name displayed to users
  • Placeholder: Example text shown before user input
  • Description: Additional information about the field
  • Default Value: Pre-filled text when the form loads
  • Rows: Number of visible text rows
  • Validation: Set required, minimum/maximum length

Best Practices:

  • Use for comments, descriptions, or other longer text inputs
  • Set appropriate row count based on expected input length
  • Consider character limits for database storage

Number​

Purpose: Collects numeric input from users.

Configuration Options:

  • Label: The field name displayed to users
  • Placeholder: Example number shown before user input
  • Description: Additional information about the field
  • Default Value: Pre-filled number when the form loads
  • Prefix/Suffix: Text or icons displayed before/after the field (e.g., $, %)
  • Decimal Places: Number of decimal places to display
  • Thousands Separator: Character used to separate thousands (e.g., comma)
  • Validation: Set required, minimum/maximum values, integer only

Best Practices:

  • Use for quantities, amounts, measurements, etc.
  • Configure appropriate decimal places for the data type
  • Add prefix/suffix for units or currency symbols
  • Set reasonable min/max values to prevent errors

Password​

Purpose: Collects sensitive information with masked input.

Configuration Options:

  • Label: The field name displayed to users
  • Placeholder: Example text shown before user input
  • Description: Additional information about the field
  • Validation: Set required, minimum/maximum length, pattern matching

Best Practices:

  • Use only when necessary for security purposes
  • Provide clear requirements for password strength
  • Consider adding a password confirmation field
  • Never store passwords in plain text

Email​

Purpose: Collects email addresses with format validation.

Configuration Options:

  • Label: The field name displayed to users
  • Placeholder: Example email shown before user input
  • Description: Additional information about the field
  • Default Value: Pre-filled email when the form loads
  • Multiple: Allow multiple email addresses
  • Validation: Set required, email format validation

Best Practices:

  • Use for collecting contact email addresses
  • Enable multiple option when collecting multiple contacts
  • Always use email format validation
  • Consider adding a confirmation email field for important forms

Phone Number​

Purpose: Collects phone numbers with optional formatting.

Configuration Options:

  • Label: The field name displayed to users
  • Placeholder: Example phone number shown before user input
  • Description: Additional information about the field
  • Default Value: Pre-filled number when the form loads
  • Input Mask: Format the phone number as users type
  • Validation: Set required, phone format validation

Best Practices:

  • Use input masks to ensure consistent formatting
  • Consider international users when configuring format
  • Provide example format in the placeholder or description
  • Use phone number validation pattern

URL​

Purpose: Collects web addresses with format validation.

Configuration Options:

  • Label: The field name displayed to users
  • Placeholder: Example URL shown before user input
  • Description: Additional information about the field
  • Default Value: Pre-filled URL when the form loads
  • Validation: Set required, URL format validation

Best Practices:

  • Use for collecting website addresses
  • Include the protocol (http:// or https://) in examples
  • Consider adding URL validation to ensure proper formatting

Location​

Purpose: Captures geographic location coordinates.

Configuration Options:

  • Label: The field name displayed to users
  • Description: Additional information about the field
  • Validation: Set required validation

How It Works:

  • When the form loads, the component requests the user's current location
  • The coordinates (latitude, longitude) are captured and displayed in the field
  • A Google Maps embed is shown below the field displaying the location
  • The location data is stored in the format "latitude, longitude"

Best Practices:

  • Use only one Location component per form
  • Provide clear instructions about why location data is being collected
  • Consider privacy implications and only use when location is necessary
  • Ensure users understand they will need to grant location permissions

Date/Time​

Purpose: Collects date and/or time values with a picker interface.

Configuration Options:

  • Label: The field name displayed to users
  • Description: Additional information about the field
  • Default Value: Pre-filled date/time when the form loads
  • Format: How the date/time is displayed (e.g., MM/DD/YYYY)
  • Enable Time: Include time selection
  • Enable Date: Include date selection
  • Minimum Date: Earliest selectable date
  • Maximum Date: Latest selectable date
  • Validation: Set required, date range validation

Best Practices:

  • Use consistent date formats throughout your forms
  • Set min/max dates to prevent invalid selections
  • Consider time zones for time inputs
  • Use clear format examples in descriptions

Select​

Purpose: Provides a dropdown list of options for selection.

Configuration Options:

  • Label: The field name displayed to users
  • Description: Additional information about the field
  • Data Source: Where options come from (values, URL, resource)
  • Multiple: Allow multiple selections
  • Default Value: Pre-selected option(s) when the form loads
  • Search Enabled: Allow searching within options
  • Validation: Set required validation

Best Practices:

  • Use for lists with more than 5 options
  • Group related options together
  • Provide clear, concise option labels
  • Enable search for long lists
  • Arrange vertically for better readability
  • Use clear, concise option labels

Radio​

Purpose: Provides a list of mutually exclusive options.

Configuration Options:

  • Label: The field name displayed to users
  • Description: Additional information about the field
  • Data Source: Where options come from (values, URL, resource)
  • Default Value: Pre-selected option when the form loads
  • Validation: Set required validation

Best Practices:

  • Use for 2-5 options that are mutually exclusive
  • Arrange vertically for better readability
  • Use clear, concise option labels

Checkbox​

Purpose: Provides a single boolean option or multiple independent options.

Configuration Options:

  • Label: The field name displayed to users
  • Description: Additional information about the field
  • Default Value: Checked or unchecked by default
  • Multiple Checkboxes: Create a group of independent checkboxes
  • Validation: Set required validation

Best Practices:

  • Use single checkboxes for yes/no or agree/disagree options
  • Use checkbox groups for "select all that apply" scenarios
  • Write clear, action-oriented labels

File​

Purpose: Allows users to upload files to the form.

Configuration Options:

  • Label: The field name displayed to users
  • Description: Additional information about the field
  • Multiple Files: Allow multiple file uploads
  • Storage: Where files are stored (URL)
  • File Types: Allowed file extensions
  • File Size: Maximum file size
  • Validation: Set required validation

Best Practices:

  • Clearly communicate any file size limitations
  • Consider using drag-and-drop interface for better UX
  • Provide progress indicators for large file uploads
  • Consider security implications of file uploads

Signature​

Purpose: Captures electronic signatures.

Configuration Options:

  • Label: The field name displayed to users
  • Description: Additional information about the field
  • Height: Height of signature area (default: 200px)
  • Background Color: Color of signature area
  • Pen Color: Color of signature line
  • Validation: Set required validation

Best Practices:

  • Use for collecting legally binding signatures
  • Provide clear instructions for users
  • Consider legal requirements for electronic signatures
  • Ensure adequate space for signing

Currency​

Purpose: Collects monetary values with currency formatting.

Configuration Options:

  • Label: The field name displayed to users
  • Description: Additional information about the field
  • Default Value: Pre-filled amount when the form loads
  • Currency Symbol: Symbol to display (e.g., $, €, £)
  • Decimal Places: Number of decimal places to display
  • Thousands Separator: Character used to separate thousands
  • Validation: Set required, minimum/maximum values

Best Practices:

  • Use for financial forms and payment information
  • Configure appropriate currency symbol for your region
  • Set reasonable min/max values to prevent errors

Data Grid​

Purpose: Allows users to enter tabular data with multiple rows and columns.

Configuration Options:

  • Label: The field name displayed to users
  • Description: Additional information about the field
  • Columns: Define the columns and their types
  • Default Value: Pre-filled rows when the form loads
  • Add Another Text: Text for the button to add new rows
  • Validation: Set required, minimum/maximum rows

Best Practices:

  • Use for collecting structured, repeating data
  • Keep column count reasonable (typically under 6)
  • Provide clear column headers
  • Consider performance implications for large grids

Survey​

Purpose: Collects ratings or feedback on multiple questions.

Configuration Options:

  • Label: The field name displayed to users
  • Description: Additional information about the field
  • Questions: List of questions to rate
  • Values: Rating scale options
  • Default Value: Pre-selected ratings when the form loads
  • Validation: Set required validation
  • Scale Type: Rating scale (1-5, 1-10, stars, etc.)
  • Scale Labels: Text descriptions for scale points
  • Custom CSS Class: Apply custom styling

Best Practices:

  • Use for satisfaction surveys, feedback forms, etc.
  • Keep questions clear and concise
  • Use consistent rating scales
  • Consider using Likert scales (1-5, Agree-Disagree, etc.)
  • Provide descriptive labels for scale points
  • Consider using a mix of positive and negative questions
  • Avoid leading questions

Hidden​

Purpose: Stores data that is not visible to users.

Configuration Options:

  • Label: The field name (not displayed to users)
  • Default Value: The value to store
  • Custom CSS Class: Apply custom styling

Best Practices:

  • Use for storing system values, IDs, or other data not meant for user interaction
  • Avoid storing sensitive information in hidden fields
  • Use for passing data between form pages or to workflows

Address​

Purpose: Provides a structured way to collect address information.

Configuration Options:

  • Label: The field name displayed to users
  • Description: Additional information about the field
  • Required: Whether the field must be completed
  • Address Format: Regional address format to use
  • Enable Address Validation: Integration with validation services
  • Custom CSS Class: Apply custom styling

Best Practices:

  • Use appropriate address format for your target region
  • Consider enabling address validation for data quality
  • Provide clear instructions for international addresses
  • Consider privacy implications when collecting addresses
  • Includes fields for:
    • Street address
    • City
    • State/Province
    • Postal/ZIP code
    • Country