Skip to content

Drag and Drop Form Builder is a powerful tool for creating customizable forms with ease. With support for various form elements including numbers, select, checkboxes, text areas, and more. Built with Next.js 13, App Router, Dnd-kit library, TypeScript, Prisma, Vercel

License

Notifications You must be signed in to change notification settings

mogobanyamwaro/drag-and-drop-form-builder

Repository files navigation

Drag and Drop Form Builder

Welcome to Drag and Drop Form Builder! This project allows you to create forms with ease using drag and drop functionality. You can customize your forms with various elements such as titles, subtitles, spacers, numbers, select options, checkboxes, text areas, and more. Forms can be previewed, saved, and shared via unique URLs. Form submissions are validated and saved in the database for easy access.

Table of Contents

Features

  • Drag and drop interface for creating forms
  • Supports various form elements including titles, subtitles, spacers, numbers, select options, checkboxes, text areas, etc.
  • Form preview functionality
  • Save and share forms via unique URLs
  • Form submission validation
  • Database storage of form states and submissions

Installation

  1. Clone the repository:
git clone https://github.com/yourusername/drag-and-drop-form-builder.git


2. Navigate into the project directory:

```bash
cd drag-and-drop-form-builder


3. Install dependencies:

```bash
npm install


4. Set up the environment variables:

Create a `.env` file in the root directory and add necessary variables.

5. Start the development server:

```bash
npm run dev


6. Open the application in your web browser:

Access the Drag and Drop Form Builder at `http://localhost:3000` in your preferred web browser.

## Usage

Once the application is running, use the drag and drop interface to create your custom forms. Preview your forms before saving them, and share them with others using the generated URLs. Validate form submissions and view them in the database for easy access.

## Technologies Used

- Next.js 13
- App Router
- Dnd-kit library
- TypeScript
- Prisma
- Vercel
- PostgreSQL
- Tailwind CSS
- Shadcn UI

## Contributing

Contributions are welcome! Please fork the repository and create a pull request with your enhancements.

## License

This project is licensed under the [MIT License](LICENSE).

About

Drag and Drop Form Builder is a powerful tool for creating customizable forms with ease. With support for various form elements including numbers, select, checkboxes, text areas, and more. Built with Next.js 13, App Router, Dnd-kit library, TypeScript, Prisma, Vercel

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages