How to Create Signature Pad in Laravel

Hi artisan, today I’m going to create signature pad in Laravel. I’m testing on Laravel 8. Let’s get started:

Table of Contents

  1. Create Controller
  2. Create View
  3. Define Routes
  4. Run & Test

Create Controller

At first, create a controller named SignPadController using artisan command:

php artisan make:controller SignPadController

Now open the controller and paste the code:


namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SignPadController extends Controller
     * index
    public function index()
        return view('sign_pad');

     * save
    public function save(Request $request)
        $folderPath = public_path('uploads/');
        $image_parts = explode(";base64,", $request->signed);
        $image_type_aux = explode("image/", $image_parts[0]);
        $image_type = $image_type_aux[1];
        $image_base64 = base64_decode($image_parts[1]);
        $file = $folderPath . uniqid() . '.' . $image_type;
        file_put_contents($file, $image_base64);

        return back()->with('success', 'Successfully saved the signature');

Create View

Create a blade file called sign_pad.blade.php and paste the code:

    <title>Laravel Signature Pad Example -</title>
    <link rel="stylesheet" type="text/css" href="">
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>

    <script type="text/javascript" src=""></script>
    <link rel="stylesheet" type="text/css" href="">
        .kbw-signature {
            width: 100%;
            height: 200px;
        #sig canvas {
            width: 100% !important;
            height: auto;
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 mt-5">
                <div class="card">
                    <div class="card-header">
                        <h5>Laravel Signature Pad Example -</h5>
                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success">
                                <span>{{ session('success') }}</span>
                        <form method="POST" action="{{ route('') }}">
                            <div class="col-md-12">
                                <div id="sig"></div>
                                <button id="clear" class="btn btn-danger btn-sm">Clear</button>
                                <textarea id="signature" name="signed" style="display: none"></textarea>
                            <button class="btn btn-primary">Save</button>
    <script type="text/javascript">
        var sig = $('#sig').signature({syncField: '#signature', syncFormat: 'PNG'});
        $('#clear').click(function (e) {

Define Routes

Our project is about to finish. Open web/routes.php and define these routes:

use App\Http\Controllers\SignPadController;

Route::get('signpad', [SignPadController::class, 'index']);
Route::post('signpad', [SignPadController::class, 'save'])->name('');

Run & Test

The project is ready to test. Run the project, visit /signpad route and test:

Laravel Signature Pad Example

That’s it. Thanks for reading.

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.