Adding eSignature to Form-Code

Owned by Tyler Martorano
Last updated: Nov 16, 2023 by Brandon Redmond
3 min read

  1. From the desired lander or e-commerce campaign click the edit icon to edit the landing page or shopping cart.

2. Click the checkout page tab.

3. Under the Form Fields section, check eSignature and choose the eSignature Type (Drawn or Typed) then click Update Page.

4. In the Landing Page panel at the top of the page, click Update and then click Download Code.

5. Unzip the lander package and place its contents in the deployment folder of your site or replace the resources folder if you have an existing integration.

 

6. On the downloaded checkout page you will see the esignature code that you will need to add to your checkout page.

<!-- place this code inside the form to get signature inputs --> <?php $ksdk->echoSignatureCode(); ?>

You will can also add your terms of service to your page using this code: 

<!-- place this code on the page to get campaign terms of service --> <?php echo $ksdk->termsOfService; ?>

7. eSignature Styling

 

  • The assets folder contains fonts for typed signatures.

  • kform.css contains eSignature code styling

    • #kform_sigPad styles the drawing pad canvas.

    • #signatureTypedInput styles the typed signature.

    • #kform_sigDisplay styles the div where a typed signature displays. Do not remove the padding.

8. Run a test order.

Drawn Signature

 

Typed Signature

 

You will see the customer contract PDF file in the Files tab on the Customer Details page.

 

 

Drawn

This script will automatically be added to a lander or shopping cart for the signature pad along with the regular Konnektive javascript:

<script type='text/javascript' src='resources/js/signature/signature_pad.js'></script>

This code will automatically be added to your form for a typed signature:

Typed

This script will automatically be added to a lander or shopping cart to capture a typed signature along with the regular Konnektive javascript:

This code will automatically be added to your form for a typed signature:

The typed signature will display in the kform_sigDisplay div and will be captured using html2canvas.