alhiane / form-builder-frontend

Drag and drop form builder.

Form Builder (Frontend)

This project is split into two repositories. The front-end, built using React and Next.js, is in this repository. The back-end, built using Ruby on Rails, can be found in this repository.

Features

• Create, save, and edit forms.
• Easy to use and intuituve UI.
• Many component options including:
  • Text Field
  • Text Area
  • Number Picker
  • Check Boxes
  • Radio Buttons
  • Date Picker
  • Time Picker
  • File Upload
  • Address Field
• Easily edit component labels, placeholders, and helpers.
• Drag and drop for ordering components and check box/radio button options.

How it Works

The form builder creates a JSON array containing all of the components used in the form. This JSON schema can be interpreted to create a form. Because the front-end and the back-end are seperate (The back-end is a seperate rails api), this form builder can easily be consumed by other applications such as a mobile form building app.

Screenshots

Video Demonstration