Signature Pad - Signez vos documents web grâce à jQuery et du Canvas

Signature Pad est un plugin jQuery permettant de mettre en place un système de signature manuscrite sur son site web.

Idéal si vous souhaitez que vos visiteurs signent certains documents en ligne, conditions générales de ventes etc.

Signature Pad permet de transformer simplement un élément de votre formulaire en un HTML5 Canvas sur lequel il sera possible de dessiner sa signature.

Le plugin propose trois grandes fonctionnalités:

• La possibilité d'écrire avec son clavier son nom qui sera inscrit dans le canvas avec un font-face pré-sélectionné.
• La possibilité de déssiner directement sa signature
• La possibilité de regénérer la signature à partir de l'empreinte JSON générée

En effet, le plugin permet de générer un JSON représentant votre signature encodée. Vous pourrez la stocker pour la regénérer plus tard.

La signature peut être requise pour valider votre formulaire...

D'un point de vue technique maintenant, voici un exemple d'utilisation côté HTML:

<form method="post" action="" class="sigPad">
  <label for="name">Print your name</label>
  <input type="text" name="name" id="name" class="name">
  <p class="typeItDesc">Review your signature</p>
  <p class="drawItDesc">Draw your signature</p>
  <ul class="sigNav">
    <li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
    <li class="drawIt"><a href="#draw-it">Draw It</a></li>
    <li class="clearButton"><a href="#clear">Clear</a></li>
  </ul>
  <div class="sig sigWrapper">
    <div class="typed"></div>
    <canvas class="pad" width="198" height="55"></canvas>
    <input type="hidden" name="output" class="output">
  </div>
  <button type="submit">I accept the terms of this agreement.</button>
</form>

Et l'appel au plugin jQuery:

$('.sigPad').signaturePad(options);

La liste des options est bien détaillée sur le site de la ressource.

Pour être compatible avec les versions d'IE, il faudra charger les scripts comme ceci:

<!--[if gte IE 7]><script type="text/javascript" src="excanvas-r71.min.js"></script><![endif]-->
<!--[if IE 6]><script type="text/javascript" src="excanvas-r3.min.js"></script><![endif]-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.signaturepad.min.js"></script>
<script type="text/javascript" src="json2.min.js"></script>

Sympa non ?

Site Officiel