Intro

Welcome to the Dynamic Form Builder Project

Overview

Welcome to the Dynamic Form Builder Project, a powerful and flexible tool designed to help you create, customize, and manage forms with ease. This project showcases the capabilities of modern web development using Next.js 14, Material-UI, and various other technologies to provide a seamless and interactive user experience.

Key Features

1. Theme Switching

My project supports dynamic theme switching, allowing you to toggle between light and dark modes. Additionally, you can change the primary color of the theme, choosing from blue, green, indigo, and yellow. This feature ensures that the application looks great and is comfortable to use in any lighting condition.

2. Dynamic Form Creation

The core feature of this project is the ability to create forms dynamically using a drag-and-drop interface. You can build forms by selecting and customizing various field types. The available field types include:
  • Heading: Add a heading to organize and label different sections of your form.
  • Text Field: Includes subtypes for single line, multiline, email, password, and URL inputs.
  • Rich Text Editor: Using React Quill, this field allows for rich text formatting.
  • Radio Buttons: For single selection among multiple options.
  • Multi Checkboxes: Allows for multiple selections from a list of options.
  • Date Picker: Choose a date with an easy-to-use calendar interface.
  • File Upload: Allows users to upload files.
  • Single Checkbox: For a single true/false option.
  • Dropdown: A select field for choosing one option from a dropdown menu.
Each field can be customized with features like name, placeholder, and whether it is required.

3. Form Creation Page

On the Form Creation Page, you can build your form by dragging and dropping the desired fields into place. Customize each field's properties according to your needs. Once you have configured your form, it is saved in cookies for easy retrieval and editing later.

4. Form Submission Page

The Form Submission Page lets you fill out the forms you created. Users can enter data into the fields as specified during the creation process. Upon submission, the entered data is saved in cookies, ensuring that your input is stored securely and can be reviewed later.

5. Preview Page

The Preview Page provides a summary of the data you have submitted. This page displays the information in a clear and organized manner, allowing you to review your responses.

How It Works

1. Theme Switching

You can switch between light and dark themes, and change the primary color by accessing the theme settings icon at the bottom of the screen.

2. Creating a Form

  • Navigate to the Creation Page.
  • Use the drag-and-drop interface to add fields to your form.
  • Customize each field with a name, placeholder, and required status.
  • Save your form, which will be stored in cookies.

3. Submitting a Form

  • Navigate to the Submission Page.
  • Fill out the fields as required.
  • Submit the form to save your data in cookies.

4. Previewing Data

  • Navigate to the Preview Page.
  • Review the data you have submitted in a structured format.

Conclusion

This project is a demonstration of creating a flexible and interactive form-building application using modern web technologies. Whether you are a developer looking to learn more about Next.js, Material-UI, and dynamic form creation, or a user who needs a powerful tool for creating and managing forms, this project has something to offer.
Feel free to explore each feature, create your forms, and see how easy it is to manage form data with this dynamic form builder.