How to get signatures by prefilling readonly form fields?

When sending out documents for signatures as a sender you might want to prefill certain form fields in the document. BoldSign provides an API that allows you to prefill form fields in the document even after sending it out for signatures.

Usually, you may not want the signer to edit the form field that you may want to prefill and lock it for editing. We can enable this by assigning the readOnly property of the form field to true. You do not need to provide a value for the form field if you want to prefill it while sending out the document. Instead, we will call another API to prefill the form field with the desired value.

The following APIs are discussed in this guide:

Send out document with readonly form fields

In this document-sending API, we will send out a document with a read-only form field. The form field is a textbox that is read-only and currently does not have a value. The form field is placed on the first page of the document at the coordinates (50, 50) with a width of 200 and a height of 30. It has an ID of FieldId. This ID will be used to prefill the form field with the desired value later.

curl --location 'https://api.boldsign.com/v1/document/send' \
--header 'Content-Type: application/json' \
--header 'X-API-KEY: {your API key}' \
--data-raw '{
    "Title": "Document title",
    "Message": "This is a document message",
    "Signers": [
        {
            "Name": "David",
            "EmailAddress": "david@cubeflakes.com",
            "formFields": [
                {
                    "Id": "FieldId",
                    "FieldType": "Textbox",
                    "PageNumber": 1,
                    "isReadOnly": true,
                    "Bounds": {
                        "X": 50,
                        "Y": 50,
                        "Width": 200,
                        "Height": 30
                    }
                }
            ]
        }
    ],
    "Files": [
        "data:application/pdf;base64,JVBERi0xLjcKJcfs..."
    ]
}'
var apiClient = new ApiClient("https://api.boldsign.com", "{your API key}");
var documentClient = new DocumentClient(apiClient);

var textField = new FormField(
    id: "FieldId",
    isReadOnly: true,
    type: FieldType.TextBox,
    pageNumber: 1,
    bounds: new Rectangle(x: 50, y: 50, width: 200, height: 30));

var signer = new DocumentSigner(
    signerName: "David",
    signerType: SignerType.Signer,
    signerEmail: "david@cubeflakes.com",
    formFields: new List<FormField>() { textField },
    locale: Locales.EN);

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

var sendForSign = new SendForSign()
{
    Message = "please sign this",
    Title = "Agreement",
    HideDocumentId = false,
    Signers = documentSigners,
    Files = new List<IDocumentFile>()
    {
        new DocumentFileBytes()
        {
            ContentType = "application/pdf",
            FileName = "sample.pdf",
            FileData = fileStreamArray,
        },
    },
};

var documentCreated = await documentClient.SendDocumentAsync(sendForSign);
import requests

api_key = '{your API key}'
url = 'https://api.boldsign.com/v1/document/send'

data = {
    "Title": "Document title",
    "Message": "This is a document message",
    "Signers": [
        {
            "Name": "David",
            "EmailAddress": "david@cubeflakes.com",
            "formFields": [
                {
                    "Id": "FieldId",
                    "FieldType": "Textbox",
                    "PageNumber": 1,
                    "isReadOnly": True,
                    "Bounds": {
                        "X": 50,
                        "Y": 50,
                        "Width": 200,
                        "Height": 30
                    }
                }
            ]
        }
    ],
    "Files": [
        "data:application/pdf;base64,JVBERi0xLjcKJcfs..."
    ]
}

headers = {
    'Content-Type': 'application/json',
    'X-API-KEY': api_key
}

response = requests.post(url, json=data, headers=headers)

if response.status_code == 200:
    print('Response:', response.json())
else:
    print('Error:', response.status_code, response.text)
const axios = require('axios');

const apiKey = '{your API key}';
const url = 'https://api.boldsign.com/v1/document/send';

const data = {
    Title: 'Document title',
    Message: 'This is a document message',
    Signers: [
        {
            Name: 'David',
            EmailAddress: 'david@cubeflakes.com',
            formFields: [
                {
                    Id: 'FieldId',
                    FieldType: 'Textbox',
                    PageNumber: 1,
                    isReadOnly: true,
                    Bounds: {
                        X: 50,
                        Y: 50,
                        Width: 200,
                        Height: 30
                    }
                }
            ]
        }
    ],
    Files: [
        'data:application/pdf;base64,JVBERi0xLjcKJcfs...'
    ]
};

axios.post(url, data, {
    headers: {
        'Content-Type': 'application/json',
        'X-API-KEY': apiKey
    }
})
.then(response => {
    console.log('Response:', response.data);
})
.catch(error => {
    console.error('Error:', error.response ? error.response.data : error.message);
});
<?php

require 'vendor/autoload.php';

use GuzzleHttp\Client;
use GuzzleHttp\Exception\RequestException;

$client = new Client();
$apiKey = '{your API key}';
$url = 'https://api.boldsign.com/v1/document/send';

$data = [
    'Title' => 'Document title',
    'Message' => 'This is a document message',
    'Signers' => [
        [
            'Name' => 'David',
            'EmailAddress' => 'david@cubeflakes.com',
            'formFields' => [
                [
                    'Id' => 'FieldId',
                    'FieldType' => 'Textbox',
                    'PageNumber' => 1,
                    'isReadOnly' => true,
                    'Bounds' => [
                        'X' => 50,
                        'Y' => 50,
                        'Width' => 200,
                        'Height' => 30
                    ]
                ]
            ]
        ]
    ],
    'Files' => [
        'data:application/pdf;base64,JVBERi0xLjcKJcfs...'
    ]
];

try {
    $response = $client->post($url, [
        'headers' => [
            'Content-Type' => 'application/json',
            'X-API-KEY' => $apiKey
        ],
        'json' => $data
    ]);

    echo 'Response: ' . $response->getBody();
} catch (RequestException $e) {
    if ($e->hasResponse()) {
        echo 'Error: ' . $e->getResponse()->getBody();
    } else {
        echo 'Error: ' . $e->getMessage();
    }
}

Prefill readonly form fields

We can now prefill the form fields by using the /v1/document/prefillFields API. You need to provide the document ID, form field ID, and the value that you want to prefill in the form field.

curl --location --request PATCH 'https://api.boldsign.com/v1/document/prefillFields?documentId=b5529f7e-xxxx-xxxx-xxxx-7686e52dfa8a' \
--header 'Content-Type: application/json' \
--header 'X-API-KEY: {your API key}' \
--data '{
    "fields": [
        {
            "id": "FieldId",
            "value": "A prefilled value"
        }
    ]
}'
var apiClient = new ApiClient("https://api.boldsign.com", "{your API key}");
var documentClient = new DocumentClient(apiClient);

var documentId = "b5529f7e-xxxx-xxxx-xxxx-7686e52dfa8a";

var prefillFieldRequest = new PrefillFieldRequest(documentId)
{
    Fields = new List<PrefillField>()
    {
        new PrefillField()
        {
            Id = "FieldId",
            Value = "A prefilled value"
        }
    },
};

await documentClient.PrefillFieldsAsync(prefillFieldRequest);
import requests

url = 'https://api.boldsign.com/v1/document/prefillFields'
document_id = 'b5529f7e-xxxx-xxxx-xxxx-7686e52dfa8a'
api_key = '{your API key}'

headers = {
    'Content-Type': 'application/json',
    'X-API-KEY': api_key
}

data = {
    "fields": [
        {
            "id": "FieldId",
            "value": "A prefilled value"
        }
    ]
}

response = requests.patch(f'{url}?documentId={document_id}', headers=headers, json=data)

print(response.json())
const axios = require('axios');

const documentId = 'b5529f7e-xxxx-xxxx-xxxx-7686e52dfa8a';
const apiKey = '{your API key}';

axios.patch(`https://api.boldsign.com/v1/document/prefillFields?documentId=${documentId}`, {
    fields: [
        {
            id: "FieldId",
            value: "A prefilled value"
        }
    ]
}, {
    headers: {
        'Content-Type': 'application/json',
        'X-API-KEY': apiKey
    }
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error(error);
});
<?php

require 'vendor/autoload.php';

use GuzzleHttp\Client;

$client = new Client();

$documentId = 'b5529f7e-xxxx-xxxx-xxxx-7686e52dfa8a';
$apiKey = '{your API key}';

$response = $client->patch('https://api.boldsign.com/v1/document/prefillFields', [
    'headers' => [
        'Content-Type' => 'application/json',
        'X-API-KEY' => $apiKey,
    ],
    'query' => [
        'documentId' => $documentId,
    ],
    'json' => [
        'fields' => [
            [
                'id' => 'FieldId',
                'value' => 'A prefilled value'
            ]
        ]
    ]
]);