WebSite X5Help Center

 
Greg V.
Greg V.
User

Signature Pad  en

Auteur : Greg V.
Visité 2923, Followers 1, Partagé 0  
Mots-clés :: capture,signature

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
9 RéPONSES - 1 UTILES
Jamie B.
Jamie B.
User

You would need to do this in html.

Lire plus
Posté le de Jamie B.
Jamie B.
Jamie B.
User

Check out this link for signature pad.

Lire plus
Posté le de Jamie B.
Greg V.
Greg V.
User
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?

Lire plus
Posté le de Greg V.
Jamie B.
Jamie B.
User

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

Lire plus
Posté le de Jamie B.
Greg V.
Greg V.
User
Auteur

Thank you 

Lire plus
Posté le de Greg V.
Greg V.
Greg V.
User
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

Lire plus
Posté le de 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!)

Lire plus
Posté le de Anthony A.