Cavai Docs

Appearance

Form Template System Architecture ​

Overview ​

The Cavai form template system provides pre-configured form layouts that automatically create complete forms with multiple input fields, validation, and styling. This system eliminates code duplication and provides a consistent user experience.

Architecture Components ​

1. Template Definitions (defaults.ts) ​

Location: /src/pages/Chatbots/components/BuilderVisuals/Blocks/data/defaults.ts

Templates are defined as complete block objects containing:

  • Main form properties (formProperties)
  • All form input sub-blocks (formInputProperties-1, formInputProperties-2, etc.)
  • Submit button block (formSubmitButtonProperties)

Available Templates:

  • Basic Form: Default template with name, address, phone (Norwegian), email, terms checkbox
  • Contact Form: Simple contact form with name, email, message
  • Survey Form: Advanced form with dropdown, rating slider, feedback

2. Template Helper (formTemplateHelper.ts) ​

Location: /src/pages/Chatbots/components/BuilderVisuals/Configuration/helpers/formTemplateHelper.ts

Key Functions:

  • generateBasicFormTemplate(formBlockName) - Creates basic form blocks
  • generateContactFormTemplate(formBlockName) - Creates contact form blocks
  • generateSurveyFormTemplate(formBlockName) - Creates survey form blocks
  • removeExistingFormBlocks() - Cleans up existing form inputs
  • addTemplateBlocks() - Adds template blocks to store

Template Block Structure:

typescript
{
  blockTypeToCreate: 'formInputProperties',
  targetBlockPath: formBlockName,
  keepSelectedBlockPath: true,
  additionalProperties: {
    type: 'text',
    displayName: 'Text Input #1',
  },
  settings: {
    label: 'Full Name',
    placeholder: 'Enter your full name',
    required: true,
    validation: { required: true, minLength: 2, maxLength: 50 }
  }
}

3. Automatic Template Application ​

Default Form Creation: When users add a form block via AddBlockTool, the Basic Form template is automatically applied:

javascript
// AddBlockTool.vue
if (blockTypeToCreate === BLOCKS.FORM) {
  this.addFormWithBasicTemplate(object)
}

Manual Template Selection: Users can change templates via FormConfiguration.vue dropdown:

  • Templates are loaded from formTemplates array
  • Template application removes existing inputs and adds new ones
  • Real-time preview updates

Implementation Benefits ​

1. Single Source of Truth ​

  • Templates defined once in defaults.ts
  • Helper functions convert to block creation format
  • No code duplication between template definitions

2. Eliminated Redundancies ​

Before Optimization:

  • Template data in 3 places (defaults.ts, formTemplateHelper.ts, blocks.ts)
  • Unused generate methods in blocks.ts
  • Inconsistent styling and validation across templates

After Optimization:

  • Templates defined only in defaults.ts
  • Helper functions reference defaults.ts
  • Removed unused generate methods
  • Consistent validation and styling

3. User Experience Improvements ​

  • New forms start with practical basic template
  • No empty forms requiring manual input addition
  • Norwegian phone number defaults for local users
  • Required validation on essential fields

Template Specifications ​

Basic Form Template (Default) ​

Use Case: General purpose form for collecting user information

Fields:

  1. Full Name (text, required, 2-50 chars)
  2. Address (text, required, 5-100 chars)
  3. Phone Number (tel, required, Norwegian +47, 8 digits max)
  4. Email Address (email, required)
  5. Terms Checkbox (checkbox, required)
  6. Submit Button (blue background, white text)

Contact Form Template ​

Use Case: Simple contact/inquiry forms

Fields:

  1. Full Name (text, required, 2-50 chars)
  2. Email Address (email, required)
  3. Message (textarea, required, 10-500 chars, 4 rows)
  4. Submit Button ("Send Message", purple background)

Survey Form Template ​

Use Case: Feedback and survey collection

Fields:

  1. How did you hear about us? (dropdown, 5 options)
  2. Rate your experience (range slider, 1-5 stars)
  3. Additional Comments (textarea, optional, max 300 chars)
  4. Submit Button ("Submit Survey", green background)

Usage Guidelines ​

For Developers ​

Adding New Templates:

  1. Define template object in defaults.ts
  2. Add to formTemplates array
  3. Create generator function in formTemplateHelper.ts
  4. Add template handling in FormConfiguration.vue

Template Object Structure:

typescript
const formTemplateExample = {
  formProperties: { /* main form config */ },
  'formInputProperties-1': { /* first input */ },
  'formInputProperties-2': { /* second input */ },
  'formSubmitButtonProperties': { /* submit button */ }
}

For Users ​

Creating Forms:

  1. Add Form block via AddBlockTool - Basic template automatically applied
  2. Customize individual inputs via configuration panel
  3. Change template via FormConfiguration dropdown if needed

Template Selection:

  • Basic Form: General purpose, Norwegian phone defaults
  • Contact Form: Simple name/email/message
  • Survey Form: Advanced with dropdown and rating

Technical Implementation ​

Form Creation Flow ​

  1. User clicks "Add Form" in AddBlockTool
  2. addFormWithBasicTemplate() called automatically
  3. Form block created in store
  4. Basic template blocks added via addTemplateBlocks()
  5. Form appears with all inputs pre-configured

Template Application Flow ​

  1. User selects template in FormConfiguration
  2. removeExistingFormBlocks() cleans current inputs
  3. Template generator creates new block definitions
  4. addTemplateBlocks() adds blocks to store
  5. Form updates with new template structure

Validation Integration ​

  • Per-input validation automatically configured
  • HTML5 attributes applied (required, minlength, maxlength, pattern)
  • Country-specific phone validation for Norwegian numbers
  • Custom error messages for better UX

Future Enhancements ​

Planned Features ​

  • Template preview thumbnails
  • Custom template creation UI
  • Template import/export functionality
  • Industry-specific template packs
  • Multi-language template support

Extension Points ​

  • Add new input types to templates
  • Create conditional field logic
  • Implement template versioning
  • Add template analytics/usage tracking

Migration Notes ​

From Old System ​

  • Removed unused generateFormBlocks action from blocks.ts
  • Eliminated duplicate template definitions
  • Consolidated helper functions
  • Updated FormConfiguration to use new architecture

Backward Compatibility ​

  • Existing forms continue to work unchanged
  • Legacy template structure still supported
  • Gradual migration path for custom implementations

Internal documentation

Cavai