Form Input Grouping: Feasibility Analysis

Overview

This document analyzes the feasibility of implementing input field grouping functionality that allows users to visually group form inputs (e.g., first name + last name in a single row) while maintaining the existing form system architecture.

Feature Requirements

User Story

As a form builder user, I want to:

• Group multiple form inputs together (e.g., two text inputs for first/last name)
• Display grouped inputs in a flex row layout instead of the default column layout
• Maintain individual input configuration and validation
• Have the rest of the form continue in the normal column layout

Example Use Cases

1. Name Fields: First Name + Last Name in one row
2. Address Fields: Street Number + Street Name in one row
3. Date Fields: Day + Month + Year dropdowns in one row
4. Contact Fields: Phone + Email in one row

Current Architecture Analysis

Form System Structure

FormBlock (form-block)
├── FormInput 1 (form-input > form-input-wrapper > input)
├── FormInput 2 (form-input > form-input-wrapper > input)
├── FormInput 3 (form-input > form-input-wrapper > input)
└── Submit Button

Key Components

• CreativeFormBlock.vue: Main form rendering component
• FormInputBase.vue: Wrapper component for all input types
• Individual Input Components: FormTextInput.vue, etc.
• Configuration System: FormConfiguration.vue manages input list

Current Data Structure

formBlock = {
  blockType: 'formProperties',
  inputs: [
    { blockType: 'formInputProperties', type: 'text', typeIndex: 1, order: 0 },
    { blockType: 'formInputProperties', type: 'text', typeIndex: 2, order: 1 },
    { blockType: 'formInputProperties', type: 'email', typeIndex: 1, order: 2 },
  ]
}

Proposed Solutions

Option 1: Input Group Block (Recommended)

Concept: Create a new specialized block type for input groups that contains multiple form inputs.

Architecture

FormBlock (form-block)
├── FormInput 1 (single input)
├── FormInputGroup (form-input-group) [NEW]
│   ├── FormInput 2 (grouped input)
│   └── FormInput 3 (grouped input)
├── FormInput 4 (single input)
└── Submit Button

Data Structure

formBlock = {
  blockType: 'formProperties',
  inputs: [
    { blockType: 'formInputProperties', type: 'text', order: 0 },
    { 
      blockType: 'formInputGroupProperties', // NEW
      groupId: 'group-1',
      layout: 'row',
      gap: '16px',
      order: 1,
      inputs: [
        { blockType: 'formInputProperties', type: 'text', parentGroup: 'group-1' },
        { blockType: 'formInputProperties', type: 'text', parentGroup: 'group-1' }
      ]
    },
    { blockType: 'formInputProperties', type: 'email', order: 2 },
  ]
}

Implementation Requirements

1. New Block Type

// In blocks.ts
FORM_INPUT_GROUP: 'formInputGroupProperties'

// In types.ts
interface FormInputGroupProperties {
  blockType: 'formInputGroupProperties'
  groupId: string
  layout: 'row' | 'column'
  gap: string
  alignItems: 'flex-start' | 'center' | 'flex-end'
  inputs: FormInputProperties[]
  order: number
}

2. New Components

<!-- CreativeFormInputGroup.vue -->
<template>
  <div 
    class="form-input-group" 
    :style="groupStyles"
  >
    <div
      v-for="input in groupInputs"
      :key="input.blockName"
      class="form-input-group-item"
      :style="itemStyles"
    >
      <component
        :is="getInputComponent(input.type)"
        :input="input"
        :index="getInputIndex(input)"
        :class-names="classNames"
        v-model="formData[input.blockName]"
      />
    </div>
  </div>
</template>

3. Configuration Component

<!-- FormInputGroupConfiguration.vue -->
<template>
  <div>
    <InputSection>
      <InputLabel label="Group Layout" />
      <SelectField
        :value="blockData.layout"
        :options="[
          { value: 'row', label: 'Horizontal (Row)' },
          { value: 'column', label: 'Vertical (Column)' }
        ]"
        @input="updateValue($event, 'layout')"
      />
    </InputSection>
    
    <InputSection>
      <InputLabel label="Gap Between Inputs" />
      <InputField
        :value="blockData.gap"
        placeholder="16px"
        @input="updateValue($event, 'gap')"
      />
    </InputSection>
    
    <!-- Input management -->
    <div class="grouped-inputs">
      <div 
        v-for="(input, index) in blockData.inputs"
        :key="input.blockName"
        class="grouped-input-item"
      >
        <!-- Individual input configuration -->
      </div>
    </div>
  </div>
</template>

4. UI Integration

• Add "Group Inputs" button in FormConfiguration.vue
• Allow selection of multiple inputs to group
• Drag & drop interface for grouping/ungrouping
• Visual indicators for grouped inputs

Advantages

• ✅ Clean separation of concerns
• ✅ Maintains existing input validation and styling
• ✅ Flexible layout options (row, column, gap, alignment)
• ✅ Easy to extend with more layout options
• ✅ Preserves form submission data structure
• ✅ Backward compatible with existing forms

Challenges

• 🔄 Requires new block type and configuration system
• 🔄 Need to update form rendering logic
• 🔄 Complex drag & drop UI for grouping
• 🔄 Order management between groups and individual inputs

Option 2: Layout Metadata Approach

Concept: Add layout metadata to existing form inputs without creating new block types.

Data Structure

formBlock = {
  inputs: [
    { type: 'text', order: 0, layoutGroup: null },
    { 
      type: 'text', 
      order: 1, 
      layoutGroup: 'group-1',
      layoutGroupIndex: 0,
      layoutGroupLayout: 'row'
    },
    { 
      type: 'text', 
      order: 2, 
      layoutGroup: 'group-1',
      layoutGroupIndex: 1,
      layoutGroupLayout: 'row'
    },
    { type: 'email', order: 3, layoutGroup: null },
  ]
}

Advantages

• ✅ No new block types required
• ✅ Simpler data structure
• ✅ Easier migration for existing forms

Challenges

• ❌ Pollutes input data structure with layout concerns
• ❌ Complex rendering logic to group inputs
• ❌ Difficult to manage group-level styling
• ❌ Less flexible for future enhancements

Option 3: CSS-Only Approach

Concept: Use CSS Grid or Flexbox with special classes to achieve grouping without data structure changes.

Implementation

.form-inputs.has-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.form-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

Advantages

• ✅ Minimal code changes
• ✅ Fast implementation

Challenges

• ❌ Limited flexibility
• ❌ Hard to configure dynamically
• ❌ Difficult to handle different group sizes
• ❌ No semantic grouping for accessibility

Recommended Implementation: Option 1

Phase 1: Core Infrastructure

1. Create FormInputGroup block type

   • Add to blocks.ts and types.ts
   • Create basic data structure
   • Add to defaults.ts

2. Create CreativeFormInputGroup component

   • Basic row/column layout support
   • Gap and alignment configuration
   • Integration with existing input components

3. Update CreativeFormBlock rendering

   • Detect and render input groups
   • Maintain order between groups and individual inputs

Phase 2: Configuration UI

1. Create FormInputGroupConfiguration component

   • Layout options (row/column)
   • Gap and alignment controls
   • Individual input management

2. Update FormConfiguration.vue

   • Add grouping functionality
   • UI for selecting inputs to group
   • Drag & drop for reordering

Phase 3: Advanced Features

1. Enhanced layouts

   • Custom grid layouts
   • Responsive breakpoints
   • Advanced alignment options

2. Styling system

   • Group-level styling
   • Individual item styling within groups
   • Theme integration

Technical Considerations

Form Submission

• Group structure should be transparent to form submission
• Data should be submitted as individual input values
• No changes required to existing form processing

Validation

• Individual input validation remains unchanged
• Group-level validation could be added later
• Error display needs to work within grouped layout

Accessibility

• Proper ARIA grouping attributes
• Logical tab order within groups
• Screen reader compatibility

Performance

• Minimal impact on rendering performance
• Efficient re-rendering when group structure changes
• Memory usage considerations for large forms

Migration Strategy

Backward Compatibility

• Existing forms continue to work unchanged
• Gradual migration path for enhanced layouts
• No breaking changes to existing APIs

Rollout Plan

1. Internal testing with simple two-input groups
2. Beta release with basic row layout
3. Full release with complete feature set
4. Enhancement phase with advanced layouts

Effort Estimation

Development Time

• Phase 1: 2-3 weeks (core infrastructure)
• Phase 2: 2-3 weeks (configuration UI)
• Phase 3: 1-2 weeks (advanced features)
• Total: 5-8 weeks

Complexity Level: Medium-High

• Requires changes across multiple components
• New block type architecture
• Complex UI for grouping management
• Thorough testing required

Conclusion

Input field grouping is highly feasible and would provide significant value to form builders. The recommended approach using a new FormInputGroup block type provides the best balance of flexibility, maintainability, and user experience.

The feature aligns well with the existing specialized block architecture and can be implemented incrementally without breaking existing functionality. The main challenges are in the configuration UI complexity and ensuring proper integration with the existing form system.

Recommendation: Proceed with implementation using Option 1 (Input Group Block) in the phased approach outlined above.