The form component is how users create and edit data in your application. Well-designed forms are intuitive, efficient, and guide users to enter data correctly. Poorly designed forms frustrate users and lead to errors. Mastering form configuration is essential for building user-friendly applications.

In this lesson, you'll learn everything about form components: form types, field configuration, layout and organization, validation, default values, conditional fields, styling, multi-column layouts, submission handling, security, and best practices. You'll be able to create professional forms that users actually enjoy using.

A form component displays input fields that allow users to create new records or edit existing ones. Forms include field labels, input controls, validation, and a submit button. They're the primary way users enter data into your application.

Use form components when:

• Creating Records - Adding new customers, products, orders
• Editing Records - Updating existing information
• User Registration - Sign-up forms
• Data Collection - Surveys, feedback, applications
• Settings - Configuration and preferences
• Multi-Field Input - Any structured data entry

Use Forms When:

• Creating new records
• Editing multiple fields at once
• Complex validation required
• Need user confirmation before saving
• Want structured, guided data entry

Use Inline Editing When:

• Quick single-field updates
• Simple field types
• Users browsing list and making quick changes

Creates new records:

• Purpose - Add new data to table
• Empty Fields - All fields start empty (or with defaults)
• Submit Button - "Add", "Create", "Submit"
• After Submit - Record created, user redirected or form cleared
• Common Use - "Add Customer", "Create Order", "New Product"

Modifies existing records:

• Purpose - Update existing data
• Pre-filled Fields - Shows current values
• Submit Button - "Save", "Update", "Save Changes"
• After Submit - Record updated, user sees confirmation
• Common Use - "Edit Profile", "Update Order", "Modify Settings"

Displays record information:

• Purpose - View record details in form layout
• Read-Only - Fields not editable
• No Submit Button - Just displays information
• Action Buttons - May have "Edit" button to switch to edit mode
• Common Use - "View Order", "Customer Details"

Note: Details form vs Details component - similar but form maintains form layout.

Handles both add and edit:

• Smart Form - Detects if record exists
• Add Mode - If no record, shows empty form
• Edit Mode - If record exists, shows pre-filled form
• Single Form - Less maintenance, one form for both operations
• Common Use - User profiles, settings pages

To create a form component:

1. Open Page Builder
2. Click "+ Add Component"
3. Select "Form" from Data Components
4. Choose form type (Add, Edit, Details, Combined)
5. Select which table the form connects to
6. Choose fields to include
7. Configure form settings
8. Save component
9. Form appears on page

Initial form configuration:

• Form Type - Add, Edit, Details, Combined
• Data Source - Which table to add/edit records in
• Component Name - Internal identifier
• Display Name - Title shown above form
• Submit Button Text - Customize button label
• Show Cancel Button - Yes/No

Choose which fields to include:

1. Edit form component
2. Go to "Fields" section
3. See all available fields from table
4. Check fields to include in form
5. Uncheck fields to exclude
6. Save

Fields to typically exclude:

• System fields (Record ID, Date Created, Date Modified)
• Auto-calculated fields (equations, summaries)
• Fields users shouldn't edit

Fields to include:

• All fields users need to fill out
• Fields that make sense for this form's purpose

Organize fields logically:

• Drag and Drop - Reorder fields in form builder
• Logical Flow - Order that makes sense to users
• Important First - Critical fields at top
• Group Related - Keep related fields together
• Save for Last - Less important fields at bottom

Example order for customer form:

1. First Name, Last Name
2. Email, Phone
3. Company, Job Title
4. Address
5. Notes

Arrange fields visually:

Single Column Layout

• One field per row
• Vertical flow
• Easy to scan
• Good for mobile
• Best for long forms

Two-Column Layout

• Two fields per row
• More compact
• Good for related pairs (First Name, Last Name)
• Use screen width efficiently
• Best for desktop

Three-Column Layout

• Three fields per row
• Very compact
• Can feel crowded
• Use sparingly
• Good for short fields (day, month, year)

Mixed Layout

• Combine different column counts
• Full-width for some fields (address, notes)
• Half-width for others (first name, last name)
• Most flexible

Control individual field widths:

• Full Width - 100% of available space
• Half Width - 50% of available space (two per row)
• Third Width - 33% (three per row)
• Quarter Width - 25% (four per row)
• Custom Width - Specific percentage or pixels

Example widths:

• First Name (50%), Last Name (50%) - side by side
• Email (100%) - full width
• City (40%), State (30%), Zip (30%)

Configure field labels:

• Label Text - What users see (defaults to field display name)
• Label Position - Above field, left of field, floating
• Hide Label - Don't show label (use placeholder instead)
• Required Indicator - Asterisk or (Required) text

Hint text in empty fields:

• Example Value - "john.smith@example.com"
• Instructions - "Enter your full email address"
• Format Hint - "(555) 123-4567"
• Disappears - When user starts typing

Placeholder best practices:

• Provide helpful examples
• Don't use as replacement for labels
• Keep concise
• Show expected format for complex fields

Additional instructions below field:

• Explanation - More details about field
• Requirements - "Must be at least 8 characters"
• Examples - "For example: Product Manager"
• Always Visible - Stays visible even when typing

Use help text for:

• Complex fields needing explanation
• Validation requirements
• Format specifications
• Important notes

Field description vs help text:

• Description - From field settings, global for all forms
• Help Text - Set per form, specific to this form's context
• Both can be used together
• Description typically shorter

Mark fields as mandatory:

• Field-Level Setting - Required set on field itself
• Form-Level Override - Can make required in specific forms
• Visual Indicator - Red asterisk or (Required)
• Validation - Form won't submit without required fields
• Error Message - "This field is required"

Required field best practices:

• Only require truly necessary fields
• Too many required fields frustrate users
• Consider progressive disclosure instead
• Make requirement clear visually

Ensure correct data entry:

Built-In Validation

• Email Field - Must be valid email format
• Phone Field - Must be valid phone format
• Number Field - Must be numeric
• Date Field - Must be valid date
• URL Field - Must be valid URL

Custom Validation

• Min/Max Length - Text must be X-Y characters
• Min/Max Value - Number must be between X and Y
• Pattern Matching - Must match regex pattern
• Unique Values - Email must be unique
• Date Ranges - Date must be in future

Validation Messages

• Show clear error messages
• Explain what's wrong and how to fix
• Display errors next to field
• Highlight invalid fields
• Prevent submission until fixed

When to validate:

• On Blur - When user leaves field (common)
• On Submit - When form submitted (always happens)
• Real-Time - As user types (for some fields)
• Never Too Early - Don't show errors before user finishes typing

Pre-fill fields with default values:

• Static Values - Always the same (Country: "United States")
• Current User - Pre-fill with logged-in user info
• Current Date/Time - Today's date, current time
• URL Parameters - Pass values via URL
• Connected Records - Pre-select based on context

Example defaults:

• Status: "Active" for new customer form
• Date: Today's date for order form
• Country: User's country from profile
• Assigned To: Current user

Pass values via URL:

• Add to URL - ?field_name=value
• Multiple Values - ?name=John&email=john@example.com
• Auto-Fill - Form fields populate automatically
• Use Cases - Pre-fill from links, emails, other pages

Example: Link from customer page to new order form with customer pre-selected:
/orders/add?customer_id=123

Set defaults based on conditions:

• User Role - Different defaults for different roles
• Other Fields - One field's default based on another's value
• Date/Time - Defaults based on current date
• Context - Where user came from

Control which fields appear:

• Always Hidden - Field exists but never shows in form
• Hidden by Default - Can be shown based on conditions
• Read-Only - Visible but not editable
• Disabled - Grayed out, not editable

Why hide fields:

• Not relevant for this form's purpose
• Auto-calculated (no user input needed)
• Only for specific user roles
• Show conditionally based on other fields

Show/hide fields based on other field values:

Example Scenarios:

• Shipping Form - Show "Different Billing Address" fields only if checkbox checked
• Product Form - Show "Digital Download URL" only if Type = "Digital"
• Contact Form - Show "Company Name" only if Contact Type = "Business"
• Order Form - Show "Discount Code" field only if Total > $100

Benefits:

• Shorter forms (only show relevant fields)
• Less confusing to users
• Guided data entry
• Reduce form fatigue

To create conditional field visibility:

1. Edit form component
2. Select field to conditionally show/hide
3. Go to "Visibility Rules"
4. Add condition: "Show this field when..."
5. Define criteria (e.g., when Type = "Digital")
6. Save
7. Field now shows/hides dynamically

Complex conditional logic:

• Multiple Conditions - Field shown if A AND B are true
• OR Conditions - Field shown if A OR B is true
• Nested Conditions - Field C shown based on Field B, which is shown based on Field A
• Multiple Fields - Several fields show/hide together

Choose overall form appearance:

• Compact - Dense layout, minimal spacing
• Standard - Balanced spacing
• Comfortable - More spacing, easier to read
• Custom - Define your own spacing

Customize field appearance:

• Field Border - Style, color, thickness
• Background Color - Field background
• Label Style - Font, size, color, weight
• Input Style - Font, size, color
• Focus Style - How field looks when active

Organize forms into sections:

• Section Headers - "Personal Information", "Contact Details"
• Visual Separation - Lines or spacing between sections
• Collapsible Sections - Expand/collapse groups of fields
• Section Description - Explanatory text for section

Use sections for:

• Long forms (10+ fields)
• Logical groupings
• Better organization
• Improved scannability

Customize submit and cancel buttons:

• Button Text - "Submit", "Save", "Create", "Update"
• Button Color - Primary, secondary, custom
• Button Size - Small, medium, large
• Button Position - Left, center, right
• Button Style - Solid, outline, text

Split form into two columns:

• Enable Two Columns - In form settings
• Fields Alternate - First field left, second right, etc.
• Manual Control - Specify which fields in which column
• Full-Width Fields - Some fields span both columns

Best for:

• Desktop displays
• Wide forms
• Related field pairs
• Reducing vertical scrolling

Adapt to screen sizes:

• Desktop - Two or three columns
• Tablet - Two columns or single column
• Mobile - Always single column
• Automatic - Tadabase handles responsive behavior

Design considerations:

• Test on multiple devices
• Ensure mobile usability
• Don't force multi-column on small screens

Precise control over layout:

• Set each field's width independently
• Create complex layouts
• Mix column counts (some rows 2 columns, others 3)
• Use grid system for alignment

Customize button label:

• Add Form - "Add Customer", "Create Order", "Submit"
• Edit Form - "Save Changes", "Update", "Save"
• Action-Specific - "Register", "Subscribe", "Apply"
• Clear Action - Users know what will happen

What happens on submit:

• Validate - Check all fields valid
• Show Errors - If validation fails
• Disable Button - Prevent double submission
• Show Loading - Spinner or "Saving..." text
• Save Record - Add or update database
• Post-Submit Action - What happens next

Optional cancel button:

• Enable/Disable - Show or hide cancel button
• Button Text - "Cancel", "Close", "Back"
• Behavior - Close popup, go back, clear form
• Confirm Changes - "Are you sure? Unsaved changes will be lost"

What happens after successful submission:

Show Success Message

• Display confirmation
• Stay on same page
• Form clears or stays filled
• Good for: Add another form

Redirect to Details Page

• Navigate to new record's details page
• User sees what they just created
• Good for: After creating record

Redirect to List Page

• Navigate back to table/list
• User sees record in list
• Good for: After editing record

Redirect to Custom Page

• Navigate to specific page
• Can pass record ID in URL
• Good for: Multi-step processes

Close Popup

• If form in popup, close it
• Refresh parent page
• Good for: Modal forms

Stay on Form (Add Another)

• Form clears, ready for next entry
• Good for: Batch data entry

Different redirects based on conditions:

• Based on Field Value - If status = "Approved" go to page A, else page B
• Based on User Role - Admins go to page A, users go to page B
• Based on Form Type - Add goes to details, edit goes to list

Control who can access form:

• Public Forms - Anyone can submit (no login required)
• User Forms - Must be logged in
• Role-Based - Only specific roles can access
• Record-Based - Can only edit own records

Control field access:

• Editable by All - Everyone can edit
• Editable by Role - Only admins can edit certain fields
• Read-Only - Show but don't allow editing
• Hidden - Don't show to certain users

Example: Salary field visible to managers only, editable by HR only.

Control who can submit:

• Anyone - No restrictions
• Logged In Users - Must be authenticated
• Specific Roles - Only certain roles
• Record Owner - Only owner of record

Form security tips:

• Never expose sensitive fields in public forms
• Validate on server-side (not just client-side)
• Use CAPTCHA for public forms to prevent spam
• Set appropriate field permissions
• Log form submissions for audit trail
• Sanitize input to prevent injection attacks

Shorter is better:

• Only include necessary fields
• Remove optional fields that aren't important
• Use multi-step forms for long forms
• Consider: Do we really need this field?

Organize for clarity:

• Group related fields together
• Order fields logically
• Important fields first
• Use sections for long forms
• Create a natural flow

Make expectations clear:

• Use descriptive labels
• Provide helpful placeholders
• Add help text where needed
• Show format requirements
• Indicate required fields clearly

Pre-fill when possible:

• Use sensible default values
• Pre-fill based on user context
• Reduce typing where possible
• Make common choices easy

Validate helpfully:

• Show clear error messages
• Explain what's wrong and how to fix
• Validate at appropriate time
• Don't show errors too early
• Highlight problematic fields

Optimize for mobile:

• Single column layout on mobile
• Large touch targets (buttons, inputs)
• Appropriate keyboard types (email, phone, number)
• Minimize typing required
• Test on actual devices

Show progress:

• For multi-step forms, show step number
• Show how many fields remaining
• Progress bar for long forms
• Give users sense of completion

User sign-up:

• Email, password, confirm password
• First name, last name
• Agree to terms checkbox
• Submit creates user account
• Redirect to confirmation or login

Contact us:

• Name, email, phone
• Subject, message
• Optional: company, website
• Submit sends email and/or creates record
• Show success message

Purchase flow:

• Product selection (connection field)
• Quantity, price calculation
• Customer information
• Shipping address
• Payment method
• Order confirmation

User settings:

• Combined form (edit existing profile)
• Personal information section
• Contact information section
• Preferences section
• Save updates profile
• Show success message, stay on page

Filter/search interface:

• Multiple filter fields
• Date ranges
• Category selection
• Submit filters results (doesn't create record)
• Clear filters option

Solutions:

• Check for validation errors
• Ensure all required fields filled
• Check browser console for errors
• Verify submit button configured
• Check form permissions

Solutions:

• Check field visibility settings
• Verify conditional field rules
• Check field permissions
• Ensure fields selected in form builder
• Check for display rules

Solutions:

• Verify default value syntax
• Check if field required (required fields show defaults)
• Ensure defaults set correctly in field settings
• Check URL parameters spelled correctly

Solutions:

• Verify visibility rule conditions
• Check if controlling field has correct value
• Ensure rules saved properly
• Test with different values
• Check for conflicting rules

In this comprehensive lesson, you've mastered forms:

• Form Types - Add, Edit, Details, Combined forms
• Field Configuration - Layout, labels, placeholders, help text
• Validation - Required fields, format validation, error messages
• Default Values - Pre-filling forms intelligently
• Conditional Fields - Dynamic show/hide based on values
• Styling - Layout, columns, sections, appearance
• Submission - Button configuration, redirects
• Security - Permissions and access control
• Best Practices - Creating user-friendly forms

Before moving on, ensure you can:

• Create add, edit, and combined forms
• Configure field layout and organization
• Set up field labels, placeholders, and help text
• Configure required fields and validation
• Set default values and prefill forms
• Create conditional field visibility rules
• Style forms with sections and multi-column layouts
• Configure submit button and post-submission behavior
• Set appropriate form and field permissions
• Apply form design best practices

You've mastered both table and form components. Next, you'll learn about list and card components for visual displays.

Hands-On Exercise (To Be Added)

Create a comprehensive customer registration form:

• Add form with all necessary fields
• Two-column layout for desktop
• Group fields into sections (Personal, Contact, Company)
• Set up required fields appropriately
• Add helpful placeholders and help text
• Create conditional field: Show "Company Name" only if Type = "Business"
• Set default values where appropriate
• Configure validation for email and phone
• Style form sections with headers
• Configure redirect to details page after submission
• Test form on desktop and mobile

Knowledge Check (To Be Added)

Quiz will test:

• Choosing appropriate form type
• Field layout best practices
• Required fields and validation
• Conditional field use cases
• Default value strategies
• Form security considerations
• Post-submission redirect options
• Form design best practices