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

[NeoInJS]

Is it possible to have the signature drawn on the automatic email?

[nightowl]

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.

15. Then configure the notification email as shown:
    
16. IMPORTANT: Deploy the DataPage in an external HTML file.

[servicesp12]

any ideas on including working days, I am a recruiter and work 3 days a week I want recipients to consider this, if they do not hear back from me soon. Thank you

[Kurumi]

Hi Everyone - Just an update, Caspio has a new offer, and it's called App Extensions. Electronic Signature is included as well. You can check this link for reference.