Free·
Add a confirmation modal before creating a record
Add a Confirmation Modal Before Creating a Record
Sometimes you want to double-check with users before they create a new record, especially when the action has real consequences. Adding a confirmation modal to the Create form can help prevent mistakes and ensure intent.
The trick
Here's how to show a confirmation modal before saving a record in a Filament CreatePage, no extra packages, just native Filament.
app/Filament/Resources/Posts/Pages/CreatePost.php
<?php
namespace App\Filament\Resources\Posts\Pages;
use App\Filament\Resources\Posts\PostResource;
use Filament\Actions\Action;
use Filament\Resources\Pages\CreateRecord;
class CreatePost extends CreateRecord
{
protected static string $resource = PostResource::class;
protected static bool $canCreateAnother = false;
protected function mutateFormDataBeforeCreate(array $data): array
{
$data['user_id'] = auth()->id();
return $data;
}
protected function getCreateFormAction(): Action
{
return parent::getCreateFormAction()
->submit(null)
->requiresConfirmation()
->action(function () {
$actionId = str('fi-')
->append($this->getId())
->append('-action-0')
->toString();
$this->dispatch('close-modal', id: $actionId);
$this->create();
});
}
}
This replaces the default submit button with a custom action that includes a confirmation step. When users click Create a modal pops up asking for confirmation. Only then is the record saved.
Conclusion
Use this pattern to keep users informed and intentional. It's especially helpful when creating critical or irreversible data.
Download source code
Run project on Firebase Studio
- Open studio.firebase.google.com and import the repository
https://github.com/wiremodel/simple-blog - Run the project. Once it's up, switch to the correct branch:
git checkout v4/confirmation-modal-before-creating
Update dependencies and migrate the database:
composer update -W
php artisan migrate:fresh --seed
Make sure your
.env file has APP_URL set to the URL provided by Firebase Studio.