Jump to content

Signature Pad on Email


Recommended Posts

Hi, I'm trying  to include the signature in auto generated email.  I try this steps and modify my some codes. And now I'm getting blank Image only, Instead of the one with signature? Thank you!

https://forums.caspio.com/topic/6712-how-can-i-include-the-e-signature-in-my-auto-emails/?do=findComment&comment=20814

image.thumb.png.c40677eebdd5a1a7cf425402e5177bb7.png

This is my code on HTML Block

<div id="cb_sign_wrapper">
<header>
<div class="sigPad">
<p id="cb-sign-msg" style="display:none; color:white; background-color:red; font-weight:bold; padding:10px;"></p>
<canvas class="pad" height="130" style="margin: 0px 0px 0px 15px;  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="500"><br />
<span style="margin: 0px 0px 0px 15px;display: flex;justify-content: center;
}"> </span></canvas></header>
<input class="clearButton" type="reset" value="Clear" /> <input class="output" name="output" type="hidden" />
</div><footer></div></footer>

Footer

<script>
 document.addEventListener('DataPageReady', function (event) {
  
  $('#cb_sign_wrapper').signaturePad({drawOnly : true});
  
 });

 document.addEventListener('BeforeFormSubmit', function (event) {
   
  // put the signature to the proper field
  $('input[name="InsertRecordSignature"]').val( $('#cb_sign_wrapper .output').val() );
   
 });
</script>

<!-- Footer code -->
    <script type="text/javascript">
        $(document).ready(
            function ()
            {
                // TODO: Add your signature fields here in the order they appear on the form -->
                var signatureFields = [
                    ['Signature', [@field:Signature!], 'cbParamVirtual1'],
                ];

                for (var i = 0; i < signatureFields.length; i++)
                {
                    var api = $($('#cb_sign_wrapper .sigPad')[i]).signaturePad({ displayOnly: true });
                    if (api)
                    {
                        api.regenerate(signatureFields[i][1]);
                        $('#cbParamVirtual1').val(api.getSignatureImage());
                    }
                }

                $('#cb_sign_wrapper form').submit(
                    function ()
                    {
                        for (var i = 0; i < signatureFields.length; i++)
                        {
                            // Dump signature JSON data into hidden signature field
                            var newSignature = $('#cb_sign_wrapper .output')[i].value;
                            $('#InsertRecord' + signatureFields[i][0])[0].value = newSignature;

                            // Capture each signature image into its corresponding [hidden] VIRTUAL field
                            var api = $($('#cb_sign_wrapper .sigPad')[i]).signaturePad({ drawOnly: true });
                            if (api)
                            {
                                api.regenerate(newSignature);
                                $('#' + signatureFields[i][2]).val(api.getSignatureImage());
                            }
                        }
                    }
                );
            }
        );
    </script>

 

Link to comment
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...
 Share

×
×
  • Create New...