Jump to content

Js: Adding A Digital Signature To A Submission Form

Recommended Posts

JavaScript SolutionAdding a Digital Signature to a Submission Form
Feature Description:
This JavaScript solution shows how to add a digital signature to a Submission form, Update form, and Details form. It also shows how to display the signature in Details and Results page of a Report. The signature pad is compatible with mobile devices as well.



Note: This is a simple capture and displays a signature solution. It is not designed to replace a professional e-signature solution like DocuSign that assures security, legal, and visibility of all transactions with a complete audit trail.


To explore integrating your application with a third-party solution such as DocuSign, contact Caspio Professional Services.


This solution can be used "as-is", without any changes if:

  • It is used in a Submission Form DataPage.
  • Ajax is disabled
  • The field name in your table is "Signature" and the data type is Text (64000).

To use this solution:
a. Download the JavaScript file from here and unzip the file. Go to "All Assets" click on "Files" and upload this file.

b. Go to app over, create an app parameter : Parameter Name = " SignaturePad", Type = "File" and for value browser the uploaded file.

c. Copy the code below and Disable HTML editor then paste inside the <header> section of your DataPage

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="[@app:SignaturePad/]"></script>
<div id="cb_sign_wrapper">

d. Edit the Submission Form DataPage and choose form element "hidden" for "Signature" field in the Configure Fields screen. Insert an HTML Block after the "Signature" field. Go to the Source of the HTML Block and insert the following code.

<canvas class="pad" height="55" style="margin: 0px 0px 0px 100px;  border-style: solid; border-width: 1px; border-color: #bbbbbb #dbdfe6 #e3e9ef #e2e3ea; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF;" width="218"></canvas><br />
<span style="margin: 0px 0px 0px 264px;"><input class="clearButton" type="reset" value="Clear" /></span> <input class="output" name="output" type="hidden" /> <script type="text/javascript">
$(document).ready(function () {
  $('#caspioform').signaturePad({drawOnly : true});
$("#cb_sign_wrapper form").submit(function(){
$("#InsertRecordSignature")[0].value = $("#cb_sign_wrapper .output")[0].value;

e. Copy the code below and paste inside the HTML Footer.


Tips for Customization
To customize the signature "window", you can adjust the width and height inside the HTML Block on step "d" above. You can also modify the border width by changing the "border-width" from 1px to a desirable width.


To customize the script to capture a signature on an Update Form or a Details page of a Report DataPage, replace the prefix "InsertRecord" with "EditRecord" in the HTML Block on step "d" above.


To display the signature in a results page of a Report DataPage,  Details DataPage, insert an HTML Block, go to the Source of the HTML Block and insert the following code.


<div class="sigPad"><canvas class="pad" height="100" width="220"></canvas></div>
var sig = [@field:Signature!];

Tested Browsers

This JavaScript solution was tested on the following platforms and Internet Browsers only.
# MS Windows - IE 11, Firefox 29.0.1, Chrome 34.0.1847.137, Safari 5.1.7

# Macintosh - Firefox 26.0, Safari 5.1.7

Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees. 

Share this post

Link to post
Share on other sites
This topic is now closed to further replies.

  • Create New...