Form Genius

Form Builder Application

Overview

This Form Builder Application is a dynamic, user-friendly tool built with Next.js and Tailwind CSS. It allows users to create custom forms, manage form submissions, and preview forms in real-time. The application features a drag-and-drop interface for question reordering and a comprehensive submission management system.

09.12.2024_17.02.13_REC.mp4

Features

• Dynamic Form Creation: Create custom forms with various question types including short answer, long answer, single select, number, URL, and date.
• Real-time Preview: Instantly preview your form as you build it.
• Drag-and-Drop Reordering: Easily reorder questions using a drag-and-drop interface.
• Form Validation: Client-side validation ensures all required fields are filled before submission.
• Submission Management: View, edit, and delete form submissions in a user-friendly table interface.
• Responsive Design: Fully responsive layout that works on desktop and mobile devices.

Error managemnet

09.12.2024_18.47.06_REC.mp4

reordering of questions

09.12.2024_18.47.40_REC.mp4

sorting on form list

09.12.2024_19.14.54_REC.mp4

Installation

To get started with this project, follow these steps:

1. Clone the repository:

   git clone https://github.com/shivankkunwar/FormGenius.git
   cd FormGenius
   

2. Install the dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

4. Open http://localhost:3000 with your browser to see the result.

Usage

Creating a Form

1. Navigate to the Form Editor tab.
2. Click on "Add Question" to add a new question to your form.
3. Select the question type from the dropdown menu.
4. Fill in the question text and any additional options if required.
5. Use the drag handle to reorder questions as needed.
6. Click "Preview" to see how your form will appear to users.

Managing Submissions

1. Navigate to the Submissions tab.
2. View all form submissions in a table format.
3. Use the action menu to view, edit, or delete individual submissions.

Project Structure

• /components: React components used throughout the application
• /pages: Next.js pages and API routes
• /styles: Global styles and Tailwind CSS configuration
• /public: Static assets

Contributing

We welcome contributions to this project. Please follow these steps to contribute:

1. Fork the repository
2. Create a new branch (git checkout -b feature/AmazingFeature)
3. Make your changes
4. Commit your changes (git commit -m 'Add some AmazingFeature')
5. Push to the branch (git push origin feature/AmazingFeature)
6. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Acknowledgments

• Next.js
• Tailwind CSS
• React Beautiful DND
• Lucide React Icons