name: aura-form-builder
description: Advanced form creation with Aura UI styling, multi-step wizards, field validation, conditional logic, and customizable themes. Use when building contact forms, signup flows, surveys, multi-step wizards, and data collection forms with validation, error handling, and integration capabilities.

Aura Form Builder

Overview

Build beautiful, functional forms with Aura UI styling. Includes form generation, validation, multi-step wizards, conditional fields, and backend integration templates.

Quick Start

1. Create Form Specification

{
  "name": "contact-form",
  "title": "Contact Us",
  "description": "Get in touch with our team",
  "fields": [
    {
      "name": "name",
      "type": "text",
      "label": "Full Name",
      "required": true,
      "placeholder": "John Doe"
    },
    {
      "name": "email",
      "type": "email",
      "label": "Email Address",
      "required": true,
      "validation": "email"
    },
    {
      "name": "message",
      "type": "textarea",
      "label": "Message",
      "required": true,
      "rows": 5
    }
  ],
  "submit": {
    "text": "Send Message",
    "action": "/api/contact"
  }
}

2. Generate Form

python scripts/form_builder.py contact-form.json --output ./forms

3. Customize & Deploy

python scripts/export_form.py ./forms/contact-form --framework react

Field Types

Text Inputs

{
  "type": "text",
  "name": "username",
  "label": "Username",
  "placeholder": "Enter username",
  "minLength": 3,
  "maxLength": 20,
  "required": true
}

Email

{
  "type": "email",
  "name": "email",
  "label": "Email",
  "required": true,
  "validation": "email"
}

Password

{
  "type": "password",
  "name": "password",
  "label": "Password",
  "required": true,
  "validation": "minLength:8"
}

Number

{
  "type": "number",
  "name": "age",
  "label": "Age",
  "min": 0,
  "max": 120
}

Select/Dropdown

{
  "type": "select",
  "name": "country",
  "label": "Country",
  "options": [
    { "value": "us", "label": "United States" },
    { "value": "uk", "label": "United Kingdom" },
    { "value": "ca", "label": "Canada" }
  ],
  "required": true
}

Checkbox

{
  "type": "checkbox",
  "name": "terms",
  "label": "I agree to the terms and conditions",
  "required": true
}

Radio

{
  "type": "radio",
  "name": "subscription",
  "label": "Subscription Plan",
  "options": [
    { "value": "free", "label": "Free" },
    { "value": "pro", "label": "Pro" },
    { "value": "enterprise", "label": "Enterprise" }
  ]
}

Textarea

{
  "type": "textarea",
  "name": "message",
  "label": "Message",
  "rows": 5,
  "placeholder": "Your message here..."
}

File Upload

{
  "type": "file",
  "name": "resume",
  "label": "Upload Resume",
  "accept": ".pdf,.doc,.docx",
  "maxSize": "5MB"
}

Multi-Step Forms

Create wizards with multiple steps:

{
  "name": "signup-wizard",
  "type": "multi-step",
  "steps": [
    {
      "id": "account",
      "title": "Account Info",
      "description": "Create your account",
      "fields": [
        { "name": "email", "type": "email", "required": true },
        { "name": "password", "type": "password", "required": true }
      ]
    },
    {
      "id": "profile",
      "title": "Profile Info",
      "description": "Tell us about yourself",
      "fields": [
        { "name": "name", "type": "text", "required": true },
        { "name": "company", "type": "text" }
      ]
    },
    {
      "id": "preferences",
      "title": "Preferences",
      "description": "Set your preferences",
      "fields": [
        { "name": "notifications", "type": "checkbox" },
        { "name": "newsletter", "type": "checkbox" }
      ]
    }
  ]
}

Validation Rules

Built-in Validators

• required - Field is mandatory
• email - Valid email format
• url - Valid URL
• number - Numeric value
• minLength:n - Minimum character length
• maxLength:n - Maximum character length
• min:n - Minimum numeric value
• max:n - Maximum numeric value
• pattern:regex - Custom regex pattern
• match:fieldName - Match another field (passwords)

Custom Validation

{
  "name": "age",
  "type": "number",
  "validation": [
    { "rule": "min:18", "message": "Must be 18 or older" },
    { "rule": "max:120", "message": "Invalid age" }
  ]
}

Conditional Fields

Show/hide fields based on conditions:

{
  "name": "company",
  "type": "text",
  "label": "Company Name",
  "showIf": {
    "field": "userType",
    "equals": "business"
  }
}

Form Styling

Theme Configuration

{
  "theme": {
    "colors": {
      "primary": "#6366f1",
      "error": "#ef4444",
      "success": "#10b981",
      "border": "#e5e7eb"
    },
    "spacing": "normal",
    "roundedness": "medium",
    "fontSize": "base"
  }
}

Layout Options

• single-column - Single column layout
• two-column - Two column layout
• compact - Compact spacing
• spacious - Generous spacing
• flat - No shadows/elevation
• elevated - Shadows and elevation

Form Integration

Webhooks

{
  "submit": {
    "action": "/api/contact",
    "method": "POST",
    "webhook": "https://api.example.com/webhook"
  }
}

Success Message

{
  "submit": {
    "successMessage": "Thank you! We'll get back to you soon.",
    "redirectUrl": "/thank-you"
  }
}

Email Notification

{
  "notifications": {
    "onSubmit": {
      "type": "email",
      "to": "[email protected]",
      "template": "new-form-submission"
    }
  }
}

Advanced Features

CAPTCHA

{
  "captcha": {
    "enabled": true,
    "type": "recaptcha",
    "siteKey": "your-site-key"
  }
}

Progress Bar

{
  "showProgress": true,
  "progressPosition": "top"
}

Field Grouping

{
  "fieldGroups": [
    {
      "title": "Personal Information",
      "fields": ["name", "email", "phone"]
    },
    {
      "title": "Address",
      "fields": ["street", "city", "state", "zip"]
    }
  ]
}

Dynamic Fields

{
  "name": "experience",
  "type": "dynamic",
  "label": "Work Experience",
  "fields": [
    { "name": "company", "type": "text" },
    { "name": "position", "type": "text" },
    { "name": "duration", "type": "text" }
  ],
  "maxItems": 5
}

Form Examples

Contact Form

{
  "name": "contact",
  "fields": [
    { "name": "name", "type": "text", "required": true },
    { "name": "email", "type": "email", "required": true },
    { "name": "subject", "type": "text", "required": true },
    { "name": "message", "type": "textarea", "required": true, "rows": 5 }
  ]
}

Newsletter Signup

{
  "name": "newsletter",
  "layout": "compact",
  "fields": [
    { "name": "email", "type": "email", "required": true },
    { "name": "agree", "type": "checkbox", "label": "Subscribe to our newsletter", "required": true }
  ]
}

Survey Form

{
  "name": "survey",
  "fields": [
    {
      "name": "satisfaction",
      "type": "radio",
      "label": "How satisfied are you?",
      "options": [
        { "value": "1", "label": "Very Dissatisfied" },
        { "value": "2", "label": "Dissatisfied" },
        { "value": "3", "label": "Neutral" },
        { "value": "4", "label": "Satisfied" },
        { "value": "5", "label": "Very Satisfied" }
      ]
    }
  ]
}

Resources

scripts/

• form_builder.py - Generate forms from specifications
• export_form.py - Export to React/Vue/HTML
• validate_form.py - Form validation utilities
• theme_builder.py - Create custom themes

references/

• field-types.md - Detailed field type documentation
• validation-guide.md - Validation rules and patterns
• integration-guide.md - Backend integration examples