Jump to content
  • 0

How can I include the E-signature in my auto emails


NeoInJS
 Share

Question

3 answers to this question

Recommended Posts

  • 0

Hi NeoInJS,

You can try the following steps:

  1. Add a Header/Footer section to your Details DataPage.
  2. Go to the Header section.
  3. On the header section's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/
  4. Then add this code:
    <!-- Header code -->
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="http://someapp.com/jj/Signature/jquery.signaturepad.min.js"></script>
    <div id="cb_sign_wrapper_edit">
  5. At this point, let's assume that the signature field is named as Signature. Now set that Signature field as Hidden.

  6. Add an HTML block after the Signature field.
  7. On the HTML block's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/
  8. Then add this code:
    <!-- HTML Block code -->
    <div class="sigPad">
        <div class="sig sigWrapper">
            <canvas class="pad" width="218" 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;"></canvas></br>
            <span style="margin: 0px 0px 0px 264px;">
                <input type="reset" class="clearButton" value="Clear">
            </span>
            <input type="hidden" name="output" class="output">
        </div>
    </div>
  9. To capture the signature as an image, create a new virtual field. If there are no existing virtual fields, the new virtual field will be named Virtual1. Otherwise, please take note of the name of the virtual field because the footer script depends on the correct one.

  10. Set the virtual field in step #9 into a Hidden virtual field. No further configuration is necessary.
  11. Go to the Footer section.
  12. On the footer section's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/
  13. Then add this code:
    <!-- 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_edit .sigPad')[i]).signaturePad({ drawOnly: true });
                        if (api)
                        {
                            api.regenerate(signatureFields[i][1]);
                            $('#cbParamVirtual1').val(api.getSignatureImage());
                        }
                    }
    
                    $('#cb_sign_wrapper_edit form').submit(
                        function ()
                        {
                            for (var i = 0; i < signatureFields.length; i++)
                            {
                                // Dump signature JSON data into hidden signature field
                                var newSignature = $('#cb_sign_wrapper_edit .output')[i].value;
                                $('#EditRecord' + signatureFields[i][0])[0].value = newSignature;
    
                                // Capture each signature image into its corresponding [hidden] VIRTUAL field
                                var api = $($('#cb_sign_wrapper_edit .sigPad')[i]).signaturePad({ drawOnly: true });
                                if (api)
                                {
                                    api.regenerate(newSignature);
                                    $('#' + signatureFields[i][2]).val(api.getSignatureImage());
                                }
                            }
                        }
                    );
                }
            );
        </script>
    </div>

    NOTE: For submission forms, please edit the script in step #13 and change all instances of EditRecord to InsertRecord.

  14. Then, go to the Destinations and Emails wizard screen and check the Notification email to specific email client.5942b243b230e_NotificationEmail.png.fd38bef71e607e6c042ddcfc29d4795d.png

  15. Then configure the notification email as shown:
    5942b44cd6820_NotificationEmail-EmailField.png.634e2b60c6bd3f00531b89bf64615d4a.png
  16. IMPORTANT: Deploy the DataPage in an external HTML file.
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
Answer this question...

×   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...