Create Form Fields in ASP.NET MVC PDF Viewer
21 Oct 202624 minutes to read
You can create or add new form fields either visually using the Form Designer UI or dynamically using APIs.
Create Form Fields Using the Form Designer UI
Use this approach when you want to design forms manually without writing code.
Steps:
- Enable Form Designer mode in the PDF Viewer.
- Click a form field type (Textbox, Checkbox, Dropdown, etc.) from the toolbar.
- Click on the PDF page to place the form field.
- Move or resize the field as required.
- Configure field properties using the Properties panel.
Add Form Fields Programmatically (API)
Use this approach when you want to generate form fields dynamically based on data or application logic.
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
// Example: add a Textbox programmatically
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('Textbox', {
name: 'First Name',
bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
pageNumber: 1,
isRequired: true,
tooltip: 'Enter your first name'
});
};
});
</script>Use programmatic creation when:
- Building dynamic forms
- Pre-filling forms from databases
- Automating form creation workflows
PDF Form Field Types and How to Add Them
Each field can be added via the Form Designer or programmatically.
Textbox
Add via Toolbar (UI)
- Open Form Designer → select Textbox → click on the page → configure in Properties.
Add Programmatically (API)
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('Textbox', {
name: 'FirstName',
pageNumber: 1,
bounds: { X: 100, Y: 150, Width: 200, Height: 24 },
isRequired: true,
tooltip: 'Enter your first name',
maxLength: 40
});
};
});
</script>Password
Add via Toolbar (UI)
- Select Password → place it → configure tooltip, required, max length.
Add Programmatically (API)
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('Password', {
name: 'AccountPassword',
pageNumber: 1,
bounds: { X: 100, Y: 190, Width: 200, Height: 24 },
isRequired: true,
maxLength: 32,
tooltip: 'Enter a secure password'
});
};
});
</script>CheckBox
Add via Toolbar (UI)
- Select CheckBox → click to place → duplicate for options → set isChecked, tooltip, appearance.
Add Programmatically (API)
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('CheckBox', {
name: 'AgreeTerms',
pageNumber: 1,
bounds: { X: 100, Y: 230, Width: 18, Height: 18 },
isChecked: false,
tooltip: 'I agree to the terms'
});
};
});
</script>RadioButton
Add via Toolbar (UI)
- Select RadioButton → place buttons with the same Name to group → configure selection/colors.
Add Programmatically (API)
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('RadioButton', {
name: 'Gender',
value: 'Male',
pageNumber: 0,
bounds: { X: 100, Y: 270, Width: 16, Height: 16 }
});
pdfviewer.formDesignerModule.addFormField('RadioButton', {
name: 'Gender',
value: 'Female',
pageNumber: 0,
bounds: { X: 160, Y: 270, Width: 16, Height: 16 }
});
};
});
</script>ListBox
Add via Toolbar (UI)
- Select ListBox → place → add items in Properties.
Add Programmatically (API)
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
pdfviewer.documentLoad = function () {
var option = [
{ itemName: 'Item 1', itemValue: 'item1' },
{ itemName: 'Item 2', itemValue: 'item2' },
{ itemName: 'Item 3', itemValue: 'item3' }
];
pdfviewer.formDesignerModule.addFormField('ListBox', {
name: 'States',
pageNumber: 1,
bounds: { X: 100, Y: 310, Width: 220, Height: 70 },
options: option
});
};
});
</script>DropDown
Add via Toolbar (UI)
- Select DropDown → place → add items → set default value.
Add Programmatically (API)
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
pdfviewer.documentLoad = function () {
var options = [
{ itemName: 'Item 1', itemValue: 'item1' },
{ itemName: 'Item 2', itemValue: 'item2' },
{ itemName: 'Item 3', itemValue: 'item3' }
];
pdfviewer.formDesignerModule.addFormField('DropDown', {
name: 'Country',
options: options,
bounds: { X: 560, Y: 320, Width: 150, Height: 24 }
});
};
});
</script>Signature Field
Add via Toolbar (UI)
- Select Signature Field → place where signing is required → configure indicator text, thickness, tooltip, required.
Add Programmatically (API)
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('SignatureField', {
name: 'Sign',
bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
tooltip: 'sign Here',
isRequired: true
});
};
});
</script>Initial Field
Add via Toolbar (UI)
- Select Initial Field → place where initials are needed → configure text and required state.
Add Programmatically (API)
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('InitialField', {
name: 'Sign',
bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
tooltip: 'sign Here',
isRequired: true
});
};
});
</script>DateTime Picker
Add via Toolbar (UI)
- Open the Form Designer toolbar, select DateTime Picker, and click on a PDF page to place the field. The DateTime Picker tool adds date and time fields in Form Designer mode.
- Select the field to configure its general properties, such as its name, value, visibility, and whether it is read-only or required.
Manual Entry and Picker
The field accepts values either by direct typing or through the integrated picker UI:
-
Date Field – Enter a date manually, or open the calendar dropdown to pick a date.
-
Time Field – Enter a time manually, or open the time dropdown to pick a time.
Strict Format Validation
Invalid values are rejected and a validation popup is displayed. The invalid value is not applied to the field.
For example, with the format m/d/yy:
| Input | Result |
|---|---|
10/19/2026 |
Accepted |
19/10/26 |
Rejected |
not-a-date |
Rejected |
Date / Time Toggle and Format Editing
The Format tab in the Properties panel lets you:
- Switch between Date Picker and Time Picker modes.
- Edit the display format string.
- Preview formatting changes before saving.
Common Formats
| Format String | Example Output |
|---|---|
m/d/yy |
10/19/26 |
mm/dd/yyyy |
10/19/2026 |
HH:MM |
14:30 |
HH:MM:ss |
14:30:45 |
Form Designer Appearance
Placed DateTime pickers have a distinct visual appearance in Form Designer mode, including:
- Colored background
- Visible border
- Field-type indicator
Add Programmatically (API)
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('Textbox', {
name: 'DateField1',
bounds: { X: 146, Y: 200, Width: 200, Height: 24 },
pageNumber: 1,
isDateField: true,
fontSize: 10,
color: 'black',
fontFamily: 'Helvetica',
backgroundColor: '#daeaf7ff',
borderColor: '#303030',
alignment: 'Left',
isReadOnly: false,
visibility: 'visible',
isRequired: false,
isPrint: true,
tooltip: '',
thickness: 1,
actions: {
format: { script: 'AFDate_FormatEx("m/d/yy")' }
}
});
pdfviewer.formDesignerModule.addFormField('Textbox', {
name: 'TimeField1',
bounds: { X: 146, Y: 250, Width: 200, Height: 24 },
pageNumber: 1,
isDateField: true,
fontSize: 10,
color: 'black',
fontFamily: 'Helvetica',
backgroundColor: '#daeaf7ff',
borderColor: '#303030',
alignment: 'Left',
isReadOnly: false,
visibility: 'visible',
isRequired: false,
isPrint: true,
tooltip: '',
thickness: 1,
actions: {
format: { script: 'AFTime_FormatEx("HH:MM")' }
}
});
};
});
</script>Add Fields Dynamically with setFormFieldMode
Use setFormFieldMode() to add fields on the fly based on user actions.
Edit Form Fields in MVC PDF Viewer
You can edit form fields using the UI or API.
Edit Using the UI
- Right click a field → Properties to update settings. (Image here)
- Drag to move; use handles to resize.
- Use the toolbar to toggle field mode or add new fields.
Edit Programmatically
<div style="width:100%;height:200px">
<button id='editTextbox'>EditTextBox</button>
<button id='addPasswordField'>Add Form Field</button>
</div>
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
// Edit FormField on Button Click
document.getElementById('editTextbox').addEventListener('click', function () {
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
});
}
});
// Add Form Fields using setFormFieldMode
document.getElementById('addPasswordField').addEventListener('click', function () {
pdfviewer.formDesignerModule.setFormFieldMode("Password");
});
});
</script>