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

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>

Building Custom Form in Filament Page

php artisan make:filament-page SearchPrice

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>

Building Custom Form in Filament Page

Building Custom Form in Filament Page

Similar Threads

Similar Threads

Similar Threads