FormRenderer Component

{{-- By slug (recommended) --}}
<livewire:forms::form-renderer slug="contact" />

{{-- By form ID --}}
<livewire:forms::form-renderer :form-id="1" />

{{-- With form model --}}
<livewire:forms::form-renderer :form="$form" />

<livewire:forms::form-renderer slug="contact" />

<livewire:forms::form-renderer
    slug="contact"
    success-message="Thanks! We'll respond within 24 hours."
/>

<livewire:forms::form-renderer
    slug="signup"
    redirect-url="/welcome"
/>

<livewire:forms::form-renderer
    slug="newsletter"
    :show-title="false"
    :show-description="false"
    css-class="newsletter-form"
/>

public array $formData = [];     // Field values
public array $errors = [];       // Validation errors
public bool $submitted = false;  // Submission state
public int $currentStep = 1;     // Current step (multi-step)

document.addEventListener('livewire:initialized', () => {
    Livewire.on('form-submitted', (event) => {
        // Track conversion
        gtag('event', 'conversion', {
            send_to: 'AW-XXXXX/XXXXX',
            form_id: event.formId,
        });
    });

    Livewire.on('validation-failed', (event) => {
        // Scroll to first error
        const firstError = document.querySelector('.field-error');
        firstError?.scrollIntoView({ behavior: 'smooth' });
    });
});

public function submit(): void
{
    $this->validate($this->getValidationRules());

    $submission = $this->submissionService->create(
        $this->form,
        $this->formData
    );

    if ($this->redirectUrl) {
        $this->redirect($this->redirectUrl);
    } else {
        $this->submitted = true;
    }

    $this->dispatch('form-submitted', [
        'formId' => $this->form->id,
        'submissionId' => $submission->id,
    ]);
}

public function nextStep(): void
{
    $this->validateCurrentStep();
    $this->currentStep++;
    $this->dispatch('step-changed', step: $this->currentStep);
}

public function previousStep(): void
{
    $this->currentStep--;
    $this->dispatch('step-changed', step: $this->currentStep);
}

protected function getValidationRules(): array
{
    $rules = [];

    foreach ($this->getVisibleFields() as $field) {
        $fieldRules = [];

        if ($field->required) {
            $fieldRules[] = 'required';
        }

        if ($field->validation['min'] ?? null) {
            $fieldRules[] = 'min:' . $field->validation['min'];
        }

        if ($field->validation['max'] ?? null) {
            $fieldRules[] = 'max:' . $field->validation['max'];
        }

        // Add type-specific rules
        if ($field->type === 'email') {
            $fieldRules[] = 'email';
        }

        $rules["formData.{$field->name}"] = $fieldRules;
    }

    return $rules;
}

php artisan vendor:publish --tag=forms-views

{{-- resources/views/vendor/forms/livewire/form-renderer.blade.php --}}
<div class="form-renderer {{ $cssClass }}">
    @if ($submitted)
        {{-- Success State --}}
        <div class="form-success">
            {{ $successMessage ?? $form->success_message ?? 'Thank you!' }}
        </div>
    @else
        {{-- Form --}}
        <form wire:submit="submit">
            @if ($showTitle && $form->name)
                <h2 class="form-title">{{ $form->name }}</h2>
            @endif

            @if ($showDescription && $form->description)
                <p class="form-description">{{ $form->description }}</p>
            @endif

            {{-- Progress (multi-step) --}}
            @if ($form->is_multi_step)
                @include('forms::partials.progress')
            @endif

            {{-- Fields --}}
            @foreach ($currentFields as $field)
                @include("forms::partials.fields.{$field->type}", ['field' => $field])
            @endforeach

            {{-- Navigation --}}
            @include('forms::partials.navigation')
        </form>
    @endif
</div>

{{-- custom-field.blade.php --}}
<div class="form-group {{ $field->settings['wrapper_class'] ?? '' }}">
    <label for="{{ $field->name }}">
        {{ $field->label }}
        @if ($field->required)
            <span class="required">*</span>
        @endif
    </label>

    <input
        type="text"
        id="{{ $field->name }}"
        wire:model="formData.{{ $field->name }}"
        class="form-input @error('formData.' . $field->name) is-invalid @enderror"
        placeholder="{{ $field->placeholder }}"
    >

    @if ($field->help_text)
        <small class="help-text">{{ $field->help_text }}</small>
    @endif

    @error('formData.' . $field->name)
        <span class="error-message">{{ $message }}</span>
    @enderror
</div>

{{-- file.blade.php --}}
<div class="form-group">
    <label>{{ $field->label }}</label>

    <input
        type="file"
        wire:model="formData.{{ $field->name }}"
        accept="{{ $field->settings['accept'] ?? '*' }}"
        @if ($field->settings['multiple'] ?? false) multiple @endif
    >

    <div wire:loading wire:target="formData.{{ $field->name }}">
        Uploading...
    </div>
</div>

<input
    type="text"
    id="{{ $field->name }}"
    aria-describedby="{{ $field->name }}-help {{ $field->name }}-error"
    aria-invalid="{{ $errors->has('formData.' . $field->name) ? 'true' : 'false' }}"
>

@if ($field->help_text)
    <small id="{{ $field->name }}-help">{{ $field->help_text }}</small>
@endif

@error('formData.' . $field->name)
    <span id="{{ $field->name }}-error" role="alert">{{ $message }}</span>
@enderror

namespace App\Livewire;

use ArtisanPackUI\Forms\Livewire\FormRenderer;

class CustomFormRenderer extends FormRenderer
{
    public function submit(): void
    {
        // Pre-submission hook
        $this->preSubmit();

        parent::submit();

        // Post-submission hook
        $this->postSubmit();
    }

    protected function preSubmit(): void
    {
        // Add custom data
        $this->formData['submitted_from'] = request()->url();
    }
}