Note: The following article only supports drawn signatures in a form, not typed signatures.

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. Insert the following code on the field map of your document template or data route:

   1. {if !strstr($Example, "base64")}data:image/svg+xml;base64,{base64_encode($Example)}{/if}
      

5. Update the associated Document or data route’s mapping inside of Salesforce to use this field

    

**Note on Image and File Types

Other image or file types can be passed through when the appropriate configurations are present, as different file types have different encoding and decoding requirements (for example, PNG or JPG).

Assumptions:

• $mime represents the file MIME type (e.g., "image/png", "image/jpeg", "image/svg+xml").

• $data may be:

  • A full data URI

  • A base64-encoded payload (most common)

  • Raw SVG markup (typically starting with <svg)(most common)

    or

  Raw SVG markup, typically beginning with the <svg tag :

  {if strpos($data, 'data:') === 0}
   {$data}
  {elseif $mime == 'image/svg+xml' && strpos($data, '<svg') !== false}
   data:image/svg+xml;base64,{base64_encode($data)}
  {else}
   data:{$mime};base64,{$data}
  {/if}
   

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:

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:

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.
    • Note: generally, if multiple signatures are present, the index values increment by +2, meaning if you want to use 3 signatures, the index values would be [1], [3] and [5], respectively. The code would also need to be expanded to include variables to store and action these additional signatures.
  • 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:

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:

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. 

In the Field Map on the document template or data route, find (or create) the merge field you want to accept the signature image, then insert the following code snippet and update the merge field reference:

1. {if !strstr($Example, "base64")}data:image/svg+xml;base64,{base64_encode($Example)}{/if}

For more information on embedding signatures/images into your document, please refer to one of the following articles:

• Embed Images in Your (Build Your Own) PDF 
• Embed Images/Signatures in Word/Excel/PowerPoint
• Embed Images/Signatures in a Fillable PDF

Updating the Salesforce Mapping

Once your document template is ready, you will need to update the mapping associated with your document template or data route inside of Salesforce to map (“link”) to the Salesforce Object's field created in the first step. Repeat if additional fields/signatures are needed.

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

1.  
2. Click Save.

Testing

If data is not coming across as expected, you can use Debug Mode to help understand what data Salesforce is sending to Documents so you can make adjustments.