Released 5 years ago , Last update 4 years ago

JSignature is a JavaScript library for adding a signature pad field into HTML form.

JSignature extends HTML form with a new input "signature" type. Running an HTML form with the JSignature library will add automatically signature pad inside your HTML forms.

JSignature is very simple to use, put it in your HTML header part and that's all !. Then use anywhere in your HTML form an input with a type "signature".

JSignature is very compact and doesn't need another library. No JQuery need.

Control the signature pad size, color, pen style and width. Add various buttons for controlling the signature pad like cleaning, changing color and pen width...

Send your signature field result as any HTML fields to your server for processing.

JSignature has been tested on IE 10,Chrome 26, FireFox 20, Safari 5, Opera 12, IOS 6, Android 4.


14 day 14-day money-back guarantee


Hosted License

  • Perpetual license

  • 1 site, unlimited servers

  • No distribution (hosted use only)

  • Commercial use

Need custom services for this product? Get a quote


Insert jsignature-min.js inside your HTML header. Then use a signature type every where you wish a signature pad in your HTML form.


   <script type="text/javascript" src="js/jsignature-min.js"></script>


 <form method='post'>
   <input type="signature" name="sign">



You can add various attributes to the signature field for changing colors, pen width or size.

Example :

<input type="signature" name="sign" data-background="yellow" data-pen="red" data-penWidth="3" data-width="400" data-height="100">


Various actions buttons can be added like :

<input type="button" data-signature="sign" data-role="clear" value="clear">

Clear the signature with the name 'sign'

<input type="button" data-signature="sign" data-role="default" value="default">

Restore the state of the signature with the name 'sign'

<input type="button" data-signature="sign" data-role="setPenColor" data-value="#F00" value="red">

Change the pen color with the HTML color from the data-value field

<input type="button" data-signature="sign" data-role="setPenWidth" data-value="3" value="x3">

Change the pen width with the data-value field

Default configuration

User can override the default config creating a signatureConfig object before the jsignature-min.js loading overriding one or the full properties.

var signatureConfig = {
 autoInit : true,       // Update any forms field with signature when loading the page
 format : "image/png",  // Default signature image format
 background : "#EEE",   // Default signature background
 pen : "#000",          // Default signature pen color
 penWidth : 2,          // Default signature pen width
 border : "#AAA",       // Default signature pen border color
 width : 270,           // Default signature width in px
  height : 120           // Default signature height in px
2 licenses, starting from From » $19.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

or Get a quote

for customization or integration services

Or enter your name and Email
  • SK Sudhir Kalikate 11 months ago
    I am using jSignature for saving signature of employee. I can successfully saved signature from the signature canvas to image. While loading the saved png image into signature canvas the signature size increased that origional size.
  • KL Ken Lewis 2 years ago
    Can you provide an AngularJS app for this?
  • P Patrick 3 years ago
    how to works with Joomla?