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

Recommend this page to a friend!

Author

Name:	Edward Paul `<contact>`
Classes:	8 packages by Edward Paul
Country:	Nigeria

Innovation award

Nominee: 3x

Detailed description

Download .zip .tar.gz

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.

Details

Laravel Multi-step Form

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.

Classes of Edward Paul

Laravel Multi-Step Form

Download .zip .tar.gz

Support forum

Blog

Latest changes

Name:	Laravel Multi-Step Form Support forum
Base name:	`laravel-multistep-fo`
Description:	Create forms split in several pages for each step
Version:	`-`
PHP version:	`5`
License:	The PHP License

Groups

Applications

Files

Groups

HTML	HTML generation and processing	View top rated classes
PHP 5	Classes using PHP 5 specific features	View top rated classes
Libraries	Frameworks and libraries of cooperating classes	View top rated classes

Applications that use this package

No pages of applications that use this class were specified.

If you know an application of this package, send a message to the author to add a link here.

Files

File	Role	Description
`.idea` (5 files)
`config` (1 file)
`database` (1 directory)
`src` (3 files, 4 directories)
`tests` (1 file)
`.editorconfig`	Data	Auxiliary data
`.scrutinizer.yml`	Data	Auxiliary data
`.styleci.yml`	Data	Auxiliary data
`.travis.yml`	Data	Auxiliary data
`CHANGELOG.md`	Data	Auxiliary data
`composer.json`	Data	Auxiliary data
`CONTRIBUTING.md`	Data	Auxiliary data
`LICENSE.md`	Lic.	License text
`phpunit.xml.dist`	Data	Auxiliary data
`README.md`	Doc.	Read me

Files

.idea

File	Role	Description
`laravel-multistep-forms.iml`	Data	Auxiliary data
`misc.xml`	Data	Auxiliary data
`modules.xml`	Data	Auxiliary data
`php.xml`	Data	Auxiliary data
`symfony2.xml`	Data	Auxiliary data

Files

config

File	Role	Description
`steps.php`	Aux.	Auxiliary script

Files

database

File	Role	Description
`migrations` (1 file)

Files

database

migrations

File	Role	Description
`create_multisteps_table.php.stub`	Class	Class source

Files

src

File	Role	Description
`Controller` (3 files)
`Models` (1 file)
`Routing` (1 file)
`Store` (3 files, 1 directory)
`MultiStep.php`	Class	Class source
`MultiStepFormsServiceProvider.php`	Class	Class source
`MultiStepSystem.php`	Class	Class source

Files

src

Controller

File	Role	Description
`Keys.php`	Class	Class source
`MultiStepManager.php`	Class	Class source
`MultiStepRedirectController.php`	Class	Class source

Files

src

Models

File	Role	Description
`Step.php`	Class	Class source

Files

src

Routing

File	Role	Description
`PendingMultiStepRegister.php`	Class	Class source

Files

src

Store

File	Role	Description
`Contracts` (1 file)
`DatabaseStorage.php`	Class	Class source
`JsonOutput.php`	Class	Class source
`SessionStorage.php`	Class	Class source

Files

src

Store

Contracts

File	Role	Description
`StepStorage.php`	Class	Class source

Files

tests

File	Role	Description
`ExampleTest.php`	Class	Class source

Download all files: laravel-multistep-fo.tar.gz laravel-multistep-fo.zip

NOTICE: if you are using a download manager program like 'GetRight', please Login before trying to download this archive.

Advertise on this site

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