#Advanced

Developer features for embedding forms and upcoming standalone components.

#Embedding Forms in Your Application

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

@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.public-form :form-record="$form" />
    </div>
@endif

#Standalone Form Builder (Coming Soon)

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

#Implementation

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

#Handling Form Data

The form builder is a Livewire component that manages form creation. You can listen to Livewire events:

// In your Livewire component
class MyFormManager extends Component
{
    #[On('form-saved')]
    public function handleFormSave($formData)
    {
        // Get the complete form JSON structure
        $formJson = json_encode($formData);

        // Save to your database however you want
        DB::table('my_forms')->insert([
            'form_json' => $formJson,
            'created_by' => auth()->id(),
            'created_at' => now(),
        ]);
    }

    #[On('form-updated')]
    public function handleFormUpdate($formData)
    {
        // Handle real-time updates as user builds the form
        $this->currentFormData = $formData;
    }
}

#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 (Coming Soon)

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:

{{-- Form Creation Page (Admin) --}}
@livewire('my-form-creator')

// MyFormCreator.php
class MyFormCreator extends Component
{
    #[On('form-saved')]
    public function saveForm($formData)
    {
        $form = DB::table('my_forms')->insertGetId([
            'name' => $formData['name'],
            'json_structure' => json_encode($formData),
            'created_at' => now()
        ]);

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

    public function render()
    {
        return view('my-form-creator', [
            'builder' => '<livewire:filaforms.form-builder />'
        ]);
    }
}

{{-- Form Display Page (Public) --}}
@livewire('public-form-display', ['formId' => $formId])

// PublicFormDisplay.php
class PublicFormDisplay extends Component
{
    public $formId;
    public $formJson;

    public function mount($formId)
    {
        $form = DB::table('my_forms')->find($formId);
        $this->formJson = $form->json_structure;
    }

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

        session()->flash('success', 'Form submitted successfully!');
    }

    public function render()
    {
        return view('public-form-display');
    }
}

#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