Fill PDF form fields in Blazor SfPdfViewer
8 Jun 20267 minutes to read
This guide shows how to update, import, and validate PDF form fields in the Blazor SfPdfViewer so you can pre-fill forms or accept user input.
Outcome Programmatically set field values, allow UI-driven filling, import form data, and validate fields on submit.
Steps to fill forms
1. Fill form fields programmatically
Update form field values programmatically with UpdateFormFieldsAsync.
Use the example below as a complete, runnable example for a Blazor app. It retrieves form fields and updates a named field or the first available field.
@using Syncfusion.Blazor.SfPdfViewer
<SfPdfViewer2 @ref="pdfViewer"
DocumentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"
Height="600px">
</SfPdfViewer2>
<button @onclick="UpdateFormFields">Update Form Fields</button>
@code {
SfPdfViewer2? pdfViewer;
async Task UpdateFormFields()
{
if (pdfViewer == null)
return;
// Get fields
List<FormFieldInfo> formFields = await pdfViewer.GetFormFieldsAsync();
if (formFields == null || formFields.Count == 0)
return;
// Find textbox safely
TextBoxField? textField = formFields
.OfType<TextBoxField>()
.FirstOrDefault(f => f.Name == "name")
?? formFields.OfType<TextBoxField>().FirstOrDefault();
if (textField != null)
{
textField.Value = "John Doe";
textField.TooltipText = "First Name";
// Update using SAME TYPE (FormFieldInfo)
await pdfViewer.UpdateFormFieldsAsync(new List<FormFieldInfo>()
{
textField
});
}
}
}Expected result: Clicking the Fill Form Fields button sets the first or named field’s value to John Doe in the viewer.
2. Fill form fields via UI
Users can click form controls and enter/select values. Supported field types include textboxes, checkboxes, radio buttons, dropdowns, list boxes, and signature fields. Edits are retained during the viewing session.

3. Fill form fields through imported data
Use ImportFormFieldsAsync to map external data into PDF fields by name. The example below shows how to trigger import from a button handler.
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
<SfButton OnClick="ExportFormFieldData">Export Data</SfButton>
<SfButton OnClick="ImportFormFieldData">Import Data</SfButton>
<SfPdfViewer2 @ref="PdfViewerInstance" DocumentPath="wwwroot/data/FormFillingDocument.pdf"
Height="650px"
Width="100%">
</SfPdfViewer2>
@code {
// Reference to the SfPdfViewer2 instance
SfPdfViewer2 PdfViewerInstance { get; set; }
// Stream to store exported form field data in FDF format
Stream FDFStream = new MemoryStream();
// List to store form field information
List<FormFieldInfo> FormFields = new List<FormFieldInfo>();
// Exports form field data from the PDF viewer in FDF format
private async void ExportFormFieldData()
{
// Retrieve form field information from the PDF viewer
FormFields = await PdfViewerInstance.GetFormFieldsAsync();
if (FormFields != null && FormFields.Count > 0)
{
// Export form fields as FDF data
FDFStream = await PdfViewerInstance.ExportFormFieldsAsync(FormFieldDataFormat.Fdf);
}
}
// Imports form field data from FDF format into the PDF viewer
private async void ImportFormFieldData()
{
if (FDFStream != null)
{
// Import FDF data into the viewer
await PdfViewerInstance.ImportFormFieldsAsync(FDFStream, FormFieldDataFormat.Fdf);
}
}
}For more details, see Import and Export Form Data.
4. Validate form fields on submit
Enable form field validation and handle the validation event to check required fields and cancel submission when necessary. Example below shows adding required fields programmatically and validating them.
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
<SfPdfViewer2 @ref="Viewer"
DocumentPath="wwwroot/data/PDF_Succinctly.pdf"
Height="650px"
Width="100%"
EnableFormFieldsValidation=true>
<PdfViewerEvents DocumentLoaded="@AddFormFields" ValidateFormFields="@OnValidateFormFields" ></PdfViewerEvents>
</SfPdfViewer2>
@code {
SfPdfViewer2 Viewer;
// Method triggered when the document is loaded
private async Task AddFormFields()
{
// Define various form fields with their properties and positions
List<FormFieldInfo> formFields = new List<FormFieldInfo>
{
new TextBoxField { Name = "TextBox Field", Bounds = new Bound { X = 278, Y = 247, Width = 200, Height = 24 }, IsRequired=true},
new PasswordField { Name = "Password Field", Bounds = new Bound { X = 278, Y = 323, Width = 200, Height = 24 }, IsRequired=true},
new SignatureField { Name = "Signature Field", Bounds = new Bound { X = 278, Y = 686, Width = 200, Height = 63 }, IsRequired=true }
};
// Add form fields asynchronously to the PDF Viewer
await Viewer.AddFormFieldsAsync(formFields);
}
void OnValidateFormFields(ValidateFormFieldsArgs args)
{
Dictionary<string, object> unfilledFields = args.UnfilledFields;
foreach (KeyValuePair<string, object> field in unfilledFields)
{
Console.WriteLine($"Field Name: {field.Key}, Default Value: {field.Value}");
// Further processing of unfilled fields
}
}
}Troubleshooting
- If fields are not editable, confirm that the SfPdfViewer2 component is properly configured.
- If form fields don’t display, verify your
DocumentPathpoints to a PDF with form fields. - For import issues, ensure JSON keys match the PDF field
Nameproperty values.
NOTE
For a hands-on reference with working code examples, explore the sample projects available on GitHub.