PHPackages                             tivents/livewire-form-builder - 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. [Utility & Helpers](/categories/utility)
4. /
5. tivents/livewire-form-builder

ActiveLibrary[Utility & Helpers](/categories/utility)

tivents/livewire-form-builder
=============================

A powerful drag-and-drop form builder for Laravel 12 with Livewire 5, supporting all field types, conditional logic, multi-column layouts, and form submissions.

1.0.6(1mo ago)018MITPHPPHP ^8.2

Since Mar 11Pushed 1mo agoCompare

[ Source](https://github.com/tivents/livewire-form-builder)[ Packagist](https://packagist.org/packages/tivents/livewire-form-builder)[ RSS](/packages/tivents-livewire-form-builder/feed)WikiDiscussions main Synced 3w ago

READMEChangelogDependencies (11)Versions (7)Used By (0)

Laravel Form Architect
======================

[](#laravel-form-architect)

A powerful, drag-and-drop form builder for **Laravel 12** and **Livewire 5** — a drop-in replacement for form.io.

The package ships **no Models and no Migrations**. You own your data layer. The package communicates with your app through a clean `FormRepositoryContract` interface.

---

Features
--------

[](#features)

FeatureDrag & Drop builder canvas✅**15 field types**✅Multi-column layout (full, 1/2, 1/3, 2/3, 1/4, 3/4)✅Repeater groups with nested columns✅Conditional logic (show/hide per AND/OR rules)✅Real-time per-field validation✅File uploads (single & multiple)✅JSON schema import / export✅CSV submission export✅Repository pattern — bring your own Model✅Artisan scaffolding commands✅Fully publishable views✅### Field types

[](#field-types)

GroupTypes**Inputs**`text`, `textarea`, `number`, `select`, `checkbox`, `radio`, `toggle`, `datetime`, `file`, `repeater`, `hidden`**Layout**`heading`, `hint`, `html`, `divider`, `row`---

Requirements
------------

[](#requirements)

- PHP `^8.2`
- Laravel `^12.0`
- Livewire `^4.0`

---

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

[](#installation)

```
composer require tivents/livewire-form-builder
```

### 1. Publish config

[](#1-publish-config)

```
php artisan vendor:publish --tag=livewire-form-builder-config
```

### 2. Publish the repository stub

[](#2-publish-the-repository-stub)

```
php artisan livewire-form-builder:publish-stubs
```

This places the following file in your project:

FilePurpose`app/Repositories/LivewireFormBuilderRepository.php`Eloquent implementation of `FormRepositoryContract`The package ships **no migration**. Create your own migration for the `forms` and `form_submissions` tables (the stub's docblock shows the expected columns) and run `php artisan migrate` when ready.

You are free to rename tables, add columns, or swap out Eloquent for anything else — as long as your repository implements the contract.

### 3. Include the package styles (Tailwind CSS)

[](#3-include-the-package-styles-tailwind-css)

The builder and renderer use **Tailwind CSS** classes. When you embed the components inside your own app layout, Tailwind's build step must scan the package views — otherwise the classes will be purged and the UI will be unstyled.

**Tailwind v4** — add an `@source` directive to your `resources/css/app.css`:

```
@source "../../vendor/tivents/livewire-form-builder/resources/views";
```

**Tailwind v3** — add the path to the `content` array in your `tailwind.config.js`:

```
content: [
    // ... your existing paths
    './vendor/tivents/livewire-form-builder/resources/views/**/*.blade.php',
],
```

Then rebuild your assets (`npm run dev` / `npm run build`).

> **Note:** The built-in admin routes (`/livewire-form-builder`) use the package's own layout, which loads Tailwind via CDN and does not require the above. The step above is only needed when embedding `` or `` inside your own Blade layouts.

### 4. Bind the repository

[](#4-bind-the-repository)

In `app/Providers/AppServiceProvider.php`:

```
use Tivents\LivewireFormBuilder\Contracts\FormRepositoryContract;
use App\Repositories\LivewireFormBuilderRepository;

public function register(): void
{
    $this->app->bind(FormRepositoryContract::class, LivewireFormBuilderRepository::class);
}
```

Or set it in `config/livewire-form-builder.php`:

```
'repository' => \App\Repositories\LivewireFormBuilderRepository::class,
```

---

Usage
-----

[](#usage)

### Admin builder UI

[](#admin-builder-ui)

Navigate to `/livewire-form-builder` — requires the middleware configured in `config/livewire-form-builder.php` (`auth` by default).

### Embed the builder in your own view

[](#embed-the-builder-in-your-own-view)

```
{{-- Create new form --}}

{{-- Edit existing form --}}

```

### Embed the renderer (public-facing)

[](#embed-the-renderer-public-facing)

```
{{-- By form ID --}}

{{-- Inline schema (form-id still used to save the submission) --}}

{{-- Custom success message --}}

{{-- Redirect after submit --}}

{{-- Edit mode: pre-fill with existing submission data --}}

{{-- Edit mode with initial data (avoids extra API call) --}}

{{-- Extra fields injected from the backend (not part of the schema) --}}

{{-- Show fields marked as hidden in the schema (e.g. admin backend) --}}

```

#### Renderer props

[](#renderer-props)

PropTypeDefaultDescription`form-id``int|string|null``null`Load schema from repository and associate submissions`schema``array``[]`Pass schema directly (flat field array or full `{name, schema, settings}` object). When set, the repository is not called for schema loading. `form-id` is still used to save submissions.`submission-id``int|string|null``null`Edit mode — pre-fills the form and calls `updateSubmission` on submit instead of `saveSubmission``initial-data``array``[]`Pre-fill data for edit mode. Skips the repository `findSubmissionOrFail` call when provided.`extra-fields``array``[]`Additional fields injected from the backend, not part of the schema. Values are merged into the submission data.`show-hidden``bool``false`Show fields marked as `hidden: true` in the schema (with a "Hidden field" badge).`success-message``string``'Thank you! Your response has been recorded.'`Message shown after successful submission (no redirect).`redirect-url``string``''`Redirect to this URL after submit instead of showing the success message.### Listen to Livewire events

[](#listen-to-livewire-events)

```
// In a parent Livewire component
#[On('form-submitted')]
public function onFormSubmitted(int|string|null $formId, array $data): void
{
    // New submission — $data contains all field values incl. extra-fields
}

#[On('form-updated')]
public function onFormUpdated(int|string $submissionId, int|string|null $formId, array $data): void
{
    // Existing submission was updated
}

#[On('form-saved')]
public function onFormSaved(int|string|null $formId): void
{
    // Builder saved/updated a form schema
}
```

### Listen to JS events

[](#listen-to-js-events)

```
document.addEventListener('livewire:init', () => {
    Livewire.on('form-submitted', ({ formId, data }) => {
        console.log('New submission', data);
    });
    Livewire.on('form-updated', ({ submissionId, formId, data }) => {
        console.log('Updated submission', submissionId, data);
    });
    Livewire.on('form-saved', ({ formId }) => {
        console.log('Builder saved form', formId);
    });
});
```

---

Configuration (`config/livewire-form-builder.php`)
--------------------------------------------------

[](#configuration-configlivewire-form-builderphp)

```
return [
    // Your repository implementation
    'repository' => \App\Repositories\LivewireFormBuilderRepository::class,

    // URL prefix for the built-in admin routes
    'route_prefix'   => 'livewire-form-builder',
    'middleware'     => ['web', 'auth'],
    'builder_routes' => true,   // false to disable built-in CRUD routes

    // Pagination
    'per_page' => 25,

    // File upload
    'disk'             => 'public',
    'upload_directory' => 'livewire-form-builder/uploads',
    'max_file_size'    => 10240,   // KB

    // Register custom field types
    'field_types' => [
        // 'signature' => \App\FormFields\SignatureField::class,
    ],
];
```

---

Adding a Custom Field Type
--------------------------

[](#adding-a-custom-field-type)

Use the scaffold command:

```
php artisan livewire-form-builder:make-field StarRating
```

This generates:

- `app/FormFields/StarRatingField.php` — implement your logic
- `resources/views/vendor/livewire-form-builder/fields/star_rating.blade.php` — renderer view
- `resources/views/vendor/livewire-form-builder/settings/star_rating.blade.php` — builder settings panel

Then register it:

```
// config/livewire-form-builder.php
'field_types' => [
    'star_rating' => \App\FormFields\StarRatingField::class,
],
```

---

Row / Column Layout
-------------------

[](#row--column-layout)

Fields support a flat `width` property (`full`, `1/2`, `1/3`, `2/3`, `1/4`, `3/4`) that positions them on a shared 12-column grid. For explicit structural grouping, use the `row` field type as a container.

A `row` is always full-width itself and renders a nested 12-column grid for its `children`. Fields inside a row use the same `width` values.

**When to use `row`:**

- You want to move or delete a group of fields as a unit in the builder
- You need semantically grouped columns (e.g. first name + last name side by side)
- You want to mix different widths within a clearly bounded section

**Schema structure:**

```
{
  "type": "row",
  "key": "name_row",
  "width": "full",
  "children": [
    { "type": "text", "key": "first_name", "label": "First Name", "required": true, "width": "1/2" },
    { "type": "text", "key": "last_name",  "label": "Last Name",  "required": true, "width": "1/2" }
  ]
}
```

Children support all standard field properties (validation, conditional logic, etc.). The `row` field itself carries no validation rules.

---

JSON Schema Format
------------------

[](#json-schema-format)

```
{
  "name": "Kontaktformular",
  "schema": [
    { "type": "heading", "key": "h1", "text": "Kontakt", "level": "h2", "width": "full" },
    {
      "type": "row", "key": "name_row", "width": "full",
      "children": [
        { "type": "text", "key": "name_abc",  "label": "Name",   "required": true, "width": "1/2" },
        { "type": "text", "key": "email_xyz", "label": "E-Mail", "required": true, "width": "1/2", "input_type": "email" }
      ]
    },
    {
      "type": "select", "key": "topic_def", "label": "Thema", "width": "full",
      "options": [{ "label": "Vertrieb", "value": "sales" }, { "label": "Support", "value": "support" }]
    },
    {
      "type": "textarea", "key": "msg_ghi", "label": "Nachricht", "required": true, "rows": 5,
      "conditions": {
        "action": "show", "logic": "and",
        "rules": [{ "field": "topic_def", "operator": "!=", "value": "" }]
      }
    },
    {
      "type": "text", "key": "internal_note", "label": "Interne Notiz", "hidden": true, "width": "full"
    }
  ]
}
```

### Field properties

[](#field-properties)

PropertyDescription`type`Field type (see field types table)`key`Unique identifier within the form — used as the data key in submissions`label`Display label`width`Column width: `full`, `1/2`, `1/3`, `2/3`, `1/4`, `3/4``required``true` to make the field mandatory`hidden``true` to hide the field in the renderer by default. The field is still initialised and its default value is submitted. Visible when `:show-hidden="true"` is passed to the renderer. Configurable in the builder settings panel.`default`Default value pre-filled on mount`disabled``true` to render the input as read-only`placeholder`Input placeholder text`hint`Helper text shown below the label`conditions`Conditional logic — see below---

Examples
--------

[](#examples)

The [`examples/`](examples/) directory contains ready-to-copy code for common integration scenarios:

FilePatternUse case[`ApiWebhookRepository.php`](examples/ApiWebhookRepository.php)Repository decoratorSaves to DB **and** POSTs a signed JSON payload to a webhook URL[`FormSubmissionListener.php`](examples/FormSubmissionListener.php)Laravel event listenerReacts to a `FormSubmitted` event — supports `ShouldQueue` for background processing[`api-form-page.blade.php`](examples/api-form-page.blade.php)Client-side JSListens to the browser `form-submitted` event and calls any HTTP endpoint via `fetch()`[`CentralApiFormRepository.php`](examples/CentralApiFormRepository.php)Central API repositoryFull repository backed entirely by an HTTP API — no local DB needed; for multi-system setupsSee [`examples/README.md`](examples/README.md) for setup instructions and payload shapes.

---

Repository Contract
-------------------

[](#repository-contract)

Your repository must implement `Tivents\LivewireFormBuilder\Contracts\FormRepositoryContract`:

MethodDescription`findOrFail(id)`Return form object with at least `id`, `name`, `schema`, `settings``create(data)`Persist new form, return it`update(id, data)`Update form, return it`delete(id)`Delete form`paginate(perPage)`Return paginated list of forms`saveSubmission(formId, data, meta)`Store a new submission`updateSubmission(submissionId, data, meta)`Update an existing submission (called in edit mode)`paginateSubmissions(formId, perPage)`Return paginated submissions for a form`findSubmissionOrFail(formId, submissionId)`Return single submission object with a `data` array property`deleteSubmission(submissionId)`Delete submission---

Artisan Commands
----------------

[](#artisan-commands)

```
# Scaffold a new custom field type
php artisan livewire-form-builder:make-field MyType

# Publish Eloquent repository stub
php artisan livewire-form-builder:publish-stubs

# Publish config
php artisan vendor:publish --tag=livewire-form-builder-config

# Publish views (to customise)
php artisan vendor:publish --tag=livewire-form-builder-views
```

---

License
-------

[](#license)

MIT

###  Health Score

41

—

FairBetter than 87% of packages

Maintenance89

Actively maintained with recent releases

Popularity7

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity51

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

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 ~9 days

Total

6

Last Release

58d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/5844861?v=4)[Willi Helwig](/maintainers/aldraHastur)[@aldrahastur](https://github.com/aldrahastur)

---

Top Contributors

[![aldrahastur](https://avatars.githubusercontent.com/u/5844861?v=4)](https://github.com/aldrahastur "aldrahastur (22 commits)")

---

Tags

laravellivewireFormsdrag-and-dropform-builder

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/tivents-livewire-form-builder/health.svg)

```
[![Health](https://phpackages.com/badges/tivents-livewire-form-builder/health.svg)](https://phpackages.com/packages/tivents-livewire-form-builder)
```

###  Alternatives

[livewire/volt

An elegantly crafted functional API for Laravel Livewire.

4216.1M104](/packages/livewire-volt)[ramonrietdijk/livewire-tables

Dynamic tables for models with Laravel Livewire

21255.6k](/packages/ramonrietdijk-livewire-tables)[lakm/laravel-comments

Integrate seamless commenting functionality into your Laravel project.

40614.3k1](/packages/lakm-laravel-comments)[nasirkhan/laravel-starter

A CMS like modular Laravel starter project.

1.4k2.7k](/packages/nasirkhan-laravel-starter)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

119.2k](/packages/tomshaw-electricgrid)[marcorieser/statamic-livewire

A Laravel Livewire integration for Statamic.

23100.9k12](/packages/marcorieser-statamic-livewire)

PHPackages © 2026

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