Edit Profile Page: Custom Form

Filament 3
Also available in Filament 4/5 version

Override the default "Edit Profile" page with the typical Filament full-page design, adding two forms on one page.

8-edit-profile-page

Get the Source Code:

Only This Example

$9

One-time payment

Full source code for Edit Profile Page: Custom Form
Downloadable ZIP file with the source code
Lifetime access to this example
GitHub Sign in with GitHub to buy

Sign in first, then complete your $9 checkout.

Best value — all 169 examples

FilamentExamples Membership

$99 /year
or
$199 lifetime
Access to code of all 169 examples
Future new examples and updates included
FilaCheck Pro package licence included
MCP server included
View membership plans

30-day money-back guarantee

How it works

The whole logic for Custom Profile is in the EditProfile custom page.

In the Panel Provider we enable profile feature with the profile() method.

public function panel(Panel $panel): Panel
{
return $panel
->default()
->id('admin')
->path('admin')
->login()
->profile()
// ...
}

We are using Filament Forms feature called multiple forms to add two forms in one page.

In the Panel Provider we modify default settings URL in the userMenuItems() method to use Custom Page.

public function panel(Panel $panel): Panel
{
return $panel
->default()
->id('admin')
->path('admin')
->login()
->profile()
->userMenuItems([
'profile' => MenuItem::make()->url(fn (): string => EditProfile::getUrl())
])
// ...
}

The full code for...

The FULL tutorial is available after the purchase: in the Readme file of the official repository you would get invited to.