Place form fields to the document

BoldSign provides a range of form fields that can be easily added to your documents. To explore the available form fields and their uses, refer to the article Form Fields available in BoldSign.

BoldSign offers five options for placing form fields in a document:

Send document from template which contains form fields.
Placing the form fields with exact bounds.
Using text tags in the document.
Auto detecting form fields in the document.
Drag and drop the form fields in the embedded request.

1. Send document from template which contains form fields

If you are sending a same document to different signers for mutliple times, you can use a template. The templates can have multiple form fields each associated with a role. A role is simply a placeholder for a real person. For example, if we have a purchase-order that will always be signed by two people, one from the company and one from the customer, we can create a template with two roles and assign form fields for each of them. So while signing the document, the signers can update the form fields assigned to them.

While using the template, you can also prefill the values of the form fields before sending the document out for signature. Refer to this article for more details.

2. Placing the form fields with exact Bounds

If you know the exact position of the form field where it is to be placed within the document, you can directly update the x, y, width and height of the form fields

Example code snippet to place form fields in a document

formFields: 
[
  {
    "id": "string",
    "name": "string",
    "fieldType": "Signature",
    "pageNumber": 1,
    "bounds": 
    {
      "x": 50,
      "y": 50,
      "width": 100,
      "height": 20
    },
    "isRequired": true
  },
  {
    "id": "string",
    "name": "string",
    "fieldType": "Textbox",
    "pageNumber": 1,
    "bounds": 
    {
      "x": 100,
      "y": 100,
      "width": 100,
      "height": 20
    },
    "isRequired": true
  }
]

3. Using text tags in the documents

BoldSign text tags are a combination of text and symbol that can be placed anywhere in the document by specifying the location, size, and type of form fields. It is an alternative way to add fields to your documents through API requests. The text tag syntax will be converted to equivalent form fields. Refer to this documentation to get started with text tags.

When text tags contain many directives, making them very long, use definition tags to handle long text tags. Refer to this documentation for providing definition tags to the document.

4. Auto detecting the form fields in the document

When you upload the fillable form document for creating a signature request, the fields added to the fillable form can be automatically detected and replaced with the equivalent BoldSign form fields. BoldSign supports Textbox, Checkbox, Radio button, and Signature form fields. Other fields will not be detected as of now.

When uploading a fillable form document for creating a signature request, set the AutoDetectFields property as true. The fields added to the fillable form can be automatically detected and replaced with equivalent BoldSign form fields.

Here are example codes that you can use for this purpose:

Code snippet

curl -X 'POST' \ 'https://api.boldsign.com/v1/document/send' \
     -H 'accept: application/json' \
     -H 'X-API-KEY: {your API key}' \
     -H 'Content-Type: multipart/form-data' \
     -F 'AutoDetectFields= true' \
     -F 'Message=' \
     -F 'Signers={
        "name": "Hanky",
        "emailAddress": "[email protected]",
        "signerType": "Signer",
        "locale": "EN"
}' \
  -F 'Files=@{your fillable file}' \
  -F 'Title={title}' \

var apiClient = new ApiClient("https://api.boldsign.com", "{your API key}");
var documentClient = new DocumentClient(apiClient);

var documentFilePath = new DocumentFilePath
{
   ContentType = "application/pdf",
   FilePath = "{Your fillable file path}", 
};

var filesToUpload = new List<IDocumentFile>
{
    documentFilePath,
};

var signer = new DocumentSigner(
    signerName: "Signer Name 1",
    signerType: SignerType.Signer,
    signerEmail: "[email protected]",
    locale: Locales.EN);

var documentSigners = new List<DocumentSigner>()
{
    signer
};

var sendForSign = new SendForSign()
{
   Message = "please sign this",
   Title = "Agreement",
   Signers = documentSigners,
   AutoDetectFields = true,
   Files = filesToUpload
};
var documentCreated = await documentClient.SendDocumentAsync(sendForSign).ConfigureAwait(false);

import boldsign

configuration = boldsign.Configuration(host = "https://api.boldsign.com", api_key = "YOUR_API_KEY")

with boldsign.ApiClient(configuration) as api_client:

    document_api = boldsign.DocumentApi(api_client)

    send_for_sign = boldsign.SendForSign(
        title = "Document SDK API",
        document_title = "SDK Document Test case",
        description = "Testing document from SDK integration test case", 
        files = ["YOUR_FILE_PATH"],
        signers = [
            boldsign.DocumentSigner(
                name = "Hanky",
                emailAddress = "[email protected]",
                signerOrder = 1,
                signerType = "Signer",
                formFields = [
                    boldsign.FormField(
                        name = "Sign",
                        fieldType = "Signature",
                        font = "Helvetica",
                        pageNumber = 1,
                        isRequired = True,
                        bounds = boldsign.Rectangle(x = 50, y = 50, width = 100, height = 150)
                    )
                ],
                privateMessage = "This is private message for signer"
            )
        ],
        AutoDetectFields = True
    )

    document_created = document_api.send_document(send_for_sign)

<?php require_once "vendor/autoload.php";

use BoldSign\Configuration;
use BoldSign\Api\DocumentApi;
use BoldSign\Model\{FormField, Rectangle, DocumentSigner, SendForSign, DocumentInfo, FileInfo};

$config = new Configuration();
$config->setHost("https://api.boldsign.com");
$config->setApiKey('YOUR_API_KEY');

$document_api = new DocumentApi($config);

$form_field = new FormField();
$form_field->setName('Sign');
$form_field->setFieldType('Signature');
$form_field->setPageNumber(1);
$form_field->setFont('Helvetica');
$form_field->setIsRequired(true);
$bounds = new Rectangle([50, 50, 100, 150]);
$form_field->setBounds($bounds);

$document_signer = new DocumentSigner();
$document_signer->setName('Hanky');
$document_signer->setEmailAddress('[email protected]');
$document_signer->setSignerType('Signer');
$document_signer->setSignerOrder(1);
$document_signer->setFormFields([$form_field]);
$document_signer->setPrivateMessage('This is private message for signer');

$send_for_sign = new SendForSign();

$documentInfo = new DocumentInfo();
$documentInfo->setTitle('Document SDK API');
$documentInfo->setDescription('Testing document from SDK integration test case');
$send_for_sign->setDocumentInfo([$documentInfo]);

$files = new FileInfo();
$files = 'YOUR_FILE_PATH';
$send_for_sign->setFiles([$files]);

$send_for_sign->setTitle('SDK Document Test case');
$send_for_sign->setSigners([$document_signer]);
$send_for_sign->setAutoDetectFields(true);

$document_created = $document_api->sendDocument($send_for_sign);

ApiClient client = Configuration.getDefaultApiClient();
client.setBasePath("https://api.boldsign.com");
client.setApiKey("YOUR_API_KEY");

DocumentApi documentApi = new DocumentApi(client);

FormField formField = new FormField();
formField.setName("Sign");
formField.setFieldType(FormField.FieldTypeEnum.SIGNATURE);
formField.setPageNumber(1);
formField.setFont(FormField.FontEnum.HELVETICA);
formField.setIsRequired(true);
Rectangle bounds = new Rectangle().x(100f).y(100f).width(100f).height(50f);
formField.setBounds(bounds);

DocumentSigner signer = new DocumentSigner();
signer.setName("Hanky");
signer.setEmailAddress("[email protected]");
signer.setSignerOrder(1);
signer.setSignerType(DocumentSigner.SignerTypeEnum.SIGNER);
signer.setFormFields(Arrays.asList(formField));
signer.setPrivateMessage("This is private message for signer");

SendForSign sendForSign = new SendForSign();

File file = new File("YOUR_FILE_PATH");  
sendForSign.setFiles(Arrays.asList(file));   

sendForSign.setSigners(Arrays.asList(signer));
sendForSign.setTitle("Document SDK API");
sendForSign.setAutoDetectFields(true);

DocumentCreated documentCreated = documentApi.sendDocument(sendForSign);

import { DocumentApi, DocumentSigner, DocumentInfo, FormField, Rectangle, SendForSign } from "boldsign"; 
import * as fs from 'fs';

const documentApi = new DocumentApi("https://api.boldsign.com");
documentApi.setApiKey("YOUR_API_KEY");

const bounds = new Rectangle();
bounds.x = 100;
bounds.y = 50;
bounds.width = 100;
bounds.height = 100;

const formField = new FormField();
formField.name = "Sign";
formField.fieldType = FormField.FieldTypeEnum.Signature;
formField.font = FormField.FontEnum.Helvetica;
formField.pageNumber = 1;
formField.isRequired = true;
formField.bounds = bounds;

const documentSigner = new DocumentSigner();
documentSigner.name = "David";
documentSigner.emailAddress = "[email protected]";
documentSigner.signerOrder = 1;
documentSigner.signerType = DocumentSigner.SignerTypeEnum.Signer;
documentSigner.formFields = [formField];
documentSigner.privateMessage = "This is private message for signer";

const files = fs.createReadStream("YOUR_FILE_PATH");

const sendForSign = new SendForSign();

const documentInfo = new DocumentInfo();
documentInfo.title = "SDK Document Test case";
documentInfo.description = "Testing document from SDK integration test case";
sendForSign.documentInfo = [documentInfo];

sendForSign.title = "Document SDK API";
sendForSign.signers = [documentSigner];
sendForSign.files = [files];
sendForSign.autoDetectFields = true;

const documentCreated = documentApi.sendDocument(sendForSign);

5. Drag and drop the form fields in the embedded request

Create an embedded request URL and load the URL in an iFrame within your application or in the browser. Then you can drag and drop the form fields and send the document out for a signature. Refer to this article for creating an embedded request URL and integrating the sending process within your application.