shameekbaranwal / build-a-form

A custom form builder with two types of questions - select dropdown and checkbox.

Home Page:https://build-a-form.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Form Builder

Demonstration Video

form-builder.demo.mp4

Built With:

  • React
  • React Router
  • TailwindCSS
  • Vite

Deployed on netlify.

Requirements

Develop an app where you'll have to build a custom form builder with the following details.

Show the user two options that can be added to their custom form:

Field One: A select dropdown
Field Two: A checkbox

  1. A user can add as many fields as possible from the above list
  2. Each field should capture the custom label the user will be using + their input type
  3. User should be able to add more options to the Select/Checkbox. By default always show one option.
  4. On saving the form created, show the model with the way data is being captured by console logging it.
  5. You don't have to focus on styling for the assignment and it can be bare bones. But if you have time to spend, it would be good to see it being beautiful.

Hint: For UX, you can refer to Google Forms.

To-Do

  • Add more input fields - text, date, image.
  • Replace localStorage with an actual server.
  • Add OAuth to access and fill forms.
  • Improve colours in UI.
  • Make validation more customizable than just a mandatory tag. Allow for regex validation as well.

About

A custom form builder with two types of questions - select dropdown and checkbox.

https://build-a-form.netlify.app


Languages

Language:JavaScript 97.9%Language:HTML 1.9%Language:CSS 0.2%