How to create a signature form for iPad and mobile devices using HTML5 and Canvas.

Today I was tasked with creating a “Terms of Service” form where users could sign using their fingers to give it a more personal touch.

Demo

I’m using the fantastic library called Signature Pad, created by Thomas J Bradley.

Initial Setup

You need to reference the following scripts and stylesheets:

<link rel=stylesheet href="jquery.signaturepad.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="json2.min.js"></script>
<script src="jquery.signaturepad.min.js"></script>

That’s:

1. Signature Pad’s own CSS styles (which you are encouraged to modify)
2. CDN for jQuery.
3. Json2 script.
4. The actual Signature Pad plugin.

The HTML markup needed:

You only need to create a form with a class .sigPad and follow a simple structure.

<form method="post" action="#" class="sigPad">
    <p class="drawItDesc">Acepto los terminos y condiciones de uso.</p>
    <ul class="sigNav">
        <li class="drawIt"><a href="#draw-it">Firma:</a></li>
        <li class="clearButton"><a href="#clear">Borrar</a></li>
    </ul>
    <div class="sig sigWrapper">
        <div class="typed"></div>
            <canvas class="pad" width="335" height="80"></canvas>
            <input type="hidden" name="output" class="output">
        </div>
    <button type="submit">Acepto los terminos y condiciones de uso.</button>
</form>

Notice we’re using the HTML5 canvas element!

Using the Plugin

Using the plugin is ridiculously simple:

$(document).ready(function () {
    $('.sigPad').signaturePad({
        drawOnly: true
    });
});

How do I save the signature?

Personally, I would recommend converting the canvas to a base64 data image. You can then POST that data value and convert it to an actual image server side.

getSignatureImage() // Returns a Base64 encoded PNG of the canvas

Recommended reading:

You can find the complete API for the library here: http://thomasjbradley.ca/lab/signature-pad/#api