Customize the register page

PODCAST

• 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/0001_01_01_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')->collation('nocase');
        $table->string('email')->collation('nocase')->unique();
        $table->string('phone')->nullable();    
        ...
    });
}

• Run the migration to update the database

php artisan migrate:fresh --seed

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

protected $fillable = [
    'name',
    'email',
    'password',
    'active',
    'admin',
    'phone',        
];

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-label for="name" value="{{ __('Name') }}" />
        <x-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-label for="email" value="{{ __('Email') }}" />
        <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autocomplete="username" />
    </div>

    <div class="mt-4">
        <x-label for="phone" value="{{ __('Phone') }}" />
        <x-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required />
    </div>
    ...
</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' => 'nullable|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']),
    ]);
}

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

</x-slot>

    ... 
    
    <!-- Name -->
    <div class="col-span-6 sm:col-span-4">
        <x-label for="name" value="{{ __('Name') }}" />
        <x-input id="name" type="text" class="mt-1 block w-full" wire:model="state.name" autocomplete="name" />
        <x-input-error for="name" class="mt-2" />
    </div>
    
    <!-- Email -->
    <div class="col-span-6 sm:col-span-4">
        <x-label for="email" value="{{ __('Email') }}" />
        <x-input id="email" type="email" class="mt-1 block w-full" wire:model="state.email" />
        <x-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-label for="phone" value="{{ __('Phone') }}" />
        <x-input id="phone" type="text" class="mt-1 block w-full" wire:model="state.phone" />
        <x-input-error for="phone" class="mt-2" />
    </div>
</x-slot>

• 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
  • *Line 5: a*dd phone to the validation rules
  • Line 14: add phone to the forceFill method

...
Validator::make($input, [
    'name' => ['required', 'string', 'max:255'],
    'email' => ['required', 'email', 'max:255', Rule::unique('users')->ignore($user->id)],
    'phone' => 'nullable|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();
}

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:

1. Add the extra fields to the users migration in the database/migrations/0001_01_01_000000_create_users_table.php file
2. Add the fields to the fillable array in the app/Models/User.php file
3. Add the fields to the register form in the resources/views/auth/register.blade.php file
4. Add the fields to the validation rules in the app/Actions/Fortify/CreateNewUser.php file and to the create method
5. Add the fields to the update profile form in the resources/views/profile/update-profile-information-form.blade.php file
6. Add the fields to the validation rules in the app/Actions/Fortify/UpdateUserProfileInformation.php file and to the forceFill method