Create a responsive Digital Signature using HTML, PHP and JQ-Signature library

Create a Digital Signature form using HTML, PHP and JQ-Signature library

In this article we will see how to create a responsive Digital Signature using HTML, PHP and JQ-Signature library.

When we have a terms and condition checkbox in the form, we may require a signature box where we asks the user to create his signature for further verification. In this article, we will use JQ-Signature library to implement the responsive digital signature box.

Lets start the code.

1. The HTML form

Create a index.php file and write the following code to create a basic form:

<div class="row">
  <div class="col-md-12">
    <form method="post" action="process.php" id="registerform" novalidate="novalidate">
      <div class="form-group">
        <p class="text-left"><strong>Draw Signature</strong></p>

        <!-- js signature widget -->
        <div class='js-signature'></div>

        <!-- action button to clear the signature -->
        <p><button type="button" id="clearBtn" class="btn btn-default" onclick="clearCanvas();">Clear Signature</button></p>
        
        <!-- populate the base64 encoded image in the textarea -->
        <textarea id="signature64" name="signed" style="display: none"></textarea>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-lg btn-primary" id="submit">Register</button>
      </div>
    </form>
  </div>
</div>

2. The JavaScript code

In the index.php file, add the following code in the bottom of file (before closing the body tag).

<!-- include jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- include jq-signature library -->
<script src="js/jq-signature.js"></script>

<script>
     // initiate jq-signature
     $('.js-signature').jqSignature({
         autoFit: true, // allow responsive
         height: 182, // set height
         border: '1px solid #a0a0a0', // set widget border
     });
     
     // create hook for clear button
     function clearCanvas() {
         $('.js-signature').jqSignature('clearCanvas');
         $("#signature64").val(''); // clear the textarea as well
     }

     // update the generated encoded image in the textarea
     $('.js-signature').on('jq.signature.changed', function() {
         var data = $('.js-signature').jqSignature('getDataURL');
         $("#signature64").val(data);
     });
 </script>

Refresh the page and you will see the signature section similar to image below.

digital signature form section demo

3. The PHP process

Now, we will see how to process this form and save the signature as an image or in the database.

Create a folder uploads and new file process.php and write the following code:

<?php
  // folder where signature will be stored
  $folderPath = "uploads/";
  
  // break the encoded image string
  $image_parts = explode(";base64,", $_POST['signed']);

  // get image type
  $image_type_aux = explode("image/", $image_parts[0]);
  $image_type = $image_type_aux[1];

  // get image data
  $image_base64 = base64_decode($image_parts[1]);

  // create a unique image name
  $image_name = uniqid().time(). '.'.$image_type;

  // concatenate image with the uploads directory
  $file = $folderPath . $image_name;

  // dynamically create an image file
  if(!file_put_contents($file, $image_base64)){
     echo 'Error! the image is not created';
  }
?>

The above code will take and break the encoded image string and will dynamically creates an image. That generated image will be moved to the required uploads folder.

Now, if you want to also store the image reference in the database you can use the variable either $image_name if you want to store image name only or use $file if you want to store the image name along with the path.

The folder and file structure looks like:

digital signature form section demo folder structure

Options provided by JQ-Signature library:

OptionDescriptionData AttributeOptions Example
WidthThe width of the signature canvas (in pixels). Default: 300data-width="600"$().jqSignature({width: 600});
HeightThe height of the signature canvas (in pixels). Default: 100data-height="200"$().jqSignature({height: 200});
BorderThe CSS for the border of the canvas. Default: ‘1px solid #AAAAAA’data-border="1px solid red"$().jqSignature({border: '1px solid red'});
BackgroundThe CSS for the background of the canvas. Default: ‘#FFFFFF’data-background="#EEEEEE"$().jqSignature({background: '#EEEEEE'});
Line ColorThe color of the signature (as hex). Default: ‘#222222’data-line-color="#ABCDEF"$().jqSignature({lineColor: '#ABCDEF'});
Line WidthThe width of the signature line (in pixels). Default: 1data-line-width="2"$().jqSignature({lineWidth: 2});
Auto FitMake the canvas fill the width of its parent element. Default: falsedata-auto-fit="true"$().jqSignature({autoFit: true});
Table Reference: bencentra.github.io/jq-signature

Related Posts