Create PDF Form Fields in Blazor SfPdfViewer

17 Jul 202620 minutes to read

Add new form fields visually with the Form Designer UI or programmatically using the Blazor SfPdfViewer API. This guide covers both methods and includes a runnable example and per‑field samples.

The guide covers the following:

Add fields with the Form Designer UI
Add and edit fields programmatically (API)
Add common field types: Textbox, Password, CheckBox, RadioButton, ListBox, DropDown, Signature

Create form fields using the Form Designer UI

Enable the Form Designer mode in the PDF Viewer. See Form Designer overview.
Select a field type from the toolbar and click the PDF page to place it.
Move or resize the field using the handles, and configure settings in the Properties panel.

Adding a form field using the Form Designer UI

Create form fields programmatically

Use the AddFormFieldsAsync method inside the viewer’s DocumentLoaded event handler or in response to user actions.

Use this approach to generate form fields dynamically based on data or application logic.

RAZOR
<!-- PDF Viewer component with reference binding and document loading -->
<SfPdfViewer2 @ref="@viewer" Height="100%" Width="100%" DocumentPath="@DocumentPath">
    <PdfViewerEvents DocumentLoaded="@AddFormFields"></PdfViewerEvents>
</SfPdfViewer2>

@code {
    // Reference to the PDF Viewer instance
    private SfPdfViewer2 viewer;
    
    // Path to the PDF document
    private string DocumentPath = "wwwroot/data/formDesigner_Empty.pdf";

    // 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 ButtonField { Name = "Button Field", Bounds = new Bound { X = 278, Y = 157, Width = 150, Height = 40 } },
            new TextBoxField { Name = "TextBox Field", Bounds = new Bound { X = 278, Y = 247, Width = 200, Height = 24 } },
            new PasswordField { Name = "Password Field", Bounds = new Bound { X = 278, Y = 323, Width = 200, Height = 24 } },
            new CheckBoxField { Name = "CheckBox Field1", IsChecked = false, Bounds = new Bound { X = 278, Y = 398, Width = 20, Height = 20 } },
            new CheckBoxField { Name = "CheckBox Field2", IsChecked = false, Bounds = new Bound { X = 386, Y = 398, Width = 20, Height = 20 } },
            new RadioButtonField { Name = "RadioButton", Value = "Value1", IsSelected = false, Bounds = new Bound { X = 278, Y = 470, Width = 20, Height = 20 } },
            new RadioButtonField { Name = "RadioButton", Value = "Value2", IsSelected = false, Bounds = new Bound { X = 386, Y = 470, Width = 20, Height = 20 } },
            new DropDownField { Name = "DropDown Field", Bounds = new Bound { X = 278, Y = 536, Width = 200, Height = 24 } },
            new ListBoxField { Name = "ListBox Field", Bounds = new Bound { X = 278, Y = 593, Width = 198, Height = 66 } },
            new SignatureField { Name = "Signature Field", Bounds = new Bound { X = 278, Y = 686, Width = 200, Height = 63 } }
        };
        
        // Add form fields asynchronously to the PDF Viewer
        await viewer.AddFormFieldsAsync(formFields);
    }
}

Use programmatic creation when:

Building dynamic forms
Pre-filling forms from databases
Automating form creation workflows

Field‑specific instructions

The following sections provide UI steps and the programmatic equivalent for each common field type. Each code sample is a complete per‑field example that can be reused unchanged.

Textbox

Add via UI: Open the Form Designer toolbar, select Textbox, click on the page to place it, then configure its properties.

Add Textbox