How can I help you?
Customize the appearance of PDF form fields in JavaScript
Styling customizes appearance only (font, color, alignment, border, background, indicator text).
Customize 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 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
});
}
});Set 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
};