# Form Builder Agent - Example Usage

## Example 1: Employee Onboarding Form URS

### User Requirements (URS)
```
We need an employee onboarding form with the following requirements:

1. Personal Information Section:
   - Full name (required)
   - Email address (required, must be valid email)
   - Phone number (required)
   - Date of birth (required, must be 18+)
   - Address (street, city, state, zip code)

2. Employment Information:
   - Position/Job title (required)
   - Department (dropdown: HR, IT, Finance, Marketing, Sales)
   - Start date (required)
   - Employment type (radio: Full-time, Part-time, Contract)
   - Salary (required, numeric, min $30,000)

3. Documents Section:
   - ID document upload (required, PDF/Image)
   - Resume upload (required, PDF/DOC)
   - Emergency contact form (name, phone, relationship)

4. Business Rules:
   - If employment type is "Manager", show additional fields for team size and direct reports
   - Auto-calculate years of experience from start date
   - Validate email format in real-time
   - Show success message when form is completed
```

### Agent Response

## Form Analysis
Based on your employee onboarding requirements, I've created a comprehensive form with:
- Personal information section with address fields
- Employment details with conditional manager fields
- Document upload section with file validation
- Emergency contact information
- Auto-calculation of experience years
- Real-time email validation

## Component Count
Total: 18 components including 4 sections with conditional logic

## Special Features
- Conditional logic shows manager-specific fields when "Manager" role is selected
- Auto-calculates years of experience from start date
- File upload validation for required documents (PDF, DOC, images)
- Real-time email format validation
- Success message on form completion

## JSON Output
```json
{
  "formName": "Employee Onboarding Form",
  "formDescription": "Complete employee registration and onboarding process for new hires",
  "formId": null,
  "components": [
    {
      "type": "heading",
      "props": {
        "name": "form_title",
        "value": "Employee Onboarding Form",
        "level": 1,
        "width": "100%",
        "gridColumn": "span 12",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "paragraph",
      "props": {
        "name": "form_description",
        "value": "Please complete all required fields to begin your onboarding process. All information will be kept confidential.",
        "width": "100%",
        "gridColumn": "span 12",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "heading",
      "props": {
        "name": "personal_section",
        "value": "Personal Information",
        "level": 2,
        "width": "100%",
        "gridColumn": "span 12",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "text",
      "props": {
        "name": "full_name",
        "label": "Full Name",
        "placeholder": "Enter your full name",
        "help": "Please provide your first and last name as it appears on official documents",
        "validation": "required|min:2",
        "value": "",
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "email",
      "props": {
        "name": "email_address",
        "label": "Email Address",
        "placeholder": "employee@company.com",
        "help": "Your company email address for communications",
        "validation": "required|email",
        "value": "",
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "tel",
      "props": {
        "name": "phone_number",
        "label": "Phone Number",
        "placeholder": "(555) 123-4567",
        "help": "Your primary contact number",
        "validation": "required|tel",
        "value": "",
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "date",
      "props": {
        "name": "date_of_birth",
        "label": "Date of Birth",
        "help": "Must be 18 years or older",
        "validation": "required",
        "value": "",
        "max": "2006-12-31",
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "text",
      "props": {
        "name": "street_address",
        "label": "Street Address",
        "placeholder": "123 Main Street",
        "help": "Your current residential address",
        "validation": "required",
        "value": "",
        "width": "100%",
        "gridColumn": "span 12",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "text",
      "props": {
        "name": "city",
        "label": "City",
        "placeholder": "City name",
        "help": "City of residence",
        "validation": "required",
        "value": "",
        "width": "33.33%",
        "gridColumn": "span 4",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "text",
      "props": {
        "name": "state",
        "label": "State",
        "placeholder": "State",
        "help": "State or province",
        "validation": "required",
        "value": "",
        "width": "33.33%",
        "gridColumn": "span 4",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "text",
      "props": {
        "name": "zip_code",
        "label": "ZIP Code",
        "placeholder": "12345",
        "help": "Postal/ZIP code",
        "validation": "required|regex:/^[0-9]{5}(-[0-9]{4})?$/",
        "value": "",
        "width": "33.33%",
        "gridColumn": "span 4",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "heading",
      "props": {
        "name": "employment_section",
        "value": "Employment Information",
        "level": 2,
        "width": "100%",
        "gridColumn": "span 12",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "text",
      "props": {
        "name": "job_title",
        "label": "Position/Job Title",
        "placeholder": "Software Engineer",
        "help": "Your official job title",
        "validation": "required",
        "value": "",
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "select",
      "props": {
        "name": "department",
        "label": "Department",
        "help": "Select your assigned department",
        "validation": "required",
        "value": "",
        "placeholder": "Choose department",
        "options": [
          { "label": "Human Resources", "value": "hr" },
          { "label": "Information Technology", "value": "it" },
          { "label": "Finance", "value": "finance" },
          { "label": "Marketing", "value": "marketing" },
          { "label": "Sales", "value": "sales" }
        ],
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "date",
      "props": {
        "name": "start_date",
        "label": "Start Date",
        "help": "Your official employment start date",
        "validation": "required",
        "value": "",
        "min": "2024-01-01",
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "radio",
      "props": {
        "name": "employment_type",
        "label": "Employment Type",
        "help": "Select your employment classification",
        "validation": "required",
        "value": "",
        "options": [
          { "label": "Full-time", "value": "full_time" },
          { "label": "Part-time", "value": "part_time" },
          { "label": "Contract", "value": "contract" },
          { "label": "Manager", "value": "manager" }
        ],
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "number",
      "props": {
        "name": "salary",
        "label": "Annual Salary (USD)",
        "placeholder": "50000",
        "help": "Your annual salary in USD",
        "validation": "required|min:30000",
        "value": "",
        "min": 30000,
        "step": 1000,
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "number",
      "props": {
        "name": "years_experience",
        "label": "Years of Experience",
        "placeholder": "0",
        "help": "Calculated from start date",
        "validation": "",
        "value": 0,
        "readonly": true,
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "number",
      "props": {
        "name": "team_size",
        "label": "Team Size (Direct Reports)",
        "placeholder": "0",
        "help": "Number of direct reports if applicable",
        "validation": "min:0",
        "value": 0,
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": true,
          "operator": "eq",
          "conditions": [
            {
              "field": "employment_type",
              "value": "manager",
              "operator": "eq"
            }
          ]
        }
      }
    },
    {
      "type": "textarea",
      "props": {
        "name": "manager_responsibilities",
        "label": "Manager Responsibilities",
        "placeholder": "Describe your key responsibilities as a manager...",
        "help": "Brief description of your management role",
        "validation": "",
        "value": "",
        "rows": 3,
        "width": "100%",
        "gridColumn": "span 12",
        "conditionalLogic": {
          "action": "show",
          "enabled": true,
          "operator": "eq",
          "conditions": [
            {
              "field": "employment_type",
              "value": "manager",
              "operator": "eq"
            }
          ]
        }
      }
    },
    {
      "type": "heading",
      "props": {
        "name": "documents_section",
        "value": "Required Documents",
        "level": 2,
        "width": "100%",
        "gridColumn": "span 12",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "file",
      "props": {
        "name": "id_document",
        "label": "ID Document",
        "help": "Upload a government-issued ID (passport, driver's license, etc.)",
        "validation": "required",
        "accept": ".pdf,.jpg,.jpeg,.png",
        "multiple": false,
        "maxSize": "10MB",
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "file",
      "props": {
        "name": "resume",
        "label": "Resume/CV",
        "help": "Upload your current resume or CV",
        "validation": "required",
        "accept": ".pdf,.doc,.docx",
        "multiple": false,
        "maxSize": "5MB",
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "heading",
      "props": {
        "name": "emergency_contact_section",
        "value": "Emergency Contact",
        "level": 2,
        "width": "100%",
        "gridColumn": "span 12",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "text",
      "props": {
        "name": "emergency_contact_name",
        "label": "Emergency Contact Name",
        "placeholder": "Contact's full name",
        "help": "Name of person to contact in case of emergency",
        "validation": "required",
        "value": "",
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "tel",
      "props": {
        "name": "emergency_contact_phone",
        "label": "Emergency Contact Phone",
        "placeholder": "(555) 123-4567",
        "help": "Phone number for emergency contact",
        "validation": "required|tel",
        "value": "",
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "text",
      "props": {
        "name": "emergency_contact_relationship",
        "label": "Relationship",
        "placeholder": "Spouse, Parent, Friend, etc.",
        "help": "Your relationship to the emergency contact",
        "validation": "required",
        "value": "",
        "width": "100%",
        "gridColumn": "span 12",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "button",
      "props": {
        "name": "submit_button",
        "label": "Submit Onboarding Form",
        "buttonType": "submit",
        "variant": "primary",
        "size": "lg",
        "disabled": false,
        "width": "25%",
        "gridColumn": "span 3",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    }
  ],
  "customScript": "// Auto-calculate years of experience from start date\nonFieldChange(['start_date'], () => {\n  const startDate = new Date(getField('start_date'));\n  const today = new Date();\n  if (startDate && !isNaN(startDate.getTime())) {\n    const years = Math.floor((today - startDate) / (1000 * 60 * 60 * 24 * 365));\n    setField('years_experience', Math.max(0, years));\n  }\n});\n\n// Real-time email validation\nonFieldChange(['email_address'], () => {\n  const email = getField('email_address');\n  if (email && !email.includes('@')) {\n    showError('Please enter a valid email address');\n  } else if (email && email.includes('@')) {\n    showSuccess('Email format looks good!');\n  }\n});\n\n// Show success message on form load\nshowInfo('Welcome to the onboarding process! Please complete all required fields.');",
  "customCSS": ".form-container {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  padding: 30px;\n  border-radius: 15px;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n}\n\n.form-field {\n  margin-bottom: 20px;\n}\n\n.form-field[data-name='submit_button'] {\n  margin-top: 30px;\n  text-align: center;\n}",
  "formEvents": {
    "onLoad": true,
    "onFieldChange": true,
    "onSubmit": false,
    "onValidation": false
  },
  "scriptMode": "safe"
}
```

## Usage Notes
- Form includes conditional logic for manager-specific fields (team size, responsibilities)
- File upload accepts PDF, DOC, and image formats with size limits
- Email validation runs in real-time with user feedback
- Experience calculation updates automatically when start date changes
- Form has professional styling with gradient background
- All required fields are properly validated
- Emergency contact section for safety compliance

---

## Example 2: Simple Contact Form URS

### User Requirements
```
Need a simple contact form with:
- Name field
- Email field  
- Subject dropdown (General, Support, Sales, Other)
- Message textarea
- Newsletter signup checkbox
```

### Agent Response

## Form Analysis
Created a clean, simple contact form with basic fields and newsletter signup option.

## Component Count
Total: 6 components

## Special Features
- Email validation
- Newsletter signup with checkbox
- Responsive layout

## JSON Output
```json
{
  "formName": "Contact Form",
  "formDescription": "Simple contact form for general inquiries",
  "formId": null,
  "components": [
    {
      "type": "heading",
      "props": {
        "name": "form_title",
        "value": "Contact Us",
        "level": 2,
        "width": "100%",
        "gridColumn": "span 12",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "text",
      "props": {
        "name": "name",
        "label": "Full Name",
        "placeholder": "Enter your name",
        "help": "Please provide your full name",
        "validation": "required|min:2",
        "value": "",
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "email",
      "props": {
        "name": "email",
        "label": "Email Address",
        "placeholder": "your.email@example.com",
        "help": "We'll use this to respond to your inquiry",
        "validation": "required|email",
        "value": "",
        "width": "50%",
        "gridColumn": "span 6",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "select",
      "props": {
        "name": "subject",
        "label": "Subject",
        "help": "Select the topic of your inquiry",
        "validation": "required",
        "value": "",
        "placeholder": "Choose a subject",
        "options": [
          { "label": "General Inquiry", "value": "general" },
          { "label": "Technical Support", "value": "support" },
          { "label": "Sales Question", "value": "sales" },
          { "label": "Other", "value": "other" }
        ],
        "width": "100%",
        "gridColumn": "span 12",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "textarea",
      "props": {
        "name": "message",
        "label": "Message",
        "placeholder": "Please describe your inquiry...",
        "help": "Provide details about your question or request",
        "validation": "required|min:10",
        "value": "",
        "rows": 5,
        "width": "100%",
        "gridColumn": "span 12",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    },
    {
      "type": "checkbox",
      "props": {
        "name": "newsletter_signup",
        "label": "Subscribe to Newsletter",
        "help": "Receive updates about our products and services",
        "validation": "",
        "value": [],
        "options": [
          { "label": "Yes, I want to receive newsletters", "value": "yes" }
        ],
        "width": "100%",
        "gridColumn": "span 12",
        "conditionalLogic": {
          "action": "show",
          "enabled": false,
          "operator": "and",
          "conditions": []
        }
      }
    }
  ],
  "customScript": "",
  "customCSS": "",
  "formEvents": {
    "onLoad": false,
    "onFieldChange": false,
    "onSubmit": false,
    "onValidation": false
  },
  "scriptMode": "safe"
}
```

## Usage Notes
- Simple, clean form layout
- Email validation included
- Optional newsletter signup
- Responsive design with side-by-side name/email fields