API Documentation
BlogsDemos
Option
Create API Sandbox

Create conditional fields using API

In BoldSign, the conditional feature is currently available for Checkbox, Radio Button, and Dropdown form fields. By applying conditional logic, you can control the visibility of certain fields, making them appear only when a specific field option is selected. For instance, when a checkbox is checked, a certain form field may be displayed, and when it is unchecked, a different form field may be displayed to the signer.

Create a document with conditional fields

To create a document with conditional fields using the BoldSign API, follow the code snippets provided below for each type of conditional field.

Creating Conditional Fields Using Radio Buttons

Radio buttons are a type of form field that allows users to make single selections from a list of options. In this example, we will create conditional fields based on radio button selections.

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 'Signers={
    "name": "David",
    "emailAddress": "david@cubeflakes.com"",
    "signerOrder": 0,
    "signerType": "Signer",
    "formFields": [
      {
        "id": "Signature1",
        "name": "Signature1",
        "fieldType": "Signature",
        "pageNumber": 1,
        "bounds": {
          "x": 140,
          "y": 190,
          "width": 82,
          "height": 32
        },
        "isRequired": false
      },
      {
        "id": "Initial1",
        "name": "Initial",
        "fieldType": "Initial",
        "pageNumber": 1,
        "bounds": {
          "x": 340,
          "y": 190,
          "width": 82,
          "height": 32
        },
        "isRequired": false
      },
      {
        "id": "RadioButton1",
        "name": "RadioButton",
        "fieldType": "RadioButton",
        "groupName": "ConditionalLogic",
        "pageNumber": 1,
        "bounds": {
          "x": 340,
          "y": 390,
          "width": 20,
          "height": 20
        },
        "value": "off",
        "conditionalRules": [
          {
            "fieldId": "Signature1",
            "isChecked": true
          }
        ],
        "isRequired": false
      },
      {
        "id": "Radiobutton2",
        "name": "RadioButton",
        "fieldType": "RadioButton",
        "groupName": "ConditionalLogic",
        "pageNumber": 1,
        "bounds": {
          "x": 140,
          "y": 590,
          "width": 20,
          "height": 20
        },
        "value": "off",
        "conditionalRules": [
          {
            "fieldId": "Initial1",
            "isChecked": true
          }
        ],
        "isRequired": false
      }
    ],
    "language": 1
  }' \
  -F 'Files=@{Your file path}' \
  -F 'Title={Your document 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 file path}", 
};

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

var signatureField = new FormField(
    id: "signature1",
    isRequired: true,
    type: FieldType.Signature,
    pageNumber: 1,
    bounds: new Rectangle(x: 100, y: 100, width: 100, height: 50));

var initialField = new FormField(
    id: "initial1",
    isRequired: true,
    type: FieldType.Initial,
    pageNumber: 1,
    bounds: new Rectangle(x: 100, y: 100, width: 100, height: 50));

var radioButton1 = new RadioButtonField(
    id: "Radio1",
    isRequired: true,
    groupName: "Group1",
    pageNumber: 1,
    conditionalRules: new List<ConditionalRule>()
    {
        new ConditionalRule()
        {
            FieldId = "signature1",
            IsChecked = true
        }
    },
    bounds: new Rectangle(x: 50, y: 50, width: 20, height: 20));

var radioButton2 = new RadioButtonField(
    id: "Radio2",
    isRequired: true,
    groupName: "Group1",
    pageNumber: 1,
    conditionalRules: new List<ConditionalRule>()
    {
        new ConditionalRule()
        {
            FieldId = "initial1",
            IsChecked = true
        }
        
    },
    bounds: new Rectangle(x: 100, y: 100, width: 20, height: 20));

var formFieldCollections = new List<FormField>()
{
    signatureField,
    initialField,
    radioButton1,
    radioButton2
};

var signer = new DocumentSigner(
    signerName: "David",
    signerType: SignerType.Signer,
    signerEmail: "david@cubeflakes.com",
    formFields: formFieldCollections,
    locale: Locales.EN);

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

var sendForSign = new SendForSign()
{
    Message = "please sign this",
    Title = "Agreement",
    DisableExpiryAlert = true,
    Signers = documentSigners,
    Files = filesToUpload
};
var documentCreated = documentClient.SendDocument(sendForSign);

import requests
import json

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

signer_data = {
        "name": "David",
        "emailAddress": "david@cubeflakes.com",
        "signerOrder": 0,
        "signerType": "Signer",
        "formFields": [
            {
                "id": "Signature1",
                "name": "Signature1",
                "fieldType": "Signature",
                "pageNumber": 1,
                "bounds": {
                    "x": 140,
                    "y": 190,
                    "width": 82,
                    "height": 32
                },
                "isRequired": False
            },
            {
                "id": "Initial1",
                "name": "Initial",
                "fieldType": "Initial",
                "pageNumber": 1,
                "bounds": {
                    "x": 340,
                    "y": 190,
                    "width": 82,
                    "height": 32
                },
                "isRequired": False
            },
            {
                "id": "RadioButton1",
                "name": "RadioButton",
                "fieldType": "RadioButton",
                "groupName": "ConditionalLogic",
                "pageNumber": 1,
                "bounds": {
                    "x": 340,
                    "y": 390,
                    "width": 20,
                    "height": 20
                },
                "value": "off",
                "conditionalRules": [
                    {
                        "fieldId": "Signature1",
                        "isChecked": True
                    }
                ],
                "isRequired": False
            },
            {
                "id": "Radiobutton2",
                "name": "RadioButton",
                "fieldType": "RadioButton",
                "groupName": "ConditionalLogic",
                "pageNumber": 1,
                "bounds": {
                    "x": 140,
                    "y": 590,
                    "width": 20,
                    "height": 20
                },
                "value": "off",
                "conditionalRules": [
                    {
                        "fieldId": "Initial1",
                        "isChecked": True
                    }
                ],
                "isRequired": False
            }
        ],
        "language": 1
    }

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

files = [
    ('Files',('{your file name}',open('{Your file path}','rb'),'application/vnd.openxmlformats-officedocument.wordprocessingml.document'))
]

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 url = "https://api.boldsign.com/v1/document/send";

const signer_data = {
    "name": "David",
    "emailAddress": "david@cubefalkes.com",
    "signerOrder": 0,
    "signerType": "Signer",
    "formFields": [
        {
            "id": "Signature1",
            "name": "Signature1",
            "fieldType": "Signature",
            "pageNumber": 1,
            "bounds": {
                "x": 140,
                "y": 190,
                "width": 82,
                "height": 32
            },
            "isRequired": false
        },
        {
            "id": "Initial1",
            "name": "Initial",
            "fieldType": "Initial",
            "pageNumber": 1,
            "bounds": {
                "x": 340,
                "y": 190,
                "width": 82,
                "height": 32
            },
            "isRequired": false
        },
        {
            "id": "RadioButton1",
            "name": "RadioButton",
            "fieldType": "RadioButton",
            "groupName": "ConditionalLogic",
            "pageNumber": 1,
            "bounds": {
                "x": 340,
                "y": 390,
                "width": 20,
                "height": 20
            },
            "value": "off",
            "conditionalRules": [
                {
                    "fieldId": "Signature1",
                    "isChecked": true
                }
            ],
            "isRequired": false
        },
        {
            "id": "Radiobutton2",
            "name": "RadioButton",
            "fieldType": "RadioButton",
            "groupName": "ConditionalLogic",
            "pageNumber": 1,
            "bounds": {
                "x": 140,
                "y": 590,
                "width": 20,
                "height": 20
            },
            "value": "off",
            "conditionalRules": [
                {
                    "fieldId": "Initial1",
                    "isChecked": true
                }
            ],
            "isRequired": false
        },
        // Add more form fields here if needed...
    ],
    "language": 1
};

const formData = new FormData();
formData.append('Message', '');
formData.append('Signers', JSON.stringify(signer_data));
formData.append('Title', '{title}');
formData.append('Files', fs.createReadStream('{Your file path}'));

const headers = {
    ...formData.getHeaders(),
    'X-API-KEY': '{Your API key}'
};

axios.post(url, formData, { headers })
    .then((response) => {
        console.log(response.data);
    })
    .catch((error) => {
        console.error(error);
    });

In the above code examples, we first define the document structure, including the signer's information and the form fields. Conditional rules are specified using the conditionalRules property, where you can determine which fields should be visible based on the state of the radio buttons.

For a visual reference, please take a look at the conditional logic applied in the images, as shown below.

When first radio button is selected - Signature field is shown Step 1

When second radio button is selected - Initial field is shown Step 1

Creating Conditional Fields Using Checkboxes

Checkboxes allow users to make multiple selections from a list of options. In this example, we will create conditional fields based on checkbox selections.

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 'Signers={
    "name": "David",
    "emailAddress": "david@cubeflakes.com",
    "signerOrder": 0,
    "signerType": "Signer",
    "formFields": [
      {
        "id": "Signature1",
        "name": "Signature1",
        "fieldType": "Signature",
        "pageNumber": 1,
        "bounds": {
          "x": 140,
          "y": 190,
          "width": 82,
          "height": 32
        },
        "isRequired": false
      },
      {
        "id": "Initial1",
        "name": "Initial",
        "fieldType": "Initial",
        "pageNumber": 1,
        "bounds": {
          "x": 340,
          "y": 190,
          "width": 82,
          "height": 32
        },
        "isRequired": false
      },
      {
        "id": "Checkbox1",
        "name": "Checkbox",
        "fieldType": "Checkbox",
        "pageNumber": 1,
        "bounds": {
          "x": 340,
          "y": 390,
          "width": 20,
          "height": 20
        },
        "value": "off",
        "conditionalRules": [
          {
            "fieldId": "Signature1",
            "isChecked": true
          },
          {
            "fieldId": "Initial1",
            "isChecked": false
          }
        ],
        "isRequired": false
      }
    ],
    "language": 1
  }' \
  -F 'Files=@{Your file path}' \
  -F 'Title={Your document 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 file path}",
};

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

var signatureField = new FormField(
    id: "signature1",
    isRequired: true,
    type: FieldType.Signature,
    pageNumber: 1,
    bounds: new Rectangle(x: 100, y: 100, width: 100, height: 50));

var initialField = new FormField(
    id: "initial1",
    isRequired: true,
    type: FieldType.Initial,
    pageNumber: 1,
    bounds: new Rectangle(x: 100, y: 100, width: 100, height: 50));

var checkbox1 = new FormField(
    id: "Checkbox1",
    type: FieldType.CheckBox,
    pageNumber: 1,
    conditionalRules: new List<ConditionalRule>()
    {
        new ConditionalRule()
        {
            FieldId = "signature1",
            IsChecked = true
        },
        new ConditionalRule()
        {
            FieldId = "initial1",
            IsChecked = false
        }
    },
    bounds: new Rectangle(x: 50, y: 50, width: 20, height: 20));

var formFieldCollections = new List<FormField>()
{
    signatureField,
    initialField,
    checkbox1
};

var signer = new DocumentSigner(
    signerName: "David",
    signerType: SignerType.Signer,
    signerEmail: "david@cubeflakes.com",
    formFields: formFieldCollections,
    locale: Locales.EN);

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

var sendForSign = new SendForSign()
{
    Message = "please sign this",
    Title = "Agreement",
    DisableExpiryAlert = true,
    Signers = documentSigners,
    Files = filesToUpload
};
var documentCreated = documentClient.SendDocument(sendForSign);

import requests
import json

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

signer_data = {
        "name": "David",
        "emailAddress": "david@cubeflakes.com",
        "signerOrder": 0,
        "signerType": "Signer",
        "formFields": [
            {
                "id": "Signature1",
                "name": "Signature1",
                "fieldType": "Signature",
                "pageNumber": 1,
                "bounds": {
                    "x": 140,
                    "y": 190,
                    "width": 82,
                    "height": 32
                },
                "isRequired": False
            },
            {
                "id": "Initial1",
                "name": "Initial",
                "fieldType": "Initial",
                "pageNumber": 1,
                "bounds": {
                    "x": 340,
                    "y": 190,
                    "width": 82,
                    "height": 32
                },
                "isRequired": False
            },
            {
                "id": "Checkbox1",
                "name": "Checkbox",
                "fieldType": "Checkbox",
                "pageNumber": 1,
                "bounds": {
                    "x": 340,
                    "y": 390,
                    "width": 20,
                    "height": 20
                },
                "value": "off",
                "conditionalRules": [
                    {
                        "fieldId": "Signature1",
                        "isChecked": True
                    },
                    {
                        "fieldId": "Initial1",
                        "isChecked": False
                    }
                ]
            }
        ],
        "language": 1
    }

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

files = [
    ('Files',('{your file name}',open('{Your file path}','rb'),'application/vnd.openxmlformats-officedocument.wordprocessingml.document'))
]

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 url = "https://api.boldsign.com/v1/document/send";

const signer_data = {
    "name": "David",
    "emailAddress": "david@cubefalkes.com",
    "signerOrder": 0,
    "signerType": "Signer",
    "formFields": [
        {
            "id": "Signature1",
            "name": "Signature1",
            "fieldType": "Signature",
            "pageNumber": 1,
            "bounds": {
                "x": 140,
                "y": 190,
                "width": 82,
                "height": 32
            },
            "isRequired": false
        },
        {
            "id": "Initial1",
            "name": "Initial",
            "fieldType": "Initial",
            "pageNumber": 1,
            "bounds": {
                "x": 340,
                "y": 190,
                "width": 82,
                "height": 32
            },
            "isRequired": false
        },
        {
            "id": "Checkbox1",
            "name": "Checkbox",
            "fieldType": "Checkbox",
            "pageNumber": 1,
            "bounds": {
                "x": 340,
                "y": 390,
                "width": 20,
                "height": 20
            },
            "value": "off",
            "conditionalRules": [
                {
                    "fieldId": "Signature1",
                    "isChecked": true
                },
                {
                    "fieldId": "Initial1",
                    "isChecked": false
                }
            ]
        }
        // Add more form fields here if needed...
    ],
    "language": 1
};

const formData = new FormData();
formData.append('Message', '');
formData.append('Signers', JSON.stringify(signer_data));
formData.append('Title', '{title}');
formData.append('Files', fs.createReadStream('{Your file path}'));

const headers = {
    ...formData.getHeaders(),
    'X-API-KEY': '{Your API key}'
};

axios.post(url, formData, { headers })
    .then((response) => {
        console.log(response.data);
    })
    .catch((error) => {
        console.error(error);
    });

Similar to the radio button example, we define the document structure and use the conditionalRules property to specify which fields should appear based on checkbox selections.

For a visual reference, please take a look at the conditional logic applied in the images, as shown below.

When checkbox is checked - Signature field is shown Step 1

When checkbox is unchecked - Initial field is shown Step 1

Creating Conditional Fields Using Dropdowns

Dropdowns provide users with a list of options, allowing them to select a single item. In this example, we will create conditional fields based on dropdown selections.

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 'Signers={
    "name": "David",
    "emailAddress": "david@cubeflakes.com",
    "signerOrder": 0,
    "signerType": "Signer",
    "formFields": [
      {
        "id": "Signature1",
        "name": "Signature1",
        "fieldType": "Signature",
        "pageNumber": 1,
        "bounds": {
          "x": 140,
          "y": 190,
          "width": 82,
          "height": 32
        },
        "isRequired": false
      },
      {
        "id": "Initial1",
        "name": "Initial",
        "fieldType": "Initial",
        "pageNumber": 1,
        "bounds": {
          "x": 340,
          "y": 190,
          "width": 82,
          "height": 32
        },
        "isRequired": false
      },
      {
        "id": "Dropdown1",
        "name": "Dropdown",
        "fieldType": "Dropdown",
        "pageNumber": 1,
        "bounds": {
          "x": 340,
          "y": 390,
          "width": 20,
          "height": 20
        },
        "dropdownOptions": [
          "1",
          "2"
        ],
        "value": "1",
        "conditionalRules": [
          {
            "fieldId": "Signature1",
            "value": "1"
          },
          {
            "fieldId": "Initial1",
            "value": "2"
          }
        ],
        "isRequired": false
      }
    ],
    "language": 1
  }' \
  -F 'Files=@{Your file path}' \
  -F 'Title={Your document 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 file path}",
};

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

var signatureField = new FormField(
    id: "signature1",
    isRequired: true,
    type: FieldType.Signature,
    pageNumber: 1,
    bounds: new Rectangle(x: 100, y: 100, width: 100, height: 50));

var initialField = new FormField(
    id: "initial1",
    isRequired: true,
    type: FieldType.Initial,
    pageNumber: 1,
    bounds: new Rectangle(x: 100, y: 100, width: 100, height: 50));

var dropdownField = new DropdownField(
    id: "Dropdown11",
    pageNumber: 1,
    dropdownOptions: new List<string>()
    {
        "1",
        "2"
    },
    conditionalRules: new List<ConditionalRule>()
    {
        new ConditionalRule()
        {
            FieldId = "signature1",
            Value = "1"
        },
        new ConditionalRule()
        {
            FieldId = "initial1",
            Value = "2"
        }
    },
    bounds: new Rectangle(x: 50, y: 50, width: 20, height: 20));

var formFieldCollections = new List<FormField>()
{
    signatureField,
    initialField,
    dropdownField
};

var signer = new DocumentSigner(
    signerName: "David",
    signerType: SignerType.Signer,
    signerEmail: "david@cubeflakes.com",
    formFields: formFieldCollections,
    locale: Locales.EN);

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

var sendForSign = new SendForSign()
{
    Message = "please sign this",
    Title = "{Your title}",
    DisableExpiryAlert = true,
    Signers = documentSigners,
    Files = filesToUpload
};
var documentCreated = documentClient.SendDocument(sendForSign);

import requests
import json

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

signer_data = {
        "name": "David",
        "emailAddress": "david@cubeflakes.com",
        "signerOrder": 0,
        "signerType": "Signer",
        "formFields": [
            {
                "id": "Signature1",
                "name": "Signature1",
                "fieldType": "Signature",
                "pageNumber": 1,
                "bounds": {
                    "x": 140,
                    "y": 190,
                    "width": 82,
                    "height": 32
                },
                "isRequired": False
            },
            {
                "id": "Initial1",
                "name": "Initial",
                "fieldType": "Initial",
                "pageNumber": 1,
                "bounds": {
                    "x": 340,
                    "y": 190,
                    "width": 82,
                    "height": 32
                },
                "isRequired": False
            },
            {
                "id": "Dropdown1",
                "name": "Dropdown",
                "fieldType": "Dropdown",
                "pageNumber": 1,
                "bounds": {
                    "x": 340,
                    "y": 390,
                    "width": 60,
                    "height": 20
                },
                "dropdownOptions": [
                  "1",
                  "2"
                ],
                "conditionalRules": [
                    {
                        "fieldId": "Signature1",
                        "value": "1"
                    },
                    {
                        "fieldId": "Initial1",
                        "value": "2"
                    }
                ]
            }
        ],
        "language": 1
    }

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

files = [
    ('Files',('{your file name}',open('{Your file path}','rb'),'application/vnd.openxmlformats-officedocument.wordprocessingml.document'))
]

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 url = "https://api.boldsign.com/v1/document/send";

const signer_data = {
    "name": "David",
    "emailAddress": "david@cubefalkes.com",
    "signerOrder": 0,
    "signerType": "Signer",
    "formFields": [
        {
            "id": "Signature1",
            "name": "Signature1",
            "fieldType": "Signature",
            "pageNumber": 1,
            "bounds": {
                "x": 140,
                "y": 190,
                "width": 82,
                "height": 32
            },
            "isRequired": false
        },
        {
            "id": "Initial1",
            "name": "Initial",
            "fieldType": "Initial",
            "pageNumber": 1,
            "bounds": {
                "x": 340,
                "y": 190,
                "width": 82,
                "height": 32
            },
            "isRequired": false
        },
        {
            "id": "Dropdown1",
            "name": "Dropdown",
            "fieldType": "Dropdown",
            "pageNumber": 1,
            "bounds": {
              "x": 340,
              "y": 390,
              "width": 20,
              "height": 20
            },
            "dropdownOptions": [
              "1",
              "2"
            ],
            "conditionalRules": [
                {
                    "fieldId": "Signature1",
                    "value": "1"
                },
                {
                    "fieldId": "Initial1",
                    "value": "2"
                }
            ]
        }
        // Add more form fields here if needed...
    ],
    "language": 1
};

const formData = new FormData();
formData.append('Message', '');
formData.append('Signers', JSON.stringify(signer_data));
formData.append('Title', '{title}');
formData.append('Files', fs.createReadStream('{Your file path}'));

const headers = {
    ...formData.getHeaders(),
    'X-API-KEY': '{Your API key}'
};

axios.post(url, formData, { headers })
    .then((response) => {
        console.log(response.data);
    })
    .catch((error) => {
        console.error(error);
    });

In the dropdown example, we include a list of options in the dropdownOptions property and use the conditionalRules property to specify which fields should be visible based on the selected dropdown value.

For a visual reference, please take a look at the conditional logic applied in the images, as shown below.

When first value is selected in the dropdown - Signature field is shown Step 1

When second value is selected in the dropdown - Initial field is shown Step 1

By following the provided code snippets and examples, you can create documents with conditional fields using the BoldSign API. Conditional fields enhance the user experience by dynamically displaying relevant form fields based on user interactions. Experiment with different scenarios and conditions to tailor your documents to your specific needs.

Copyright 2001-2024 Syncfusion Inc.All Rights Reserved
Quick Links
Trust & Security
Company
Quick Links
Trust & Security
Company
Copyright 2001-2024 Syncfusion Inc.All Rights Reserved