Articles in this section
Category / Section

Create conditional fields using API

Published:
3 mins read

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}'

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

Signature field

When second radio button is selected - Initial field is shown

Initial field

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}'

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

Signature field

When checkbox is unchecked - Initial field is shown

Initial field

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}'

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

Signature field

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

Initial field

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.

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Access denied
Access denied