Configure and Style Interactive Elements in Titan Sign

Overview

Add interactive elements to a document so each signer can enter information, select options, or provide a signature.

You can assign different elements to each signer and use color-coding to indicate who must complete each field. You can also adjust the position, size, font, colors, and keyboard navigation order of individual elements to create a clear and consistent signing experience.

Interactive elements include:

• Text fields
• Text areas
• Signature fields
• Checkboxes
• Date fields
• Email fields

Data entered during the signing process can sync with Salesforce based on your project configuration.

Before You Start

Make sure you have:

1. Completed the Titan Sign project setup.
2. Selected a project source.
3. Added the required signers.

Note: Changes made in the Sign Wizard override the corresponding Titan Sign project settings for the current process. These changes do not update the original Titan Sign project.

Add Interactive Elements

Each signer is assigned a color on the Signers step. Titan uses these colors when displaying interactive elements, helping you confirm that each field belongs to the correct signer.

1. Open the signer drop-down list and select the person who must complete the element.
   Selecting the signer before adding the element assigns responsibility for that field. This helps prevent one signer from completing a field intended for someone else.
2. Add an element to the document:
   • Use the Popular Elements section to quickly add commonly used fields.
   • Use the full list when you need another element type, such as a checkbox, date, email, or text area.
3. Place the element in the relevant area of the document. The Add Interactive Element screen opens.

4. Select the required element type.
5. Configure any settings required for that element.
   Available settings depend on the element you select. For example, a text field and a signature field may provide different options.
6. Select Add to place the element on the document.
7. Move the element to the exact location where the signer must complete it.
8. Repeat these steps for every required element and signer. Check the element colors as you work to confirm that each field is assigned correctly.

Position the Element

Use the location settings when you need more precise placement than manual positioning provides.

1. Select the interactive element you want to adjust.
2. Open its style settings.
3. Configure the following location values:
   • Top: Enter the number of pixels between the element and the top of the page.
   • Left: Enter the number of pixels between the element and the left side of the page.
   • Rotate Angle: Enter the number of degrees by which the element must rotate.

Precise location values are useful when multiple elements must align or when you need to place fields consistently across similar documents.

You can also use the rotate control on the element to adjust its angle directly on the document.

Resize the Element

Set the element size so signers have enough room to enter or display the required information.

1. Select the interactive element.
2. Configure the following values:
   • Width: Enter the required width of the element.
   • Height: Enter the required height of the element.

For example, you may need a wider text field for a full name or a taller text area for longer comments.

Style the Element

Style each element so it is easy to identify and matches the document design.

1. Select a Font from the drop-down list.
2. Select the required Font Size.
3. Apply Bold or Italic formatting when you need to emphasize entered information.
4. Enter HEX codes to configure the:
   • Color: Sets the color of the text entered in the element.
   • Background Color: Sets the color behind the element content.

Use sufficient contrast between the text and background colors so that signers can read the information easily.

5. Enter a Tab Order value.
   
   The tab order determines the sequence in which the cursor moves between interactive elements when a signer presses the Tab key. Set the values according to the order in which the signer should complete the document.
   
   For example, assign 1 to the first field, 2 to the second field, and continue in the intended completion order. A logical tab order improves keyboard navigation and helps signers complete fields without jumping around the document.
   

Complete the Element Setup

1. Review the document and confirm that:
   • Every required field has been added.
   • Each element is assigned to the correct signer.
   • Elements do not cover existing document content.
   • Fields provide enough space for the expected information.
   • The tab order follows a logical completion sequence.
2. Select Next to continue to the Document Settings step.

Frequently Asked Questions

How Can I Tell Which Signer an Element Belongs To?

Check the element’s color. Each signer receives a color on the Signers step, and their assigned elements use the same color in the document preview.

Can Two Signers Complete the Same Element?

Each interactive element is assigned to a specific signer. If multiple signers must provide the same type of information, add a separate element for each signer.

Do I Need to Style Every Element?

No. Only adjust the styling when the default appearance does not suit the document or when you need to improve readability, alignment, or consistency.

Why Is Tab Order Important?

Tab order lets signers move through the document using their keyboards. A logical sequence makes the document easier to complete and supports accessible keyboard navigation.

Do Sign Wizard Changes Update the Original Titan Sign Project?

No. Settings applied in the Sign Wizard can override the project settings for the current process without changing the original Titan Sign project.

Related Articles

• Create a Titan Sign Project Using a Word Template
• Select a Titan Sign Project Source
• Add Signers in the Titan Sign Wizard
• Configure Interactive Element Settings
• Configure Titan Sign Document Settings