How to Setup Multi Steps Registration Form in Laravel

Published on July 26, 2020 2 min read

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

  1. Create Laravel Project
  2. Database Migrations
  3. Create Controller
  4. Create View File
  5. Define Routes
  6. Run and Test

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:

RegisterControllerStep2.php
<?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.

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:

routes/web.php
Route::get('register-step2', 'Auth\[email protected]');
Route::post('register-step2', 'Auth\[email protected]')->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. 🙂

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.
Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development. If you enjoy my content, please consider supporting what I do!

Follow Buy me a coffeeBuy me a coffee

Leave a Reply

Your email address will not be published. Required fields are marked *