#Advanced

Developer features for embedding forms and standalone components.

#Embedding Forms in Your Application

FilaForms provides a seamless way to embed forms anywhere in your Laravel application using Livewire components.

#With Form Model (Database-backed)

@php
    $form = \FilaForms\Core\Models\Form::where('slug', 'coach-application')->first();
@endphp

@if ($form)
    <div class="mx-auto max-w-2xl rounded-lg bg-white p-6 shadow">
        <livewire:filaforms.form-renderer :form-record="$form" />
    </div>
@endif

#Standalone Form Builder

A visual form builder Livewire component that can be embedded in any Laravel application without requiring the full Filament admin panel or database.

#Implementation

{{-- Embed the form builder UI component --}}
<livewire:filaforms.form-builder />

{{-- Or with an initial schema --}}
<livewire:filaforms.form-builder :form-schema="$existingFormJson" />

#Handling Form Data

The form builder emits a form-updated event whenever the user makes changes. Listen for this event to capture the current form state, then save it when you're ready:

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');
    }
}

{{-- my-form-manager.blade.php --}}
<div>
    <livewire:filaforms.form-builder />

    <button wire:click="save">Save Form</button>
</div>

Note: The builder does not have a built-in save button. You add your own save button and decide when to persist the form data.

#JSON Form Structure

The form builder outputs a clean JSON structure:

{
    "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!"
    }
}

#Storage Options

You control where to store the form data:

// Save to your own database table
DB::table('my_forms')->insert([
    'form_json' => $formJson,
    'created_by' => auth()->id(),
]);

// Save to a JSON file
Storage::put("forms/{$formId}.json", $formJson);

// Store in cache
Cache::put("form:{$formId}", $formJson);

#Standalone Form Renderer

Render forms from JSON without any admin panel or form builder interface.

#Basic Usage

{{-- Pass JSON to the renderer --}}
<livewire:filaforms.form-renderer :form-json="$formJson" />

#Loading Form from Database

// In your controller
$formJson = DB::table('my_forms')
    ->where('id', $formId)
    ->value('form_json');

// In your Blade view
<livewire:filaforms.form-renderer :form-json="$formJson" />

#Handling Submissions

The renderer is a Livewire component that handles form submissions:

// In your Livewire component
class PublicFormPage extends Component
{
    public $formJson;

    #[On('form-submitted')]
    public function handleSubmission($submissionData)
    {
        // Save submission to your database
        DB::table('form_submissions')->insert([
            'form_id' => $submissionData['form_id'],
            'data' => json_encode($submissionData['fields']),
            'submitted_at' => now(),
        ]);

        // Send notification
        Mail::to('admin@example.com')->send(
            new FormSubmitted($submissionData)
        );

        // Show success message
        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"
    }
}

#Complete Example

Here's how the builder and renderer work together.

#Step 1: Create the Form (Admin Side)

// app/Livewire/FormCreator.php
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: Display the Form (Public Side)

// app/Livewire/FormDisplay.php
class FormDisplay extends Component
{
    public int $formId;
    public string $formJson;

    public function mount(int $formId)
    {
        $this->formJson = 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-json="$formJson" />
</div>

#Key Benefits

#Form Builder

Livewire Component: Native Laravel/Livewire integration
Event-Driven: Emits Livewire events with form data
No Database Opinion: Store JSON however you want
Visual Interface: Drag-and-drop form creation

#Form Renderer

JSON-Driven: Render any valid form JSON
Livewire Component: Handle submissions with Livewire events
No Admin Required: Works without Filament panel
Lightweight: Only rendering logic included

#Complete Control

Your Database: Use your existing tables
Your Logic: Process submissions your way
Your Storage: Files, database, cache - your choice
Your Workflow: Integrate with existing systems

The standalone components give you FilaForms' visual builder and rendering engine while maintaining complete control over data storage and processing.

Documentation