On-Line Document Signature

We want to be able to email a customer a document (pdf) with a place for the customer signature and have them sign it on-line, then email back to us.

I found a lot of Esigning things with a Google Search; most seemed too complex.

I think we could also just give them a web address (in the email) & ask them to go there to sign a pdf.

I need programming capability to direct the signed document, etc.

This needs to work on tablets, phone & desktop computers.

Can someone point me to some solutions?

Thanks
Richard KortsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leslie BloomCorporate & Product Marketing ManagerCommented:
I have used DocuSign in the past. It's very easy to use, and secure - https://www.docusign.com/
Upload your document(s), email the people who you want to sign it, highlight the places you want them to sign, and that's it!

HelloSign has a good reputation, although I've never used it - https://www.hellosign.com/

CudaSign (formerly SignNow) charges per document, in case that pricing works out better for you -  https://www.cudasign.com/
0
Richard KortsAuthor Commented:
I want it automated. We DO NOT want a person to have to send documents, emails tec.

To oversimplify:

(1) Customer fills out an online form requesting a Service Agreement.

(2) Completed form is processed by the web server (php program), creating a completed pdf version of the service agreement. pdf has space for customer signature.

(3) pdf is emailed to customer as an attachment. A human being DOES NOT send the email, it is automated in php.

(4) Customer opens email pdf in something (Acrobat?). Maybe it goes to Docusign?

(5) Customer signs the document. Upon signature, signed document is "captured" & uploaded to web server.

(6) Customer is sent an email thankyou. I know how to do that.
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

plusone3055Commented:
IF thats the case get an Onbase Workflow it can do all of that in Automated Workflow :)
0
Richard KortsAuthor Commented:
I have NO CLUE what an Onbase Workflow is.

I just want something simple where I can get a document signed on-line. I don't want to invent a new mousetrap.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You have your question under web development and if that means you are wanting to code this on your own, I have been successful in using a jquery plug in called signature-pad https://github.com/thomasjbradley/signature-pad.

My current use cases are for a tablet.  There is a web form that includes the signature pad where you can use your finger or stylus.  

From their sample https://github.com/thomasjbradley/signature-pad/blob/gh-pages/examples/accept-multiple-signatures.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Accept Multiple Signatures · Signature Pad</title>
  <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="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
  <form method="post" action="">

    <div 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>
    </div>

    <div 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-2" class="output">
      </div>
    </div>

    <button type="submit">I accept the terms of this agreement.</button>
  </form>

  <script src="../jquery.signaturepad.js"></script>
  <script>
    $(document).ready(function() {
      $('.sigPad').signaturePad();
    });
  </script>
  <script src="../assets/json2.min.js"></script>
</body>

Open in new window

The signature output looks like
var sig = [
{"lx":20,"ly":34,"mx":20,"my":34},
{"lx":21,"ly":33,"mx":20,"my":34},
{"lx":22,"ly":31,"mx":21,"my":33},
{"lx":23,"ly":30,"mx":22,"my":31},
{"lx":25,"ly":27,"mx":23,"my":30},
{"lx":27,"ly":25,"mx":25,"my":27},
{"lx":29,"ly":23,"mx":27,"my":25},
{"lx":31,"ly":21,"mx":29,"my":23},
{"lx":33,"ly":19,"mx":31,"my":21},
{"lx":35,"ly":18,"mx":33,"my":19},
{"lx":35,"ly":17,"mx":35,"my":18},
{"lx":36,"ly":17,"mx":35,"my":17},
{"lx":36,"ly":17,"mx":36,"my":17},
{"lx":35,"ly":18,"mx":36,"my":17},
{"lx":34,"ly":20,"mx":35,"my":18},
{"lx":32,"ly":23,"mx":34,"my":20},
{"lx":30,"ly":26,"mx":32,"my":23},
{"lx":28,"ly":29,"mx":30,"my":26},
{"lx":26,"ly":32,"mx":28,"my":29},
{"lx":24,"ly":33,"mx":26,"my":32},
{"lx":23,"ly":35,"mx":24,"my":33},
{"lx":23,"ly":36,"mx":23,"my":35},
{"lx":23,"ly":36,"mx":23,"my":36},
{"lx":24,"ly":35,"mx":23,"my":36},
{"lx":26,"ly":34,"mx":24,"my":35},
{"lx":28,"ly":33,"mx":26,"my":34},
{"lx":30,"ly":31,"mx":28,"my":33},
{"lx":32,"ly":30,"mx":30,"my":31},
{"lx":33,"ly":29,"mx":32,"my":30},
{"lx":34,"ly":29,"mx":33,"my":29},
{"lx":34,"ly":29,"mx":34,"my":29},
{"lx":33,"ly":30,"mx":34,"my":29},
{"lx":32,"ly":31,"mx":33,"my":30},
{"lx":31,"ly":33,"mx":32,"my":31},
{"lx":30,"ly":35,"mx":31,"my":33},
{"lx":29,"ly":36,"mx":30,"my":35},
{"lx":29,"ly":37,"mx":29,"my":36},
{"lx":29,"ly":37,"mx":29,"my":37},
{"lx":31,"ly":36,"mx":29,"my":37},
{"lx":33,"ly":35,"mx":31,"my":36},
{"lx":36,"ly":34,"mx":33,"my":35},
{"lx":38,"ly":32,"mx":36,"my":34},
{"lx":40,"ly":31,"mx":38,"my":32},
{"lx":42,"ly":30,"mx":40,"my":31},
{"lx":43,"ly":30,"mx":42,"my":30},
{"lx":44,"ly":30,"mx":43,"my":30},
{"lx":44,"ly":31,"mx":44,"my":30},
{"lx":44,"ly":32,"mx":44,"my":31},
{"lx":43,"ly":33,"mx":44,"my":32},
{"lx":42,"ly":35,"mx":43,"my":33},
{"lx":41,"ly":36,"mx":42,"my":35},
{"lx":40,"ly":37,"mx":41,"my":36},
{"lx":40,"ly":37,"mx":40,"my":37},
{"lx":40,"ly":36,"mx":40,"my":37},
{"lx":41,"ly":36,"mx":40,"my":36},
{"lx":42,"ly":35,"mx":41,"my":36},
{"lx":44,"ly":33,"mx":42,"my":35},
{"lx":46,"ly":32,"mx":44,"my":33},
{"lx":47,"ly":32,"mx":46,"my":32},
{"lx":48,"ly":31,"mx":47,"my":32},
{"lx":48,"ly":31,"mx":48,"my":31},
{"lx":48,"ly":33,"mx":48,"my":31},
{"lx":47,"ly":35,"mx":48,"my":33},
{"lx":45,"ly":37,"mx":47,"my":35},
{"lx":43,"ly":39,"mx":45,"my":37},
{"lx":41,"ly":42,"mx":43,"my":39},
{"lx":39,"ly":44,"mx":41,"my":42},
{"lx":37,"ly":45,"mx":39,"my":44},
{"lx":37,"ly":46,"mx":37,"my":45},
{"lx":37,"ly":46,"mx":37,"my":46},
{"lx":37,"ly":45,"mx":37,"my":46},
{"lx":39,"ly":44,"mx":37,"my":45},
{"lx":42,"ly":42,"mx":39,"my":44},
{"lx":46,"ly":40,"mx":42,"my":42},
{"lx":49,"ly":38,"mx":46,"my":40},
{"lx":53,"ly":36,"mx":49,"my":38},
{"lx":56,"ly":35,"mx":53,"my":36},
{"lx":58,"ly":34,"mx":56,"my":35},
{"lx":59,"ly":34,"mx":58,"my":34},
{"lx":60,"ly":34,"mx":59,"my":34},
{"lx":59,"ly":35,"mx":60,"my":34},
{"lx":58,"ly":36,"mx":59,"my":35},
{"lx":57,"ly":37,"mx":58,"my":36},
{"lx":55,"ly":39,"mx":57,"my":37},
{"lx":54,"ly":40,"mx":55,"my":39},
{"lx":53,"ly":41,"mx":54,"my":40},
{"lx":53,"ly":41,"mx":53,"my":41},
{"lx":55,"ly":40,"mx":53,"my":41},
{"lx":57,"ly":38,"mx":55,"my":40},
{"lx":60,"ly":36,"mx":57,"my":38},
{"lx":63,"ly":34,"mx":60,"my":36},
{"lx":65,"ly":32,"mx":63,"my":34},
{"lx":67,"ly":31,"mx":65,"my":32},
{"lx":69,"ly":31,"mx":67,"my":31},
{"lx":69,"ly":31,"mx":69,"my":31},
{"lx":68,"ly":31,"mx":69,"my":31},
{"lx":66,"ly":33,"mx":68,"my":31},
{"lx":64,"ly":34,"mx":66,"my":33},
{"lx":62,"ly":36,"mx":64,"my":34},
{"lx":60,"ly":37,"mx":62,"my":36},
{"lx":59,"ly":38,"mx":60,"my":37},
{"lx":58,"ly":39,"mx":59,"my":38},
{"lx":58,"ly":39,"mx":58,"my":39},
{"lx":59,"ly":39,"mx":58,"my":39},
{"lx":61,"ly":38,"mx":59,"my":39},
{"lx":64,"ly":36,"mx":61,"my":38},
{"lx":66,"ly":35,"mx":64,"my":36},
{"lx":69,"ly":33,"mx":66,"my":35},
{"lx":72,"ly":32,"mx":69,"my":33},
{"lx":73,"ly":31,"mx":72,"my":32},
{"lx":74,"ly":31,"mx":73,"my":31},
{"lx":74,"ly":31,"mx":74,"my":31},
{"lx":72,"ly":31,"mx":74,"my":31},
{"lx":70,"ly":32,"mx":72,"my":31},
{"lx":68,"ly":33,"mx":70,"my":32},
{"lx":65,"ly":34,"mx":68,"my":33},
{"lx":64,"ly":36,"mx":65,"my":34},
{"lx":62,"ly":36,"mx":64,"my":36},
{"lx":61,"ly":37,"mx":62,"my":36},
{"lx":61,"ly":37,"mx":61,"my":37},
{"lx":62,"ly":37,"mx":61,"my":37},
{"lx":64,"ly":36,"mx":62,"my":37},
{"lx":68,"ly":34,"mx":66,"my":35},
{"lx":69,"ly":33,"mx":68,"my":34},
{"lx":70,"ly":33,"mx":69,"my":33},
{"lx":70,"ly":33,"mx":70,"my":33},
{"lx":70,"ly":32,"mx":70,"my":33},
{"lx":70,"ly":32,"mx":70,"my":32},
{"lx":71,"ly":32,"mx":70,"my":32},
{"lx":72,"ly":32,"mx":71,"my":32},
{"lx":74,"ly":32,"mx":72,"my":32},
{"lx":76,"ly":32,"mx":74,"my":32},
{"lx":79,"ly":33,"mx":76,"my":32},
{"lx":83,"ly":33,"mx":79,"my":33},
{"lx":87,"ly":34,"mx":83,"my":33},
{"lx":92,"ly":35,"mx":87,"my":34},
{"lx":97,"ly":36,"mx":92,"my":35},
{"lx":103,"ly":37,"mx":97,"my":36},
{"lx":110,"ly":38,"mx":103,"my":37},
{"lx":117,"ly":39,"mx":110,"my":38},
{"lx":125,"ly":39,"mx":117,"my":39},
{"lx":133,"ly":38,"mx":125,"my":39},
{"lx":140,"ly":36,"mx":133,"my":38},
{"lx":146,"ly":34,"mx":140,"my":36},
{"lx":151,"ly":32,"mx":146,"my":34},
{"lx":155,"ly":30,"mx":151,"my":32},
{"lx":157,"ly":28,"mx":155,"my":30},
{"lx":158,"ly":27,"mx":157,"my":28},
{"lx":158,"ly":27,"mx":158,"my":27}
];

Open in new window


There is also an option to base64 the signature and that is what I do plus I encrypt the signature before storing it as a blob in my db. I think that is the most secure thing to do rather than storing thousands of signatures on your server.

When it comes time to generate your pdf, you will just output the signature using the code from the library and whatever pdf service you are using.

I have tested in desktop (using mouse) as well as android and ios tablet and phone.  It took me a little bit to wrap my head around how to best store everything and use it, but it is very simple after that.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.