Customize Form Field Appearance in ASP.NET Core PDF Viewer

14 Aug 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
    Textbox style from UI

Customize Form Field Appearance 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>

View Sample on GitHub

See also