# Adding eSignature to Form-Code

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:&#x20;

```
<!-- 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 <a href="#addingesignaturetoform-code-drawn" id="addingesignaturetoform-code-drawn"></a>

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:

```
<button type="button" id="kform_clearSig">Clear</button>
<br><br>
<canvas id="kform_sigPad"></canvas>
<input type="hidden" name="signature" id="signature" value=''>
```

#### Typed <a href="#addingesignaturetoform-code-typed" id="addingesignaturetoform-code-typed"></a>

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

```
<script type='text/javascript' src='resources/js/signature/html2canvas.min.js'></script>
```

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

```
<p class="kform_signtureText">Your signature below confirms that you have agreed to the terms and conditions.</p><br>
<div id="kform_sigDisplay"></div>
<input type="hidden" name="signature" id="signature" value=''>
```

The typed signature will display in the kform\_sigDisplay div and will be captured using html2canvas.

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.konnektive.com/konnektive-crm/crm-setup/campaign-setup/esignature/adding-esignature-to-form-code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.