PHPackages                             muhammadmahedihasan/laravel-dynamic-forms - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. muhammadmahedihasan/laravel-dynamic-forms

ActiveLibrary

muhammadmahedihasan/laravel-dynamic-forms
=========================================

A headless dynamic form builder for Laravel supporting surveys, quizzes, assessments, and monitoring etc.

v1.0.2(yesterday)04↑2900%MITPHP ^8.2

Since Jul 19Compare

[ Source](https://github.com/MuhammadMahediHasan/laravel-dynamic-forms)[ Packagist](https://packagist.org/packages/muhammadmahedihasan/laravel-dynamic-forms)[ RSS](/packages/muhammadmahedihasan-laravel-dynamic-forms/feed)WikiDiscussions Synced today

READMEChangelogDependencies (8)Versions (4)Used By (0)

Laravel Dynamic Forms
=====================

[](#laravel-dynamic-forms)

A highly decoupled, event-driven, layout-agnostic dynamic form builder package for Laravel and Vue 3.

### Form Builder Interface

[](#form-builder-interface)

[![Form Builder Interface](art/builder.png)](art/builder.png)

### Form Preview Interface

[](#form-preview-interface)

[![Form Preview Interface](art/preview.png)](art/preview.png)

---

Features
--------

[](#features)

- **Decoupled Architecture**: All UI alerts, page layouts, toast notifications, relationships, and navigation logic are delegated to the host application.
- **Tailwind CSS Ready**: Clean Tailwind markup with a customizable `ldf-*` CSS class prefix namespace.
- **Multiple Locales**: Configuration-driven multi-locale translation inputs (defaults to `en`).
- **Interactive Drag & Drop**: Easy elements library ordering powered by `vuedraggable`.

---

Installation
------------

[](#installation)

### 1. Require the Package via Composer

[](#1-require-the-package-via-composer)

```
composer require muhammadmahedihasan/laravel-dynamic-forms
```

### 2. Run Database Migrations

[](#2-run-database-migrations)

Run Laravel's migration command to create the package tables (`form_inputs`, `dynamic_forms`, `form_elements`, `form_responses`, `form_response_items`):

```
php artisan migrate
```

### 3. Run the Install Command

[](#3-run-the-install-command)

The install command will publish the package configuration, publish the Vue builder assets into your host application (`resources/js/vendor/dynamic-forms`), inject the `vuedraggable` peer dependency, and seed the default **Form Inputs** catalog into your database:

```
php artisan dynamic-forms:install
```

*(Optional)* If you ever need to manually seed or re-seed the default Form Inputs catalog, you can run:

```
php artisan db:seed --class="MuhammadMahediHasan\Df\Database\Seeders\FormInputSeeder"
```

### 4. Rebuild Your Assets

[](#4-rebuild-your-assets)

Compile the published frontend assets using your asset pipeline (e.g., Vite):

```
npm install
npm run build
```

---

Vue 3 Integration Example
-------------------------

[](#vue-3-integration-example)

Since the form builder is fully decoupled, you should wrap it inside a page component in your host application. This allows you to wrap the form builder in your main layout, control the button loading states, perform API requests, and show custom toast notifications (e.g., using PrimeVue Toast).

Here is a complete, real-world wrapper component example (`resources/js/pages/YourComponent.vue`):

```

import { ref } from "vue";
import { Head, router } from "@inertiajs/vue3";
import AppLayout from "@/layouts/AppLayout.vue";

// Import the decoupled form builder component from the vendor resources directory
import FormBuilder from "@/vendor/dynamic-forms/Builder.vue";

interface Props {
  slug?: string;
}

const props = defineProps();
const isProcessing = ref(false);

const breadcrumbs = [
  { title: "Dashboard", href: "/dashboard" },
  { title: "Forms", href: "/admin/dynamic-form" },
  { title: "Configure Form", href: "/admin/dynamic-form" },
];

// 1. Handle Successful Form Builder Save
const handleSuccess = (savedForm: any) => {
  console.log("Form save successfully", savedForm);
};

// 2. Handle Navigation / Redirection
const handleCancel = () => {
  console.log("Submission is canceled");
};

// 3. Handle Form Builder Errors (e.g. empty element submissions)
const handleError = (message: string) => {
  console.error(message);
};

        Configure Form Builder

```

---

Component API
-------------

[](#component-api)

### Props

[](#props)

PropTypeRequiredDescription`slug``string`NoPass a slug to put the builder in **Edit Mode** and load an existing form structure. Omit/leave blank to put in **Create Mode**.`apiPrefix``string`NoAPI prefix namespace for configuration and inputs (default: `/api/v1/df`).### Events

[](#events)

- **`@success`**: Emits `savedForm` data object when the package successfully saves/updates the form via internal API request.
- **`@cancel`**: Emits when the user triggers the back/go-back button.
- **`@error`**: Emits a `string` validation or network error message.

---

Custom UI Components (Provide/Inject)
-------------------------------------

[](#custom-ui-components-provideinject)

Both the form renderer (`RenderForm.vue`) and the form builder preview support layout-agnostic component overrides. You can inject your own UI components using Vue 3's `provide` API:

```

import { provide } from "vue";
import CustomInput from "@/components/CustomInput.vue";
import CustomSelect from "@/components/CustomSelect.vue";
import CustomLabel from "@/components/CustomLabel.vue";

// Provide custom components to both builder preview and form renderer
provide("df-components", {
  Input: CustomInput,
  Select: CustomSelect,
  Label: CustomLabel,
});

```

If these are not provided, the package will automatically fallback to standard fallback HTML components.

---

Custom Styling
--------------

[](#custom-styling)

### Tailwind CSS Colors Configuration

[](#tailwind-css-colors-configuration)

The package elements use Tailwind classes that reference a `primary` color palette. To ensure the elements render with correct branding colors, configure your host application's `tailwind.config.js` to define the `primary` colors:

```
// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "#4f46e5", // Your main brand color (e.g. indigo-600)
          hover: "#4338ca", // Hover state color (e.g. indigo-700)
        },
      },
    },
  },
};
```

### Namespace Styling overrides

[](#namespace-styling-overrides)

```
/* Custom styling overrides */
.ldf-card {
  border-color: #3b82f6; /* Custom border color */
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1);
}

.ldf-title {
  font-family: "Outfit", sans-serif;
  letter-spacing: -0.025em;
}

.ldf-back-btn {
  border-radius: 9999px;
  background-color: #f3f4f6;
}
```

---

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

41

—

FairBetter than 87% of packages

Maintenance100

Actively maintained with recent releases

Popularity5

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

3

Last Release

1d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d638b3257922b51d4bad0714c3244a2772699887e68c9c0541d776e963b92011?d=identicon)[MuhammadMahediHasan](/maintainers/MuhammadMahediHasan)

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/muhammadmahedihasan-laravel-dynamic-forms/health.svg)

```
[![Health](https://phpackages.com/badges/muhammadmahedihasan-laravel-dynamic-forms/health.svg)](https://phpackages.com/packages/muhammadmahedihasan-laravel-dynamic-forms)
```

###  Alternatives

[psalm/plugin-laravel

Psalm plugin for Laravel

3345.3M347](/packages/psalm-plugin-laravel)[api-platform/laravel

API Platform support for Laravel

58174.6k17](/packages/api-platform-laravel)[aedart/athenaeum

Athenaeum is a mono repository; a collection of various PHP packages

255.2k](/packages/aedart-athenaeum)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)