WebSite X5Help Center

 
Greg V.
Greg V.
User

Signature Pad  en

Author: Greg V.
Visited 2676, Followers 1, Shared 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

Posted on the
9 ANSWERS - 1 USEFUL
Jamie B.
Jamie B.
User

You would need to do this in html.

Read more
Posted on the from Jamie B.
Jamie B.
Jamie B.
User

Check out this link for signature pad.

Read more
Posted on the from Jamie B.
Greg V.
Greg V.
User
Author

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?

Read more
Posted on the from Greg V.
Jamie B.
Jamie B.
User

I will put a tutorial on x5tuts dot com once it's live.

Read more
Posted on the from Jamie B.
Greg V.
Greg V.
User
Author

Thank you 

Read more
Posted on the from Greg V.
Greg V.
Greg V.
User
Author

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

Read more
Posted on the from Greg V.
Anthony A.
Anthony A.
User

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!)

Read more
Posted on the from Anthony A.