> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vchata.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Forms

> Comprehensive form management with validation, wizards, layouts, and plugins for data collection and user interaction

## Overview

VChata provides a robust forms system with advanced validation, multi-step wizards, flexible layouts, and powerful plugins for creating interactive data collection experiences.

## Form Types

### Form Validation

**Route:** `/forms/validation`

Advanced form validation with real-time feedback and comprehensive error handling.

<CardGroup cols={2}>
  <Card title="Real-time Validation" icon="check-circle">
    Instant validation feedback as users type
  </Card>

  <Card title="Custom Rules" icon="settings">
    Define custom validation rules for specific requirements
  </Card>
</CardGroup>

**Features:**

* Real-time field validation
* Custom validation rules and messages
* Cross-field validation
* Async validation support
* Accessibility-compliant error display
* Multi-language error messages

### Form Wizard

**Route:** `/forms/wizard`

Multi-step form wizard for complex data collection processes with progress tracking.

<CardGroup cols={2}>
  <Card title="Step Navigation" icon="navigation">
    Clear step progression with navigation controls
  </Card>

  <Card title="Progress Tracking" icon="bar-chart">
    Visual progress indicators and completion status
  </Card>
</CardGroup>

**Features:**

* Multi-step form progression
* Conditional step display
* Data persistence between steps
* Progress saving and resuming
* Custom step validation
* Mobile-responsive design

## Form Layouts

### Basic Layout

**Route:** `/forms/layout/basic`

Simple, clean form layout optimized for straightforward data collection.

<CardGroup cols={2}>
  <Card title="Clean Design" icon="layout">
    Minimalist design focused on content
  </Card>

  <Card title="Responsive Grid" icon="grid">
    Responsive grid system for all screen sizes
  </Card>
</CardGroup>

### Multi-Column Layout

**Route:** `/forms/layout/multi-column`

Multi-column layout for organizing related fields and optimizing form space.

<CardGroup cols={2}>
  <Card title="Column Organization" icon="columns">
    Logical grouping of related fields
  </Card>

  <Card title="Space Optimization" icon="maximize">
    Efficient use of available screen space
  </Card>
</CardGroup>

### Action Bar Layout

**Route:** `/forms/layout/action-bar`

Form layout with prominent action buttons and clear call-to-action placement.

<CardGroup cols={2}>
  <Card title="Clear Actions" icon="mouse-pointer">
    Prominent action buttons with clear labeling
  </Card>

  <Card title="Button Grouping" icon="layers">
    Logical grouping of related actions
  </Card>
</CardGroup>

### Sticky Bar Layout

**Route:** `/forms/layout/sticky-bar`

Layout with sticky action bar that remains visible during form scrolling.

<CardGroup cols={2}>
  <Card title="Persistent Actions" icon="anchor">
    Action buttons always visible during scrolling
  </Card>

  <Card title="Mobile Optimized" icon="smartphone">
    Optimized for mobile form interaction
  </Card>
</CardGroup>

## Form Plugins

### Mask Plugin

**Route:** `/forms/plugins/mask`

Input masking for phone numbers, dates, credit cards, and other formatted data.

<CardGroup cols={2}>
  <Card title="Format Enforcement" icon="shield">
    Automatic formatting and validation of input data
  </Card>

  <Card title="Custom Patterns" icon="pattern">
    Define custom masking patterns for specific needs
  </Card>
</CardGroup>

**Supported Masks:**

* Phone numbers (US, international formats)
* Credit card numbers
* Date and time formats
* Currency and number formatting
* Custom pattern definitions

### Clipboard Plugin

**Route:** `/forms/plugins/clipboard`

Clipboard integration for copying form data and pasting from external sources.

<CardGroup cols={2}>
  <Card title="Copy to Clipboard" icon="copy">
    Easy copying of form data to clipboard
  </Card>

  <Card title="Paste Integration" icon="clipboard">
    Paste data from external sources into forms
  </Card>
</CardGroup>

**Features:**

* One-click data copying
* Paste detection and formatting
* Bulk data import from clipboard
* Format validation on paste
* Cross-browser compatibility

### ReCAPTCHA Plugin

**Route:** `/forms/plugins/re-captcha`

Google ReCAPTCHA integration for form security and spam protection.

<CardGroup cols={2}>
  <Card title="Spam Protection" icon="shield-check">
    Protect forms from automated spam submissions
  </Card>

  <Card title="User Verification" icon="user-check">
    Verify human users with minimal friction
  </Card>
</CardGroup>

**Features:**

* Invisible ReCAPTCHA v3
* Traditional checkbox ReCAPTCHA v2
* Score-based verification
* Custom error handling
* Accessibility compliance

### Editor Plugin

**Route:** `/forms/plugins/editor`

Rich text editor integration for complex content input with formatting options.

<CardGroup cols={2}>
  <Card title="Rich Text Editing" icon="type">
    Full-featured rich text editor with formatting tools
  </Card>

  <Card title="Media Support" icon="image">
    Image and media insertion capabilities
  </Card>
</CardGroup>

**Features:**

* WYSIWYG text editing
* Text formatting (bold, italic, underline)
* Lists and indentation
* Link insertion and management
* Image upload and embedding
* Code block support

### Dropzone Plugin

**Route:** `/forms/plugins/dropzone`

File upload integration with drag-and-drop functionality and progress tracking.

<CardGroup cols={2}>
  <Card title="Drag & Drop" icon="upload">
    Intuitive file upload with drag-and-drop interface
  </Card>

  <Card title="Upload Progress" icon="activity">
    Real-time upload progress and status tracking
  </Card>
</CardGroup>

**Features:**

* Drag-and-drop file upload
* Multiple file selection
* Upload progress indicators
* File type validation
* File size limits
* Preview capabilities

## Form Configuration

### Basic Setup

<Steps>
  <Step title="Choose Form Type">
    Select the appropriate form type based on your data collection needs
  </Step>

  <Step title="Configure Layout">
    Choose a layout that best fits your form structure and user experience goals
  </Step>

  <Step title="Add Plugins">
    Integrate necessary plugins for enhanced functionality
  </Step>

  <Step title="Set Validation">
    Configure validation rules and error messages
  </Step>

  <Step title="Test and Deploy">
    Test form functionality and deploy to your application
  </Step>
</Steps>

### Advanced Configuration

<CodeGroup>
  ```javascript Form Configuration theme={null}
  const formConfig = {
    type: 'wizard',
    layout: 'multi-column',
    plugins: ['mask', 'editor', 'dropzone'],
    validation: {
      realtime: true,
      customRules: {
        phoneNumber: /^\(\d{3}\) \d{3}-\d{4}$/,
        email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      }
    },
    steps: [
      {
        title: 'Personal Information',
        fields: ['firstName', 'lastName', 'email', 'phone']
      },
      {
        title: 'Business Details',
        fields: ['company', 'position', 'industry']
      }
    ]
  };
  ```

  ```python Form Validation theme={null}
  from vchata.forms import FormValidator

  validator = FormValidator()

  # Add custom validation rules
  validator.add_rule('phone', r'^\(\d{3}\) \d{3}-\d{4}$')
  validator.add_rule('email', r'^[^\s@]+@[^\s@]+\.[^\s@]+$')

  # Validate form data
  result = validator.validate(form_data)
  if result.is_valid:
      process_form_data(result.data)
  else:
      return_validation_errors(result.errors)
  ```
</CodeGroup>

## Best Practices

<AccordionGroup>
  <Accordion title="User Experience">
    * Use clear, descriptive labels for all form fields
    * Provide helpful placeholder text and examples
    * Implement progressive disclosure for complex forms
    * Use appropriate input types for better mobile experience
    * Provide clear error messages and validation feedback
  </Accordion>

  <Accordion title="Performance">
    * Implement lazy loading for large forms
    * Use debounced validation for real-time feedback
    * Optimize file uploads with chunked uploads
    * Cache form configurations and validation rules
    * Minimize plugin dependencies for faster loading
  </Accordion>

  <Accordion title="Security">
    * Always validate data on both client and server side
    * Implement proper CSRF protection
    * Use HTTPS for all form submissions
    * Sanitize user input to prevent XSS attacks
    * Implement rate limiting for form submissions
  </Accordion>
</AccordionGroup>

## Troubleshooting

### Common Issues

<AccordionGroup>
  <Accordion title="Form Not Submitting">
    * Check validation rules and error messages
    * Verify all required fields are completed
    * Check network connectivity and server status
    * Review browser console for JavaScript errors
    * Ensure proper form action and method configuration
  </Accordion>

  <Accordion title="Validation Issues">
    * Verify validation rule syntax and patterns
    * Check custom validation function implementations
    * Ensure proper error message configuration
    * Test validation with various input formats
    * Review accessibility compliance for error display
  </Accordion>

  <Accordion title="Plugin Problems">
    * Verify plugin dependencies and versions
    * Check plugin configuration parameters
    * Ensure proper initialization order
    * Review browser compatibility requirements
    * Test plugin functionality in isolation
  </Accordion>
</AccordionGroup>