E-Signature Pad using jQuery, Ajax and PHP

AuthorHariom Prajapati

Pubish Date21 Jun 2022


In this tutorial we will learn how to create e-signature pad using jQuery, Ajax and PHP and also save image to database.

Here we will use keith-wood jquery ui signature pad to create signature on it.

So let’s follow below steps to create PHP signature pad.

Step 1 – Create 

1) index.php and 

2) upload.php file

In first step you need to create index.php file and upload.php file.


Step 2 – jQuery signature file

Now you need to download file from here - jQuery signature file .


Step 3 – Create new folder "asset"

Create a new folder with folder name "asset".


Step 4 – extract jQuery signature file

Extract the downloaded file and then follow below steps.


Step 5 – Copy both files

1) jquery.signature.min.js 

2) jquery.signature.css


Now copy -

1) jquery.signature.min.js

2) jquery.signature.css  files from downloaded file and then paste it into "asset" folder.


Step 6 – Copy and paste below code inside index.php file

<!DOCTYPE html>

    <title>E-Signature Pad using jQuery, Ajax and PHP</title>
    <link rel="stylesheet" type="text/css"
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css"
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="asset/jquery.signature.min.js"></script>
    <link rel="stylesheet" type="text/css" href="asset/jquery.signature.css">
        .kbw-signature {
            width: 400px;
            height: 200px;

        #sig canvas {
            width: 100% !important;
            height: auto;

    <div class="container">
        <form method="POST" action="upload.php">
            <h1>E-Signature Pad using jQuery, Ajax and PHP</h1>
            <div class="col-md-12"> <label class="" for="">Signature:</label> <br />
                <div id="sig"></div> <br /> <button id="clear">Clear</button> <textarea id="signature64" name="signed"
                    style="display: none"></textarea>
            </div> <br /> <button class="btn btn-success">Submit</button>
    <script type="text/javascript">
        var sig = $('#sig').signature({
            syncField: '#signature64',
            syncFormat: 'PNG'
        $('#clear').click(function (e) {



Step 7 – Copy and paste below code inside upload.php file

    $folderPath = "upload/";
    $image_parts = explode(";base64,", $_POST['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);
    echo "Signature Uploaded Successfully.";




Comments 0

Leave a comment