Customize Form Field Appearance in JavaScript (ES5) PDF Viewer
14 Aug 20262 minutes to read
Styling customizes appearance only (font, color, alignment, border, background, indicator text).
Customize Form Field Appearance in JavaScript (ES5) PDF ViewerCustomize appearance of form fields using the UI
Use the Properties panel to adjust:
- font family/size, text color, alignment
- border color/thickness
- background color
Customize Form Field Appearance in JavaScript (ES5) PDF ViewerCustomize appearance of form fields programmatically
Use updateFormField() to apply styles:
<button id="CustomizeTextboxStyle">Update Textbox Style</button>// Update textbox styling on button click
document.getElementById('CustomizeTextboxStyle').addEventListener('click', function () {
// Retrieve form fields collection
var fields = pdfviewer.retrieveFormFields();
// Find the textbox field by name
var tb = (fields || []).find(function (f) { return f && f.name === 'First Name'; }) || (fields || [])[0];
if (tb) {
// Update textbox field styling
pdfviewer.formDesignerModule.updateFormField(tb, {
value: 'John',
fontFamily: 'Courier',
fontSize: 12,
fontStyle: null,
color: 'black',
borderColor: 'black',
backgroundColor: 'white',
alignment: 'Left',
thickness: 2
});
}
});Customize Form Field Appearance in JavaScript (ES5) PDF ViewerSet default styles for new form fields
Define defaults so fields added from the toolbar inherit styles.
// Apply as defaults for Textbox added from toolbar
pdfviewer.textFieldSettings = {
name: 'Textbox',
isReadOnly: false,
visibility: 'visible',
isRequired: false,
isPrint: true,
tooltip: 'Textbox',
thickness: 4,
value: 'Textbox',
fontFamily: 'Courier',
fontSize: 10,
fontStyle: null,
color: 'black',
borderColor: 'black',
backgroundColor: 'White',
alignment: 'Left',
maxLength: 0,
isMultiline: false
};