Add Extra fields in the default registration form – Laravel [Example + Source code]
When we talk about the default laravel registration form, we might need to add some more fields in this registration form. Like address, mobile number, skill or anything. Adding extra field to the registration form laravel is very easy, let’s see with proper example.
I am going to add security questions in this registration form. Because I’ll continue this tutorial to another post, where we will discuss how to use these security questions with the normal login process.
Install the Laravel
To install the laravel run the below command.
composer create-project --prefer-dist laravel/laravel:^8.0 TestAuthUI
This command will set up your laravel 8.x project. If you have any issue check the laravel official website for installation process.
Go to the project directory and run the below command to install the auth UI.
Let’s install Laravel Auth UI
Following commands will set up the auth UI to our project.
composer require laravel/ui.*
php artisan ui bootstrap --auth
Then we need to install and run npm to compile our ui javascript.
npm install
npm run dev
npx mix
Create the database
When we finish the auth UI installation then we get the auth migrations like users, password reset tables etc. we need to create one more migration to add columns to users table i.e. security question.
php artisan make:migration add_col_to_users_table
Put the string column to the up method and down method to drop the same column in case of reverse migration.
<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class AddColToUsersTable extends Migration { public function up() { Schema::table('users', function (Blueprint $table) { $table->string('security_question')->after('email'); }); } public function down() { Schema::table('users', function (Blueprint $table) { $table->dropColumn('security_question'); }); } }
Migrate user auth database
Migrate the database with simply below command.
php artisan migrate
The above command will set up the auth tables to the database and we are ready to add an extra field in the registration form ui.
Registration form UI
Go to the resources > views > auth > register blade file. Open it, and write down the code below (don’t copy-paste the code 😋).
@extends('layouts.app') @section('content') <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">{{ __('Register') }}</div> <div class="card-body"> <form method="POST" action="{{ route('register') }}"> @csrf <div class="row mb-3"> <label for="name" class="col-md-4 col-form-label text-md-end">{{ __('Name') }}</label> <div class="col-md-6"> <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus> @error('name') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> <div class="row mb-3"> <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label> <div class="col-md-6"> <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email"> @error('email') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> <div class="row mb-3"> <label for="security_question" class="col-md-4 col-form-label text-md-end">{{ __('Who is your best friend?') }}</label> <div class="col-md-6"> <input id="security_question" type="text" class="form-control @error('security_question') is-invalid @enderror" name="security_question" value="{{ old('security_question') }}" required> @error('security_question') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> <div class="row mb-3"> <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label> <div class="col-md-6"> <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password"> @error('password') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> <div class="row mb-3"> <label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('Confirm Password') }}</label> <div class="col-md-6"> <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password"> </div> </div> <div class="row mb-0"> <div class="col-md-6 offset-md-4"> <button type="submit" class="btn btn-primary"> {{ __('Register') }} </button> </div> </div> </form> </div> </div> </div> </div> </div> @endsection
As you can see, we have added the security question field in the registration form after the email field. That’s it, simple?
Registration Model
After adding the extra field to the registration form ui, we also need to include this extra field to the registration model via fillable property.
<?php namespace App\Models; use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; use Laravel\Sanctum\HasApiTokens; class User extends Authenticatable { use HasApiTokens, HasFactory, Notifiable; protected $fillable = [ 'name', 'email', 'security_question', 'password', ]; protected $hidden = [ 'password', 'remember_token', ]; protected $casts = [ 'email_verified_at' => 'datetime', ]; }
Register controller
Put some validators for this extra field in the registration controller validators. Like below,
protected function validator(array $data) { return Validator::make($data, [ 'name' => ['required', 'string', 'max:255'], 'email' => ['required', 'string', 'email', 'max:255', 'unique:users'], 'security_question' => ['required', 'string', 'min:5', 'max:255'], 'password' => ['required', 'string', 'min:8', 'confirmed'], ]); }
Then add the security question in the array to store to the database.
protected function create(array $data) { return User::create([ 'name' => $data['name'], 'email' => $data['email'], 'security_question' => $data['security_question'], 'password' => Hash::make($data['password']), ]); }
Now, everything is ready to store security questions as an extra field in the registration form.
Serve the project to the browser
Now, run the below command to serve our project to the browser.
php artisan serve
Now, open the registration form by clicking on the registration link given in the right top corner.
Then fill the form and hit the submit button. Let’s check in the registration controller for the available data to store.
To test this just put the dd()
there in the app/http/controllers/auth/RegisterController
create method.
Conclusion
Now, you can easily add extra fields in the default registration form of laravel 8.x. You Only need to modify these things in the same order: registration form, Database migration, related model, and controller.