Ajouter un Formulaire à une Page Personnalisée

📌 Introduction

Dans ce tutoriel, nous allons voir comment ajouter un formulaire à une page Filament en quelques étapes simples. Nous allons créer une page personnalisée avec trois champs (Nom, Email, Message) et un bouton d'envoi.

🚀 Étape 1 : Créer la Page Filament

Exécute la commande suivante dans ton terminal :

php artisan make:filament-page TutoFormulaire

Cela va générer un fichier dans :

📺 app/Filament/Pages/TutoFormulaire.php

🛠️ Étape 2 : Ajouter le Formulaire

Ouvre TutoFormulaire.php et remplace son contenu par ce code :

<?php

namespace App\Filament\Pages;

use Filament\Pages\Page;
use Filament\Forms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;

class TutoFormulaire extends Page implements HasForms
{
    use Forms\Concerns\InteractsWithForms;

    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.tuto-formulaire';

    public $nom;
    public $email;
    public $message;

    protected function getFormSchema(): array
    {
        return [
            Forms\Components\TextInput::make('nom')
                                      ->label('Nom')
                                      ->required(),

            Forms\Components\TextInput::make('email')
                                      ->label('Email')
                                      ->email()
                                      ->required(),

            Forms\Components\Textarea::make('message')
                                     ->label('Message')
                                     ->required(),
        ];
    }

    protected function getFormActions(): array
    {
        return [
            Forms\Components\Actions\Action::make('save')
                                           ->label('Envoyer')
                                           ->action('submit')
                                           ->color('primary')
        ];
    }

    public function submit()
    {
        dd($this->form->getState()); // Affiche les données soumises
    }
}

🖥️ Étape 3 : Créer la Vue Blade

Ensuite, crée le fichier Blade correspondant :

📺 resources/views/filament/pages/tuto-formulaire.blade.php

Ajoute ce contenu :

<x-filament-panels::page>
    {{ $this->form }}
    <x-filament-panels::form.actions
        :actions="$this->getFormActions()"
    />
</x-filament-panels::page>

✅ Étape 4 : Tester le Formulaire

Lance ton serveur avec :

php artisan serve

Puis ouvre Filament dans ton navigateur et clique sur la page TutoFormulaire.

Remplis le formulaire et clique sur "Envoyer". Les données soumises s'afficheront avec dd().