Jump to content
dominiquepeters

Digital Signature - Signature Pad On Submission Form

Recommended Posts

Has anyone added a digital signature field to a submission form, as written in this Caspio post:

http://forums.caspio.com/index.php/topic/4693-js-adding-a-digital-signature-to-a-submission-form/

I've tried this on two different websites and did exactly what is written but for some reason, I can't get the signature box to work. 

This is a test site where I have set up a submission form with a digital signature:
http://www.reduceincidents.co/dominique/index.html

Do you have any suggestions on how to resolve this issue. 
Has somebody this digital signature working?

Thanks so much for your help,
Dominique

Share this post


Link to post
Share on other sites

The guy who has created the signaturepad has helped me out on this. The script order is wrong in the original post. 

 

First you have to put - step b in the heading

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

and then - step a

<script src="http://yoursite.com/yourfolder/jquery.signaturepad.min.js"></script>

 

now it works 

Share this post


Link to post
Share on other sites

Maybe, somebody else looks for the solution how to display a Signature.

 

It is rather simple:

Do steps a ) and b ) from the article.

Add an HTML Block to your DataPage, click the "Source" button and enter the following code:

<div class="sigPad">
    <canvas class="pad" width="220" height="55"></canvas>
</div>
<script>
var sig = [@field:Signature];
var api = $('.sigPad').signaturePad({displayOnly:true});
api.regenerate(sig);
</script>

Please enter the name of your field instead of "Signature".

 

I hope, it will be useful.

Share this post


Link to post
Share on other sites

Hi oceaim,

 

Do you have lines from steps b and a on the webpage in the correct order?
 
Is it the name of the field "Signature"? You can delete the "[@field:Signature]" and insert the parameter with the parameter picker instead of the code.
 
Could you provide the URL of your page?

Share this post


Link to post
Share on other sites

I followed the steps on the original article, and I flipped the two lines indicated in this thread, but mine isn't working. I get a box with a "Clear" button under it, but you can't type in the box. I can't share my URL, but do you have any suggestions?

Share this post


Link to post
Share on other sites

Sorry, what does that mean? "When inserting the signature field" -- is that when I'm creating the field in the table, or when I'm configuring it in the submission form? Or is this part of following the instructions in the original article to use the javascript? 

 

Thanks for your help!

Share this post


Link to post
Share on other sites

Hello ababcock,

 

Do you work with a Submission DataPage?

If I understand correctly, you cannot type in the box, you can draw with the cursor of your mouth.

 

I am sorry, if I understand your question incorrectly.

Share this post


Link to post
Share on other sites

Yes, this is a Submission DataPage. 

 

Thank you for the clarification about drawing the signature! In either case, I am seeing the box with the "Clear" button under it, but I can't do anything to it. I can't draw anything with my mouse in it, click in it, type in it, etc.

Share this post


Link to post
Share on other sites
Hello ababcock,
 
Do you check the working of Signature in Preview mode or on the deployed DataPage?
As far as I know, this solution does not work in Preview. Now I have opened my DataPage in Preview and I see the same behavior.
 
Could you post the content of your "<head>" tag?
I have the following code:
<HTML>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.signaturepad.min.js"></script>
</head>

<body>
Code of embedded DataPage.
</body>
</html>

Share this post


Link to post
Share on other sites

Sorry, what does that mean? "When inserting the signature field" -- is that when I'm creating the field in the table, or when I'm configuring it in the submission form? Or is this part of following the instructions in the original article to use the javascript? 

 

Thanks for your help!

 

To use Jan's snippet for displaying the signature, you can follow her directions. They describe how to insert an HTML block, and then insert your signature field (such as [@field:Signature]). When you do that last bit, you will be asked whether to insert the field as a string or as html, and you must choose html.

 

As for your other question here, if you follow the directions on this page exactly, I can confirm it will work.

Share this post


Link to post
Share on other sites

Thanks for all your help! When I try to add the Signature field, I'm running into an issue. I only have the option to add Auth fields and Parameters, rather than fields in the tables I'm using, when I use the picker. I should be selecting the Signature field where the signature will be stored in a table, right? I would enter it in as @field:Signature, but I'm not sure how to make it HTML instead of String (as recommended above), and I'm not sure if it will work since it's not available in the picker. Ideas?

Share this post


Link to post
Share on other sites

The signature field must be added to your submission form like you add any field.

 

Now add a second field, an HTML block. This is what will display the signature.

 

Disable the HTML editor in advanced. Return to the editor.

Use Jan's snippet above, in post #4, but delete "[@field:Signature]".

In its place, use the field picker that is available just above the editing space. It has a down arrow.

Choose your signature field, and set it to HTML instead of string.

 

You don't have to use the signature submission field and the signature display html block on the same datapage, but I am, so that users will see that their submission was successful.

Share this post


Link to post
Share on other sites

Hi pedrolopez,

 

Welcome to Caspio forum!

 

I have a number of coordinates, like "[{"lx":35,"ly":12,"mx":35,"my":11},{"lx":35,"ly":11,"mx":35,"my":12}," and so on.

 

When you "draw" with a mouse, is anything displayed in the field?
Do you check in Preview mode or in the deployed webpage?

Share this post


Link to post
Share on other sites

I am also trying this and gotten it to submit a signature on a single record update page.  The Signature int he Table appears as a bunch of characters and numbers, which I assume is what it is supposed to so.  HOwever when I try to display this signature on the details page as asuggested in the article, the same gobbeldy gook appears...  is this what is supposed to appear?  I assume it translates this stuff back into an actual signature... maybe not.  I tried in both Mozilla (38.0.5) and Chrome 3.0.2357.124

thanks.

Share this post


Link to post
Share on other sites

Hi,

 

Please make sure that all the following steps are done:

 
a. Copy the code below and paste inside the <head> section of your web page:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

b. Download the JavaScript file from here and upload the file to your website hosting. Once uploaded, you’ll need to reference this file in the <head> section of your web page.

Example:

<script src="http://yoursite.com/yourfolder/jquery.signaturepad.min.js"></script>

c. Edit the Details page of the 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.

<div class="sigPad signed"> <div class="sigWrapper">
<canvas height="55" width="198" class="pad"></canvas></div>
</div>
<script>
var sig = eval("[@field:Signature]".replace(/"/g, '"'));
$(document).ready(function () {
$('.sigPad').signaturePad({displayOnly:true}).regenerate(sig);
});
</script>

d. Insert Header & Footer using the picker button at the lower right of the DataPage Elements. Disable HTML editor for both Header and Footer from the Advanced tab. Copy the code below and paste inside the HTML Header.

<div id="cb_sign_wrapper">

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

</div>

I hope, it helps.

Share this post


Link to post
Share on other sites

Hello,

 

You can save the file to your disk and then copy it to your hosting folder, I mean, the folder where webpages of your site are stored.
Do you have a web hosting now, by the way? Or do you plan to create a site?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...