How can I help you?
Customize the appearance of PDF Form Fields in ASP.NET Core PDF Viewer
6 Feb 20264 minutes to read
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 Form Fields Programmatically
Use updateFormField() to apply styles.
<button id="CustomizeTextboxStyle">Update Textbox Style</button>
<div class="text-center">
<ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
</ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
document.getElementById('CustomizeTextboxStyle').addEventListener('click', function () {
if (!pdfviewer || !pdfviewer.formDesignerModule) {
console.warn('PDF Viewer or formDesignerModule not ready');
return;
}
var fields = pdfviewer.retrieveFormFields();
var tb = (fields || []).find(function (f) { return f.name === 'First Name'; }) || fields[0];
if (tb) {
pdfviewer.formDesignerModule.updateFormField(tb, {
value: 'John',
fontFamily: 'Courier',
fontSize: 12,
fontStyle: 'None',
color: 'black',
borderColor: 'black',
backgroundColor: 'white',
alignment: 'Left',
thickness: 2
});
}
});
});
</script>Set Default Styles for New Form Fields
Define defaults so fields added from the toolbar inherit styles.
<div class="text-center">
<ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
</ejs-pdfviewer>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
pdfviewer.documentLoad = function () {
pdfviewer.textFieldSettings = {
name: 'Textbox',
isReadOnly: false,
visibility: 'visible',
isRequired: false,
isPrint: true,
tooltip: 'Textbox',
thickness: 4,
value: 'Textbox',
fontFamily: 'Courier',
fontSize: 10,
fontStyle: 'None',
color: 'black',
borderColor: 'black',
backgroundColor: 'White',
alignment: 'Left',
maxLength: 0,
isMultiline: false
};
if (typeof pdfviewer.dataBind === 'function') { pdfviewer.dataBind(); }
};
});
</script>