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 to add a label as a part of the document before sending it.

Form fields Properties:

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

signature-settings-pointed.png

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

signature-settings.png

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

signature-settings.png

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

initial-settings-pointed.png

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

initial-settings.png

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

initial-settings.png

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

textbox-settings-pointed.png

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

assign-to-pointed.png

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

required-pointed.png

  • 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.png

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

font-drop-down.png

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

font-section.png

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

font-color.png

textbox-color-picker.png

  • You can also include input validation to the textbox. The Textbox gets input from the recipient and the validation option is available in bottom right corner in the textbox settings.

validation-pointed.png

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

validation-expanded.png

  • Only Numbers - If ‘only numbers’ validation is selected the recipient can only enter numbers. This validation can be used for 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.png

number-validation-example.png

only-numbers-invalid-message.png

  • Regex - If regex validation is selected the user can use customised condition for the input in the textbox field. The sender needs to add regex value which is checked for as a pattern in the input and is validated. If anything, without the regex value is typed as input, the input is not accepted and shown as invalid. The input should include the regex value as part of it.

regex.png

regex-validation-example.png

regex-invalid-message.png

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

currency.png

currency-symbol-example.png

currency-decimal-example.png

currency-number-example.png

currency-invalid-message.png

  • Email - The Email validation is selected by user to get Email ID input from recipient. The allowed format should have a ‘@’ followed by domain name. If the input typed doesn’t follow the format, the input is not accepted and shown as invalid.

email-validation-option.png

email-validation-example.png

email-invalid-message.png

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

validation-none.png

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

date-format-settings-pointed.png

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

assign-to-pointed-date-format.png

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

required-pointed-date-format.png

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

date-format-dropdown (2).png

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

font-date-format.png

  • 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.png

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

font-color.png

color-picker-date-format.png

  • 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 ‘Assign 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.

checkbox-settings.png

  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 ‘Assign 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.png

  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 ‘Assign to’ drop-down. It adds the name of the recipient.

name-settings-assign-to-pointed.png

  • You can enable ‘Required’ checkbox to make sure the recipient can’t skip the 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.png

  • The name field is autofilled while siging and the name can be edited by the signer. But if the read only option is enabled the name can’t be edited.

editable-name-example.png

edited-name-example.png

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

font-drop-down.png

  • 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.png

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

font-color.png

color-picker-name-settings.png

  1. Email:
  • The Email form field is autofilled and can’t be edited by recipient while signing.
  • 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 ‘Assign to’ drop-down. It adds the email of the recipient.

email-settings-assign-to-pointed.png

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

email-required.png

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

font-drop-down.png

  • 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.png

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

font-color.png

email-font-color-picker.png

  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 or the value section of the ‘Label field settings’.

label-settings.png

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

font-drop-down.png

  • 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.png

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

font-color.png

label-font-color-picker.png

Copied to clipboard