Adding DocuSign placeholder fields into the document

In the template’s main document body, you will need to add placeholders for where the signatures should be and make these placeholders white in color so that they are not visible in the generated document.

Adding signature anchors to the document

The document to be signed can have positions defined for the signatures. These are defined through anchors, which are specific pieces of text in the document content. A paragraph or a span that contains the string "\s1\" marks that position for DocuSign as the anchor for the first signature. If there are multiple signers, the anchor for the second signature should have "\s2\" as its content, and "\s3\" for the third. Increment the number further if there are more signers.

Steps to add signature anchors to the document:

• Create a span or paragraph 

• Choose the newly created element on the breadcrumb. In the example below, the span element <Signature 1> is chosen

• On the right pane > Tag tab > input the anchor in the Content dynamic attribute.

There can also be other anchors to have DocuSign create more fields for the signers to fill or see. These are as follows and their syntax follows the numbering pattern for multiple signers as described above:

• \i1\ - An anchor for a field for the signer to initial the document. 

• \n1\ - An anchor for a field that displays the signer's full name.

• \t1\ - An anchor for a field for the signer to input his or her title.

• \d1\ - An anchor for a field that displays the date the signer signed the document on.

If the document contains none of these anchors, DocuSign allows the recipients to select and freely place whatever fields they wish onto the document - a Free-Form signing experience, as DocuSign's documentation calls it.

Making the anchor text/placeholders white

In order for the anchor text to not appear in the generated document, the placeholders need to be marked as ‘white’. The steps to follow are:

• Open the CSS Source view from the Body Content part you are working with (in Basic UI: click on CSS Source View tab on the left pane and in Advanced UI, on the top right corner, click on ‘Source’ > CSS Source View).

• Paste the following CSS code into the CSS source:

.document .color-white {dyn-style-label: Font white;color: #ffffff;}

• Go back to the text element (span or paragraph) that contains the e-signature mark. Add the class ‘color-white’ into the Class attribute of the element.