# Customize the register page

The default register page is very basic (name, email and password fields)
In this chapter we will add one extra field (phone) to the register page, but you can add as many fields as you want
Watch the video below to see how it works

# Add the phone field to database

Open the database/migrations/2014_10_12_000000_create_users_table.php file and add the phone-field to migration

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->string('phone')->nullable();
        ...
    });
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10

Run the migration to update the database

php artisan migrate:fresh
 
        Copied!

Open the app/Models/User.php file and add the phone-field to the fillable array

protected $fillable = [
    'name',
    'email',
    'phone',
    ...
];
 
        Copied!

1
2
3
4
5
6

# Add the phone field to the register form

Open the resources/views/auth/register.blade.php file and add the phone-field to the form

<form method="POST" action="{{ route('register') }}">
    @csrf

    <div>
        <x-jet-label for="name" value="{{ __('Name') }}" />
        <x-jet-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
    </div>

    <div class="mt-4">
        <x-jet-label for="email" value="{{ __('Email') }}" />
        <x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
    </div>

    <div class="mt-4">
        <x-jet-label for="phone" value="{{ __('Phone') }}" />
        <x-jet-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required />
    </div>
    ...
</form>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

The phone field is now added to the register form
The code behind this form has to validate the phone field and store the phone number in the database
Open the app/Actions/Fortify/CreateNewUser.php file and add the phone-field to the validation rules and to the create method
- The phone-field is optional, so we don't add the required rule
- But if it is filled in, it must be a string with a minimum of 9 characters and a maximum of 20 characters

public function create(array $input)
{
    Validator::make($input, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'phone' => 'min:9|max:20',
        'password' => $this->passwordRules(),
        'terms' => Jetstream::hasTermsAndPrivacyPolicyFeature() ? ['accepted', 'required'] : '',
    ])->validate();

    return User::create([
        'name' => $input['name'],
        'email' => $input['email'],
        'phone' => $input['phone'],
        'password' => Hash::make($input['password']),
    ]);
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Update the user profile page

After a successful registration, the user can update his profile, and we have to add the phone-field to this page
Open the resources/views/profile/update-profile-information-form.blade.php file and add the phone-field to the form

<!-- Name -->
<div class="col-span-6 sm:col-span-4">
    <x-jet-label for="name" value="{{ __('Name') }}" />
    <x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="state.name" autocomplete="name" />
    <x-jet-input-error for="name" class="mt-2" />
</div>

<!-- Email -->
<div class="col-span-6 sm:col-span-4">
    <x-jet-label for="email" value="{{ __('Email') }}" />
    <x-jet-input id="email" type="email" class="mt-1 block w-full" wire:model.defer="state.email" />
    <x-jet-input-error for="email" class="mt-2" />

    @if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::emailVerification()) && ! $this->user->hasVerifiedEmail())
        ...
    @endif
</div>

<!-- Phone -->
<div class="col-span-6 sm:col-span-4">
    <x-jet-label for="phone" value="{{ __('Phone') }}" />
    <x-jet-input id="phone" type="text" class="mt-1 block w-full" wire:model.defer="state.phone" />
    <x-jet-input-error for="phone" class="mt-2" />
</div>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Update profile page with phone field

And, of course, we have to validate the phone-field and update the database on the backend
Open the app/Actions/Fortify/UpdateUserProfileInformation.php file and update the code

...
Validator::make($input, [
    'name' => ['required', 'string', 'max:255'],
    'email' => ['required', 'email', 'max:255', Rule::unique('users')->ignore($user->id)],
    'phone' => 'min:9|max:20',
    'photo' => ['nullable', 'mimes:jpg,jpeg,png', 'max:1024'],
])->validateWithBag('updateProfileInformation');
...
protected function updateVerifiedUser($user, array $input)
{
    $user->forceFill([
        'name' => $input['name'],
        'email' => $input['email'],
        'phone' => $input['phone'],
        'email_verified_at' => null,
    ])->save();

    $user->sendEmailVerificationNotification();
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Update profile page validation error

# Conclusion

As you can see, it is very easy to add extra fields to the registration form and the user profile page. All you have to do is:

Add the extra fields to the users migration in the database/migrations/2014_10_12_000000_create_users_table.php file
Add the fields to the fillable array in the app/Models/User.php file
Add the fields to the register form in the resources/views/auth/register.blade.php file
Add the fields to the validation rules in the app/Actions/Fortify/CreateNewUser.php file and to the create method
Add the fields to the update profile form in the resources/views/profile/update-profile-information-form.blade.php file
Add the fields to the validation rules in the app/Actions/Fortify/UpdateUserProfileInformation.php file and to the forceFill method