jSignature: How to Accept Esignatures in an Online Web Form Using jQuery

Electronic signature (Esignature) capture is essential for many web applications, including contracts, agreements, and consent forms. While many companies opt for costly document management solutions, it’s pretty simple to implement your own signature field within your web page.
jSignature
jSignature is an open-source JavaScript library that provides a simple and efficient way to capture, store, and manage digital signatures within web applications. It enables users to sign documents or forms using a touchpad, mouse, or stylus, making it highly versatile for various devices, including desktops, tablets, and smartphones.
The library is lightweight and built with HTML5 Canvas, ensuring smooth rendering and responsiveness. It supports multiple output formats, such as SVG, PNG, and JSON, allowing for easy integration with backend systems. Additionally, jSignature includes features like pressure sensitivity, stroke smoothing, and data compression, making it a robust choice for applications that require electronic signatures, such as contracts, consent forms, and authentication processes.
This article will guide you through the process of implementing jSignature to accept a signature online.
jSignature Demo
Here’s a working demo of the jSignature library. Just use your cursor or finger to sign the signature field. When you click Submit, the result is displayed for you.

Sign

Submit
Clear Signature

Result

Sample jSignature Page
This simple implementation using jSignature allows users to capture and manage digital signatures within a web form. It provides essential functionalities, including drawing, clearing, and submitting signatures in Base64 format. By extending this script, developers can integrate digital signatures into online contracts, consent forms, and authentication systems, enhancing both user experience and security.

<html lang=”en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signature Capture Form</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.2/jSignature.min.js"></script>
<style>
#signature {
border: 1px solid #000;
width: 400px;
height: 200px;
}
</style>
</head>
<body>

<form id="signature-form">
<h3>Sign Below:</h3>
<div id="signature"></div>
<br>
<button type="button" id="clear-signature">Clear Signature</button>
<input type="hidden" name="signatureData" id="signatureData">
<br><br>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function () {
// Initialize jSignature
$(‘#signature’).jSignature({ ‘width’: 400, ‘height’: 200 });

// Clear signature
$(‘#clear-signature’).click(function () {
$(‘#signature’).jSignature("reset");
});

// Handle form submission
$(‘#signature-form’).submit(function (e) {
e.preventDefault();
var signatureData = $(‘#signature’).jSignature("getData", "image"); // Base64 format
$(‘#signatureData’).val(signatureData);

// Example: Log to console (in real use, submit via AJAX or form post)
console.log("Captured Signature Data: ", signatureData);
alert("Signature Captured and Submitted!");
});
});
</script>
</body>
</html>
Below is a breakdown of how each section of the code functions.
1. Setting Up the HTML Structure
The document starts with a standard HTML5 structure, including a head section where required libraries are loaded. These include:

jQuery (v3.6.0): A JavaScript library that simplifies DOM manipulation and event handling.
jSignature (v2.1.2): A JavaScript library that enables digital signature capture on an HTML5 canvas.

The body contains a form (#signature-form) with:

A signature capture area (#signature).
A “Clear Signature” button to reset the signature field.
A hidden input (#signatureData) to store the captured signature data.
A “Submit” button to submit the form.

2. Styling the Signature Pad
A simple CSS rule is applied to ensure the signature area is visible and has a defined size:
#signature {
border: 1px solid #000;
width: 400px;
height: 200px;
}
This ensures the signature pad is 400px wide and 200px high, with a black border to distinguish it from the background.
3. Initializing jSignature and Handling Interactions
The script inside <script> tags uses jQuery to add interactive behavior to the form:
a) Initializing the Signature Pad
Once the document is ready, jSignature is initialized on the #signature div:
$(‘#signature’).jSignature({ ‘width’: 400, ‘height’: 200 });
This creates an interactive canvas where users can draw their signatures.
b) Clearing the Signature
The “Clear Signature” button resets the signature field when clicked:
$(‘#clear-signature’).click(function () {
$(‘#signature’).jSignature("reset");
});
This clears any existing signature, allowing users to re-sign if needed.
c) Capturing and Submitting the Signature
When the form is submitted, the signature is extracted as an image in Base64 format:
var signatureData = $(‘#signature’).jSignature("getData", "image"); // Base64 format
$(‘#signatureData’).val(signatureData);
The Base64 data is then stored in the hidden input field (#signatureData), which can be sent to a server for processing. For demonstration purposes, the script logs the captured signature data to the console and shows an alert:
console.log("Captured Signature Data: ", signatureData);
alert("Signature Captured and Submitted!");
This data would be sent to the backend via an AJAX request or a form submission in a real-world application.