How to add radio buttons to the document using BoldSign API?
A radio button allows a signer to select only one option from a predefined list of choices. When presented as a group, selecting one radio button will automatically deselect any previously selected option within that group, ensuring that only one option can be chosen at a time.
BoldSign provides support for adding radio buttons to your document before sending it to the signer, enabling them to make a choice by clicking on the radio button.
Send a document with radio buttons
To send a document with a radio buttons, set the fieldType as RadioButton. Additionally, you need to specify a groupName to group related radio buttons together.
Here are example codes that demonstrate how to achieve this:
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 'Message=' \
-F 'Signers=
{
"name": "Hanky",
"emailAddress": "hankyWhites@cubeflakes.com",
"signerType": "Signer",
"formFields": [
{
"id": "string",
"name": "string",
"fieldType": "RadioButton",
"groupName": "Group1",
"pageNumber": 1,
"bounds": {
"x": 50,
"y": 50,
"width": 20,
"height": 20
},
"isRequired": true
},
{
"id": "string1",
"name": "string1",
"fieldType": "RadioButton",
"groupName": "Group1",
"pageNumber": 1,
"bounds": {
"x": 100,
"y": 100,
"width": 20,
"height": 20
},
"isRequired": true
}
],
"locale": "EN"
}' \
-F 'Files={your 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 file path}",
};
var filesToUpload = new List<IDocumentFile>
{
documentFilePath,
};
var radioButton1 = new RadioButtonField(
id: "Radio1",
isRequired: true,
groupName: "Group1",
pageNumber: 1,
bounds: new Rectangle(x: 50, y: 50, width: 20, height: 20));
var radioButton2 = new RadioButtonField(
id: "Radio2",
isRequired: true,
groupName: "Group1",
pageNumber: 1,
bounds: new Rectangle(x: 100, y: 100, width: 20, height: 20));
var formFieldCollections = new List<FormField>()
{
radioButton1,
radioButton2
};
var signer = new DocumentSigner(
signerName: "Signer Name 1",
signerType: SignerType.Signer,
signerEmail: "signer1@email.com",
formFields: formFieldCollections,
locale: Locales.EN);
var documentSigners = new List<DocumentSigner>()
{
signer
};
var sendForSign = new SendForSign()
{
Message = "please sign this",
Title = "Agreement",
Signers = documentSigners,
Files = filesToUpload
};
var documentCreated = documentClient.SendDocument(sendForSign);
import requests
import json
url = "https://api.boldsign.com/v1/document/send"
signer_data = {
"name": "Hanky",
"emailAddress": "hankyWhites@cubeflakes.com",
"signerType": "Signer",
"formFields": [
{
"id": "string",
"name": "string",
"fieldType": "RadioButton",
"groupName": "Group1",
"pageNumber": 1,
"bounds": {
"x": 50,
"y": 50,
"width": 20,
"height": 20
},
"isRequired": True
},
{
"id": "string1",
"name": "string1",
"fieldType": "RadioButton",
"groupName": "Group1",
"pageNumber": 1,
"bounds": {
"x": 100,
"y": 100,
"width": 20,
"height": 20
},
"isRequired": True
}
],
"locale": "EN"
}
payload = {
'Message': '',
'Signers': json.dumps(signer_data),
'Title': '{title}'
}
files = [
('Files', (
'{file name}',
open('{Your 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');
let data = new FormData();
data.append('Message', '');
data.append('Signers', '\n {\n "name": "Hanky",\n "emailAddress": "hankyWhites@cubeflakes.com",\n "signerType": "Signer",\n "formFields": [\n {\n "id": "string",\n "name": "string",\n "fieldType": "RadioButton",\n "groupName": "Group1",\n "pageNumber": 1,\n "bounds": {\n "x": 50,\n "y": 50,\n "width": 20,\n "height": 20\n },\n "isRequired": true\n },\n {\n "id": "string1",\n "name": "string1",\n "fieldType": "RadioButton",\n "groupName": "Group1",\n "pageNumber": 1,\n "bounds": {\n "x": 100,\n "y": 100,\n "width": 20,\n "height": 20\n },\n "isRequired": true\n }\n ],\n "locale": "EN"\n }');
data.append('Files', fs.createReadStream('{Your file path}'));
data.append('Title', '{title}');
let config = {
method: 'post',
maxBodyLength: Infinity,
url: 'https://api.boldsign.com/v1/document/send',
headers: {
'accept': 'application/json',
'X-API-KEY': '{Your API key}',
...data.getHeaders()
},
data : data
};
axios.request(config)
.then((response) => {
console.log(JSON.stringify(response.data));
})
.catch((error) => {
console.log(error);
});
In the above examples, make sure to replace fieldType with RadioButton and specify a groupName to group related radio buttons. Execute the provided code, making sure to provide the necessary fields such as Files, Title, and Signers. By doing so, the document will be sent to the signers with the radio buttons, allowing them to make a selection when signing.
Send a document with radio button form field using a definition tag
For the information about the definition tags, please refer to the documentation: Definition tags
Code snippet
curl -X POST 'https://api.boldsign.com/v1/document/send' \
url -X POST 'https://api.boldsign.com/v1/document/send' \
-H 'X-API-KEY: {your-api-key}' \
-F 'Title=Sent from API Curl' \
-F 'Message=This is document message sent from API Curl' \
-F 'EnableSigningOrder=false' \
-F 'Signers[0][Name]=Signer Name 1' \
-F 'Signers[0][EmailAddress]=luthercooper@cubeflakes.com' \
-F 'Signers[0][SignerOrder]=1' \
-F 'UseTextTags=true' \
-F 'TextTagDefinitions[0][DefinitionId]=tag1' \
-F 'TextTagDefinitions[0][Type]=RadioButton' \
-F 'TextTagDefinitions[0][SignerIndex]=1' \
-F 'TextTagDefinitions[0][IsRequired]=True' \
-F 'TextTagDefinitions[0][RadioGroupName]=string' \
-F 'TextTagDefinitions[0][Size][Width]=20' \
-F 'TextTagDefinitions[0][Size][Height]=20' \
-F 'TextTagDefinitions[0][FieldId]=axq12367' \
-F 'TextTagDefinitions[1][DefinitionId]=tag2' \
-F 'TextTagDefinitions[1][Type]=RadioButton' \
-F 'TextTagDefinitions[1][SignerIndex]=1' \
-F 'TextTagDefinitions[1][IsRequired]=True' \
-F 'TextTagDefinitions[1][RadioGroupName]=string' \
-F 'TextTagDefinitions[1][Size][Width]=20' \
-F 'TextTagDefinitions[1][Size][Height]=20' \
-F 'TextTagDefinitions[1][FieldId]=eq1267' \
-F 'Files=@{your file};type=application/pdf' \
ApiClient apiClient = new ApiClient("https://api.boldsign.com", "{Your API Key}");
DocumentClient documentClient = new DocumentClient(apiClient);
// Directly provide file path of the document.
var documentFilePath = new DocumentFilePath
{
ContentType = "application/pdf",
FilePath = "{your file}"
};
// Creating collection with all loaded documents.
var filesToUpload = new List<IDocumentFile>
{
documentFilePath,
};
var signer = new DocumentSigner(
signerName: "Signer Name 1",
signerType: SignerType.Signer,
signerEmail: "signer1@email.com",
locale: Locales.EN);
// Adding the signer to the collection.
var documentSigners = new List<DocumentSigner>
{
signer
};
TextTagDefinition textTagDefinition = new TextTagDefinition(
definitionId: "tag1",
type: FieldType.RadioButton,
size: new Size(
width: 20,
height: 20),
signerIndex: 1,
isRequired: true,
radioGroupName: "Group1"
);
TextTagDefinition textTagDefinition1 = new TextTagDefinition(
definitionId: "tag2",
type: FieldType.RadioButton,
size: new Size(
width: 20,
height: 20),
signerIndex: 1,
isRequired: true,
radioGroupName: "Group1"
);
var textTagDefinitions = new List<TextTagDefinition>
{
textTagDefinition,
textTagDefinition1
};
// Create send for sign request object.
var sendForign = new SendForSign
{
Title = "Sent from BoldSign API SDK",
Message = "This is document message sent from API SDK",
EnableSigningOrder = false,
Files = filesToUpload,
Signers = new List<DocumentSigner>
{
signer
},
// Enabling this property will convert text tags in the document to UI form fields.
UseTextTags = true,
TextTagDefinitions = textTagDefinitions,
};
// Send the document for signing.
var createdDocumentResult = await documentClient.SendDocumentAsync(sendForign).ConfigureAwait(false);
import requests
url = "https://api.boldsign.com/v1/document/send"
payload={'Title': 'Sent from API Curl',
'Message': 'This is document message sent from API Curl',
'EnableSigningOrder': 'false',
'Signers[0][Name]': 'Signer Name 1',
'Signers[0][EmailAddress]': 'luthercooper@cubeflakes.com',
'Signers[0][SignerOrder]': '1',
'Signers[0][SignerType]': 'Signer',
'UseTextTags': 'true',
'TextTagDefinitions[0][DefinitionId]': 'tag1',
'TextTagDefinitions[0][Type]': 'RadioButton',
'TextTagDefinitions[0][SignerIndex]': '1',
'TextTagDefinitions[0][IsRequired]': 'True',
'TextTagDefinitions[0][RadioGroupName]': 'string',
'TextTagDefinitions[0][Size][Width]': '20',
'TextTagDefinitions[0][Size][Height]': '20',
'TextTagDefinitions[0][FieldId]': 'axq12367',
'TextTagDefinitions[1][DefinitionId]': 'tag2',
'TextTagDefinitions[1][Type]': 'RadioButton',
'TextTagDefinitions[1][SignerIndex]': '1',
'TextTagDefinitions[1][IsRequired]': 'True',
'TextTagDefinitions[1][RadioGroupName]': 'string',
'TextTagDefinitions[1][Size][Width]': '20',
'TextTagDefinitions[1][Size][Height]': '20',
'TextTagDefinitions[1][FieldId]': 'eq1267'}
files=[
('Files',('file',open('{your file}','rb'),'application/pdf'))
]
headers = {
'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 form = new FormData();
form.append('Title', 'Sent from API Curl');
form.append('Message', 'This is document message sent from API Curl');
form.append('EnableSigningOrder', 'false');
form.append('Signers[0][Name]', 'Signer Name 1');
form.append('Signers[0][EmailAddress]', 'luthercooper@cubeflakes.com');
form.append('Signers[0][SignerOrder]', '1');
form.append('Signers[0][SignerType]', 'Signer');
form.append('UseTextTags', 'true');
form.append('TextTagDefinitions[0][DefinitionId]','tag1');
form.append('TextTagDefinitions[0][Type]','RadioButton');
form.append('TextTagDefinitions[0][SignerIndex]','1');
form.append('TextTagDefinitions[0][IsRequired]','true');
form.append('TextTagDefinitions[0][Size][Width]','20');
form.append('TextTagDefinitions[0][Size][Height]','20');
form.append('TextTagDefinitions[0][RadioGroupName]', 'string')
form.append('TextTagDefinitions[1][FieldId]','axq12367');
form.append('TextTagDefinitions[1][DefinitionId]','tag2');
form.append('TextTagDefinitions[1][Type]','RadioButton');
form.append('TextTagDefinitions[1][SignerIndex]','1');
form.append('TextTagDefinitions[1][IsRequired]','true');
form.append('TextTagDefinitions[1][Size][Width]','20');
form.append('TextTagDefinitions[1][Size][Height]','20');
form.append('TextTagDefinitions[1][RadioGroupName]', 'string')
form.append('TextTagDefinitions[1][FieldId]','eq1267');
form.append('Files', fs.createReadStream('{your file}'));
const response = await axios.post(
' https://api.boldsign.com/v1/document/send',
form,
{
headers: {
accept: 'application/json',
'X-API-KEY': '{Your API key}',
...form.getHeaders()
}
}
);
Replace the placeholders ({your API key}, {your file}, etc.) with your actual data. Specify the Type as Radiobutton and specify a GroupName to group related radio buttons. Specify DefinitionId with the id present in the document.
After execution, a document will be created and sent to the signer's email with radio buttons added in the tag present in the document.
For a visual reference, please take a look at the radio buttons located in the document, as shown in the following image.
