Cet article montre comment créer une signature en PHP. Cela peut être très utile si vous voulez numéraux les accords pour des devis ou la remise d'objet par exemple. Je n'ai aucune idée ci cela a une valeur niveau juridique, mais c'est très pratique puis on fait des économies de papier :)

Je me suis basé sur le code de Thomas J Bradley pour créer ce mini formulaire.

Le code se découpe en deux parties :

  • Le formulaire avec le nom de la personne et la signature
  • Le résultat de la validation de la signature

Il utilise du Jquery pour effectuer la signature. L'avantage de passer par du Jquery et non du Java, c'est que l'on peut utiliser cette solution sur les tablettes ou smartphone tactile.

Voici le code du formulaire :

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Signature pour Laurent Vernoux</title>
  <style type="text/css">
    body { font: normal 100.01%/1.375 "Helvetica Neue",Helvetica,Arial,sans-serif; }
  </style>
  <link rel="stylesheet" href="style/style.css">
  <!--[if lt IE 9]><script src="/style/flashcanvas.js"></script><![endif]-->
  <script src="style/jquery.min.js"></script>
</head>
<body>
  <form method="post" action="result.php" class="sigPad">
    <label for="name">Veuillez saisir votre nom :</label>
    <input type="text" name="name" id="name" class="name">
    <p class="drawItDesc">Veuillez signer :</p>
    <ul class="sigNav">
      <li class="drawIt"><a href="#draw-it" >Signature</a></li>
      <li class="clearButton"><a href="#clear">Effacer</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">J'accepte les conditions generale.</button>
  </form>
 
  <script src="style/jquery.signaturepad.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.sigPad').signaturePad({drawOnly:true});
    });
  </script>
  <script src="style/json2.min.js"></script>
</body>



Voici le code du résultat du formulaire :

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Signature pour Laurent Vernoux</title>
  <style type="text/css">
    body { font: normal 100.01%/1.375 "Helvetica Neue",Helvetica,Arial,sans-serif; }
    p { margin: 0.515em 0 0; padding: 0 6px; }
  </style>
  <script src="style/jquery.min.js"></script>
</head>
<body>
	<?php
		$output=$_POST['output'];
		$name=$_POST['name'];
		$output = str_replace("\\", "", $output);
	?>
 
  <div class="sigPad signed">
    <div class="sigWrapper">
      <canvas class="pad" width="198" height="55"></canvas>
    </div>
		<p>
			<?
			echo $name;
			?>
		</p>
	</div>
  <script type="text/javascript" src="style/jquery.signaturepad.min.js"></script>
  <script type="text/javascript">
  		var sig =  '<?php echo $output; ?>' ; 
    $(document).ready(function() {
      $('.sigPad').signaturePad({displayOnly:true}).regenerate(sig);
    });
  </script>
</body>

Vous pouvez voir la démo sur cette page : http://tiennot.fr/signature.
À bientôt Romain