Modify Form Fields in ASP.NET Core PDF Viewer
21 Oct 202619 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).
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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>DateTime Picker
Select a DateTime Picker field in Form Designer to review or change its settings. The toolbar includes the DateTime Picker tool, and the page displays date and time fields.
Date and time fields can also be used to enter values directly or choose a value from the picker:
-
For a date field, type a date or open the calendar picker.
-
For a time field, type a time or open the time picker.
Use the field’s General properties to review or edit its name, value, tooltip, visibility, read-only and required settings, and print visibility.
The Appearance properties include font, colors, border, and alignment.
Use the Format tab to change the field type (Date or Time), select a display format, and review the preview.
- API: updateFormField() for value, format script, typography, colors, borders.