https://github.com/medamineharbaoui/form-generator-with-react-js

This project is demonstrates an interactive and user-friendly form generator that allows users to create custom forms with a variety of field types.
https://github.com/medamineharbaoui/form-generator-with-react-js

cms form formbuilder frontend reactjs responsive-design typescript

Last synced: about 2 months ago
JSON representation

This project is demonstrates an interactive and user-friendly form generator that allows users to create custom forms with a variety of field types.

• Host: GitHub
• URL: https://github.com/medamineharbaoui/form-generator-with-react-js
• Owner: medamineharbaoui
• Created: 2023-05-08T16:45:56.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-28T12:21:59.000Z (over 1 year ago)
• Last Synced: 2025-05-30T06:15:00.009Z (about 1 year ago)
• Topics: cms, form, formbuilder, frontend, reactjs, responsive-design, typescript
• Language: JavaScript
• Homepage:
• Size: 964 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Form Generator with React JS

 

This project is demonstrates an interactive and user-friendly form generator that allows users to create custom forms with a variety of field types.

# Features

Form Creation Interface:

    - Add various field types (text, number, date, checkbox, radio button, dropdown, etc.).

    - Modify field properties (name, ID, class, default values, etc.).

    - Drag-and-drop to reorder fields.

    - Delete individual fields.

Form Generation:

    - Live preview of the form as it's being built.

    - Generate ready-to-use HTML, CSS, and JavaScript code.

    - Export the form as a JSON file for later use.

Form Importing:

    - Import previously created forms from JSON files.

Responsive Design:

    - Compatible with desktops, tablets, and smartphones.

Evaluation Criteria:

    - Efficient use of React JS (components, states, hooks, etc.).

    - Clean and organized code structure.

    - User-friendly UI/UX design.

    - Cross-browser and device compatibility

# Demo

![Screenshot 1](screenshots/1.png)

The left side is responsible for building the form.

Cancel is responsible for deleting a field from the form

![Screenshot 2](screenshots/2.png)

We can Drag and drop the fields to reorder them.

The right side is where we can visualize the form that we are building.

![Screenshot 3](screenshots/3.png)

Download Exported Form

![Screenshot 4](screenshots/4.png)

Exported Form

![Screenshot 5](screenshots/5.png)

Better Overview in the Form.pdf .