JavaScript Customizations for Signature Fields

Note: This page applies primarily to the classic form designer.

The signature field consists of a few components. When there is no signature, there is a Sign button which, when clicked, brings up a dialog that lets you draw your signature or enter your initials. When there is a signature in the field, the field shows the signature, together with buttons to delete or edit the signature.

In this section, we provide examples of common customizations of the signature field and its associated dialog box.

Changing Language from "Signature" to "Initials"

You may want users to enter their initials instead of their signatures in the signature field. To this end, you can modify the language in the signature field and the dialog to replace "Sign" with "Initial".

The following JavaScript snippet implements this modification:

$(document).ready(function () {
  //Change signature button label
  $('.Sign_Sig').attr('value','Initials');
  
  //Change signature modal header
  $('#form-signature-dlg > div > div > div.modal-header > div').text('Initial Document'); 
  
  //Change prompt text in the "Type" field
  $('#typeSignature').attr('placeholder','Type your initials here'); 
});

The new signature field and signature dialog look as follows. We have also specified the label of the signature field to be "Initials". This can be done by editing the signature field through the normal user interface.

Forcing Users to Draw Signatures

By default, both typing and drawing signatures are valid options in the modal dialog that appears when you click Sign, and the dialog focuses on Type at first. You can choose to show only one tab and hide the other. The following JavaScript snippet hides the Type tab and has the dialog automatically focus on the Draw tab when opened:

$(document).ready(function(){  
  $("#sigNav a:eq(0)").hide();
  $("#form-signature-dlg").on("shown.bs.modal", function(){$("#sigNav a:eq(1)").click();});
});