Signature Pad on Email

[jayzk1e02]

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

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>

 

[Kurumi]

Hi @jayzk1e02 - what type of DataPage you were using? In Message body, are you using Plain Text or HTML? Is the signature working in your DataPage? 

[telly]

Hi @jayzk1e02,

Have you tried to disable the ajax loading and check if it will work? For more information you may check this link: https://howto.caspio.com/datapages/ajax-loading/