Multi-Step Form

A dynamic multi-step form built using React that allows users to fill out multiple sections of a form, with field validation and smooth navigation between steps.

Features

• Multi-step Navigation: Users can move between form steps using "Next" and "Previous" buttons.
• Dynamic Field Rendering: The form fields are generated dynamically from a JSON-based configuration.
• Form Validation: The form validates required fields, ensuring that all required data is filled out before progressing to the next step or submitting the form.
• Support for Multiple Input Types:
  • Text, Number, Textarea
  • Dropdowns
  • Radio Buttons
  • Checkboxes
  • Sliders
• Customizable: You can easily modify or add more steps and fields by updating the configuration.

Tech Stack

• React: The JavaScript library used to build the UI.
• CSS: Custom styling for the form UI and validation errors.

Getting Started

Prerequisites

Before running the project, ensure that you have Node.js and npm (Node Package Manager) installed.

You can download Node.js from here.

Installation

1. Clone the repository:

   git clone https://github.com/parth395/dynamic-json-form.git

2. Navigate to the project directory:

   cd dynamic-json-form

3. Install dependencies:

   npm install

4. Run the app:

   npm start

5. Open your browser and navigate to:

   http://localhost:3000
   

Project Structure

├── public
├── src
│   ├── assets
│   │   ├── css                     # Folder for CSS files
│   │   │   └── index.css           # Example CSS file
│   │   ├── images                  # Folder for images
│   │   │   └── logo.png            # Example image file
│   │   └── json                    # Folder for JSON files
│   │       └── data.json           # Example JSON file
│   ├── components
│   │   ├── MultiStepForm
│   │   │   ├── index.js            # Multi-step form component
│   │   │   └── MultiStepForm.css   # Styling for MultiStepForm component
│   │   └── Navbar
│   │       ├── index.jsx           # Navbar component
│   │       └── Navbar.css          # Styling for Navbar component
│   ├── App.js                      # Main app component
│   ├── index.js                    # React entry point
│   └── MultiStepForm.css           # Styling for the multi-step form
└── README.md                       # Project documentation

Multi-Step Form Configuration

The form is driven by a formData object, passed as a prop to the MultiStepForm component. Here’s an example configuration:

const formData = {
  title: "User Registration",
  description: "Please fill out the details below to complete your registration.",
  groups: [
    {
      title: "Personal Information",
      fields: [
        { name: "firstName", label: "First Name", type: "text", required: true },
        { name: "lastName", label: "Last Name", type: "text", required: true },
        { name: "age", label: "Age", type: "number", required: true },
      ],
    },
    {
      title: "Preferences",
      fields: [
        {
          name: "color",
          label: "Favorite Color",
          type: "dropdown",
          options: ["Red", "Green", "Blue"],
          required: true,
        },
        {
          name: "newsletter",
          label: "Subscribe to Newsletter",
          type: "checkbox",
          options: [
            { value: "yes", label: "Yes" },
          ],
          required: false,
        },
      ],
    },
  ],
};

Validation

Fields that have the required: true attribute will be validated before allowing the user to navigate to the next step or submit the form. If a required field is left empty, an error message will appear and the field will be highlighted.

Styling

The form uses basic custom CSS for layout and validation. You can update the styles in the MultiStepForm.css file to match your design preferences.

Running Tests

Currently, no tests are included in the project. You can add tests using frameworks like Jest and React Testing Library for unit and integration testing.

Future Enhancements

• Form Data Persistence: Saving form data in localStorage or a backend server.
• Advanced Validation: Adding more complex validation patterns (e.g., email format, password strength).
• Custom Field Types: Extending the form to include custom field types like file uploads or date pickers.

Key Sections:

• Features: Highlights the main features of the form.
• Tech Stack: Lists the technologies used.
• Getting Started: Step-by-step guide on how to install and run the project locally.
• Project Structure: Gives an overview of the folder structure.
• Form Configuration: Explains how to customize the form by modifying formData.
• Validation: Information on how the validation works.
• Styling: Instructions for modifying styles.
• Future Enhancements: Suggests possible improvements.