Field Types

FluidForms provides a comprehensive set of field types to collect any kind of information. This guide covers each field type, its properties, and when to use it.

Adding Fields

To add any field to your form:

1. Type / to open the block menu
2. Select the field type
3. Type your question or label
4. Configure field properties in the properties panel

Text Input Field

Single or multi-line text entry.

When to Use

• Names, addresses, short answers
• Comments, descriptions, explanations
• Email addresses, URLs

Properties

Rows: Number of visible lines

• 1: Single-line input (default)
• 2+: Multi-line text area

Format: Validation format

• None (default): Any text
• email: Valid email address
• uri: Valid URL
• ipv4/ipv6: IP addresses
• uuid: UUID format

Required: Whether the field must be filled

Value: Default or pre-filled value (supports Liquid templates)

Hidden: Hide field from users (useful for calculated values)

Examples

Single-line:

First Name (required, 1 row)
Email Address (required, email format)
Website (uri format)

Multi-line:

Tell us about your project (4 rows)
Additional comments (6 rows)

Multiple Choice Field

Radio buttons, checkboxes, or dropdown selection.

When to Use

• Selecting from predefined options
• Yes/No questions
• Category selection
• Multi-select scenarios

Properties

Options: List of choices (one per line)

Multiple: Allow selecting multiple options

• false: Single selection (radio buttons or dropdown)
• true: Multiple selection (checkboxes or multi-select)

Display As:

• Auto (default): System chooses based on option count
• radio: Radio buttons (single selection)
• checkboxes: Checkboxes (multiple selection)
• select: Dropdown menu (single or multi-select)

Inline: Display options horizontally instead of vertically

Required: Whether a selection is required

Value: Default selection(s)

Examples

Single choice (radio):

How did you hear about us?
Options: Google Search, Social Media, Friend, Other
Display as: radio

Multiple choice (checkboxes):

Which features interest you? (select all that apply)
Options: Analytics, Reporting, Integrations, API Access
Multiple: true
Display as: checkboxes

Dropdown:

Select your country
Options: [200+ countries]
Display as: select

Date Picker Field

Calendar-based date selection in ISO format (YYYY-MM-DD).

When to Use

• Birthdates, appointment dates
• Deadlines, start/end dates
• Date range validation

Properties

Minimum: Earliest selectable date (YYYY-MM-DD or Liquid expression)

Maximum: Latest selectable date (YYYY-MM-DD or Liquid expression)

Required: Whether a date must be selected

Value: Default date

Examples

Birthdate (must be 18+):

Date of Birth
Maximum: {{ today | subtract_time: 18, 'year' | format_date: 'YYYY-MM-DD' }}

Future appointment:

Preferred Appointment Date
Minimum: {{ today }}
Maximum: {{ today | add_time: 90, 'day' | format_date: 'YYYY-MM-DD' }}

Historical date:

When did this issue start?
Maximum: {{ today }}

Number Field

Numeric input with optional min/max constraints.

When to Use

• Quantities, counts
• Ratings, scores
• Age, years of experience
• Currency amounts (when not needing advanced formatting)

Properties

Minimum: Smallest allowed value

Maximum: Largest allowed value

Required: Whether a value is required

Value: Default number

Examples

Rating scale:

Rate your experience (1-5)
Minimum: 1
Maximum: 5
Required: true

Quantity:

How many employees do you have?
Minimum: 1

Age:

Age
Minimum: 18
Maximum: 120

Phone Input Field

International phone number with country selector.

When to Use

• Contact phone numbers
• Mobile verification
• International audience

Properties

Country: Default country code (e.g., "US", "GB", "CA")

Required: Whether a phone number is required

Value: Default phone number

Examples

Mobile Phone
Country: US
Required: true

Business Contact Number
Country: GB

File Upload Field

Allow users to upload one or more files (documents, images, PDFs, etc.) to be stored and processed by AI.

When to Use

• Resume/CV uploads for job applications
• Medical documents or health records
• Supporting documents for applications
• Images for analysis or processing
• Contracts, invoices, or legal documents
• Any scenario where AI needs to extract data from files

Properties

Max Files: Maximum number of files users can upload

• 1: Single file upload (default)
• 2+: Multiple file upload

File Types: Restrict accepted file types (leave empty for all types)

• image: Images (jpg, png, gif, etc.)
• pdf: PDF documents
• document: Word, Excel, PowerPoint files
• text: Plain text files
• Custom MIME types for specific file formats

Required: Whether file upload is required

AI Processing

Files uploaded through File Upload fields are automatically processed by AI in AI Interview and AI Autofill sections:

• Documents & PDFs: Text is extracted and analyzed
• Images: Visual content is analyzed and described
• Resumes: Skills, experience, and qualifications are extracted
• Medical Records: Relevant health information is identified
• Forms: Data is extracted from scanned or PDF forms

The AI uses uploaded files as context when populating form fields, making intelligent inferences and data extraction without manual data entry.

Examples

Single resume upload:

Upload Your Resume
Max Files: 1
File Types: pdf, document
Required: true

Multiple document upload:

Supporting Documents
Max Files: 5
File Types: pdf, document, image
Required: false

Medical records:

Upload Medical History
Max Files: 3
File Types: pdf, image
Required: true

Use Cases

Job Applications: Upload resume, AI extracts name, skills, experience, education, and work history automatically.

Healthcare Intake: Upload medical records, AI identifies current medications, allergies, and medical history.

Loan Applications: Upload pay stubs and bank statements, AI extracts income and financial information.

Expense Reports: Upload receipts, AI extracts amounts, dates, and vendors.

JSON Schema Form Field

Advanced field supporting arbitrary JSON Schema and UI Schema for complex, conditional structures.

When to Use

• Complex nested data structures
• Conditional field groups
• Arrays of objects
• Advanced validation patterns
• When simple fields can't express the structure

Properties

Schema: JSON Schema object defining data structure and validation

UI Schema: react-jsonschema-form UI Schema for customizing field rendering

Required: Whether the field group is required

Value: Default object matching schema

Important Note

This is an advanced field type. Whenever possible, use the simpler field types (Text Input, Multiple Choice, etc.) instead. Only use JSON Schema fields when:

• You need deeply nested structures
• You need arrays of complex objects
• You need intricate conditional logic within a single field
• Simple fields genuinely cannot express what you need

Example: Conditional Pet Names

Schema:
{
  "type": "object",
  "properties": {
    "has_pets": {
      "title": "Do you have any pets?",
      "type": "boolean"
    }
  },
  "required": ["has_pets"],
  "if": {
    "properties": {
      "has_pets": { "const": true }
    }
  },
  "then": {
    "properties": {
      "pet_names": {
        "title": "Please list your pets' names",
        "type": "array",
        "items": {
          "type": "string",
          "title": "Pet Name"
        }
      }
    },
    "required": ["pet_names"]
  }
}

UI Schema:
{
  "has_pets": {
    "ui:widget": "radio"
  }
}

Field Properties Reference

Common Properties

All fields support these properties:

Name: Unique identifier for the field

• Auto-generated from label by default
• Override with static name when referenced in Liquid expressions

Required: Whether the field must be completed

• true: User must provide a value
• false (default): Field is optional

Hidden: Hide field from users

• Useful for calculated values
• Can still be populated via Liquid templates

Value: Default or pre-filled value

• Supports static values
• Supports Liquid template expressions
• Evaluated when form loads

Advanced: Field Names

Field names are automatically derived from labels by default. This works great most of the time:

Label: "First Name"
Auto-generated name: "first_name"
Access in Liquid: {{ first_name }}

However, you must set a static name for any field referenced in Liquid expressions to prevent breaking changes if the label is updated:

Label: "Customer's Email Address"
Custom name: "email"
Access in Liquid: {{ email }}

Validation & Error Messages

FluidForms automatically validates fields and shows helpful error messages:

• Required fields: "This field is required"
• Format validation: "Please enter a valid email address"
• Range validation: "Value must be between 1 and 10"
• Custom validation: Use JSON Schema field for complex rules

Best Practices

Field Selection

1. Use the simplest field type that meets your needs
2. Avoid JSON Schema fields unless absolutely necessary
3. Consider the user experience: dropdowns for many options, radio buttons for few
4. Use appropriate validation: email format for emails, number field for quantities

Field Labels

1. Be clear and concise: "Email Address" not "Your Email"
2. Ask direct questions: "How can we help?" not "Question"
3. Indicate requirements: "Phone Number (optional)" for optional fields
4. Avoid jargon: Use language your users understand

Field Organization

1. Group related fields in the same section
2. Order logically: top to bottom, left to right
3. Don't overwhelm: 3-7 fields per section is ideal
4. Use sections to break up long forms

Validation Strategy

1. Validate at the right time: on blur, on submit, or real-time
2. Provide helpful errors: explain what's wrong and how to fix it
3. Don't over-validate: only enforce what's truly necessary
4. Test edge cases: empty values, special characters, very long input

Next Steps

• Logic & Branching - Create dynamic forms with conditional logic
• Liquid Templates - Use dynamic values in fields
• Forms - Learn about organizing fields into sections