How To: Merging Signatures From a Formstack for Salesforce Form

When collecting and storing signatures from a Formstack for Salesforce form, the signatures are stored in a PDF copy of the form's submission.  Since the signature is not actually stored on the Salesforce object itself, it may seem impossible to retrieve this data to merge into a document.

One solution is encoding the signature as a Base64 string and merging that into the document instead of the image's URL.  This process involves a few steps:

  1. Creating a field on the Salesforce object to store the Base64 string
  2. Creating a field on the Formstack form to store the Base64 string
  3. Adding custom JavaScript to the Formstack form to extract this information during the submission process
  4. Update the Document mapping to use this field

Creating the Salesforce Object Field

The idea behind this step is that the mapping used by Formstack Documents will need to know where to access the signature's encoded data.  Ultimately, you will need to consult with your Salesforce administrator to add this field, but we recommend using the Long Text Area data type with a max character length of at least 5,000 when creating the field.  In this example, we will be using the Base64Signature custom field on the Lead object:

mceclip0.png

Creating the Formstack Form Field

Similar to the Salesforce object's field, we need to have a field on the form to store the signature's Base64 encoded string (which will ultimately be sent to the Salesforce object).  To do so, load your Formstack form in Salesforce and navigate to the Edit view.  From there, find the Salesforce object's field created in the first step and drag it into the form.  Placement should not matter, as this field should be hidden:

2021-04-28_14.36.44.gif

Adding the JavaScript

Once the field has been added to the form, navigate to the Form Settings section of the form.  The last portion of the section should contain a field for inserting JavaScript code.  In that field, we will be inserting a variant of the following:

function FF_OnBeforeSave() {
var canvas = document.getElementsByClassName('signPadName')[1];
var dataURL = canvas.toDataURL();
document.getElementById("API.Field.Name").value = dataURL;
return true;
}

Let's break down what is going on in this code block:

  • FF_OnBeforeSave is a JavaScript function that will execute after the form has been submitted but before the data is saved into Salesforce.  Inside that function:
    • var canvas = document.getElementsByClassName('signPadName')[1]; - This line is used to identify the signature area (or "canvas") that is being used to collect the signature and store it within the canvas variable. 
      • The [1] at the end indicates which signature area should be used.  In most cases, this will be left unchanged; however, if your form has multiple signature fields, then you may need to inspect the HTML of the form to find the exact index that should be used.
    • var dataURL = canvas.toDataURL(); - This line takes the data that has been collected in the signature field and converts it into the Base64 encoded string.  This is then stored in the dataURL variable.
    • document.getElementById("API.Field.Name").value = dataURL; - This line finds the hidden form field and sets the value to the Base64 data (dataURL).
      • The "API.Field.Name" must be replaced with the API field name of the Salesforce object's field.  In this example, this would be "Lead.Base64Signature__c".
      • If you are not sure what this name should be, you can reference the field in the form builder:mceclip3.png

Once you have the proper JavaScript in the form's settings, publish the form and create a test submission.  If everything was done correctly, you should now see Base64 code inside the object's field created in the first step:

mceclip4.png

Updating the Document's Field Mapping

Now that the data has been successfully collected, you will need to ensure that the document template itself is prepared to receive the signature image.  For more information on embedding signatures/images into your document, please refer to one of the following articles:

Once your document template is ready, you will need to update the field mapping associated with your document template to map to the Salesforce object's field created in the first step. 

  1. In Salesforce, navigate to Formstack Mappings and select the mapping you wish to update. 
  2. Find the merge field that will be used to render the signature and select the Salesforce object's field that was created in the first step from the associated dropdown (in this example, it would be Base64Signature).mceclip5.png
  3. Click Save.

 

Was this article helpful?
1 out of 1 found this helpful

Comments

0 comments

Article is closed for comments.