formalute

# 🚀 Formalute ![Formalute Logo](https://example.com/Formalute-logo.png) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE) [![npm version](https://img.shields.io/npm/v/Formalute.svg)](https://www.npmjs.com/package/Formalute) > **Formalute** is a powerful drag-and-drop form builder that empowers you to create interactive, validated forms effortlessly. Whether you're designing a sleek contact form or a robust multi-step application, Formalute offers the flexibility and features you need to bring your forms to life! 🎨✨ --- ### 🚀 Live Demo > 🔗 **Try it now:** [https://amankumar-g.github.io/demo-formalute/](https://amankumar-g.github.io/demo-formalute/) --- ## 📖 Table of Contents - [🚀 Use Cases](#-use-cases) - [📝 Overview](#-overview) - [🌟 Features](#-features) - [🎥 Visual Walkthrough](#-visual-walkthrough) - [⚙️ Installation](./Manual.md) - [React Component Integration](Manual.md#react-component-integration) - [jQuery Integration](Manual.md#using-formalute-in-jquery) - [Plain HTML with React CDN](Manual.md#Using-Formalute-with-React.createElement) - [🎛️ Configuration & Customization](#️-configuration--customization) - [🤝 Contributing](#-contributing) - [💬 Support](#-support) - [📄 License](#-license) --- ## 🚀 Use Cases Formalute is perfect for a wide range of applications: - **Rapid Prototyping** 🚀 Quickly design and test form layouts with an intuitive drag-and-drop interface. - **Enterprise Applications** 🏢 Build robust forms with dynamic validations (required fields, regex patterns, min/max values) to meet complex business requirements. - **E-commerce Platforms** 🛒 Create dynamic checkout, registration, or feedback forms that ensure accurate data entry. - **Surveys & Feedback Forms** 📝 Design interactive forms to gather valuable insights from your users. - **Content Management Systems** 📋 Enable non-technical users to build and customize forms within their CMS effortlessly. - **Admin Dashboards** ⚙️ Generate forms on the fly for managing data or user inputs with ease. --- ## 📝 Overview Formalute provides an intuitive drag-and-drop interface that allows you to: - **Drag Items:** Choose from over 18 form fields available in the sidebar. - **Drop & Customize:** Drag fields into the editor zone, and easily customize labels, placeholders, and validations dynamically. - **Live Preview:** Instantly switch to preview mode and see your form come to life in real-time. - **Flexible Integration:** Use as a React component, a jQuery plugin, or even integrate in plain HTML using React’s CDN. - **Dynamic Styling:** Customize the form's appearance using predictable class names. --- ## 🌟 Features - **Drag-and-Drop Interface** 🎯 Build your forms effortlessly by dragging and dropping components. - **18+ Form Fields** 📋 Includes text inputs, emails, passwords, dates, numbers, and many more. - **Dynamic Validation** ✅ Configure validations like required fields, regex patterns, minimum/maximum values, and more. - **Live Preview Mode** 👀 Instantly view your form in action with real-time updates. - **Multiple Integration Modes** 🔌 Works seamlessly with React, jQuery, or as a standalone solution using React’s CDN. - **Custom Styling** 🎨 Leverage detailed class names for complete control over your form's look and feel. - **Extensible & Future-Proof** 🔮 More fields and functionalities are coming soon! --- ## 🎥 Visual Walkthrough Imagine your screen divided into three primary sections: 1. **Sidebar** 🗂️ A collection of form components (text, email, number, etc.) to choose from. 2. **Editor Zone** 🖊️ Drag and drop your selected components into this central area to build your form. 3. **Preview Pane** 👁️ See your form rendered live with applied validations and custom styles. > Example: >![Formalute Demo](assets/Normal-Drag-Drop.gif) >![Formalute Demo](assets/Multi-Part.gif) --- ## ⚙️ Installation Formalute can be integrated into your project in multiple ways: ### React Component Integration Install via npm: ```bash npm install formalute --save