Signature Pad
Auteur : Greg V.
Visité 2968,
Followers 1,
Partagé 0
How can I add a signature capture pad to my website? I want my customers to sign orders on my mobile site using a tablet or smart phone. Its there a wa to add this feature to an X5 website? It would be best i think in the email form that the system can create just like adding a photo to the email
Posté le
You would need to do this in html.
Check out this link for signature pad.
http://thomasjbradley.ca/lab/signature-pad/
Auteur
Wow that seams complex.
It should be in the widget list.
Wish there was copy and paste code. I really need this but I guess I am not technical enough--- :(
Any other suggestions?
I will put a tutorial on x5tuts dot com once it's live.
Auteur
Thank you
Auteur
Jamie - Now that x5tuts.com is alive - can you post how to create a signature pad. I am in despirate need of this functionality and I cant wrap my head around the coding.
Please help
go to step 2, select the page you want to show the pad
then click on properties, then click onexpert tab, "choose before closing head" then copy this code on the field below it
<style>
body { font: normal 100.01%/1.375 "Helvetica Neue",Helvetica,Arial,sans-serif; }
</style>
<link href="../assets/jquery.signaturepad.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/flashcanvas.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
hit ok.
unzip the file I attached here!
open an html object inside your page, copy paste these codes over there
<form method="post" acti 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>
<script src="assets/jquery.signaturepad.js"></script>
<script>
$(document).ready(function() {
$('.sigPad').signaturePad();
});
</script>
<script src="assets/json2.min.js"></script>
then click on expert tab and click add
then start one by one add all the files inside that zipfile. when you add those file,you need to type in on server relative path field name of the folder, the name you should put is assets
thats it, congratz, now you have Signature pad on your website
you can customize the area if it was small for you, just change this line of code inside the html object (change width and height)
<canvas class="pad" width="198" height="55"></canvas>
this script is as crossbrowser support as you can get.
if this post is the correct answer, please mark this answer as correct answer.
------------------------------------------------------------
Good Luck
http://www.wdesigners.us
http://www.usx5.com (coming soon)(Sign up to be notified when we launch!)
you can find the tutorial here for signature pad along with source files for v9 and v10 http://www.x5tuts.com/signatur-pad.html