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": "hankyWhites@cubeflakes.com",
        "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: "signer1@email.com",
    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 requests
import json

url = "https://api.boldsign.com/v1/document/send"

signer_data = {
    "name": "Hanky",
    "emailAddress": "hankyWhites@cubeflakes.com",
    "signerType": "Signer",
    "locale": "EN"
}

payload = {
    'AutoDetectFields': True,
    'Message': '',
    'Signers': json.dumps(signer_data),
    'Title': '{title}'
}

files = [
    ('Files', (
        'doc-2.pdf',
        open('{Your fillable file path}', 'rb'),
        'application/pdf'
    ))
]

headers = {
    'accept': 'application/json',
    'X-API-KEY': '{Your API Key}'
}

response = requests.request("POST", url, headers=headers, data=payload, files=files)

print(response.text)

const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');

const apiEndpoint = 'https://api.boldsign.com/v1/document/send';
const apiKey = '{Your API Key}';
const filePath = '{Your fillable file path}';
const signerInfo = {
  name: 'Hanky',
  emailAddress: 'hanky@cubeflakes.com',
  signerType: 'Signer'
};
const title = '{title}';

const data = new FormData();
data.append('Message', '');
data.append('Signers', JSON.stringify(signerInfo));
data.append('Files', fs.createReadStream(filePath));
data.append('Title', 'title');
data.append('AutoDetectFields', 'true');

// Define headers for multipart form data
const headers = {
  'accept': 'application/json',
  'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
  'X-API-KEY': apiKey,
};

// Make the request using Axios
axios.post(apiEndpoint, data, { headers })
  .then((response) => {
    console.log('Response:', JSON.stringify(response.data));
  })
  .catch((error) => {
    console.error('Error:', error.message);
  });

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.