Filament Custom Edit Profile Page: Multiple Forms and Full-Page Design

Filament 3 has authentication features that you can easily enable, like the Profile page. But its default design is the same as the login/register page. What if we want to use the full-page design, with menus, for the Edit Profile page, too? Let's see how to do it.

This is how it looks by default:

What if we want to use the "full" Filament design with menus on the left? Also, we can go one step further and have form layouts similar to Laravel Breeze:

So, we have two goals for this tutorial:

• Use the full-page Filament design with custom pages
• Create multiple forms on one Filament page

Let's go!

Custom Page for Edit Profile Page

So first, let's create a new custom page.

php artisan make:filament-page EditProfile --type=custom

Don't choose any Resource.

This command created two files:

• App\Filament\Pages\EditProfile.php - A Livewire component's PHP class where all the logic goes.
• resources\filament\pages\edit-profile.blade.php - a View file where the front-end code goes.

Next, let's change Filament panels settings so the profile link goes to our custom page.

app/Providers/Filament/AdminPanelProvider.php:

use App\Filament\Pages\EditProfile;
 
class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->profile()
            ->userMenuItems([ 
                'profile' => MenuItem::make()->url(fn (): string => EditProfile::getUrl())
            ]) 
            // ...
    }
}

After visiting the Edit Profile page, you should see our custom page with the heading text Edit Profile.

Showing Multiple Forms on One Page

Next, let's add forms to our custom page. Because the custom page is a Livewire component, we must prepare it to...