Rajkumar-Khatua / DFG---Dynamic-from-ganerator

Dynamic From Generator using React

Dynamic Form Generator Application

Table of Contents

• Description
• Key Features
• Additional Features (Optional)
• Technologies Used
• Usage
• Customization
• Contributing
• License
• Acknowledgments

Description

The Dynamic Form Generator Application is a web-based tool built using React.js that allows users to create custom forms with various types of form fields. It's designed to be highly customizable, supporting text inputs, text areas, dropdowns, checkboxes, radio buttons, and file upload fields. Users can add and remove form fields dynamically, specify field types, set options for dropdowns, and configure validation rules.

Key Features

• Dynamic Form Creation: Users can add and remove form fields on the fly.
• Customizable Field Types: Each form field includes a label and a component tailored to the field type.
• Supported Field Types: Text input, text area, dropdown, checkbox, radio button, and file upload.
• Dropdown Options: For dropdown fields, users can define a list of options.
• Form Submission: The application provides form submission and validation, displaying error messages for invalid fields.
• Save and Load Configurations: Users can save and load form configurations as JSON data.

Additional Features (Optional)

• Validation Rules: Users can set validation rules for form fields, including required fields, minimum/maximum length, and specific formats (e.g., email, phone number).
• File Upload Fields: Support for file upload fields, including validation for file type and size.

Technologies Used

• HTML

• CSS

• JavaScript

• React.js

  

Usage

Follow these steps to use the Dynamic Form Generator Application:

1. Clone the Repository:

   git clone https://github.com/Rajkumar-Khatua/DFG---Dynamic-from-ganerator.git

2. Navigate to the Project Directory:

   cd DFG---Dynamic-from-ganerator

3. Install the Dependencies:

    npm install

4. Start the Application:

   npm run dev

5. Open the Application in a Browser:

    http://localhost:5173

6. Open the Application in a Browser:

    https://dfg-dynamic-from-ganerator.vercel.app/

7. Create a Form:

   • Click the "Add Field" button to add a new form field.
   • Select a field type from the dropdown menu.
   • Enter a label for the field.
   • Click the "Add Field" button to add the field to the form.
   • Repeat these steps to add more fields.
   • Click the "Save form configuration as JSON" button to save the form configuration as JSON data.
   • Click the "Load form configuration from JSON" button to load a saved form configuration.
   • Click the "Submit" button to submit the form.
   • If any fields are invalid, error messages will be displayed.
   • If all fields are valid, the form data will be displayed in the console and inserted data show in the same screen.

Customization

• You can customize this application by modifying the components and styles in the src directory. Feel free to add your own styling, additional field types, or features to tailor it to your specific requirements.

Contributing

• Contributions to this project are welcome! If you'd like to contribute, please open an issue or create a pull request.

Acknowledgments

I would also like to thank the developers and contributors of the technologies and tools I used in this project:

• React.js - A fantastic JavaScript library for building user interfaces.
• HTML and CSS - The foundation of web development.
• JavaScript - The programming language that powers the web.
• Vercel - For hosting and version control of this project.

Finally, I want to acknowledge the support and encouragement of my friends and colleagues who provided valuable insights and feedback during the development of this project. Your contributions have been invaluable.

You can check out the live project here.

Thank you all for being a part of this project's journey.