Modify PDF Form Field Properties in ASP.NET Core PDF Viewer
28 Jul 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).
<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>