F
Filament•2w ago
Wendell Dias

Building Custom Form in Filament Page

Hello everyone, I’m seeking guidance on best practices for creating a custom form within a Filament page. The form is quite simple: it includes a single input field and a button that triggers a modal dialog. The primary goal is to fetch a price from an external API. This form is independent of any Filament resource (i.e., no CRUD operations are involved; it’s purely a search function). Current Approach & Issues • Since this is a standalone page within Filament, I assume that a Livewire component isn’t necessary. • However, If the "Search" field is empty, I’m facing an issue where the required field validation does not trigger when the modal appears, and I click the confirmation button. • The current approach works - I can dd() inside the SearchPriceAPI function - but I feel like this might not be the best implementation. Step 1 - Create filament page: php artisan make:filament-page SearchPrice Step 2 - Build correspondent form: 
class SearchPrice extends Page implements HasForms
{
    use InteractsWithForms;

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

    protected static string $view = 'filament.pages.search-price';

    public ?array $data = [];

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('Search')->required(),
                Actions::make([
                    Action::make('Search')
                        ->requiresConfirmation()
                        ->action(fn() => $this->SearchPriceAPI())
                ]),
            ])
            ->statePath('data'); // ✅ Bind form state to $data
    }

    public function SearchPriceAPI()
    {
        // Send Get Request to obtain the price

        // Show data to the user
    }
}
class SearchPrice extends Page implements HasForms
{
    use InteractsWithForms;

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

    protected static string $view = 'filament.pages.search-price';

    public ?array $data = [];

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('Search')->required(),
                Actions::make([
                    Action::make('Search')
                        ->requiresConfirmation()
                        ->action(fn() => $this->SearchPriceAPI())
                ]),
            ])
            ->statePath('data'); // ✅ Bind form state to $data
    }

    public function SearchPriceAPI()
    {
        // Send Get Request to obtain the price

        // Show data to the user
    }
}
Blade view file: 
<x-filament::page>
    {{ $this->form }}

    <x-filament-actions::modals />
</x-filament::page>
<x-filament::page>
    {{ $this->form }}

    <x-filament-actions::modals />
</x-filament::page>
2 Replies
Mohamed Ayaou
Mohamed Ayaou•2w ago
If it is independent from any filament resource then just don't use filament Forms, but only its blade components as a custom view
Mohamed Ayaou
Mohamed Ayaou•2w ago

Did you find this page helpful?