- Introduced new documentation files: `agent-example-usage.md`, `agent-instructions-form-generator.md`, and `form-builder-json-structure.md` to provide comprehensive guidance on using the Form Builder Agent, including example usage and JSON structure. - Implemented import and export functionality in the form management interface, allowing users to upload JSON files and download forms as JSON. - Enhanced the `manage.vue` component with modals for importing forms, including options for file upload and pasting JSON content, along with validation feedback. - Developed a new API endpoint for importing forms, ensuring proper validation and processing of incoming JSON data. - Updated the form management logic to handle JSON imports and exports seamlessly, improving user experience and form management capabilities.
799 lines
22 KiB
Markdown
799 lines
22 KiB
Markdown
# 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 |