To render a Filament form with a simple text input in a custom Blade view, you need a Livewire component to handle the form logic.
Here is a step-by-step tutorial:
Prerequisites
Ensure you have the Filament Forms package installed in your Laravel project. You can check the documentation for installation instructions.
Step 1: Create a Livewire Component
Filament forms are built on Livewire, so you need a Livewire component to manage the form's state and submission.
bash
php artisan make:livewire ContactForm
Step 2: Define the Form Schema in the Livewire Component
In the generated app/Livewire/ContactForm.php file, you need to set up the form using the HasSchemas interface and InteractsWithSchemas trait.
php
<?php
namespace App\Livewire;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Livewire\Component;
use Illuminate\Contracts\View\View;
class ContactForm extends Component implements HasForms
{
use InteractsWithForms;
public ?array $data = [];
public function mount(): void
{
$this->form->fill();
}
protected function form(Form $form): Form
{
return $form
->schema([
TextInput::make('name')
->label('Your Name')
->required()
->maxLength(255),
TextInput::make('email')
->label('Email Address')
->email()
->required(),
])
->statePath('data');
}
public function create(): void
{
$data = $this->form->getState();
// Process the data (e.g., save to database, send email)
// \App\Models\Contact::create($data);
// Optional: Add a flash message or redirect
session()->flash('message', 'Form submitted successfully!');
}
public function render(): View
{
return view('livewire.contact-form');
}
}
Step 3: Create the Blade View
In the resources/views/livewire/contact-form.blade.php file, render the form using Filament's form components.
blade
<div>
@if (session()->has('message'))
<div class="p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg" role="alert">
{{ session('message') }}
</div>
@endif
<form wire:submit="create">
{{ $this->form }}
<button type="submit" class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
Submit
</button>
</form>
</div>
Step 4: Include in a Main Blade File
You can now include this Livewire component in any of your main application's Blade views.
blade
{{-- resources/views/welcome.blade.php (or any other layout file) --}}
<!DOCTYPE html>
<html>
<head>
<title>Filament Form Tutorial</title>
{{-- Make sure Livewire styles and scripts are included --}}
@livewireStyles
@livewireScripts
{{-- Ensure Tailwind CSS is configured for Filament styling --}}
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div class="p-8">
<livewire:contact-form />
</div>
</body>
</html>
By following these steps, you have a functional Filament form with text inputs rendered in a custom Blade view, using Livewire for interactivity and data handling.
Rendering a form in a Blade view - Components - Filament
Each one is essential: * Implement the HasSchemas interface and use the InteractsWithSchemas trait. * Define a public Livewire pro...
Filament
Advanced forms - Filament
#The basics of reactivity Livewire is a tool that allows Blade-rendered HTML to dynamically re-render without requiring a full pag...
Filament
Installation - Introduction - Filament
#Installing the individual components ... You can install additional packages later in your project without having to repeat these...
Filament
แสดงทั้งหมด
