NagiPragalathan / susanoox-form-builder

Susanoox Form Builder is a versatile and user-friendly form builder application created with ReactJs for the frontend and Node.js for the backend. It allows users to create customizable forms with various input types, offering features such as adding, deleting, duplicating, and reordering elements.

Sure! Here's a more detailed README with comprehensive explanations of each feature:

---

Susanoox Form Builder

Susanoox Form Builder is a versatile and user-friendly form builder application created with ReactJs for the frontend and Node.js for the backend. It allows users to create customizable forms with various input types, offering features such as adding, deleting, duplicating, and reordering elements.

Features

Add/Delete Elements

• Add Elements: Users can dynamically add new input elements to their form. This allows for a flexible and customizable form creation process, catering to different data collection needs.
• Delete Elements: Users can easily remove any input element from their form. This ensures that the form remains clean and only contains the necessary fields.

Duplicate Elements

• Duplicate Elements: This feature allows users to quickly duplicate existing input elements. This is particularly useful when users need to create similar fields with slight variations, saving time and effort.

Set Input Required

• Set Input Required: Users can specify which input fields are mandatory. This ensures that the form collects all the necessary information by enforcing that certain fields must be filled out before submission.

Drag Elements to Reorder

• Drag and Drop: Users can reorder the elements within the form by dragging and dropping them into the desired position. This feature provides an intuitive way to organize the form’s layout and structure, enhancing the user experience.

Multiple Element Types

Susanoox Form Builder supports a variety of input types to cater to different data collection needs:

• TextInput: A single-line input field for short text responses.
• TextArea: A multi-line input field for longer text responses.
• RadioInput: A set of radio buttons allowing the user to select one option from a predefined set of choices.
• NumberInput: An input field specifically for numeric data.
• DateInput: An input field that allows the user to select a date from a calendar.
• TimeInput: An input field that allows the user to select a time.

Technology Stack

• Frontend: ReactJs
• Backend: Node.js

Usage

Follow these steps to set up and run the project locally:

1. Clone the repository:

   git clone https://github.com/NagiPragalathan/susanoox-form-builder

2. Navigate to the project directory:

   cd susanoox-form-builder

3. Install the dependencies:

   npm install

4. Start the development server:

    npm start

Your application should now be running on http://localhost:3000.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or new features.