Livewire Form - What's the best way?

To handle a multi-step form with Livewire and Alpine.js, where users can navigate between sections and their progress is saved without requiring an account, you can follow these steps:

1. Model Setup:

   • Create models for Section, Question, and QuestionOption.
   • Define relationships between them.

2. Livewire Component:

   • Create a Livewire component to manage the form state and handle user interactions.
   • Use Alpine.js for front-end interactivity.

3. Session Storage:

   • Use Laravel's session to store the user's progress so they can return to the form later.

Here's a step-by-step implementation:

Step 1: Model Setup

// Section.php
class Section extends Model
{
    public function questions()
    {
        return $this->hasMany(Question::class);
    }
}

// Question.php
class Question extends Model
{
    public function section()
    {
        return $this->belongsTo(Section::class);
    }

    public function options()
    {
        return $this->hasMany(QuestionOption::class);
    }
}

// QuestionOption.php
class QuestionOption extends Model
{
    public function question()
    {
        return $this->belongsTo(Question::class);
    }
}

Step 2: Livewire Component

// app/Http/Livewire/MultiStepForm.php
namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Session;

class MultiStepForm extends Component
{
    public $sections;
    public $currentSectionIndex = 0;
    public $data = [];

    public function mount()
    {
        $this->sections = Section::with('questions.options')->get();
        $this->data = Session::get('form_data', []);
    }

    public function nextSection()
    {
        $this->currentSectionIndex++;
        $this->saveProgress();
    }

    public function previousSection()
    {
        $this->currentSectionIndex--;
        $this->saveProgress();
    }

    public function saveProgress()
    {
        Session::put('form_data', $this->data);
    }

    public function render()
    {
        return view('livewire.multi-step-form', [
            'currentSection' => $this->sections[$this->currentSectionIndex],
        ]);
    }
}

Step 3: Blade View

<!-- resources/views/livewire/multi-step-form.blade.php -->
<div x-data="{ currentSectionIndex: @entangle('currentSectionIndex') }">
    <form wire:submit.prevent="nextSection">
        <div x-show="currentSectionIndex === {{ $currentSectionIndex }}">
            <h2>{{ $currentSection->name }}</h2>
            @foreach($currentSection->questions as $question)
                <div>
                    <label>{{ $question->text }}</label>
                    @if($question->type === 'radio')
                        @foreach($question->options as $option)
                            <input type="radio" wire:model="data.{{ $currentSection->id }}.{{ $question->id }}" value="{{ $option->id }}">
                            {{ $option->text }}
                        @endforeach
                    @elseif($question->type === 'input')
                        <input type="text" wire:model="data.{{ $currentSection->id }}.{{ $question->id }}">
                    @endif
                </div>
            @endforeach
        </div>

        <div>
            <button type="button" x-show="currentSectionIndex > 0" wire:click="previousSection">Back</button>
            <button type="submit" x-show="currentSectionIndex < {{ count($sections) - 1 }}">Next</button>
            <button type="submit" x-show="currentSectionIndex === {{ count($sections) - 1 }}">Submit</button>
        </div>
    </form>
</div>

Step 4: Handling Form Submission

In your Livewire component, you can add a method to handle the final form submission:

public function submit()
{
    // Handle form submission, e.g., save to database
    // Clear session data
    Session::forget('form_data');
    // Redirect or show a success message
}

Summary

This setup allows you to:

• Split the form into sections.
• Navigate between sections using Alpine.js and Livewire.
• Save the user's progress in the session so they can return to the form later.

This approach keeps the user experience simple and doesn't require user accounts.