Modify PDF Form Field Properties in ASP.NET Core PDF Viewer

6 Feb 202618 minutes to read

You can modify form fields using the UI or API.

Modify PDF Form Field Properties using the UI

• Right click a field → Properties to update settings.
  
• Drag to move; use handles to resize.
• Use the toolbar to toggle field mode or add new fields.

Modify PDF Form Field Properties programmatically

Use updateFormField() to change behavior/data (including position and size).

Standalone

<button id="modifyTextbox">Apply Textbox Changes</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('modifyTextbox').addEventListener('click', function () {
    if (!pdfviewer || !pdfviewer.formDesignerModule) { console.warn('formDesignerModule not ready'); return; }
    var fields = pdfviewer.retrieveFormFields() || [];
    var field = fields.find(function (f) { return f.name === 'First Name'; }) || fields[0];
    if (field) {
      pdfviewer.formDesignerModule.updateFormField(field, {
        value: 'John',
        fontFamily: 'Courier',
        fontSize: 12,
        fontStyle: 'None',
        color: 'black',
        backgroundColor: 'white',
        borderColor: 'black',
        thickness: 2,
        alignment: 'Left',
        maxLength: 50
      });
    }
  });
});
</script>

Modify PDF Form Field Properties by Field type

Textbox

• UI: Update value, font, size, colors, border thickness, alignment, max length, multiline.
  
• API: updateFormField() for value, typography, alignment, colors, borders.

Standalone

<button id="modifyTextbox">Apply Textbox Changes</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('modifyTextbox').addEventListener('click', function () {
    if (!pdfviewer || !pdfviewer.formDesignerModule) { console.warn('formDesignerModule not ready'); return; }
    var fields = pdfviewer.retrieveFormFields() || [];
    var field = fields.find(function (f) { return f.name === 'First Name'; }) || fields[0];
    if (field) {
      pdfviewer.formDesignerModule.updateFormField(field, {
        value: 'John',
        fontFamily: 'Courier',
        fontSize: 12,
        fontStyle: 'None',
        color: 'black',
        backgroundColor: 'white',
        borderColor: 'black',
        thickness: 2,
        alignment: 'Left',
        maxLength: 50
      });
    }
  });
});
</script>

Password

• UI: Tooltip, required, max length, font, appearance.
  
• API: updateFormField() for tooltip, validation flags, typography, colors, alignment, borders.
  

Standalone

<button id="modifyPasswordBox">Edit PasswordBox</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('modifyPasswordBox').addEventListener('click', function () {
    if (!pdfviewer || !pdfviewer.formDesignerModule) { console.warn('formDesignerModule not ready'); return; }
    var fields = pdfviewer.retrieveFormFields() || [];
    var field = fields.find(function (f) { return f.name === 'Password'; });
    if (field) {
      pdfviewer.formDesignerModule.updateFormField(field, {
        tooltip: 'Enter your password',
        isReadOnly: false,
        isRequired: true,
        isPrint: true,
        fontFamily: 'Courier',
        fontSize: 10,
        color: 'black',
        borderColor: 'black',
        backgroundColor: 'white',
        alignment: 'Left',
        maxLength: 20,
        thickness: 1
      });
    }
  });
});
</script>

CheckBox

• UI: Toggle checked state.
  
• API: updateFormField() for isChecked, tooltip, colors, borders.

Standalone

<button id="modifyCheckbox">Modify CheckBox</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('modifyCheckbox').addEventListener('click', function () {
    if (!pdfviewer || !pdfviewer.formDesignerModule) { console.warn('formDesignerModule not ready'); return; }
    var fields = pdfviewer.retrieveFormFields() || [];
    var cb = fields.find(function (f) { return f.name === 'Subscribe'; });
    if (cb) {
      pdfviewer.formDesignerModule.updateFormField(cb, {
        isChecked: true,
        backgroundColor: 'white',
        borderColor: 'black',
        thickness: 2,
        tooltip: 'Subscribe to newsletter'
      });
    }
  });
});
</script>

RadioButton

• UI: Set selected item in a group (same Name).

• API: updateFormField() to set selected value and border appearance.

Standalone

<button id="editRadio">Modify RadioButton</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('editRadio').addEventListener('click', function () {
    if (!pdfviewer || !pdfviewer.formDesignerModule) { console.warn('formDesignerModule not ready'); return; }
    var fields = pdfviewer.retrieveFormFields() || [];
    var genderRadios = fields.filter(function (f) { return f.name === 'Gender'; });
    if (genderRadios[1]) {
      pdfviewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false });
      pdfviewer.formDesignerModule.updateFormField(genderRadios[1], { isSelected: true, thickness: 2, borderColor: 'black' });
    }
  });
});
</script>

ListBox

• UI: Add/remove items, set selection, adjust fonts/colors.

• API: updateFormField() for items, selection, borders.

Standalone

<button id="editListBox">Edit ListBox</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('editListBox').addEventListener('click', function () {
    if (!pdfviewer || !pdfviewer.formDesignerModule) { console.warn('formDesignerModule not ready'); return; }
    var fields = pdfviewer.retrieveFormFields() || [];
    var lb = fields.find(function (f) { return f.name === 'States'; });
    if (lb) {
      var option = [
        { itemName: 'Alabama', itemValue: 'AL' },
        { itemName: 'Alaska', itemValue: 'AK' },
        { itemName: 'Arizona', itemValue: 'AZ' }
      ];
      pdfviewer.formDesignerModule.updateFormField(lb, {
        fontFamily: 'Courier',
        fontSize: 5,
        color: 'black',
        backgroundColor: 'white',
        tooltip: 'listbox',
        options: option
      });
    }
  });
});
</script>

DropDown

• UI: Add/remove items, default value, appearance.

• API: updateFormField() for items, value, borders.

Standalone

<button id="editDropDown">Edit DropDown</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('editDropDown').addEventListener('click', function () {
    if (!pdfviewer || !pdfviewer.formDesignerModule) { console.warn('formDesignerModule not ready'); return; }
    var fields = pdfviewer.retrieveFormFields() || [];
    var dd = fields.find(function (f) { return f.name === 'Country'; });
    if (dd) {
      pdfviewer.formDesignerModule.updateFormField(dd, {
        options: [
          { itemName: 'USA', itemValue: 'US' },
          { itemName: 'Canada', itemValue: 'CA' },
          { itemName: 'Mexico', itemValue: 'MX' }
        ],
        value: 'US',
        fontFamily: 'Courier',
        fontSize: 10,
        color: 'black',
        borderColor: 'black',
        backgroundColor: 'white'
      });
    }
  });
});
</script>

Signature Field

• UI: Tooltip, thickness, indicator text, required/visibility.

• API: updateFormField() for tooltip, required, colors, borders.

Standalone

<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>

<button id="editSignature">Edit Signature</button>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
  document.getElementById('editSignature').addEventListener('click', function () {
    if (!pdfviewer || !pdfviewer.formDesignerModule) { console.warn('formDesignerModule not ready'); return; }
    var fields = pdfviewer.retrieveFormFields() || [];
    var sig = fields.find(function (f) { return f.name === 'Sign'; });
    if (sig) {
      pdfviewer.formDesignerModule.updateFormField(sig, {
        tooltip: 'Please sign here',
        thickness: 3,
        isRequired: true,
        isPrint: true,
        backgroundColor: 'white',
        borderColor: 'black'
      });
    }
  });
});
</script>

Initial Field

• UI: Tooltip, indicator text, thickness, required/visibility.

• API: updateFormField() for tooltip, required, colors, borders.

Standalone

<button id="editInitial">Edit Initial</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('editInitial').addEventListener('click', function () {
    if (!pdfviewer || !pdfviewer.formDesignerModule) { console.warn('formDesignerModule not ready'); return; }
    var fields = pdfviewer.retrieveFormFields() || [];
    var init = fields.find(function (f) { return f.name === 'Initial'; });
    if (init) {
      pdfviewer.formDesignerModule.updateFormField(init, {
        tooltip: 'Add your initials',
        thickness: 2,
        isRequired: true,
        isPrint: true,
        backgroundColor: 'white',
        borderColor: 'black'
      });
    }
  });
});
</script>

View Sample on GitHub

See also

• Form Designer overview
• Form Designer Toolbar
• Create form fields
• Remove form Fields
• Style form fields
• Group form fields
• Form validation
• Form fields API