Laravel Multi-Step Form: Create forms split in several pages for each step

Recommend this page to a friend!
  Info   View files Documentation   View files View files (30)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog (1)    
Last Updated Ratings Unique User Downloads Download Rankings
2020-08-06 (1 month ago) RSS 2.0 feedNot yet rated by the usersTotal: 50 This week: 13All time: 9,880 This week: 18Up
Version License PHP version Categories
laravel-multistep-fo 1.0.0The PHP License5HTML, PHP 5, Libraries
Description Author

This package can create forms split in several pages for each step.

It can associate a given name for a form to be displayed in multiple pages with routes that associate different controller classes to handle each of the steps of the form.

Applications need to use this package multi-step class from the controller classes to process the results of each step and tell what will be the next step or if the form is fully processed.

Innovation Award
PHP Programming Innovation award nominee
August 2020
Number 9
When applications need to ask the users to fill forms with many details, it is better to implement multi-page forms by splitting those forms in multiple pages to avoid asking too much information at once from the users.

This package provides a simplified solution to implement multi-page forms in applications based on the Laravel framework.

Manuel Lemos
Picture of Edward Paul
  Performance   Level  
Name: Edward Paul is available for providing paid consulting. Contact Edward Paul .
Classes: 9 packages by
Country: Nigeria Nigeria
Age: 29
All time rank: 354623 in Nigeria Nigeria
Week rank: 17 Up1 in Nigeria Nigeria Up
Innovation award
Innovation award
Nominee: 5x

Details

Laravel Multi-step Form

Latest Version on Packagist Build Status Quality Score Total Downloads

Hi Fellas! So you know how you would like to create a dynamic registration form but then you can't because you feel this is impossible with PHP.

Well, I have good news for ya, this is so POSSIBLE with this package. Yeah that's right, I mean it. Let's get down on the "how":

So we will be working with a 3 step form:

Installation

You can install the package via composer:

composer require infinitypaul/laravel-multistep-forms

Usage

After installing the package, I will be creating 3 blades for the different steps of the form:

Step 1: Create the blades for the form.

1.blade.php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    @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('auth.register.1.store') }}">
                                @csrf

                                <div class="form-group row">
                                    <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('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') ?: $step->name }}" required autocomplete="name" autofocus>

                                        @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>


                                </div>

                                <div class="form-group row">
                                    <label for="middle" class="col-md-4 col-form-label text-md-right">{{ __('Middle Name') }}</label>
                                    <div class="col-md-6">
                                        <input id="text" type="text" class="form-control @error('middle') is-invalid @enderror" name="middle" value="{{ old('middle') ?: $step->middle }}" required autocomplete="email" autofocus>

                                        @error('middle')
                                        <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">
                                            {{ __('Next') }}
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    @endsection

2.blade.php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

@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('auth.register.2.store') }}">
                            @csrf

                            <div class="form-group row">
                                <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail 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') ?: $step->email }}" required autocomplete="email">

                                    @error('email')
                                    <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">
                                        {{ __('Next') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

3.blade.php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

@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('auth.register.3.store') }}">
                            @csrf


                            <div class="form-group row">
                                <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('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="form-group row mb-0">
                                <div class="col-md-6 offset-md-4">
                                    <button type="submit" class="btn btn-primary">
                                        {{ __('Finish') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Step 2: Create the controller for the each form.

After creating the blade views for each of the forms, p.s: I created them in a folder "register". We'll be heading to the controller, so in app\Http\Controllers\Auth, we would be creating a folder "Register" i.e our path will be "app\Http\Controllers\Auth\Register". In the Register folder, we would be creating 3 controllers for the three steps:

RegisterControllerStep1.php

<?php

namespace App\Http\Controllers\Auth\Register;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use Infinitypaul\MultiStep\MultiStep;


class RegisterControllerStep1 extends Controller
{
    public function index(){

        $step  =MultiStep::step('auth.register', 1);
        return view('auth.register.1', compact('step'));
    }

    public function store(Request $request){
        MultiStep::step('auth.register', 1)->store(['name' => $request->name, 'middle' => $request->middle])->complete();
        return redirect()->route('auth.register.2.index');
    }
}

RegisterControllerStep2.php

<?php

namespace App\Http\Controllers\Auth\Register;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Infinitypaul\MultiStep\MultiStep;

class RegisterControllerStep2 extends Controller
{
    public function index(){
        $step  =MultiStep::step('auth.register', 2);
        return view('auth.register.2', compact('step'));
    }


    public function store(Request $request){
        MultiStep::step('auth.register', 2)->store($request->only('email'))->complete();

        return redirect()->route('auth.register.3.index');
    }
}

RegisterControllerStep3.php

<?php

namespace App\Http\Controllers\Auth\Register;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Infinitypaul\MultiStep\MultiStep;


class RegisterControllerStep3 extends Controller
{
    public function index(){
        $step = MultiStep::step('auth.register', 3);
        if($step->notCompleted(1)){
            return redirect()->route('auth.register.1.index');
        }
        return view('auth.register.3');
    }

    public function store(MultiStep $multiStep, Request $request){
        MultiStep::step('auth.register', 3)->store($request->only('password'))->complete();

        MultiStep::clearAll();
    }
}

Step 3: Routing!

Let's move on to the route, in our web.php, we will include this:

Route::multistep('auth/register', 'Auth\Register\RegisterController')
    ->steps('3')
    ->name('auth.register')
    ->only(['index', 'store']);

We're done guys!!!

So if I head to {URL}/auth/register/1, I would see this: Form 1

When I click on next, it takes me to {URL}/auth/register/2 and this will display: Form 2.png)

On clicking on next, we get {URL}/auth/register/3: Form 3.png)

Its a wrap! Well done guys!!!

Testing

composer test

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Bugs & Fixtures

If you have spotted any bugs, or would like to request additional features from the library, please file an issue via the Issue Tracker on the project's Github page: https://github.com/infinitypaul/laravel-multistep-forms/issues.

Security

If you discover any security related issues, please email infinitypaul@live.com instead of using the issue tracker.

License

The MIT License (MIT). Please see License File for more information.

  Files folder image Files  
File Role Description
Files folder image.idea (5 files)
Files folder imageconfig (1 file)
Files folder imagedatabase (1 directory)
Files folder imagesrc (3 files, 4 directories)
Files folder imagetests (1 file)
Accessible without login Plain text file .editorconfig Data Auxiliary data
Accessible without login Plain text file .scrutinizer.yml Data Auxiliary data
Accessible without login Plain text file .styleci.yml Data Auxiliary data
Accessible without login Plain text file .travis.yml Data Auxiliary data
Accessible without login Plain text file CHANGELOG.md Data Auxiliary data
Accessible without login Plain text file composer.json Data Auxiliary data
Accessible without login Plain text file CONTRIBUTING.md Data Auxiliary data
Accessible without login Plain text file LICENSE.md Lic. License text
Accessible without login Plain text file phpunit.xml.dist Data Auxiliary data
Accessible without login Plain text file README.md Doc. Read me

  Files folder image Files  /  .idea  
File Role Description
  Accessible without login Plain text file laravel-multistep-forms.iml Data Auxiliary data
  Accessible without login Plain text file misc.xml Data Auxiliary data
  Accessible without login Plain text file modules.xml Data Auxiliary data
  Accessible without login Plain text file php.xml Data Auxiliary data
  Accessible without login Plain text file symfony2.xml Data Auxiliary data

  Files folder image Files  /  config  
File Role Description
  Accessible without login Plain text file steps.php Aux. Auxiliary script

  Files folder image Files  /  database  
File Role Description
Files folder imagemigrations (1 file)

  Files folder image Files  /  database  /  migrations  
File Role Description
  Plain text file create_multisteps_table.php.stub Class Class source

  Files folder image Files  /  src  
File Role Description
Files folder imageController (3 files)
Files folder imageModels (1 file)
Files folder imageRouting (1 file)
Files folder imageStore (3 files, 1 directory)
  Plain text file MultiStep.php Class Class source
  Plain text file MultiStepFormsServiceProvider.php Class Class source
  Plain text file MultiStepSystem.php Class Class source

  Files folder image Files  /  src  /  Controller  
File Role Description
  Plain text file Keys.php Class Class source
  Plain text file MultiStepManager.php Class Class source
  Plain text file MultiStepRedirectController.php Class Class source

  Files folder image Files  /  src  /  Models  
File Role Description
  Plain text file Step.php Class Class source

  Files folder image Files  /  src  /  Routing  
File Role Description
  Plain text file PendingMultiStepRegister.php Class Class source

  Files folder image Files  /  src  /  Store  
File Role Description
Files folder imageContracts (1 file)
  Plain text file DatabaseStorage.php Class Class source
  Plain text file JsonOutput.php Class Class source
  Plain text file SessionStorage.php Class Class source

  Files folder image Files  /  src  /  Store  /  Contracts  
File Role Description
  Plain text file StepStorage.php Class Class source

  Files folder image Files  /  tests  
File Role Description
  Plain text file ExampleTest.php Class Class source

 Version Control Unique User Downloads Download Rankings  
 100%
Total:50
This week:13
All time:9,880
This week:18Up

For more information send a message to info at phpclasses dot org.