FilaForms Docs
Advanced

Standalone Components

Use the form builder and renderer as standalone Livewire components without a Filament panel.

FilaForms ships two standalone Livewire components that work without the Filament admin panel or database. Use them to embed form building and rendering anywhere in your Laravel application.

Form Builder

The visual drag-and-drop form builder as a standalone Livewire component.

Basic Usage

resources/views/my-page.blade.php
{{-- Empty builder --}}
<livewire:filaforms::form-builder />

{{-- Pre-populated with an existing schema --}}
<livewire:filaforms::form-builder :form-schema="$existingFormJson" />

Capturing Form Data

The builder emits a form-updated Livewire event whenever the user makes changes. Listen for this event to capture the current form state:

app/Livewire/MyFormManager.php
use Livewire\Attributes\On;
use Livewire\Component;

class MyFormManager extends Component
{
    public ?array $formData = null;

    #[On('form-updated')]
    public function onFormUpdated(array $formData): void
    {
        $this->formData = $formData;
    }

    public function save(): void
    {
        DB::table('my_forms')->insert([
            'form_json' => json_encode($this->formData),
            'created_at' => now(),
        ]);
    }

    public function render()
    {
        return view('my-form-manager');
    }
}
resources/views/livewire/my-form-manager.blade.php
<div>
    <livewire:filaforms::form-builder />

    <button wire:click="save">Save Form</button>
</div>
The builder does not include a save button. You add your own and decide when to persist the form data.

JSON Form Structure

The builder outputs a JSON structure with sections, fields, and settings:

{
    "id": "01HZXF1A2B3C4D5E6F7G8H9J0K",
    "name": "Customer Feedback Form",
    "sections": [
        {
            "id": "01HZXF2B3C4D5E6F7G8H9J0KL",
            "title": "Personal Information",
            "fields": [
                {
                    "id": "01HZXF3C4D5E6F7G8H9J0KLM",
                    "type": "text",
                    "label": "Full Name",
                    "required": true
                },
                {
                    "id": "01HZXF4D5E6F7G8H9J0KLMN",
                    "type": "email",
                    "label": "Email Address",
                    "required": true
                }
            ]
        }
    ],
    "settings": {
        "submitButton": "Send Feedback",
        "successMessage": "Thank you!"
    }
}

Form Renderer

Render forms from JSON or a database record without any admin panel.

From JSON Schema

resources/views/form.blade.php
<livewire:filaforms::form-renderer :form-schema="$formSchema" />

From Database Record

resources/views/form.blade.php
@php
    $form = \FilaForms\Core\Models\Form::where('slug', 'contact-us')->first();
@endphp

@if($form)
    <livewire:filaforms::form-renderer :form-record="$form" />
@endif

Handling Submissions

The renderer emits a form-submitted event after successful submission:

app/Livewire/PublicFormPage.php
use Livewire\Attributes\On;
use Livewire\Component;

class PublicFormPage extends Component
{
    public string $formSchema;

    #[On('form-submitted')]
    public function handleSubmission(array $submissionData): void
    {
        DB::table('form_submissions')->insert([
            'form_id' => $submissionData['form_id'],
            'data' => json_encode($submissionData['fields']),
            'submitted_at' => now(),
        ]);

        session()->flash('message', 'Thank you for your submission!');
    }
}

Submission Data Structure

{
    "form_id": "01HZXF1A2B3C4D5E6F7G8H9J0K",
    "submitted_at": "2024-01-15T10:30:00Z",
    "fields": {
        "01HZXF3C4D5E6F7G8H9J0KLM": "John Doe",
        "01HZXF4D5E6F7G8H9J0KLMN": "john@example.com"
    }
}

Storage Options

You control where form JSON is stored. Common patterns:

// Database table
DB::table('my_forms')->insert([
    'form_json' => json_encode($formData),
    'created_by' => auth()->id(),
]);

// JSON file
Storage::put("forms/{$formId}.json", json_encode($formData));

// Cache (temporary)
Cache::put("form:{$formId}", $formData, now()->addHours(24));

Complete Example

A full workflow: admin creates a form with the builder, public visitors fill it out via the renderer.

Step 1: Admin Creates the Form

app/Livewire/FormCreator.php
use Livewire\Attributes\On;
use Livewire\Component;

class FormCreator extends Component
{
    public ?array $formData = null;

    #[On('form-updated')]
    public function onFormUpdated(array $formData): void
    {
        $this->formData = $formData;
    }

    public function save()
    {
        $id = DB::table('my_forms')->insertGetId([
            'json_structure' => json_encode($this->formData),
            'created_at' => now(),
        ]);

        return redirect("/forms/{$id}/preview");
    }

    public function render()
    {
        return view('livewire.form-creator');
    }
}
resources/views/livewire/form-creator.blade.php
<div>
    <livewire:filaforms::form-builder />
    <button wire:click="save">Save Form</button>
</div>

Step 2: Public Visitor Fills the Form

app/Livewire/FormDisplay.php
use Livewire\Attributes\On;
use Livewire\Component;

class FormDisplay extends Component
{
    public int $formId;
    public string $formSchema;

    public function mount(int $formId): void
    {
        $this->formSchema = DB::table('my_forms')
            ->where('id', $formId)
            ->value('json_structure');
    }

    #[On('form-submitted')]
    public function onSubmitted(array $data): void
    {
        DB::table('my_submissions')->insert([
            'form_id' => $this->formId,
            'data' => json_encode($data),
            'created_at' => now(),
        ]);

        session()->flash('success', 'Thank you!');
    }

    public function render()
    {
        return view('livewire.form-display');
    }
}
resources/views/livewire/form-display.blade.php
<div>
    <livewire:filaforms::form-renderer :form-schema="$formSchema" />
</div>

Events & Hooks

Listen to form events and extend submission processing.

Copyright © 2026