BoldSignDocumentation
BoldSign Mobile Icon

How to customize form fields appearance and behaviour while sending documents?

Mon, 19 July, 2021

Form Fields can be added to the document before sending it for signing. The form fields are added as per requirement. Form fields are mostly input elements using which the sender gets input from the recipient. It also includes other elements such as Name, Email, Label which is used for adding information to the document.

form-fields.png

Form Field Use
Signature The signature form field when added requests for the signer’s signature.
Initials The Initials form field when added requests for the signer’s Initials.
Textbox The Textbox form field when added gets input from the signer.
Date Signed The Date Signed form field when added record the date in which the signer completes signing.
Check Box The Check Box form field when added allows user to select more than one items in the list.
Radio Button The Radio Button form field when added allows user to select one option from two or more options.
Name The Name form field when added to the document adds name of the recipient.
Email The Email form field when added to the document adds Email ID of the recipient.
Label The Label form field when added to the document allows sender to add a label as a part of the document before sending it.
Attachment The Attachment form field when added to the document allows the signer to add an attachment.
Image The image form field allows the user to add an image as a part of the document.
Editable date The editable date form field allows user to input date.

Form fields Properties:

  1. Signature:
  • The Signature settings section can be seen on the right side of the page.

Signature Settings Pointed

  • You can change the recipient to whom the signature field is assigned to using the Assigned to drop-down.

Signature Settings

  • You can enable Required checkbox to make sure the recipient can’t skip the Signature field.
  1. Initials:
  • The Initials settings section can be seen on the right side of the page.

Initial Settings Pointed

  • You can change the recipient to whom the Initials field is assigned to using the Assigned to drop-down.

Initial Settings

  • You can enable Required checkbox to make sure the recipient can’t skip the Initials field.
  1. Textbox:
  • The Textbox settings section can be seen on the right side of the page.

Textbox Settings Pointed

  • You can change the recipient to whom the Textbox field is assigned to using the Assigned to drop-down.

Assigned To Pointed

  • You can enable Required checkbox to make sure the recipient can’t skip the Textbox field.

Required Textbox

  • You can add a hint text that will appear in the textbox as a hint/placeholder, before the recipient starts typing at the time of signing.

Hint Text Pointed

  • You can select the font of the textbox from the drop down with options such as Helvetica, Courier, Times New Roman, and Noto Sans.

Font Drop Down

  • You can add specifications to the text in textbox such as bold, italic, underline and can select the font size, line height.

Font Section

  • You can select font colour for the text in textbox from one of the available colours or from the colour picker.

Font Color

Textbox Color Picker

  • You can also include input validation to the textbox. The validation option of textbox helps you validate the input from the recipient. The validation option is available in bottom right corner in the textbox settings.

Validation Pointed

  • By selecting one of the input validations available, the sender restricts the input that can be entered in the textbox field.

Validation Expanded

  • Only Numbers - If only numbers validation is selected the recipient can only add numbers. This validation can be used for inputs like phone number, verification number, and so on. If anything, other than numbers is typed as input, the input is not accepted and shown as invalid.

Only Numbers

Number Validation Example

Note: If anything, other than numbers is typed as input, the input is not accepted and shown as invalid.

Only Numbers Invalid Message

  • Regex - If Regex validation is selected the user can use customized condition for the input in the textbox field.

Regex

  • The sender needs to add a regex value which is checked for as a pattern in the input and is validated. The input should include the regex value as part of it.
  • The user should also add a description about this regex value to instruct the users.

Regex Info Added

regex-validation-example.png

Note: If anything without the regex value, is typed as input, the input is not accepted and shown as invalid.

Regex Invalid Message

  • Currency - The currency validation is selected bthe y user to get currency input from the recipient. The accepted forms of input include- ‘$’ symbol followed by a number with two decimal digits or a number with two decimal digits or just number. Any other input is not accepted and is shown as invalid.

Currency

Currency Symbol Example

Currency Decimal Example

Currency Number Example

Note: If any input that doesn’t follow the accepted format, following error is shown.

Currency Invalid Message

  • Email - The Email validation is selected by user to get Email ID input from recipient. The allowed format of inpput should have a ‘@’ followed by domain name.

Email Validation Option

Email Validation Example

Note: If the input typed doesn’t follow the format, the input is not accepted and shown as invalid.

Email Invalid Message

  • If there is no validation needed, then you can select None. Now textbox can get any input from the receiver.

Note: None is the default validation for the textbox.

Validation None

  1. Date Signed:
  • The Date Format settings section can be seen on the right-side of the page.

Date Format Settings Pointed

  • You can change the recipient to whom the Date Signed field is assigned to using the Assigned to drop-down.

Assign To Pointed Date Format

  • You can enable Required checkbox to make sure the recipient can’t skip the Date Signed field.

Required Pointed Date Format

  • You can select the date format from the drop-down.

Date Format Dropdown

  • You can select the font of the date from the drop-down with options such as Helvetica, Courier, Times New Roman, and Noto Sans.

Font Drop Down

  • You can add specifications to the font in Date Signed field such as bold, italic, underline and can select the font size, line height.

Font Section

  • You can select font colour for the date from the available colours or from the colour picker.

Font Color

Color Picker Date Format

Note: The date is autofilled while signing and the recipient can’t edit this field.

  1. Checkbox :
  • The Checkbox settings section can be seen on the right-side of the page.
  • You can change the recipient to whom the Checkbox field is assigned to using the Assigned to drop-down.
  • You can enable Required checkbox to make sure the recipient can’t skip the Checkbox field.
  • You can also modify the size of the checkbox using the Size option.

Checkbox Settings

  1. Radio button:
  • The Radio button settings section can be seen on the right-side of the page.
  • You can change the recipient to whom the Radio button field is assigned to using the Assigned to drop-down.
  • You can enable Required checkbox to make sure the recipient can’t skip the Radio button field.
  • You can also modify the number of radio buttons and the size of the Radio button.

Radio Button Settings

  1. Name:
  • The Name button settings section can be seen on the right-side of the page.
  • You can change the recipient to whom the Name field is assigned to using the Assigned to drop-down. It adds the name of the recipient.

Name Settings Assign To Pointed

  • You can enable Required checkbox to make sure the recipient can’t skip the Name field.
  • The name field is autofilled and can be edited by the signer.

Autofilled Name

Editable Name Field

Edited Name field

  • You can also enable the Read Only option by checking the checkbox, so the signer can’t edit the name field.

Read Only Namefield

  • You can select the font of the Name from the drop-down with options such as Helvetica, Courier, Times New Roman, and Noto Sans.

Font Drop Down

  • You can add specifications to the font in Name field such as bold, italic, underline and can select the font size, line height.

Font Section

  • You can select font color from one of the available colours or from the colour picker.

Font Color

Color Picker Name Settings

  1. Email:
  • The Email settings section can be seen on the right side of the page.
  • You can change the recipient to whom the Email field is assigned to using the Assigned to drop-down. It adds the email of the recipient.

Email Settings Assign To Pointed

  • You can enable Required checkbox to make sure the recipient can’t skip the Email field.

Email Required

  • You can select the font of the Email field from the drop down with options such as Helvetica, Courier, Times New Roman, and Noto Sans.

Font Drop Down

  • You can add specifications to the font in Email field such as bold, italic, underline and can select the font size, line height.

Font Section

  • You can select font colour for the text of Email from one of the available colours or from the colour picker.

Font Color

Email Font Color Picker

Note: The Email form field is autofilled and can’t be edited by recipient while signing.

  1. Label:
  • The Label field settings can be seen on the right-side of the page.
  • You can add the label content directly to the label by double-clicking it or the Value section.

Label Settings

  • You can select the font of the Label from the drop down with options such as Helvetica, Courier, Times New Roman, and Noto Sans.

Font Drop Down

  • You can add specifications to the font in Label field such as bold, italic, underline and can select the font size, line height.

Font Section

  • You can select font colour for the text in Label from one of the available colours or from the colour picker.

Font Color

Label Font Color Picker

  1. Attachment:
  • The Attachment field settings can be seen on the right-side of the page.
  • You can change the recipient to whom the Attachment field is assigned to using the Assigned to drop-down.

Attachment Settings

  • You can enable Required checkbox to make sure the recipient can’t skip the Attachment field.

Attachment Required Pointed

  • You can add details about the Attachment field, such as Attachment title which is displayed on the form field, instruction to help the users.

Attachment Details Added

  • You can also add the accepted type of files in the Accept only section by checking the types.
  • You can uncheck the type of file you don’t want. But you should have checked at least one file type.

Uncheck Attachment Type

  • Double click the Attachment field. The Upload Attachment dialog box opens up and shows the attachment title and instructions added.

Upload Attachment Dialogbox

  • Click the Browse file button. The file explorer opens up and shows the files in your PC with the supported file types. You can also drag and drop the required file.

attachment Uploaded

  • You can’t add files with unsupported format.

Attachment Unsupported

  • If you want to add an alternate file, click the delete button to remove the file. Once you have added the required file click the Done button.

Upload Attachment Delete

  • The sender can download the attachment from the overview page of the document. Click More actions -> Download attachment option.

Download Attachment Pointed

  • The attachment(s) is downloaded as a zip file with separate folders with each recipient’s names which contains the respective attachments files.

Recipient Folder Name

Recipient Attachment Download

  1. Image
  • The Image field settings can be seen on the right-side of the page.
  • You can change the recipient to whom the Image field is assigned to using the Assigned to drop-down.

Image Settings

  • You can enable Required checkbox to make sure the recipient can’t skip the Image field.

Image Required

  • You can add details about the Image field, such as Image title which is displayed on the form field, instruction to help the users.

Image Details Entered

  • You can also add the accepted type of files in the Accept only section by checking the types.
  • You can uncheck the type of image you don’t want. But you should have checked at least one image type.

Image Type Unchecked

  • Double click the Image field. The Image dialog box opens up and shows the Image title and instructions added.

Image Dialogbox

  • Click the Browse file button. The file explorer opens up and shows the files in your PC with the supported image types. You can also drag and drop the required image.
  • After adding the image of your choice, you can make edits to it before clicking Save button.

Image Uploaded

  • You can see that zoom icon selected. In order to zoom in move the glider below. In order to rotate the image, select the rotate icon and move the glider.

Image Zoom

  • You can click the crop icon and crop the image above the image. You can click the Pan icon to move the image within the available frame.

Image Cropped

  • After doing your required edits, click the Save button.
  • Your image will be attached as a part of the document.
  1. Editable Date:
  • The Editable date settings can be seen on the right-side of the page.
  • You can change the recipient to whom the Editable date field is assigned to using the Assigned to drop-down.

Editable Date Settings00

  • You can enable Required checkbox to make sure the recipient can’t skip the Editable date field.

Editable Date Required Pointed

  • You can select the range within which the signer can input date using Date Range option. Click the calendar button at the end of Date Range option to expand the select range option.

Editable Date Range Expanded

  • You can see that there is option to select the Start Date and End Date of the date range.
  • You can select the month and year by using the arrow keys available.

Date Range Pointed

  • After selecting the respective month and year, you can select the start date and end date.

Date Range Selected

  • After selecting the required date range click Apply button and you can see the selected range in the Editable date settings.

Selected Date Format

  • You can select the date format from the drop-down.

Editable Date Format Dropdown

* You can select the font of the Label from the drop down with options such as *Helvetica, Courier, Times New Roman, and Noto Sans*.

Font Drop Down

  • You can add specifications to the font in Date Signed field such as bold, italic, underline and can select the font size, line height.

Font Section

  • You can select font colour for the text in Label from one of the available colours or from the colour picker.

Font Color

Note: If no date range is selected, the user can select date of their choice.

Copied to clipboard