Dynamic Form Builder with SurveyJS

A full-featured React application for creating dynamic forms using SurveyJS's professional drag-and-drop form builder.

Features

Form Builder

• Professional Drag-and-Drop Interface - SurveyJS Creator with intuitive UI
• Rich Component Library - 25+ form elements (Text, Dropdown, Checkboxes, Radio, Rating, File Upload, Signature, etc.)
• Visual Designer - Build forms visually with toolbox, canvas, and properties panel
• Properties Panel - Configure each element's settings, validation, and logic
• Conditional Logic - Show/hide fields based on answers
• Multi-page Forms - Create wizard-style forms
• Preview Mode - Test forms before saving
• JSON Editor - View and edit form schema directly

Form Management

• Create Forms - Build and save forms with drag-and-drop
• Edit Forms - Load and modify existing forms
• Render Forms - Dynamically display forms to users
• Collect Submissions - Store form responses
• View Submissions - Review all submitted data
• localStorage Storage - No backend required for demo

Tech Stack

Frontend

• React 19 with TypeScript
• SurveyJS - Professional form builder and renderer
  • survey-creator-react - Form builder component
  • survey-react-ui - Form renderer
  • survey-core - Core functionality
• React Router DOM - Client-side routing
• Axios - HTTP client

Backend (Optional)

• Express - REST API server
• MongoDB with Mongoose - Database
• CORS - Cross-origin support

Installation

# Clone the repository
git clone https://github.com/react-angular-standards/form-builder-example.git
cd form-builder-example

# Install dependencies
npm install --legacy-peer-deps

Running the Application

Frontend Only (with localStorage)

npm start

The app will open at http://localhost:3000

With Backend (MongoDB required)

# Terminal 1 - Start MongoDB
mongod

# Terminal 2 - Start Backend
npm run server

# Terminal 3 - Start Frontend
npm start

Usage

Creating a Form

1. Navigate to http://localhost:3000
2. Click "Create New Form"
3. Enter form name and description
4. Use the SurveyJS Creator interface:
   • Toolbox (Left) - Drag components to the canvas
   • Canvas (Center) - Design your form
   • Properties (Right) - Configure selected elements
5. Click "Save Form"

Editing a Form

1. From the forms list, click the edit icon (✏️)
2. Modify the form in the builder
3. Click "Update Form"

Filling Out a Form

1. From the forms list, click the view icon (👁️)
2. Fill in the form fields
3. Click "Complete" to submit

Viewing Submissions

1. From the forms list, click the submissions icon (📊)
2. View all form responses with timestamps

Project Structure

dynamic-form-react/
├── public/                  # Static files
├── server/                  # Backend (optional)
│   ├── models/             
│   │   ├── Form.js         # Form schema
│   │   └── FormSubmission.js
│   ├── routes/
│   │   └── forms.js        # API endpoints
│   └── server.js           # Express server
├── src/
│   ├── components/
│   │   ├── FormBuilder.tsx # SurveyJS Creator wrapper
│   │   ├── FormRenderer.tsx # SurveyJS form renderer
│   │   ├── FormBuilder.css
│   │   └── FormRenderer.css
│   ├── pages/
│   │   ├── FormList.tsx    # List all forms
│   │   ├── FormBuilderPage.tsx
│   │   ├── FormSubmissions.tsx
│   │   └── *.css
│   ├── services/
│   │   └── api.ts          # API client (localStorage)
│   ├── App.tsx
│   └── index.tsx
├── .env
├── package.json
└── README.md

API Endpoints (Backend)

• GET /api/forms - Get all forms
• GET /api/forms/:id - Get specific form
• POST /api/forms - Create new form
• PUT /api/forms/:id - Update form
• DELETE /api/forms/:id - Delete form
• POST /api/forms/:id/submit - Submit form response
• GET /api/forms/:id/submissions - Get form submissions

Environment Variables

Create a .env file:

# Backend
MONGODB_URI=mongodb://localhost:27017/dynamic-forms
PORT=5001

# Frontend
REACT_APP_API_URL=http://localhost:5001/api

Available Form Components

SurveyJS provides 25+ components including:

Input Fields:

• Single Input (Text)
• Multi-line Input (Comment)
• Number
• Email
• URL
• Password

Choice Fields:

• Dropdown
• Radio Group
• Checkboxes
• Tag Box
• Boolean (Yes/No)

Advanced:

• Rating
• Ranking
• Image Picker
• File Upload
• Signature Pad
• Date/Time
• Matrix (Grid)
• Dynamic Panel

Layout:

• Panel
• HTML
• Image
• Expression

Features in Detail

Visual Form Builder

• Drag components from toolbox to canvas
• Click any element to configure its properties
• Set validation rules, default values, placeholders
• Add conditional logic (show/hide based on answers)
• Organize with panels and pages
• Preview form before saving

Form Validation

• Required fields
• Min/max length
• Min/max value
• Email format
• URL format
• Regex patterns
• Custom validation expressions

Conditional Logic

• Show/hide questions based on answers
• Enable/disable fields
• Make fields required conditionally
• Set values based on other fields

Multi-page Forms

• Create wizard-style forms
• Progress indicator
• Navigation between pages
• Page visibility conditions

Scripts

npm start          # Start React development server
npm run build      # Build for production
npm run server     # Start backend server
npm run dev        # Run both frontend and backend
npm test           # Run tests

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Known Issues

• Some TypeScript warnings from library types (doesn't affect functionality)
• Source map warnings from SurveyJS (can be ignored)

Future Enhancements

• User authentication
• Form templates
• Export submissions to CSV/Excel
• Email notifications
• Form analytics
• Custom themes
• Form versioning
• Duplicate form functionality
• Public/private form sharing

License

MIT

Credits

Built with:

• SurveyJS - Professional form builder
• React - UI library
• Express - Backend framework
• MongoDB - Database

Contributing

Feel free to submit issues and enhancement requests!