🛠️ Dynamic No-Code Form Builder

A drag-and-drop form builder built with React + Tailwind CSS that allows users to visually create, edit, reorder, and preview customizable forms from a JSON schema.

🌐 Live Demo: dynamic-no-code-form-builder.netlify.app
📂 Repository: github.com/rukaiyatasnim/Dynamic-No-Code-Form-Builder

---

✨ Features

• Render Form from JSON
  Supports multiple input types:

  • text, email, date, time, file, select, checkbox, radio, acceptance

• Hover Actions

  • ⚙️ Settings (edit field properties)
  • 🗑️ Delete field
  • 📄 Duplicate field

• Right Sidebar (Settings Panel)

  • Edit label, name, placeholder, required
  • Manage options for select, checkbox, and radio types

• Left Sidebar (Field Palette)

  • Drag and drop new fields into the form canvas

• Drag-and-Drop Reordering

  • Reorder existing fields seamlessly

• Preview Mode

  • Toggle between Edit Mode and Preview Mode
  • Validations (required fields) respected
  • Read-only, no editing in preview

Persist to Local Storage - Save form schema and field data in the browser’s local storage. - Reload the form structure automatically on page refresh.

---

🖼️ Screenshots

Form Builder

Submitted Data

Updated Settings

---

🚀 Tech Stack

• React – UI
• Tailwind CSS – Styling
• React DnD – Drag-and-drop
• Netlify – Deployment

---

👩‍💻 Author

Rukaiya Tasnim
📂 GitHub Profile ✉️ Email

📦 Installation & Setup

Clone the repo and run locally:

# Clone repository
git clone https://github.com/rukaiyatasnim/Dynamic-No-Code-Form-Builder.git

# Enter project directory
cd Dynamic-No-Code-Form-Builder

# Install dependencies
npm install

# Start development server
npm run dev