How to Setup Multi Steps Registration Form in Laravel
In this article, I’m going to setup two step registration in Laravel. You can add more step like this. So, let’s get started:
Table of Contents
Create Laravel Project
Each Laravel project needs this thing. That’s why I have written an article on this topic. Please see this part from here: Install Laravel and Basic Configurations.
Database Migrations
On step 2, I’ll show 2 fields. One is gender
and another one is biography
. So, we need to add the 2 fields to users table. Go to database/migrations and open timestamp_create_users_table.php file. Then update the up()
function:
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->string('gender', 10)->nullable();
$table->longText('biography')->nullable();
$table->rememberToken();
$table->timestamps();
});
}
Then migrate the migrations fresly:
php artisan migrate:fresh
After that, navigate to app folder, open User.php and update the $fillable
array:
protected $fillable = [
'name', 'email', 'password', 'gender', 'biography'
];
Create Controller
We have to create a controller to control step 2 form.
php artisan make:controller Auth\RegisterControllerStep2
Then open the controller from app\Http\Controllers\Auth folder and paste this code:
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class RegisterControllerStep2 extends Controller
{
public function __construct()
{
$this->middleware('auth');
}
public function form()
{
return view('auth.register_step2');
}
public function saveData(Request $request)
{
auth()->user()->update($request->only(['gender', 'biography']));
return redirect()->route('home');
}
}
Create View File
Go to resources/view/auth folder and create a file named register_step2.blade.php.
@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 Step 2') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('register.step2') }}">
@csrf
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Gender') }}</label>
<div class="col-md-6">
<select name="gender" class="form-control @error('gender') is-invalid @enderror">
<option value="">-- {{ __('choose') }} --</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
@error('gender')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Biography') }}</label>
<div class="col-md-6">
<textarea class="form-control @error('biography') is-invalid @enderror" name="biography">{{ old('biography') }}</textarea>
@error('biography')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Submit') }}
</button>
<br /><br />
<a href="{{ route('home') }}">Skip for now</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Define Routes
Let’s define routes for step 2 form and to save step 2’s data:
Route::get('register-step2', 'Auth\RegisterControllerStep2@form');
Route::post('register-step2', 'Auth\RegisterControllerStep2@saveData')->name('register.step2');
The last thing: open RegisterController from and update the value of $redirectTo
variable.
protected $redirectTo = '/register-step2';
Run and Test
Now run the project, go to the register route and check. Here are the two steps screenshots.
Step 1:

Step 2:

That’s it. Thanks for reading. 🙂
Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.