Dynamic Form Builder

A modern, fully-featured React application that dynamically generates forms from JSON configuration. Built with Vite, Bootstrap 5, and Material-UI components.

Features

✨ Dynamic Form Generation - Create complex forms from simple JSON configurations
🎨 Beautiful UI - Modern design with gradients, animations, and smooth transitions
✅ Comprehensive Validation - Built-in validation for all field types
📱 Responsive Design - Works seamlessly on all device sizes
🔧 Extensible Architecture - Easy to add new field types

Supported Field Types

• Text Fields - With placeholder and required validation
• Date Fields - With min/max date constraints
• Select Fields - Both single and multiple selection modes
• File Upload - With file type and size validation

Project Structure

dynamic-form-builder/
├── src/
│   ├── components/
│   │   ├── DynamicForm.jsx          # Main form container
│   │   ├── FieldRenderer.jsx        # Field factory component
│   │   └── fields/
│   │       ├── TextField.jsx        # Text input field
│   │       ├── DateField.jsx        # Date input field
│   │       ├── SelectField.jsx      # Select dropdown
│   │       └── FileField.jsx        # File upload field
│   ├── utils/
│   │   ├── fieldValidator.js        # Validation utilities
│   │   └── formHelpers.js           # Helper functions
│   ├── config/
│   │   └── sampleForm.json          # Sample form configuration
│   ├── App.jsx
│   ├── App.css
│   └── main.jsx
└── package.json

Getting Started

Installation

# Navigate to the project directory
cd dynamic-form-builder

# Install dependencies (already done)
npm install

# Start the development server
npm run dev

The application will be available at http://localhost:5173/

Building for Production

npm run build

JSON Configuration Format

Create forms by defining a JSON configuration:

{
  "formId": "your_form_id",
  "fields": [
    {
      "id": "field1",
      "label": "Field Label",
      "type": "text",
      "props": {
        "placeholder": "Enter text",
        "required": true
      }
    }
  ]
}

Field Types and Props

Text Field

{
  "type": "text",
  "props": {
    "placeholder": "string",
    "required": boolean
  }
}

Date Field

{
  "type": "date",
  "props": {
    "min": "YYYY-MM-DD",
    "max": "YYYY-MM-DD",
    "required": boolean
  }
}

Select Field

{
  "type": "select",
  "props": {
    "mode": "single" | "multiple",
    "options": [
      { "label": "Display Text", "value": "value" }
    ],
    "required": boolean
  }
}

File Field

{
  "type": "file",
  "props": {
    "accept": [".pdf", ".docx"],
    "maxSizeMB": number,
    "required": boolean
  }
}

Customization

Adding New Field Types

1. Create a new component in src/components/fields/
2. Add the component to the fieldComponents object in FieldRenderer.jsx
3. Add validation logic in src/utils/fieldValidator.js if needed

Styling

The application uses a combination of:

• Bootstrap 5 for base styling and layout
• Custom CSS for enhanced aesthetics (gradients, animations)
• Material-UI for select dropdowns and icons

Modify src/App.css to customize the appearance.

Technologies Used

• React 18 - UI library
• Vite - Build tool and dev server
• Bootstrap 5 - CSS framework
• Material-UI - Enhanced components
• Emotion - CSS-in-JS for Material-UI

License

MIT

Author

Created with ❤️ using modern web technologies