diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md
deleted file mode 100644
index 8674c8d791..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md
+++ /dev/null
@@ -1,493 +0,0 @@
----
-layout: post
-title: Programmatic Support for Form Designer in SfPdfViewer | Syncfusion
-description: Learn how to create, modify, and manage form fields programmatically in the Syncfusion Blazor SfPdfViewer component.
-platform: document-processing
-control: SfPdfViewer
-documentation: ug
----
-
-# Programmatic Support for Form Designer in Blazor PDF Viewer
-
-The Blazor SfPdfViewer component provides programmatic APIs to create, update, and manage PDF form fields, enabling automated and reliable form workflows.
-
-N> Programmatic operations do not require the Form Designer UI. Ensure a document is loaded and an instance reference (for example, `SfPdfViewer2` via `@ref`) is available before invoking API methods.
-
-## Adding Form Fields Programmatically
-
-The [AddFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) API accepts a list of [FormFieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html) instances. Each instance defines a form field type (for example, `ButtonField`, `TextBoxField`, `PasswordField`, `CheckBoxField`, `RadioButtonField`, `DropDownField`, `ListBoxField`, `SignatureField`) and its [Bound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.Bound.html) coordinates.
-
-The example below demonstrates adding form fields to the SfPdfViewer2 component:
-
-```cshtml
-@page "/"
-
-
-
-
-
-
-@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 formFields = new List
- {
- 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);
- }
-}
-```
-The following image illustrates the programmatic addition of form fields in Blazor SfPdfViewer:
-
-
-
-N> Form fields can also be added interactively using the Form Designer UI for an intuitive, point-and-click experience.
-[Interactively Add Form Fields](./ui-interactions)
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/AddFormField.razor).
-
-## Form Field Settings
-
-The Blazor SfPdfViewer provides [FormFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html) to configure form field appearance, including border thickness, background color, text color, font family, and font size. The example below demonstrates adjusting [thickness](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_Thickness); additional appearance options are available.
-
-```cshtml
-@page "/"
-
-
-
-
-
-
-
-
-
-@code {
- // Reference to the PDF Viewer instance
- private SfPdfViewer2 viewer;
-
- // Default thickness value for form fields
- private double thickness { get; set; } = 4;
-
- // Path to the PDF document to be loaded in the viewer
- private string DocumentPath = "wwwroot/data/formDesigner_Empty.pdf";
-
- // Method triggered when the document is loaded
- private async Task AddFormFields()
- {
- // Define a new ListBox form field with specified name and position
- ListBoxField listBox = new ListBoxField
- {
- Name = "ListBox Field",
- Bounds = new Bound { X = 278, Y = 593, Width = 198, Height = 66 }
- };
-
- // Add the form field asynchronously to the PDF Viewer
- await viewer.AddFormFieldsAsync(new List { listBox });
- }
-}
-
-```
-The following image illustrates the listbox field thickness customization in Blazor SfPdfViewer:
-
-
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/FieldSetting.razor).
-
-## Activating and Deactivating Form Field Mode
-
-The [SetFormDrawingModeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SetFormDrawingModeAsync_System_Nullable_Syncfusion_Blazor_SfPdfViewer_FormFieldType__) method defines the type of form field that can be drawn interactively in the viewer. This controls the UI drawing behavior and is independent of programmatic creation via `AddFormFieldsAsync`.
-
-- **Setting Form Field Mode:** Specify a [FormFieldType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldType.html) to allow adding a specific form field.
-- **Clearing Form Field Mode:** Reset the form field selection by calling [SetFormDrawingModeAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SetFormDrawingModeAsync_System_Nullable_Syncfusion_Blazor_SfPdfViewer_FormFieldType__) without parameters.
-
-### Example
-
-Below is an example demonstrating how to set and clear the form field drawing mode:
-
-```cshtml
-@page "/"
-@using Syncfusion.Blazor.Buttons
-
-
-Set Form Field Type
-Clear Form Field Type
-
-
-
-
-
-@code {
- // Reference to the PDF Viewer instance
- private SfPdfViewer2 viewer;
-
- // Path to the PDF document to be loaded in the viewer
- private string DocumentPath = "wwwroot/data/formDesigner_Empty.pdf";
-
- // Method to enable form field drawing mode with a specific field type
- async Task SetFormDrawingMode()
- {
- // Sets the form field drawing mode to DropDown, allowing users to add dropdown fields
- await viewer.SetFormDrawingModeAsync(FormFieldType.DropDown);
- }
-
- // Method to disable form field drawing mode
- async Task ClearFormDrawingMode()
- {
- // Clears the form field drawing mode, preventing further form field additions
- await viewer.SetFormDrawingModeAsync();
- }
-}
-```
-The following image illustrates setting and clearing the form field mode in Blazor SfPdfViewer:
-
-
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/SetMode.razor).
-
-## Update Form Fields
-
-Form fields can be retrieved with [GetFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetFormFieldsAsync) and updated with [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormField_). Use null/empty checks and batch updates to apply multiple changes efficiently.
-
-### Appearance Properties
-Appearance properties control the visual aspects of form fields, including [background color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_BackgroundColor), [border color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_BorderColor), [text color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Color), [thickness](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Thickness), [maxLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_MaxLength), [visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Visibility), [font size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontSize), [font family](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontFamily), [font style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontStyle), and [text alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_TextAlignment). These properties allow precise control over field presentation.
-
-```cshtml
-@page "/"
-
-
-
-
-
-
-
-@code {
- // Reference to the PDF Viewer instance
- private SfPdfViewer2 viewer;
-
- // Path to the PDF document to be loaded in the viewer
- private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
-
- // Method triggered when the document is loaded
- private async Task UpdateFormField()
- {
- // Retrieve the list of added form fields from the PDF Viewer
- List formFields = await viewer.GetFormFieldsAsync();
-
- // Access the first form field in the list (assuming it is a button field)
- FormFieldInfo buttonField = formFields[0];
-
- // Modify the appearance properties of the form field
- buttonField.BackgroundColor = "#008000";
- buttonField.BorderColor = "#FFFF00";
- buttonField.Thickness = 2;
-
- // Update the form field in the PDF Viewer with the new properties
- await viewer.UpdateFormFieldsAsync(new List { buttonField });
- }
-}
-
-```
-The following image illustrates updating the appearance of a button form field in Blazor SfPdfViewer:
-
-
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/UpdateApperanceProperties.razor).
-
-### Identification & Metadata Properties
-Use [name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListItem.html#Syncfusion_Blazor_SfPdfViewer_ListItem_Name) (identifier) and [value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListItem.html#Syncfusion_Blazor_SfPdfViewer_ListItem_Value) (display/value data) on dropdown [ListItem] entries to define item metadata. These values improve option organization and facilitate management of related form fields.
-
-```cshtml
-@page "/"
-
-
-
-
-
-
-@code {
- private SfPdfViewer2 viewer;
- private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
-
- private async Task UpdateFormField()
- {
- // Retrieve the list of added form fields
- List formFields = await viewer.GetFormFieldsAsync();
- foreach (FormFieldInfo field in formFields)
- {
- if (field is DropDownField dropDown)
- {
- dropDown.Items = new List {
- new ListItem { Name = "option 1", Value = "Option 1" },
- new ListItem { Name = "option 2", Value = "Option 2" },
- new ListItem { Name = "option 3", Value = "Option 3" }
- };
- // Update form fields in the viewer with new properties
- await viewer.UpdateFormFieldsAsync(new List { dropDown });
- }
- }
- }
-}
-```
-The following image illustrates updating the metadata of a dropdown field in Blazor SfPdfViewer:
-
-
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/UpdateValueProperties.razor).
-
-### Grouping and Synchronizing Form Fields Properties
-
-When multiple fields share the same name, updates apply to all linked fields. Changes to [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_Value), [Required](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_IsRequired), [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_IsReadOnly), [Multiline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_IsMultiline), and [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_TooltipText) propagate instantly, ensuring document-wide consistency.
-
-```cshtml
-@page "/"
-
-
-
-
-
-
-@code {
- private SfPdfViewer2 viewer;
- private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
-
- private async Task UpdateFormField()
- {
- // Retrieve the list of added form fields
- List formFields = await viewer.GetFormFieldsAsync();
- FormFieldInfo radioButton = formFields[6];
- radioButton.IsReadOnly = true;
- radioButton.IsRequired = true;
- await viewer.UpdateFormFieldsAsync(new List { radioButton });
- }
-}
-```
-The following image illustrates updating linked properties of a radio button form field in Blazor SfPdfViewer:
-
-
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/UpdateLinkedProperties.razor).
-
-N> Users can also update form fields through the UI in SfPdfViewer for an intuitive, interactive experience.
-[Interactively Update Form Fields](./ui-interactions)
-
-## Delete Form Fields
-
-The [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Boolean_) method removes form fields from the document, enabling efficient management of form structures.
-
-### Delete All Form Fields
-Removes all form fields from the document using [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Boolean_) , clearing all interactive elements at once.
-
-```cshtml
-@page "/"
-@using Syncfusion.Blazor.Buttons
-
-
-Delete All Form Fields
-
-
-
-
-
-@code {
- // Reference to the PDF Viewer instance
- private SfPdfViewer2 viewer;
-
- // Path to the PDF document
- private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
-
- private async Task DeleteAllFormFields()
- {
- // Deletes all form fields from the PDF Viewer.
- await viewer.DeleteFormFieldsAsync(true);
- }
-}
-```
-The following image illustrates deleting all form fields in Blazor SfPdfViewer:
-
-
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/DeleteAllFields.razor).
-
-### Delete Selected Form Fields
-Deletes only the currently selected form field using [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Boolean_), enabling users to modify the document while keeping the rest of the form structure intact.
-
-```cshtml
-@page "/"
-@using Syncfusion.Blazor.Buttons
-
-
-Delete Selected Form Field
-
-
-
-
-
-@code {
- // Reference to the PDF Viewer instance
- private SfPdfViewer2 viewer;
-
- // Path to the PDF document
- private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
-
- private async Task DeleteSelectedFormField()
- {
- // Delete selected form field from the PDF Viewer.
- await viewer.DeleteFormFieldsAsync(false);
- }
-}
-```
-The following image illustrates deleting a selected password field in Blazor SfPdfViewer:
-
-
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/DeleteSelectedField.razor).
-
-### Delete Form Fields by IDs
-Removes specific form fields using [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Collections_Generic_List_System_String__) based on their unique identifiers, allowing precise control over which fields are deleted without affecting others. The example below deletes a single field by ID; pass multiple IDs to delete several fields at once.
-
-```cshtml
-@page "/"
-@using Syncfusion.Blazor.Buttons
-
-
-Delete Form Field By ID
-
-
-
-
-
-@code {
- // Reference to the PDF Viewer instance
- private SfPdfViewer2 viewer;
-
- // Path to the PDF document that will be loaded into the viewer
- private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
-
- // Method to delete form fields based on their ID
- private async Task DeleteFormFields()
- {
- List formFields = await viewer.GetFormFieldsAsync();
- await viewer.DeleteFormFieldsAsync(new List {formFields[0].Id}); // Delete form fields by ID
- }
-}
-```
-The following image illustrates deleting form fields by their IDs in Blazor SfPdfViewer:
-
-
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/DeleteById.razor).
-
-N> Users can also delete form fields through the UI in SfPdfViewer for an intuitive, interactive experience.
-[Interactively Delete Form Fields](./ui-interactions)
-
-## Select Form Field
-
-Form fields can be selected programmatically using [SelectFormFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SelectFormFieldAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_). Selection supports either the field's unique ID or its object reference.
-
-### Select Form Field by ID
-
-The following example demonstrates selecting a form field by passing the form field object reference to [SelectFormFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SelectFormFieldAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_). To select by unique ID instead, use the string overload of [SelectFormFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SelectFormFieldAsync_System_String_).
-
-```cshtml
-@page "/"
-@using Syncfusion.Blazor.Buttons
-
-
-Select Form Field By ID
-
-
-
-
-
-@code {
- // Reference to the PDF Viewer instance
- private SfPdfViewer2 viewer;
-
- // Path to the PDF document that will be loaded in the viewer
- private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
-
- // Method to select a form field by ID
- private async Task SelectFormFieldByID()
- {
- // Retrieve all form fields currently present in the PDF
- List formFields = await viewer.GetFormFieldsAsync();
- // Select the form field asynchronously using its ID
- await viewer.SelectFormFieldAsync(formFields[0]);
-
- }
-}
-```
-The following image illustrates selecting a button field in Blazor SfPdfViewer:
-
-
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/SelectFieldById.razor).
-
-### Select Form Field by Object Reference
-
-Optionally, retrieve all available form fields using [GetFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetFormFieldsAsync), and then select a specific field by passing its object reference to [SelectFormFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SelectFormFieldAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_).
-
-```cshtml
-@page "/"
-@using Syncfusion.Blazor.Buttons
-
-
-Select Form Field
-
-
-
-
-
-@code {
- // Reference to the PDF Viewer instance
- private SfPdfViewer2 viewer;
-
- // Path to the PDF document that will be loaded in the viewer
- private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
-
- // Method to select the first available form field in the document
- private async Task SelectFormField()
- {
- // Retrieve all form fields present in the PDF
- List formFields = await viewer.GetFormFieldsAsync();
- // Select the first form field from the list
- FormFieldInfo formField = formFields[3];
- await viewer.SelectFormFieldAsync(formField);
-
- }
-}
-```
-The following image shows selecting a checkbox field in the Blazor PDF Viewer (SfPdfViewer):
-
-
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/SelectByField.razor).
-
-N> Enable the form field interaction mode before selecting a field.
-For details, see [Interaction mode](./overview).
-
-## See also
-
-* [Overview of Form Designer](./overview)
-* [UI interactions in form Designer](./ui-interactions)
-* [Events in Form Designer](./events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/ui-interactions.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/ui-interactions.md
deleted file mode 100644
index 51b2e19b14..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/ui-interactions.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-layout: post
-title: Form Designer UI interactions in Blazor PDF Viewer | Syncfusion
-description: Learn about UI interactions in the Form Designer of the Syncfusion Blazor PDF Viewer (SfPdfViewer2) component.
-platform: document-processing
-control: SfPdfViewer
-documentation: ug
----
-
-# Form Designer UI Interactions in Blazor PDF Viewer
-
-The Form Designer in `SfPdfViewer` enables adding, editing, and manipulating form fields directly within a PDF document. It provides an intuitive interface for designing interactive forms efficiently.
-
-## Form Field Interactions
-
-### Adding Form Fields
-
-Click the **Edit Form Fields** icon in the toolbar, select the desired field type, and place it on the PDF document.
-
-
-
-N> Form fields can also be added programmatically in `SfPdfViewer` for advanced scenarios.
-[See Add form fields programmatically](./create-programmatically).
-
-### Dragging Form Fields
-
-Drag form fields to reposition them anywhere within the document. Click and hold a form field to move it to the desired location; alignment guides help ensure precise placement before releasing the field.
-
-
-
-### Resizing Form Fields
-
-Resize form fields by dragging the resize handles at the edges or corners to fit the required dimensions within the document.
-
-
-
-### Editing or Updating Form Fields
-
-Edit form fields using the Form Field Properties panel. Open the panel by selecting the Properties option from the context menu that appears when right-clicking a form field.
-
-The Form Field Properties panel consists of three tabs that provide customization options. Available options may vary by field type.
-
-N> Editing form fields can also be performed programmatically in `SfPdfViewer` for precise customization.
-[See Edit form fields programmatically](./create-programmatically).
-
-#### General Tab
-
-* Modify the field name to assign a unique identifier.
-* Add a tooltip to provide additional information about the field.
-* Set or update the value of the field.
-* Configure the field’s visibility settings.
-* Enable or disable read-only mode to prevent user modifications.
-* Mark the field as required to ensure completion before form submission.
-* Enable multiline input for text fields to allow multiple lines of text.
-
-
-
-#### Appearance Tab
-
-* Customize the font family of the text.
-* Apply bold or italic styles.
-* Adjust the font size for better readability.
-* Set the border color and fill color for visual distinction.
-* Modify the border thickness to adjust the field’s outline.
-* Align text using the alignment settings.
-* Define the maximum length of text input.
-
-
-
-#### Options Tab (For Dropdown and Listbox Fields)
-
-* Add, modify, or remove selectable options for dropdowns and list boxes.
-* Customize option lists to display the required choices for users.
-
-
-
-### Form Field Operations
-
-Manage form fields using copy, cut, paste, undo, and redo operations. Duplicate fields with Copy (Ctrl+C), move them with Cut (Ctrl+X), and insert them elsewhere with Paste (Ctrl+V).
-
-Revert the last change with Undo (Ctrl+Z) or restore an undone action with Redo (Ctrl+Y) to streamline workflow adjustments.
-
-
-
-### Deleting a Form Field
-
-Remove form fields by selecting the desired field and clicking the Delete icon in the Form Designer toolbar or by choosing Delete from the context menu.
-
-
-
-N> Form fields can also be deleted programmatically in `SfPdfViewer`.
-[See Delete form fields programmatically](./create-programmatically).
-
-## See also
-
-* [Programmatic Support in Form Designer](./create-programmatically)
-* [Events in Form Designer](./events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/custom-data.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/custom-data.md
new file mode 100644
index 0000000000..ebb309a2c5
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/custom-data.md
@@ -0,0 +1,180 @@
+---
+layout: post
+title: Add custom data to form fields in Blazor SfPdfViewer | Syncfusion
+description: Learn how to attach, update, and read custom data on PDF form fields using programmatic APIs in the Syncfusion Blazor SfPdfViewer.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Add Custom Data to PDF Form Fields in Blazor SfPdfViewer
+
+The **Syncfusion Blazor SfPdfViewer** allows you to attach **custom application-specific data** to form fields by using the CustomData property. This enables you to associate business identifiers, tags, validation hints, or workflow metadata with form fields.
+
+Custom data remains associated with the form field for the duration of the viewer session and can be accessed or updated whenever the field is queried or modified.
+
+This article explains how to:
+- [Add custom data when creating form fields programmatically](#add-custom-data-while-creating-pdf-form-fields)
+- [Update or replace custom data for existing fields](#update-or-replace-pdf-form-field-custom-data)
+- [Read custom data from form fields](#read-custom-data-from-pdf-form-fields)
+- [Apply best practices when using custom data](#best-practices)
+
+**Key Points**
+- `CustomData` is a **free form object**; you control its structure.
+- Use only **serializable values** such as objects, arrays, strings, numbers, and booleans.
+- Custom data does not affect the field appearance or behavior unless consumed by your application logic.
+
+## Add Custom Data While Creating PDF Form Fields
+
+Attach custom data at field creation by passing a `CustomData` object to the form field when using [`AddFormFieldsAsync()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__).
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using System.Collections.Generic
+
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ private async Task AddFormFieldsWithCustomData()
+ {
+ if (viewer == null) return;
+
+ // Define custom metadata
+ Dictionary customMetadata = new Dictionary
+ {
+ { "businessId", "C-1024" },
+ { "tags", new[] { "profile", "kiosk" } },
+ { "requiredRole", "admin" }
+ };
+
+ // Create a TextBox field with custom data
+ TextBoxField textField = new TextBoxField
+ {
+ Name = "Email",
+ CustomData = customMetadata,
+ Bound = new Bound { X = 146, Y = 229, Width = 200, Height = 24 }
+ };
+
+ // Add the field to the document
+ await viewer.AddFormFieldsAsync(new List { textField });
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Update or Replace PDF Form Field Custom Data
+
+Modify an existing field's `CustomData` by using the [`UpdateFormFieldsAsync()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormField_) method. Retrieve fields using [`GetFormFieldsAsync()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetFormFieldsAsync) and update the CustomData property.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+@using System.Collections.Generic
+
+Update First Field Custom Data
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ private async Task UpdateFirstFieldCustomData()
+ {
+ if (viewer == null) return;
+
+ // Get all form fields
+ List fields = await viewer.GetFormFieldsAsync();
+ if (fields.Count == 0) return;
+
+ // Get the first field
+ FormFieldInfo targetField = fields[0];
+
+ // Update custom data
+ Dictionary updatedCustomData = new Dictionary
+ {
+ { "group", "profile" },
+ { "flags", new[] { "pii", "masked" } },
+ { "updatedAt", DateTime.Now.Ticks }
+ };
+
+ targetField.CustomData = updatedCustomData;
+
+ // Update the field
+ await viewer.UpdateFormFieldsAsync(targetField);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**Tip:**
+Merge new values into the existing `CustomData` object before calling [`UpdateFormFieldsAsync()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormField_) to avoid unintentionally overwriting existing metadata.
+
+## Read Custom Data from PDF Form Fields
+
+Access the `CustomData` property from any form field at any point in the application flow using [`GetFormFieldsAsync()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetFormFieldsAsync), for example:
+- after the document is loaded
+- during save or submit operations
+- while performing validation or conditional routing
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ private async Task OnDocumentLoaded()
+ {
+ if (viewer == null) return;
+
+ // Get all form fields
+ List fields = await viewer.GetFormFieldsAsync();
+
+ // Access custom data from each field
+ foreach (FormFieldInfo field in fields)
+ {
+ Console.WriteLine($"Field: {field.Name}");
+ if (field.CustomData != null)
+ {
+ Console.WriteLine($"Custom Data: {System.Text.Json.JsonSerializer.Serialize(field.CustomData)}");
+ }
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Best Practices
+
+- Treat `CustomData` as application metadata, not display data.
+- Use it to drive business rules, validation logic, and workflow decisions.
+- Keep the data minimal and structured for easy processing.
+- When cloning or copying form fields, ensure `CustomData` is copied or updated as required.
+
+N> For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Form%20Designer/Components/Pages).
+
+## See Also
+
+- [Programmatic Support for Form Designer](./create-programmatically)
+- [Create form fields programmatically](./create-programmatically)
+- [Update form fields programmatically](./create-programmatically)
+- [Group form fields](./group-form-fields)
+- [Form constraints](./form-constrain)
+- [Read form field values](./read-form-field-values)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/custom-font.md
similarity index 95%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/custom-font.md
index 191fd39846..cb5caed202 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/custom-font.md
@@ -15,8 +15,9 @@ The Blazor SfPdfViewer supports loading, using, and saving custom fonts for form
To ensure correct rendering and saving of form fields that use custom fonts (especially when fonts are not installed on the host system), set the `FallbackFontCollection` property and load the TTF files the application can access. Add those font family names to the `FontFamilies` (string[]) property so the fonts appear in the Font Family dropdown in the property dialog. Ensure TTF files are available at the configured path (for example, `wwwroot/Data`) and that font licenses permit distribution with the application.
-```cshtml
-@page "/"
+{% tabs %}
+{% highlight razor %}
+
@@ -39,8 +40,9 @@ To ensure correct rendering and saving of form fields that use custom fonts (esp
pdfViewer!.FallbackFontCollection.Add("Ojuju", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Ojuju-Regular.ttf")));
}
}
-```
-
+{% endhighlight %}
+{% endtabs %}
+
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20FormFields).
@@ -54,8 +56,9 @@ The Blazor SfPdfViewer allows loading, editing, and saving custom fonts for sign
To ensure correct rendering and saving of signatures that use custom fonts (especially when those fonts are not installed on the host system), set the `FallbackFontCollection` property and load the TTF files the application can access. Add the font family names to the `SignatureFonts` (string[]) property so they appear in the signature dialog. Verify that the font files are reachable at the configured path (for example, `wwwroot/Data`) and that licensing allows distribution.
-```cshtml
-@page "/"
+{% tabs %}
+{% highlight razor %}
+
@@ -80,8 +83,9 @@ To ensure correct rendering and saving of signatures that use custom fonts (espe
pdfViewer!.FallbackFontCollection.Add("Inspiration", new MemoryStream(System.IO.File.ReadAllBytes("wwwroot/Data/Inspiration-Regular.ttf")));
}
}
-```
-
+{% endhighlight %}
+{% endtabs %}
+
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20Signature%20Field).
@@ -89,7 +93,8 @@ When using Google Fonts or other externally hosted fonts with the PDF Viewer, lo
The following example illustrates how to load custom fonts in FreeText annotations using fonts from Google Fonts or other external sources.
-```cshtml
+{% tabs %}
+{% highlight razor %}
-```
+{% endhighlight %}
+{% endtabs %}
N> If external fonts are not loaded in the environment, importing and rendering FreeText annotations that reference those fonts may show minor differences. This typically occurs only with fonts referenced from web-based sources.
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/export-import-formfields.md
similarity index 59%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/overview.md
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/export-import-formfields.md
index 9c8a3dd47a..02a10350bd 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/export-import-formfields.md
@@ -1,169 +1,13 @@
---
layout: post
-title: Overview of the Form Designer in SfPdfViewer for Blazor | Syncfusion
-description: Learn about the Form Designer feature in SfPdfViewer for Blazor. Discover how to create, edit, and manage interactive form fields within PDF documents.
+title: Export and Import Form Fields Data SfPdfViewer in Blazor | Syncfusion
+description: Learn here all about How to Export and Import Form Fields Data in the Syncfusion Blazor SfPdfViewer.
platform: document-processing
control: SfPdfViewer
documentation: ug
---
-# Overview of the Form Designer in Blazor SfPdfViewer Component
-
-The Form Designer in `SfPdfViewer` enables creation, editing, and management of interactive form fields. The designer can be shown or hidden dynamically and updates related toolbar elements. Supported form fields include [TextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html), [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PasswordField.html), [Radio Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.RadioButtonField.html), [Check Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CheckBoxField.html), [DropDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.DropDownField.html), [List Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListBoxField.html), [Signature Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureField.html), and [Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ButtonField.html). These fields support custom names, grouping, and consistent data across document pages.
-
-
-
-Fields retain their properties and data when a document is downloaded or reloaded, including large documents. Core editing operations such as cut, copy, paste, zoom, and resize preserve field state. Additional capabilities include read-only and required field modes, validation, appearance customization, undo/redo, and form submission controls.
-
-## Supported form fields
-
-`SfPdfViewer` supports the following interactive form fields used for structured data collection:
-
-1. [TextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html)
-2. [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PasswordField.html)
-3. [Check Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CheckBoxField.html)
-4. [Radio Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.RadioButtonField.html)
-5. [List Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListBoxField.html)
-6. [DropDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.DropDownField.html)
-7. [Signature Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureField.html)
-8. [Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ButtonField.html)
-
-These fields support customization and consistent data across documents, enabling well-structured, user-friendly PDF forms.
-
-## Form field management
-
-The `SfPdfViewer` supports opening, saving, and printing PDFs while preserving form field data and properties.
-
-### Open PDF documents with interactive form fields
-
-`SfPdfViewer` preserves interactive form fields and their properties when loading a PDF. This enables in-viewer modifications, validation, and data retention even in large documents. Use the Open icon in the toolbar to load a saved PDF containing form fields.
-
-
-
-See [Open PDF files in SfPdfViewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/opening-pdf-file) for additional details.
-
-### Saving form fields
-
-`SfPdfViewer` preserves form fields and their properties when exporting or downloading a document. Use the Download icon to save a PDF that retains field data and appearance for future use.
-
-
-
-See [Saving PDF file in Blazor SfPdfViewer component](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/saving-pdf-file) for more details.
-
-### Printing form fields
-
-`SfPdfViewer` supports multiple visibility modes to control whether form fields appear in the viewer and in printed output.
-
-To control the [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Visibility) of form fields in print mode, the [VisibilityMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html) enum provides the following options:
-
-#### Available visibility modes
-
-| **Mode** | **Behavior** |
-|--------------------------|-------------|
-| [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html#Syncfusion_Blazor_SfPdfViewer_VisibilityMode_Visible) | Always visible in both viewer and print. |
-| [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html#Syncfusion_Blazor_SfPdfViewer_VisibilityMode_Hidden) | Completely hidden in both viewer and print. |
-| [VisibleNotPrintable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html#Syncfusion_Blazor_SfPdfViewer_VisibilityMode_VisibleNotPrintable) | Visible in viewer but excluded from printing. |
-| [HiddenPrintable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html#Syncfusion_Blazor_SfPdfViewer_VisibilityMode_HiddenPrintable) | Hidden in viewer but appears in print. |
-
-N> The [**Visible**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html#Syncfusion_Blazor_SfPdfViewer_VisibilityMode_Visible) mode is the **default** for form fields in `SfPdfViewer`.
-
-This flexibility enables precise control over which form fields are visible in the viewer and in print output.
-
-The following code snippet shows how to add a form field that is visible in the viewer but excluded from printing in the SfPdfViewer component.
-
-```cshtml
-@using Syncfusion.Blazor.SfPdfViewer;
-@using Syncfusion.Blazor.Buttons;
-
-Add Visible Not Printable Textbox
-
-
-
-@code {
- // Reference to the SfPdfViewer2 instance
- SfPdfViewer2 PdfViewerInstance { get; set; }
-
- // Adds a form field that appears in the viewer but is excluded from printing.
- private async void AddVisibleNotPrintField()
- {
- await PdfViewerInstance.AddFormFieldsAsync(
- [new TextBoxField {
- Name = "VisibleNotPrintable",
- Value = "VisibleNotPrintable",
- Bounds = new Bound { X = 270, Y = 620, Height = 30, Width = 200 },
- PageNumber = 1,
- Visibility = VisibilityMode.VisibleNotPrintable
- }]
- );
- }
-}
-```
-
-The following image shows the viewer.
-
-
-
-The following image shows the print preview.
-
-
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/Visibility.razor).
-
-### Enable or disable Form Designer
-
-The Form Designer module allows users to add and modify form fields inside a PDF document.
-
-To show the Form Designer icon on the toolbar in `SfPdfViewer2`, set the [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormDesigner) property to `true`. No manual module injection is required for `SfPdfViewer2`.
-
-If `EnableFormDesigner` is `false`, the viewer operates in form-filling mode only and the Form Designer UI is not available.
-
-N> By default, `EnableFormDesigner` is `true`.
-
-#### Example: enable the Form Designer toolbar
-
-```cshtml
-@using Syncfusion.Blazor.SfPdfViewer;
-
-
-
-
-```
-
-
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/EnableFormDesigner.razor).
-
-### Enable or disable Designer Mode
-
-Designer Mode allows direct interaction with form field design elements.
-
-When Designer Mode is enabled, users can edit, move, and manipulate form fields. When disabled, fields remain editable only for form filling.
-
-N> By default, [IsDesignerMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsDesignerMode) is `false` (fields can be filled but not modified).
-
-The following example demonstrates how to enable Designer Mode using `SfPdfViewer2`.
-
-```cshtml
-@using Syncfusion.Blazor.SfPdfViewer;
-@using Syncfusion.Blazor.Buttons;
-
-
-
-
-```
-
-
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/InteractionMode.razor).
-
-## Export and import form field data
+# Export and import form field data in Blazor SfPdfViewer
The `SfPdfViewer` control supports exporting and importing form field data in multiple formats. This enables saving, transferring, or restoring form field values using the following formats:
@@ -175,9 +19,9 @@ The `SfPdfViewer` control supports exporting and importing form field data in mu
The [ExportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ExportFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) and [ImportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ImportFormFieldsAsync_System_IO_Stream_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) methods export or import form field data as a stream, which can be applied to another PDF document.
-### Types of Form Fields Export and Import
+## Types of Form Fields Export and Import
-#### Export and import as XML
+### Export and import as XML
Exports form field data in XML format and allows importing the same data back into a PDF document.
@@ -185,7 +29,8 @@ N> Setting [FormFieldDataFormat](https://help.syncfusion.com/cr/blazor/Syncfusio
The following code shows how to export the form fields as an XML data stream and import that data from the stream into the current PDF document via a button click.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
@@ -232,13 +77,14 @@ The following code shows how to export the form fields as an XML data stream and
}
}
}
-```
+{% endhighlight %}
+{% endtabs %}
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/XMLFormat.razor).
-#### Export and import as FDF
+### Export and import as FDF
Exports form field data in Forms Data Format (FDF) and allows importing the same data back into a PDF document.
@@ -246,7 +92,8 @@ N> Setting [FormFieldDataFormat](https://help.syncfusion.com/cr/blazor/Syncfusio
The following code demonstrates exporting form fields as FDF to a stream and importing the data back into the current PDF document through a button click.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
@@ -290,13 +137,14 @@ The following code demonstrates exporting form fields as FDF to a stream and imp
}
}
}
-```
+{% endhighlight %}
+{% endtabs %}
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/FDFFormat.razor).
-#### Export and import as XFDF
+### Export and import as XFDF
Similar to FDF, but in XML-based format, XFDF ensures structured data handling for form fields.
@@ -304,7 +152,8 @@ N> Setting [FormFieldDataFormat](https://help.syncfusion.com/cr/blazor/Syncfusio
The following code shows how to export the form fields as an XFDF data stream and import that data from the stream into the current PDF document via a button click.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
@@ -347,13 +196,14 @@ The following code shows how to export the form fields as an XFDF data stream an
}
}
}
-```
+{% endhighlight %}
+{% endtabs %}
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/XFDFFormat.razor).
-#### Export and import as JSON
+### Export and import as JSON
Exports form field data in JSON format, which can be easily read and imported back into the PDF Viewer.
@@ -361,7 +211,8 @@ N> Setting [FormFieldDataFormat](https://help.syncfusion.com/cr/blazor/Syncfusio
The following code demonstrates exporting form fields as JSON to a stream and importing the data back into the current PDF document through a button click.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
@@ -405,13 +256,14 @@ The following code demonstrates exporting form fields as JSON to a stream and im
}
}
}
-```
+{% endhighlight %}
+{% endtabs %}
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/JSONFormat.razor).
-#### Export and import as an object
+### Export and import as an object
The Form fields can be exported and imported as an object, which is useful for in-memory processing and quick data manipulation.
@@ -419,7 +271,8 @@ The [ExportFormFieldsAsObjectAsync](https://help.syncfusion.com/cr/blazor/Syncfu
The following code shows how to export form fields as an object and import that data into the current PDF document via a button click.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
@@ -463,19 +316,21 @@ The following code shows how to export form fields as an object and import that
}
}
}
-```
+{% endhighlight %}
+{% endtabs %}
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/ObjectFormat.razor).
-#### Export Form Fields as a JSON File
+### Export Form Fields as a JSON File
This method allows exporting the form field data and saving it as a JSON file, which can be stored or shared for future use.
N> If [ExportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ExportFormFieldsAsync_System_String_) is called with a string path (file name or path), the form field data is exported in JSON file format.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
@@ -497,7 +352,8 @@ N> If [ExportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.B
await PdfViewerInstance.ExportFormFieldsAsync("");
}
}
-```
+{% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/flatten-form-fields.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/flatten-form-fields.md
new file mode 100644
index 0000000000..2a6291b2fc
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/flatten-form-fields.md
@@ -0,0 +1,115 @@
+---
+layout: post
+title: Flatten PDF form fields in Blazor SfPdfViewer | Syncfusion
+description: Learn here all about how to flatten interactive PDF form fields before download in Blazor SfPdfViewer.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Flatten PDF form fields in Blazor SfPdfViewer
+
+## Overview
+
+Flattening PDF forms converts interactive fields such as textboxes, dropdowns, checkboxes, signatures, etc., into non‑editable page content. Use this when you want to protect filled data, finalize a document, or prepare it for secure sharing.
+
+## Prerequisites
+
+- Blazor SfPdfViewer installed and configured
+- Basic viewer setup completed. For more information, see [getting started guide](../getting-started/web-app)
+
+## Flatten forms before downloading PDF
+
+1. Add a reference to the [`SfPdfViewer2`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html) component using `@ref` so you can access viewer APIs.
+2. Retrieve the current document from the viewer using [`GetDocumentAsync()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetDocumentAsync) as a byte array.
+3. Load the document into [`PdfLoadedDocument`](https://help.syncfusion.com/cr/file-formats/Syncfusion.Pdf.Parsing.PdfLoadedDocument.html) from the Syncfusion PDF Library.
+4. Set the `Flatten` property to `true` on both form fields and annotations to convert them to non-editable content.
+5. Save the flattened PDF to a byte array and reload it into the viewer using [`LoadAsync()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_LoadAsync_System_Byte___).
+6. Download the flattened PDF using [`DownloadAsync()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DownloadAsync).
+
+## Complete example
+
+{% tabs %}
+{% highlight razor %}
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Pdf
+@using Syncfusion.Pdf.Parsing
+
+Flatten
+
+
+
+
+@code {
+ private SfPdfViewer2? Viewer;
+ public string DocumentPath { get; set; } = "wwwroot/data/form-filling-document.pdf";
+
+ private async Task FlattenDownload()
+ {
+ if (Viewer is null) return;
+
+ // Get current document from viewer as byte array
+ byte[] bytes = await Viewer.GetDocumentAsync();
+
+ // Load into PdfLoadedDocument for flattening
+ PdfLoadedDocument loadedDocument = new PdfLoadedDocument(bytes);
+
+ // Flatten form fields
+ if (loadedDocument.Form != null)
+ {
+ loadedDocument.Form.Flatten = true;
+ }
+
+ // Flatten annotations on all pages
+ foreach (PdfLoadedPage page in loadedDocument.Pages)
+ {
+ page.Annotations.Flatten = true;
+ }
+
+ // Save flattened PDF to byte array
+ byte[] flattenedBytes;
+ using (MemoryStream stream = new MemoryStream())
+ {
+ loadedDocument.Save(stream);
+ flattenedBytes = stream.ToArray();
+ }
+
+ loadedDocument.Close(true);
+
+ // Reload flattened document into viewer
+ await Viewer.LoadAsync(flattenedBytes);
+
+ // Download the flattened PDF
+ await Viewer.DownloadAsync();
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Expected result
+
+- The downloaded or "Save As" PDF will contain the visible appearance of filled form fields as static, non-editable content.
+- Form fields will no longer be interactive or editable in common PDF readers.
+
+## Troubleshooting
+
+- If Viewer is null, ensure `@ref="Viewer"` is present and the document is loaded before invoking [`GetDocumentAsync()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetDocumentAsync).
+- Null reference exception: Add a null check using `if (Viewer is null) return;` before accessing viewer properties.
+- Ensure the Syncfusion.Pdf NuGet package is installed for `PdfLoadedDocument` and flattening functionality.
+- After flattening, use [`LoadAsync()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_LoadAsync_System_Byte___) to reload the flattened PDF into the viewer.
+
+N> For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Form%20Designer/Components/Pages).
+
+## Related topics
+
+- [GetDocumentAsync API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetDocumentAsync)
+- [LoadAsync API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_LoadAsync_System_Byte___)
+- [DownloadAsync API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DownloadAsync)
+- [Form Designer overview](./overview)
+- [Create form fields](./create-form-fields)
+- [Read Form Field Values in Blazor SfPdfViewer](./read-form-field-values)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-constrain.md
new file mode 100644
index 0000000000..d48b2ce836
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-constrain.md
@@ -0,0 +1,273 @@
+---
+layout: post
+title: Form constraints in the Blazor SfPdfViewer component | Syncfusion
+description: Learn how to configure form field constraints such as IsReadOnly and IsRequired in the Syncfusion Blazor SfPdfViewer.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# PDF form field flags in Blazor SfPdfViewer
+
+The **Syncfusion Blazor SfPdfViewer** allows you to control how users interact with form fields and how those fields behave during validation by applying **form field flags**. These flags define whether a form field can be modified and whether it is mandatory.
+
+This topic explains:
+- [Supported form field flags](#supported-pdf-form-field-flags)
+- [How each constraint affects field behavior](#key-actions)
+- [How to apply flags during field creation](#apply-pdf-form-field-flags-using-the-ui)
+- [How to update flags on existing fields](#update-flags-on-existing-fields-programmatically)
+
+## Supported PDF Form Field Flags
+
+The following flags are supported in the PDF Viewer:
+
+- [IsReadOnly](#make-fields-read-only)
+ Prevents users from modifying the form field in the UI while still allowing updates through APIs.
+
+- [IsRequired](#mark-fields-as-required)
+ Marks the form field as mandatory and includes it in form field validation.
+
+## Key Actions
+
+### Make Fields Read Only
+Use the **IsReadOnly** property to prevent users from modifying a form field through the UI. This is useful for displaying pre-filled or calculated values that should not be changed by the user.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+
+@code {
+ // Reference to the PDF Viewer instance
+ private SfPdfViewer2? viewer;
+
+ // Path to the PDF document to be loaded in the viewer
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ // Method triggered when the document is loaded
+ private async Task OnDocumentLoaded()
+ {
+ if (viewer == null) return;
+
+ List formFields = new List
+ {
+ // Read-only Textbox
+ new TextBoxField
+ {
+ Name = "EmployeeId",
+ Bounds = new Bound { X = 146, Y = 229, Width = 150, Height = 24 },
+ IsReadOnly = true,
+ Value = "EMP-0001"
+ },
+ // Read-only Signature field
+ new SignatureField
+ {
+ Name = "ApplicantSign",
+ Bounds = new Bound { X = 57, Y = 923, Width = 200, Height = 43 },
+ IsReadOnly = true,
+ TooltipText = "Sign to accept the terms"
+ }
+ };
+
+ await viewer.AddFormFieldsAsync(formFields);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Mark Fields as Required
+Use the **IsRequired** property to mark form fields as mandatory. To enforce this constraint, enable form field validation and validate fields before allowing actions such as printing or downloading.
+
+- Enable validation using [EnableFormFieldsValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormFieldsValidation)
+- [Validate fields](./form-validation) using [ValidateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ValidateFormFieldsAsync)
+
+If required fields are empty, validation can prevent further actions.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+
+@code {
+ // Reference to the PDF Viewer instance
+ private SfPdfViewer2? viewer;
+
+ // Path to the PDF document to be loaded in the viewer
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ // Method triggered when the document is loaded
+ private async Task OnDocumentLoaded()
+ {
+ if (viewer == null) return;
+
+ List formFields = new List
+ {
+ new TextBoxField
+ {
+ Name = "Email",
+ Bounds = new Bound { X = 146, Y = 260, Width = 220, Height = 24 },
+ IsRequired = true,
+ TooltipText = "Email is required"
+ }
+ };
+
+ await viewer.AddFormFieldsAsync(formFields);
+ }
+
+ // Validation event handler
+ private void OnValidateFormFields(ValidateFormFieldsArgs args)
+ {
+ Dictionary unfilledFields = args.UnfilledFields;
+ foreach (FormFieldInfo field in unfilledFields)
+ {
+ Console.WriteLine($"Field Name: {field.Key}, Default Value: {field.Value}");
+ // Further processing of unfilled fields
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Apply PDF Form Field Flags Using the UI
+
+**Steps**
+1. Enable **Form Designer** mode in the SfPdfViewer.
+2. Select an existing form field on the PDF page.
+3. Right-click the field, open the context menu, and select Properties.
+4. Configure the required constraint options.
+5. Click OK to apply changes and close the properties popover.
+
+Changes are reflected immediately in the viewer.
+
+
+
+## Apply PDF Form Field Flags Programmatically
+
+You can apply or modify form field flags in the following ways.
+
+### Apply flags when creating fields
+Pass the flags properties when creating form fields using [AddFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__).
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+
+@code {
+ // Reference to the PDF Viewer instance
+ private SfPdfViewer2? viewer;
+
+ // Path to the PDF document to be loaded in the viewer
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ // Method triggered when the document is loaded
+ private async Task OnDocumentLoaded()
+ {
+ if (viewer == null) return;
+
+ List formFields = new List
+ {
+ // Read-only Textbox that is not required
+ new TextBoxField
+ {
+ Name = "EmployeeId",
+ Bounds = new Bound { X = 146, Y = 229, Width = 150, Height = 24 },
+ IsReadOnly = true,
+ IsRequired = false,
+ Value = "EMP-0001"
+ },
+ // Required Signature field
+ new SignatureField
+ {
+ Name = "ApplicantSign",
+ Bounds = new Bound { X = 57, Y = 923, Width = 200, Height = 43 },
+ IsReadOnly = false,
+ IsRequired = true,
+ TooltipText = "Sign to accept the terms"
+ }
+ };
+
+ await viewer.AddFormFieldsAsync(formFields);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Update flags on existing fields programmatically
+Use the [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormField_) method to modify constraint values on existing form fields.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+
+@code {
+ // Reference to the PDF Viewer instance
+ private SfPdfViewer2? viewer;
+
+ // Path to the PDF document to be loaded in the viewer
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ // Method triggered when the document is loaded
+ private async Task OnDocumentLoaded()
+ {
+ if (viewer == null) return;
+
+ // 1) Add a sample textbox
+ List formFields = new List
+ {
+ new TextBoxField
+ {
+ Name = "Email",
+ Bounds = new Bound { X = 146, Y = 260, Width = 220, Height = 24 }
+ }
+ };
+
+ await viewer.AddFormFieldsAsync(formFields);
+
+ // 2) Retrieve and update constraint flags
+ List allFields = await viewer.GetFormFieldsAsync();
+ FormFieldInfo? field = allFields.FirstOrDefault(f => f.Name == "Email");
+
+ if (field is TextBoxField emailField)
+ {
+ emailField.IsReadOnly = false;
+ emailField.IsRequired = true;
+ emailField.TooltipText = "Enter a valid email";
+
+ await viewer.UpdateFormFieldsAsync(new List { emailField });
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Form%20Designer/Components/Pages).
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Create form fields](./create-form-fields)
+- [Modify form fields](./modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to PDF form fields](./custom-data)
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Download_PDF_Document_With_Form_Fileds.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Download_PDF_Document_With_Form_Fileds.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Download_PDF_Document_With_Form_Fileds.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Download_PDF_Document_With_Form_Fileds.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Enable_Disable_Designer_Mode.gif b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Enable_Disable_Designer_Mode.gif
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Enable_Disable_Designer_Mode.gif
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Enable_Disable_Designer_Mode.gif
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Enable_Form_Designer_Module.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Enable_Form_Designer_Module.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Enable_Form_Designer_Module.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Enable_Form_Designer_Module.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_Import_FDF_Format.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_Import_FDF_Format.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_Import_FDF_Format.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_Import_FDF_Format.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_Import_JSON_Format.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_Import_JSON_Format.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_Import_JSON_Format.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_Import_JSON_Format.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_Import_Object_Format.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_Import_Object_Format.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_Import_Object_Format.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_Import_Object_Format.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_Import_XFDF_Format.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_Import_XFDF_Format.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_Import_XFDF_Format.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_Import_XFDF_Format.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_Import_XML_Format.gif b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_Import_XML_Format.gif
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_Import_XML_Format.gif
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_Import_XML_Format.gif
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_JSON_File.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_JSON_File.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_JSON_File.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_JSON_File.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_Submit_JSON.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_Submit_JSON.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Export_Submit_JSON.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Export_Submit_JSON.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Form_Designer_Feature.gif b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Form_Designer_Feature.gif
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Form_Designer_Feature.gif
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Form_Designer_Feature.gif
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Form_Field_with_VisibleNotPrintable_Mode_PrintPreview.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Form_Field_with_VisibleNotPrintable_Mode_PrintPreview.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Form_Field_with_VisibleNotPrintable_Mode_PrintPreview.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Form_Field_with_VisibleNotPrintable_Mode_PrintPreview.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Form_Field_with_VisibleNotPrintable_Mode_Viewer.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Form_Field_with_VisibleNotPrintable_Mode_Viewer.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Form_Field_with_VisibleNotPrintable_Mode_Viewer.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Form_Field_with_VisibleNotPrintable_Mode_Viewer.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Open_PDF_Document_With_Exsiting_Form_Fileds.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Open_PDF_Document_With_Exsiting_Form_Fileds.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/Open_PDF_Document_With_Exsiting_Form_Fileds.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/Open_PDF_Document_With_Exsiting_Form_Fileds.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/add-formfields-formdesigner-sfpdfviewer.gif b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/add-formfields-formdesigner-sfpdfviewer.gif
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/add-formfields-formdesigner-sfpdfviewer.gif
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/add-formfields-formdesigner-sfpdfviewer.gif
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-button.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-button.png
new file mode 100644
index 0000000000..ba49193fa3
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-button.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-checkbox.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-checkbox.png
new file mode 100644
index 0000000000..8ba2b670eb
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-checkbox.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-dropdown.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-dropdown.png
new file mode 100644
index 0000000000..b05c237639
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-dropdown.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-constraint.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-constraint.png
new file mode 100644
index 0000000000..22d69860c7
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-constraint.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-add.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-add.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-add.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-add.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-delete-all.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-delete-all.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-delete-all.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-delete-all.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-delete-ids.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-delete-ids.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-delete-ids.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-delete-ids.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-delete-selected.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-delete-selected.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-delete-selected.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-delete-selected.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-linked-properties.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-linked-properties.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-linked-properties.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-linked-properties.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-select-field.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-select-field.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-select-field.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-select-field.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-select-id.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-select-id.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-select-id.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-select-id.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-setmode.gif b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-setmode.gif
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-setmode.gif
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-setmode.gif
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-setting-thickness.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-setting-thickness.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-setting-thickness.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-setting-thickness.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-update-apperance.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-update-apperance.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-update-apperance.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-update-apperance.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-update-value.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-update-value.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/blazor-pdfviewer-form-designer-update-value.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-form-designer-update-value.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-listbox.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-listbox.png
new file mode 100644
index 0000000000..654e3168ce
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-listbox.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-password.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-password.png
new file mode 100644
index 0000000000..f0255657f8
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-password.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-radiobutton.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-radiobutton.png
new file mode 100644
index 0000000000..07db6d1a69
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-radiobutton.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-signature.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-signature.png
new file mode 100644
index 0000000000..4eef837328
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-signature.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-textbox.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-textbox.png
new file mode 100644
index 0000000000..f9498a430c
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/blazor-pdfviewer-textbox.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/custom_font_support_for_form_fields.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/custom_font_support_for_form_fields.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/custom_font_support_for_form_fields.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/custom_font_support_for_form_fields.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/custom_font_support_signature_fields.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/custom_font_support_signature_fields.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/custom_font_support_signature_fields.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/custom_font_support_signature_fields.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/delete-formfields-formdesigner-sfpdfviewer.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/delete-formfields-formdesigner-sfpdfviewer.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/delete-formfields-formdesigner-sfpdfviewer.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/delete-formfields-formdesigner-sfpdfviewer.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/drag-formfields-formdesigner-sfpdfviewer.gif b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/drag-formfields-formdesigner-sfpdfviewer.gif
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/drag-formfields-formdesigner-sfpdfviewer.gif
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/drag-formfields-formdesigner-sfpdfviewer.gif
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/dropdown-properypanel-options-sfpdfviewer.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/dropdown-properypanel-options-sfpdfviewer.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/dropdown-properypanel-options-sfpdfviewer.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/dropdown-properypanel-options-sfpdfviewer.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-button.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-button.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-button.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-button.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-checkBox.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-checkBox.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-checkBox.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-checkBox.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-delete.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-delete.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-delete.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-delete.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-dropdown-listbox.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-dropdown-listbox.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-dropdown-listbox.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-dropdown-listbox.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-listbox.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-listbox.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-listbox.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-listbox.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-password.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-password.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-password.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-password.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-properties.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-properties.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-properties.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-properties.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-radio.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-radio.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-radio.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-radio.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-signature.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-signature.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-signature.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-signature.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-textbox-added.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-textbox-added.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-textbox-added.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-textbox-added.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-textbox.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-textbox.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-textbox.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-textbox.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-toolbar.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-toolbar.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/form-designer-toolbar.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/form-designer-toolbar.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/formfield-operations-sfpdfviewer.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/formfield-operations-sfpdfviewer.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/formfield-operations-sfpdfviewer.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/formfield-operations-sfpdfviewer.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/password-properypanel-apperance-formdesigner-sfpdfviewer.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/password-properypanel-apperance-formdesigner-sfpdfviewer.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/password-properypanel-apperance-formdesigner-sfpdfviewer.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/password-properypanel-apperance-formdesigner-sfpdfviewer.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/resize-formfields-formdesigner-sfpdfviewer.gif b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/resize-formfields-formdesigner-sfpdfviewer.gif
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/resize-formfields-formdesigner-sfpdfviewer.gif
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/resize-formfields-formdesigner-sfpdfviewer.gif
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/textbox-propertypanel-sfpdfviewer.png b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/textbox-propertypanel-sfpdfviewer.png
similarity index 100%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-images/textbox-propertypanel-sfpdfviewer.png
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-images/textbox-propertypanel-sfpdfviewer.png
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-in-mobile-view.md
similarity index 95%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-in-mobile-view.md
index c426ac6b1c..f1d4a0587e 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer-in-mobile-view.md
@@ -95,6 +95,4 @@ To delete a form field, select it. The Delete icon appears in the form designer
* [Mobile Toolbar](../toolbar-customization/mobile-toolbar)
* [Annotations in Mobile View](../annotation/annotations-in-mobile-view)
-* [Form designer overview](../form-designer/overview)
-* [UI interactions](../form-designer/ui-interactions)
-* [Create form fields programmatically](../form-designer/create-programmatically)
+* [Form designer overview](../form-designer/overview)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer.md
new file mode 100644
index 0000000000..297b155489
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-designer.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: Form Designer and Toolbar Customization in Blazor SfPdfViewer | Syncfusion
+description: Learn here all about form designer and toolbar in Syncfusion Blazor SfPdfViewer component and more.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Designer in Blazor SfPdfViewer
+
+When **Form Designer mode** is enabled in the Syncfusion [Blazor SfPdfViewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/overview), a default Form Designer user interface is displayed. This UI includes a built in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop down lists, list boxes, and signature and initial fields.
+
+Using the Form Designer UI, users can place form fields on the PDF, move and resize them, configure field and widget properties, preview the designed form, and remove fields when required. The Form Designer toolbar can also be shown or hidden and customized to control the available tools based on application requirements, enabling flexible and interactive form design directly within the viewer.
+
+## Key Features
+
+**Add Form Fields:**
+The following form fields can be added to the PDF:
+
+- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
+- [Check box](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [Radio button](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [Dropdown List](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [List box](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
+
+**Edit Form Fields:**
+Form fields can be moved, resized, aligned, distributed, copied, pasted, and have changes undone or redone.
+
+**Set Field Properties:**
+Field properties such as name, value, font, color, border, alignment, visibility, tab order, and required or read-only state can be configured.
+
+**Control Field Behavior:**
+Field behavior can be controlled, including enabling or disabling read-only mode, showing or hiding fields, and determining whether fields appear when printing the document.
+
+**Manage Form Fields:**
+Form fields can be selected, grouped or ungrouped, reordered, and deleted as needed.
+
+**Save and Print Forms:**
+Designed form fields can be saved into the PDF document and printed with their appearances.
+
+## Design Forms with UI interaction
+
+When [Form Designer mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_EnableFormDesigner) is enabled in the Syncfusion [Blazor SfPdfViewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/overview), a default [Form Designer user interface (UI)](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/form-designer) is displayed. This UI provides a built in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer.
+
+
+
+For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) in Blazor SfPdfViewer documentation.
+
+### Enable Form Designer
+
+Form design features are enabled by setting the [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html#Syncfusion_Blazor_SfPdfViewer_SfPdfViewer2_EnableFormDesigner) property to `true`. This property controls whether the Form Designer option appears in the main toolbar.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Form Designer Toolbar
+
+The **Form Designer toolbar** appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as:
+
+- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
+- [Check box](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [Radio button](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [Dropdown List](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [List box](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
+
+#### Show or Hide the Built-in Form Designer Toolbar
+
+The visibility of the Form Designer toolbar is controlled programmatically based on your application requirements. Refer to the toolbar customization documentation for detailed examples on showing or hiding the Form Designer toolbar at runtime.
+
+- The Form Designer toolbar is shown when form design is required.
+- The toolbar can be hidden to provide a cleaner viewing experience.
+
+#### Customize the Built-in Form Designer Toolbar
+
+The Form Designer toolbar can be customized by configuring toolbar items in the Blazor SfPdfViewer component. This customization helps limit the available tools and simplify the user interface.
+
+For more information on toolbar customization, refer to the [toolbar customization](../toolbar-customization/form-designer-toolbar) documentation.
+
+**Key Points**
+- Only the toolbar items listed are included, in the exact order specified.
+- Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI.
+
+### Adding Form Fields
+
+Each toolbar item in the Form Designer toolbar allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document.
+
+
+
+For more information about creating form fields in the PDF Viewer, refer to the [Form Creation in Blazor SfPdfViewer documentation](./manage-form-fields/create-form-fields#create-form-fields-using-the-form-designer-ui).
+
+### Move, Resize, and Edit Form Fields
+
+Fields can be moved, resized, and edited directly in the PDF Viewer using the Form Designer.
+
+- A field is moved by selecting it and dragging it to the required position.
+
+- Fields are resized using the handles displayed on the field boundary.
+
+
+
+- Selecting a field opens the Form Field Properties panel, which allows modification of the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties panel is closed.
+
+For more information, see [Editing Form Fields](./manage-form-fields/modify-form-fields)
+
+### Edit Form Field properties
+
+The **Properties** panel lets you customize the styles of form fields. Open the panel by selecting the **Properties** option in a field's context menu.
+
+
+
+### Deleting Form Fields
+
+A form field is removed by selecting it and either clicking the **Delete** option in the Form Designer toolbar or pressing the **Delete** key on the keyboard. The selected form field and its associated widget annotation are permanently removed from the page.
+
+For more information, see [Deleting Form Fields](./manage-form-fields/remove-form-fields)
+
+## See Also
+
+- [Filling PDF Forms](./form-filling)
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/style-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields
+- [Grouping form fields](./group-form-fields)
+- [Form Constrains](./form-constrain)
+- [Custom Data](./custom-data)
+- [Import](./import-export-form-fields/import-form-fields)/[Export Form Data](./import-export-form-fields/export-form-fields)
+- [Form field events](./form-field-events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-field-events.md
similarity index 95%
rename from Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md
rename to Document-Processing/PDF/PDF-Viewer/blazor/forms/form-field-events.md
index 4e3e4e4d6d..0892e5688c 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-field-events.md
@@ -46,7 +46,8 @@ The event exposes the [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.
#### Event Arguments
The FormFieldAdding event provides [FormFieldAddEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddEventArgs.html), which includes [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldAddEventArgs_Field) (form field details), [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldAddEventArgs_PageNumber) (target page), and [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldAddEventArgs_Cancel) (to prevent addition).
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -65,7 +66,8 @@ The FormFieldAdding event provides [FormFieldAddEventArgs](https://help.syncfusi
}
}
-```
+{% endhighlight %}
+{% endtabs %}
By setting `args.Cancel = true`, the addition of the form field can be conditionally prevented based on custom logic.
### FormFieldAdded Event
@@ -75,7 +77,8 @@ By setting `args.Cancel = true`, the addition of the form field can be condition
#### Event Arguments
The FormFieldAdded event provides [FormFieldAddedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddedEventArgs.html), which includes properties like [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldAddedEventArgs_Field) (details of the added field) and [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldAddedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldAddedEventArgs_PageNumber) (where the field was added). Developers can use these properties to monitor or modify the added form fields.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -92,7 +95,8 @@ The FormFieldAdded event provides [FormFieldAddedEventArgs](https://help.syncfus
// Additional processing logic
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldDeleted Event
@@ -101,7 +105,8 @@ The FormFieldAdded event provides [FormFieldAddedEventArgs](https://help.syncfus
#### Event Arguments
The FormFieldDeleted event provides [FormFieldDeletedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldDeletedEventArgs.html), which contains properties like [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldDeletedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldDeletedEventArgs_Field) (deleted field details) and [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldDeletedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldDeletedEventArgs_PageNumber). This event helps track and manage field deletions.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -120,7 +125,8 @@ The FormFieldDeleted event provides [FormFieldDeletedEventArgs](https://help.syn
// Implement additional logic, such as logging or UI updates
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldClick Event
[FormFieldClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldClick) is triggered when a user clicks on a form field while designer mode is off. This event can be used to display tooltips, highlight fields, or open settings.
@@ -128,7 +134,8 @@ The FormFieldDeleted event provides [FormFieldDeletedEventArgs](https://help.syn
#### Event Arguments
The FormFieldClick event provides [FormFieldClickArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldClickArgs.html), containing [FormField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldClickArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldClickArgs_FormField) (clicked field details). It enables actions like highlighting fields or opening settings.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -145,7 +152,8 @@ The FormFieldClick event provides [FormFieldClickArgs](https://help.syncfusion.c
// Additional processing logic
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldDoubleClick Event
[FormFieldDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldDoubleClick) is triggered when a form field is double-clicked. This event is useful for triggering additional actions.
@@ -153,7 +161,8 @@ The FormFieldClick event provides [FormFieldClickArgs](https://help.syncfusion.c
#### Event Arguments
The FormFieldDoubleClick event provides [FormFieldDoubleClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldDoubleClickEventArgs.html), which includes [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldDoubleClickEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldDoubleClickEventArgs_Field) (double-clicked field details). It is useful for triggering additional actions when a field is double-clicked.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -172,7 +181,8 @@ The FormFieldDoubleClick event provides [FormFieldDoubleClickEventArgs](https://
// Implement additional logic, such as logging or UI updates
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldSelected Event
[FormFieldSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldSelected) is triggered when a form field is selected. It can be used to show additional options or highlight the selected field.
@@ -180,7 +190,8 @@ The FormFieldDoubleClick event provides [FormFieldDoubleClickEventArgs](https://
#### Event Arguments
The FormFieldSelected event provides [FormFieldSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSelectedEventArgs.html), which contains [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSelectedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSelectedEventArgs_Field) (selected field details) and [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSelectedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSelectedEventArgs_PageNumber). This event helps in handling field selection and UI updates.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -199,7 +210,8 @@ The FormFieldSelected event provides [FormFieldSelectedEventArgs](https://help.s
// Implement additional logic, such as logging or UI updates
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldUnselected Event
@@ -208,7 +220,8 @@ The FormFieldSelected event provides [FormFieldSelectedEventArgs](https://help.s
#### Event Arguments
The FormFieldUnselected event provides [FormFieldUnselectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldUnselectedEventArgs.html), which includes [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldUnselectedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldUnselectedEventArgs_Field) (unselected field details). It helps in resetting UI elements or hiding additional options.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -227,7 +240,8 @@ The FormFieldUnselected event provides [FormFieldUnselectedEventArgs](https://he
// Implement additional logic, such as logging or UI updates
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldResized Event
[FormFieldResized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldResized) is triggered when a form field is resized. This event is useful for applying constraints on form field sizes or updating layout dynamically.
@@ -235,7 +249,8 @@ The FormFieldUnselected event provides [FormFieldUnselectedEventArgs](https://he
#### Event Arguments
The FormFieldResized event provides [FormFieldResizedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldResizedEventArgs.html), which contains [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldResizedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldResizedEventArgs_Field) (resized field details) and [NewBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldResizedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldResizedEventArgs_NewBounds) (updated field dimensions). This event allows applying constraints on resizing.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -254,7 +269,8 @@ The FormFieldResized event provides [FormFieldResizedEventArgs](https://help.syn
// Implement additional logic, such as logging or UI updates
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### ValidateFormFields Event
@@ -263,7 +279,8 @@ The FormFieldResized event provides [FormFieldResizedEventArgs](https://help.syn
#### Event Arguments
The ValidateFormFields event provides [ValidateFormFieldsArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ValidateFormFieldsArgs.html), which contains [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ValidateFormFieldsArgs.html#Syncfusion_Blazor_SfPdfViewer_ValidateFormFieldsArgs_Fields) (validated form fields). This event ensures that required fields are properly filled.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -282,7 +299,8 @@ The ValidateFormFields event provides [ValidateFormFieldsArgs](https://help.sync
// Implement additional logic, such as logging or UI updates
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldFocusIn Event
@@ -291,7 +309,8 @@ The ValidateFormFields event provides [ValidateFormFieldsArgs](https://help.sync
#### Event Arguments
The FormFieldFocusIn event provides [FormFieldFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldFocusInEventArgs.html), which includes [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldFocusInEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldFocusInEventArgs_Field) (details of the focused form field). Use it to identify the target field for styling or tooltips when focus is gained.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -310,7 +329,8 @@ The FormFieldFocusIn event provides [FormFieldFocusInEventArgs](https://help.syn
// Implement additional logic, such as logging or UI updates
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldFocusOut Event
@@ -319,7 +339,8 @@ The FormFieldFocusIn event provides [FormFieldFocusInEventArgs](https://help.syn
#### Event Arguments
The FormFieldFocusOut event provides [FormFieldFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldFocusOutEventArgs.html), which includes [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldFocusOutEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldFocusOutEventArgs_Field) (the form field losing focus). Use it to validate or save data when the user moves out of a field.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -338,7 +359,8 @@ The FormFieldFocusOut event provides [FormFieldFocusOutEventArgs](https://help.s
// Implement additional logic, such as logging or UI updates
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldMouseEnter Event
@@ -347,7 +369,8 @@ The FormFieldFocusOut event provides [FormFieldFocusOutEventArgs](https://help.s
#### Event Arguments
The FormFieldMouseEnter event provides [FormFieldMouseEnterEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldMouseEnterEventArgs.html), which includes properties like [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldMouseEnterEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldMouseEnterEventArgs_Field) (the form field entered) and [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldMouseEnterEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldMouseEnterEventArgs_PageNumber) (page containing the field). Use this to tailor hover behavior based on field and page context.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -366,7 +389,8 @@ The FormFieldMouseEnter event provides [FormFieldMouseEnterEventArgs](https://he
// Implement additional logic, such as logging or UI updates
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldMouseLeave Event
@@ -375,7 +399,8 @@ The FormFieldMouseEnter event provides [FormFieldMouseEnterEventArgs](https://he
#### Event Arguments
The FormFieldMouseLeave event provides [FormFieldMouseLeaveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldMouseLeaveEventArgs.html), which includes properties like [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldMouseLeaveEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldMouseLeaveEventArgs_Field) (the form field exited) and [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldMouseLeaveEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldMouseLeaveEventArgs_PageNumber). Use it to revert UI changes when the pointer moves away.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -394,7 +419,8 @@ The FormFieldMouseLeave event provides [FormFieldMouseLeaveEventArgs](https://he
// Implement additional logic, such as logging or UI updates
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldPropertyChanged Event
@@ -403,7 +429,8 @@ The FormFieldMouseLeave event provides [FormFieldMouseLeaveEventArgs](https://he
#### Event Arguments
The FormFieldPropertyChanged event provides [FormFieldPropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldPropertyChangedEventArgs.html), which contains properties like [OldValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldPropertyChangedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldPropertyChangedEventArgs_OldValue) and [NewValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldPropertyChangedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldPropertyChangedEventArgs_NewValue). Use these to compare changes and trigger dependent updates or validations.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -422,13 +449,15 @@ The FormFieldPropertyChanged event provides [FormFieldPropertyChangedEventArgs](
// Implement additional logic, such as logging or UI updates
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### IsDesignerModeChanged Event
[IsDesignerModeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsDesignerModeChanged) occurs whenever the component’s designer mode is enabled or disabled. It can be used to adjust UI, toggle interactions, or record mode changes.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -446,7 +475,8 @@ The FormFieldPropertyChanged event provides [FormFieldPropertyChangedEventArgs](
// Implement additional logic, such as logging or UI updates
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldsExporting Event
@@ -455,7 +485,8 @@ The FormFieldPropertyChanged event provides [FormFieldPropertyChangedEventArgs](
#### Event Arguments
The FormFieldsExporting event provides [FormFieldsExportEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsExportEventArgs.html), which includes properties like [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsExportEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldsExportEventArgs_Cancel). Use it to modify the export payload, validate data, or cancel the operation when necessary.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -488,7 +519,8 @@ The FormFieldsExporting event provides [FormFieldsExportEventArgs](https://help.
}
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldsImporting Event
@@ -497,7 +529,8 @@ The FormFieldsExporting event provides [FormFieldsExportEventArgs](https://help.
#### Event Arguments
The FormFieldsImporting event provides [FormFieldsImportEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsImportEventArgs.html), which includes properties such as [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsImportEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldsImportEventArgs_Cancel). Use this to stop the import or adjust data prior to import.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -541,13 +574,15 @@ The FormFieldsImporting event provides [FormFieldsImportEventArgs](https://help.
}
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldsExported Event
[FormFieldsExported](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsExported) occurs after form fields are exported successfully. Use this event to continue workflows such as saving, auditing, or notifying the user.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -577,13 +612,15 @@ The FormFieldsImporting event provides [FormFieldsImportEventArgs](https://help.
}
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldsImported Event
[FormFieldsImported](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_FormFieldsImported) occurs after form fields are imported into the document. Use this event to map imported values to application data, refresh UI state, or log completion.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -620,7 +657,8 @@ The FormFieldsImporting event provides [FormFieldsImportEventArgs](https://help.
}
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldsExportFailed Event
@@ -629,7 +667,8 @@ The FormFieldsImporting event provides [FormFieldsImportEventArgs](https://help.
#### Event Arguments
The event provides [FormFieldsExportFailedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsExportFailedEventArgs.html), which includes [ErrorDetails](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsExportFailedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldsExportFailedEventArgs_ErrorDetails) describing the failure. Use this information to diagnose and recover from export errors.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -659,7 +698,8 @@ The event provides [FormFieldsExportFailedEventArgs](https://help.syncfusion.com
}
}
}
-```
+{% endhighlight %}
+{% endtabs %}
### FormFieldsImportFailed Event
@@ -668,7 +708,8 @@ The event provides [FormFieldsExportFailedEventArgs](https://help.syncfusion.com
#### Event Arguments
The event provides [FormFieldsImportFailedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsImportFailedEventArgs.html), which includes [ErrorDetails](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldsImportFailedEventArgs.html#Syncfusion_Blazor_SfPdfViewer_FormFieldsImportFailedEventArgs_ErrorDetails) explaining the cause. Use this to troubleshoot and implement fallback mechanisms.
-```cshtml
+{% tabs %}
+{% highlight razor %}
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.SfPdfViewer;
@@ -709,12 +750,14 @@ The event provides [FormFieldsImportFailedEventArgs](https://help.syncfusion.com
}
}
}
-```
+{% endhighlight %}
+{% endtabs %}
[View the complete sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/Events.razor).
## See also
* [Events in Blazor SfPdfviewer](../events)
-* [Programmatic Support in Form Designer](./create-programmatically)
-* [UI Interactions in Form Designer](./ui-interactions)
\ No newline at end of file
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create](./manage-form-fields/create-form-fields)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-filling.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-filling.md
new file mode 100644
index 0000000000..5eece6fee2
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-filling.md
@@ -0,0 +1,197 @@
+---
+layout: post
+title: Form filling in Blazor SfPdfViewer Component | Syncfusion
+description: Learn to view, fill, export, and import PDF form fields in Syncfusion Blazor SfPdfViewer, including disabling interaction and handling signatures.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Fill PDF form fields in Blazor SfPdfViewer
+
+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`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormField_).
+
+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.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+
+@code {
+ SfPdfViewer2? pdfViewer;
+
+ async Task UpdateFormFields()
+ {
+ if (pdfViewer == null)
+ return;
+
+ // Get fields
+ List formFields = await pdfViewer.GetFormFieldsAsync();
+
+ if (formFields == null || formFields.Count == 0)
+ return;
+
+ // Find textbox safely
+ TextBoxField? textField = formFields
+ .OfType()
+ .FirstOrDefault(f => f.Name == "name")
+ ?? formFields.OfType().FirstOrDefault();
+
+ if (textField != null)
+ {
+ textField.Value = "John Doe";
+ textField.TooltipText = "First Name";
+
+ // Update using SAME TYPE (FormFieldInfo)
+ await pdfViewer.UpdateFormFieldsAsync(new List()
+ {
+ textField
+ });
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**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`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ImportFormFieldsAsync_System_IO_Stream_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) to map external data into PDF fields by name. The example below shows how to trigger import from a button handler.
+
+{% tabs %}
+{% highlight razor %}
+@using Syncfusion.Blazor.SfPdfViewer;
+@using Syncfusion.Blazor.Buttons;
+
+Export Data
+Import Data
+
+
+
+
+@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 FormFields = new List();
+
+ // 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);
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+For more details, see [Import and Export Form Data](./form-filling#export-and-import-form-fields).
+
+### 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.
+
+{% tabs %}
+{% highlight razor %}
+@using Syncfusion.Blazor.SfPdfViewer;
+@using Syncfusion.Blazor.Buttons;
+
+
+
+
+
+@code {
+ SfPdfViewer2 Viewer;
+ // Method triggered when the document is loaded
+ private async Task AddFormFields()
+ {
+ // Define various form fields with their properties and positions
+ List formFields = new List
+ {
+ 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 unfilledFields = args.UnfilledFields;
+ foreach (KeyValuePair field in unfilledFields)
+ {
+ Console.WriteLine($"Field Name: {field.Key}, Default Value: {field.Value}");
+ // Further processing of unfilled fields
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Troubleshooting
+
+- If fields are not editable, confirm that the SfPdfViewer2 component is properly configured.
+- If form fields don't display, verify your `DocumentPath` points to a PDF with form fields.
+- For import issues, ensure JSON keys match the PDF field `Name` property values.
+
+N> For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Form%20Designer/Components/Pages).
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/customize-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields
+- [Edit form fields](./manage-form-fields/edit-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-handling-best-practices.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-handling-best-practices.md
new file mode 100644
index 0000000000..bac6aa18d0
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/form-handling-best-practices.md
@@ -0,0 +1,113 @@
+---
+layout: post
+title: PDF Form Handling Best Practices in React PDF Viewer | Syncfusion
+description: Learn the recommended best practices for naming, validating, grouping, importing, and designing form fields in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# PDF Form Handling Best Practices in React PDF Viewer
+
+This guide provides a comprehensive overview of recommended practices for creating, organizing, validating, and automating PDF forms in the Syncfusion React PDF Viewer.
+
+It explains how to structure field names, ensure consistency, apply validation rules, group related fields, and streamline workflows through pre-filling and data import/export. By following these guidelines, you can build clean, reliable, and efficient form experiences that are easier to maintain and work seamlessly across different use cases.
+
+## 1. Use Clear and Unique Field Names
+
+Field names are critical for automation, data mapping, and debugging. Always:
+
+- Use descriptive, unique names for each field (e.g., `FirstName`, `InvoiceNumber`).
+- Avoid generic names like `Textbox1` or `Field2`.
+- Ensure names are consistent across import/export workflows.
+
+
+
+You can refer to [Create Form Fields](../forms/manage-form-fields/create-form-fields) in React PDF Viewer to know more about creating form fields.
+
+## 2. Maintain Consistent Field Types
+
+Changing a field’s type (e.g., from textbox to dropdown) can break data mapping and validation. Best practices:
+
+- Do not change a field’s type after creation.
+- Fields with the same name must always have the same type.
+- Use the correct field type for the intended data (e.g., checkbox for boolean, textbox for free text).
+
+
+
+You can refer to [Group Form Fields](../forms/group-form-fields) in React PDF Viewer to know more about grouping form fields.
+
+## 3. Validate Data Before Submission
+
+Validation ensures data quality and prevents errors downstream. Always:
+
+- Mark required fields and check for empty values.
+- Validate formats (email, phone, numbers, etc.).
+- Use custom validation logic for business rules.
+- Prevent submission or export if validation fails.
+
+You can refer to [Form Validation](../forms/form-validation) in React PDF Viewer to know more about form fields Validation.
+
+## 4. Pre-Fill Known Values
+
+Pre-filling fields improves user experience and reduces errors. For example:
+
+- Populate user profile data (name, email, address) automatically.
+- Use default values for common fields.
+
+
+
+You can refer to [Form Filling](../forms/form-filling) in React PDF Viewer to know more about form filling.
+
+## 5. Automate with Import/Export
+
+Automate workflows by importing/exporting form data. Recommendations:
+
+- Use **JSON** for web apps and REST APIs.
+- Use **XFDF/FDF** for Adobe workflows.
+- Use **XML** for legacy systems.
+- Ensure field names match exactly for successful mapping.
+
+You can refer to [Export/Import Form fields](../forms/import-export-form-fields/export-form-fields) in React PDF Viewer to know more about Export and Import form fields.
+
+## 6. Group Related Fields for Complex Forms
+
+Group fields logically for better structure and easier validation. Examples:
+
+- Address sections (Street, City, State, ZIP)
+- Invoice line items
+- Repeated form subsections
+
+Benefits:
+
+- Structured exported data
+- Easier validation
+- Improved user experience
+
+
+
+You can refer to [Group Form Fields](../forms/group-form-fields) in React PDF Viewer to know more about grouping form fields.
+
+## 7. Keep Form Design Clean and Accessible
+
+Good design improves usability and accessibility. Tips:
+
+- Maintain consistent spacing and alignment (use grid layouts).
+- Use uniform field widths and clear labels.
+- Avoid clutter—don’t crowd too many fields in one area.
+- Use section headers to guide users.
+
+
+
+You can refer to [Group Form Fields](../forms/group-form-fields) in React PDF Viewer to know more about grouping form fields.
+
+## See Also
+
+- [Filling PDF Forms](../forms/form-filling)
+- [Create Form Fields](../forms/manage-form-fields/create-form-fields)
+- [Modify Form Fields](../forms/manage-form-fields/modify-form-fields)
+- [Style Form Fields](../forms/manage-form-fields/customize-form-fields)
+- [Remove Form Fields](../forms/manage-form-fields/remove-form-fields)
+- [Group Form Fields](../forms/group-form-fields)
+- [Import and Export Form Fields](../forms/import-export-form-fields/export-form-fields)
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/group-form-fields.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/group-form-fields.md
new file mode 100644
index 0000000000..5043cb5e6f
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/group-form-fields.md
@@ -0,0 +1,131 @@
+---
+layout: post
+title: Group form fields in the Blazor SfPdfViewer component | Syncfusion
+description: Learn how to group PDF form fields in the Syncfusion Blazor SfPdfViewer by assigning the same name to multiple widgets.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Group form fields in Blazor SfPdfViewer
+
+The **Syncfusion Blazor SfPdfViewer** allows grouping multiple form fields into a single logical field by assigning the same `Name` to them. Grouped form fields share their values and states automatically based on the field type. Use the Form Designer UI for manual grouping or the Form Designer APIs for programmatic grouping to keep related fields synchronized across the document.
+- [How form field grouping works](#how-grouping-works)
+- [Field behavior based on type](#field-behavior-by-type)
+- [How to group form fields using the UI](#group-using-the-form-designer-ui)
+- [How to group form fields programmatically](#group-pdf-form-fields-programmatically)
+- [Related references and samples](#example-scenarios)
+
+## How grouping works
+
+In a PDF form, multiple widgets can represent the same logical form field. When widgets share the same `Name`, they are treated as a group and remain synchronized.
+
+## Field behavior by type
+
+- **Textbox and Password** — Text entered in one widget appears in all widgets with the same name.
+- **CheckBox** — Checking one widget sets the checked state for all checkboxes with the same name.
+- **RadioButton** — Widgets with the same name form a radio group; only one option can be selected.
+- **ListBox and DropDown** — The selected value is shared across widgets with the same name.
+- **Signature and Initial fields** — Applied signature/initial is mirrored across grouped widgets.
+
+N> Form field grouping is controlled by the `Name` property. The position of each widget is determined by its `Bounds`; grouping is independent of location.
+
+## Group using the Form Designer UI
+
+**Steps**
+1. Enable the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar).
+2. Add the form fields you want to group.
+3. Select a form field, open **Properties**, and set the **Name** value.
+4. Assign the same **Name** to all PDF Form Field that belong to the group.
+5. Apply the changes and verify that updates in one widget reflect in the others.
+
+
+
+
+
+## Group PDF Form Fields Programmatically
+
+You can also group form fields during creation by assigning the same **Name** through code using `AddFormFieldsAsync()`.
+
+### Example Scenarios
+- Two textboxes named **EmployeeId** share the same value.
+- A radio button group named **Gender** allows single selection.
+- Two checkboxes named **Subscribe** share the checked state.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ private async Task OnDocumentLoaded()
+ {
+ if (viewer == null) return;
+
+ // Create grouped form fields with the same name
+ List formFields = new List
+ {
+ // Textbox group: same name => mirrored value
+ new TextBoxField
+ {
+ Name = "EmployeeId",
+ Bounds = new Bound { X = 146, Y = 229, Width = 150, Height = 24 }
+ },
+ new TextBoxField
+ {
+ Name = "EmployeeId", // same name groups the two widgets
+ Bounds = new Bound { X = 338, Y = 229, Width = 150, Height = 24 }
+ },
+
+ // Radio button group: same name => exclusive selection across the group
+ new RadioButtonField
+ {
+ Name = "Gender",
+ Bounds = new Bound { X = 148, Y = 289, Width = 18, Height = 18 },
+ IsSelected = false
+ },
+ new RadioButtonField
+ {
+ Name = "Gender", // grouped with the first
+ Bounds = new Bound { X = 292, Y = 289, Width = 18, Height = 18 },
+ IsSelected = false
+ },
+
+ // CheckBox group: same name => mirrored checked state
+ new CheckBoxField
+ {
+ Name = "Subscribe",
+ Bounds = new Bound { X = 56, Y = 664, Width = 20, Height = 20 },
+ IsChecked = false
+ },
+ new CheckBoxField
+ {
+ Name = "Subscribe", // grouped with the first
+ Bounds = new Bound { X = 242, Y = 664, Width = 20, Height = 20 },
+ IsChecked = false
+ }
+ };
+
+ // Add the grouped form fields to the PDF document
+ await viewer.AddFormFieldsAsync(formFields);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Form%20Designer/Components/Pages).
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Add custom data to form fields](./custom-data)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/create-form-fields.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/create-form-fields.md
new file mode 100644
index 0000000000..de0cbc0817
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/create-form-fields.md
@@ -0,0 +1,535 @@
+---
+layout: post
+title: Create form fields in the Blazor SfPdfViewer | Syncfusion
+description: Learn how to add each PDF form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion Blazor SfPdfViewer.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Create PDF Form Fields in Blazor SfPdfViewer
+
+Create or add new form fields visually with the Form Designer UI or programmatically using the Blazor SfPdfViewer API. This guide explains both methods and shows field‑specific examples and a complete runnable example.
+
+**Outcome:**
+
+The guide explains the following:
+- How to add fields with the Form Designer UI.
+- How to add and edit fields programmatically (API).
+- How to add common field types: Textbox, Password, CheckBox, RadioButton, ListBox, DropDown, Signature, Initial.
+
+## Steps
+
+### 1. Create form fields using Form Designer UI.
+
+- Enable the Form Designer mode in the PDF Viewer. See [Form Designer overview](../overview).
+- Select a field type from the toolbar and click the PDF page to place it.
+- Move/resize the field and configure properties in the **Properties** panel.
+
+
+
+### 2. Create Form fields programmatically
+
+Use the [AddFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) method inside the viewer's [`DocumentLoaded`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_DocumentLoaded) event handler or in response to user actions.
+
+Use this approach to generate form fields dynamically based on data or application logic.
+
+{% tabs %}
+{% highlight razor %}
+
+
+
+
+
+
+@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 formFields = new List
+ {
+ 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);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**Use programmatic creation when:**
+
+- Building dynamic forms
+- Pre-filling forms from databases
+- Automating form creation workflows
+
+## Field‑specific instructions
+
+Below are concise UI steps and the programmatic examples for each common field type. The code samples below are complete per‑field examples you can reuse unchanged.
+
+### Textbox
+
+**Add via UI**: Open Form Designer toolbar → select Textbox → click page → configure properties
+
+
+
+**Add Programmatically (API)**:
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code {
+ private SfPdfViewer2 viewer;
+ private string DocumentPath = "wwwroot/data/form-filling-document.pdf";
+
+ private async Task AddTextBox()
+ {
+ // Create a text box field with properties
+ TextBoxField textBoxField = new TextBoxField()
+ {
+ Name = "FirstName",
+ Bounds = new Bound() { X = 100, Y = 150, Width = 200, Height = 24 },
+ IsRequired = true,
+ TooltipText = "Enter your first name",
+ MaxLength = 40
+ };
+
+ // Add the text box field to the PDF document
+ await viewer.AddFormFieldsAsync(new List { textBoxField });
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Button
+
+**Add via UI**: Open form designer toolbar → Select Button → place → configure properties
+
+
+
+**Add Programmatically (API)**:
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code {
+ private SfPdfViewer2 viewer;
+ private string DocumentPath = "wwwroot/data/form-filling-document.pdf";
+
+ private async Task AddButtonField()
+ {
+ // Create a button field with properties
+ ButtonField buttonField = new ButtonField()
+ {
+ Name = "SubmitButton",
+ Bounds = new Bound() { X = 100, Y = 190, Width = 150, Height = 40 },
+ TooltipText = "Click to submit the form"
+ };
+
+ // Add the button field to the PDF document
+ await viewer.AddFormFieldsAsync(new List { buttonField });
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Password
+
+**Add via UI**: Open form designer toolbar → Select Password → place → configure properties
+
+
+
+**Add Programmatically (API)**:
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code {
+ private SfPdfViewer2 viewer;
+ private string DocumentPath = "wwwroot/data/form-filling-document.pdf";
+
+ private async Task AddPasswordField()
+ {
+ // Create a password field with properties
+ PasswordField passwordField = new PasswordField()
+ {
+ Name = "AccountPassword",
+ Bounds = new Bound() { X = 100, Y = 190, Width = 200, Height = 24 },
+ IsRequired = true,
+ MaxLength = 32,
+ TooltipText = "Enter a secure password"
+ };
+
+ // Add the password field to the PDF document
+ await viewer.AddFormFieldsAsync(new List { passwordField });
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### CheckBox
+
+**Add via UI**: Open form designer toolbar → Select CheckBox → click to place → duplicate for options.
+
+
+
+**Add Programmatically (API)**:
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code {
+ private SfPdfViewer2 viewer;
+ private string DocumentPath = "wwwroot/data/form-filling-document.pdf";
+
+ private async Task AddCheckBoxField()
+ {
+ // Create a checkbox field with properties
+ CheckBoxField checkBoxField = new CheckBoxField()
+ {
+ Name = "AgreeTerms",
+ Bounds = new Bound() { X = 100, Y = 230, Width = 18, Height = 18 },
+ IsChecked = false,
+ TooltipText = "I agree to the terms"
+ };
+
+ // Add the checkbox field to the PDF document
+ await viewer.AddFormFieldsAsync(new List { checkBoxField });
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### RadioButton
+
+**Add via UI**: Open form designer toolbar → Select RadioButton → place buttons using the same `name` to group them.
+
+
+
+**Add Programmatically (API)**:
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code {
+ private SfPdfViewer2 viewer;
+ private string DocumentPath = "wwwroot/data/form-filling-document.pdf";
+
+ private async Task AddRadioButtonFields()
+ {
+ // Create radio button fields grouped by name 'Gender'
+ RadioButtonField maleRadioButton = new RadioButtonField()
+ {
+ Name = "Gender",
+ Value = "Male",
+ Bounds = new Bound() { X = 100, Y = 270, Width = 16, Height = 16 }
+ };
+
+ RadioButtonField femaleRadioButton = new RadioButtonField()
+ {
+ Name = "Gender",
+ Value = "Female",
+ Bounds = new Bound() { X = 160, Y = 270, Width = 16, Height = 16 }
+ };
+
+ // Add the radio button fields to the PDF document
+ await viewer.AddFormFieldsAsync(new List { maleRadioButton, femaleRadioButton });
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### ListBox
+
+**Add via UI**: Open form designer toolbar → Select ListBox → place → add items in Properties.
+
+
+
+**Add Programmatically (API)**:
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code {
+ private SfPdfViewer2 viewer;
+ private string DocumentPath = "wwwroot/data/form-filling-document.pdf";
+
+ private async Task AddListBoxField()
+ {
+ // Create list items for the list box
+ List items = new List()
+ {
+ new ListItem() { Name = "Item 1", Value = "item1" },
+ new ListItem() { Name = "Item 2", Value = "item2" },
+ new ListItem() { Name = "Item 3", Value = "item3" }
+ };
+
+ // Create a list box field with items
+ ListBoxField listBoxField = new ListBoxField()
+ {
+ Name = "States",
+ Bounds = new Bound() { X = 100, Y = 310, Width = 220, Height = 70 },
+ Items = items
+ };
+
+ // Add the list box field to the PDF document
+ await viewer.AddFormFieldsAsync(new List { listBoxField });
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### DropDown
+
+**Add via UI**: Open form designer toolbar → Select DropDown → place → add items → set default value.
+
+
+
+**Add Programmatically (API)**:
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code {
+ private SfPdfViewer2 viewer;
+ private string DocumentPath = "wwwroot/data/form-filling-document.pdf";
+
+ private async Task AddDropDownField()
+ {
+ // Create list items for the dropdown
+ List options = new List()
+ {
+ new ListItem() { Name = "Item 1", Value = "item1" },
+ new ListItem() { Name = "Item 2", Value = "item2" },
+ new ListItem() { Name = "Item 3", Value = "item3" }
+ };
+
+ // Create a dropdown field with items
+ DropDownField dropDownField = new DropDownField()
+ {
+ Name = "Country",
+ Bounds = new Bound() { X = 560, Y = 320, Width = 150, Height = 24 },
+ Items = options
+ };
+
+ // Add the dropdown field to the PDF document
+ await viewer.AddFormFieldsAsync(new List { dropDownField });
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Signature Field
+
+**Add via UI**: Open form designer toolbar → select Signature Field → place where signing is required → configure indicator text/thickness/tooltip/isRequired.
+
+
+
+**Add Programmatically (API)**:
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code {
+ private SfPdfViewer2 viewer;
+ private string DocumentPath = "wwwroot/data/form-filling-document.pdf";
+
+ private async Task AddSignatureField()
+ {
+ // Create a signature field
+ SignatureField signatureField = new SignatureField()
+ {
+ Name = "Sign",
+ Bounds = new Bound() { X = 57, Y = 923, Width = 200, Height = 43 },
+ TooltipText = "sign Here",
+ IsRequired = true
+ };
+
+ // Add the signature field to the PDF document
+ await viewer.AddFormFieldsAsync(new List { signatureField });
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Add fields dynamically with SetFormDrawingModeAsync
+
+Use [`SetFormDrawingModeAsync()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SetFormDrawingModeAsync_System_Nullable_Syncfusion_Blazor_SfPdfViewer_FormFieldType__) to switch the designer into a specific field mode and let users add fields on the fly.
+
+### Edit Form Fields in Blazor SfPdfViewer
+
+You can edit form fields using the UI or API.
+
+#### Edit 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.
+
+#### Edit Programmatically
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+Edit TextBox
+Add Password Field
+
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-filling-document.pdf";
+
+ private async Task AddSignatureFields()
+ {
+ // Create initial form field
+ SignatureField signatureField = new SignatureField()
+ {
+ Name = "Sign",
+ Bounds = new Bound() { X = 57, Y = 923, Width = 200, Height = 43 },
+ TooltipText = "sign Here",
+ IsRequired = true
+ };
+
+ await viewer.AddFormFieldsAsync(new List { signatureField });
+ }
+
+ private async Task EditTextBox()
+ {
+ // Retrieve all form fields
+ List fields = await viewer.GetFormFieldsAsync();
+
+ // Find and update the first name field
+ FormFieldInfo? field = fields?.FirstOrDefault(f => f.Name == "FirstName");
+ if (field != null)
+ {
+ (field as TextBoxField).Value = "John";
+ field.FontFamily = "Courier";
+ field.FontSize = 12;
+ field.Color = "black";
+ field.BackgroundColor = "white";
+ field.BorderColor = "black";
+ field.Thickness = 2;
+ field.TextAlignment = TextAlignment.Left;
+
+ await viewer.UpdateFormFieldsAsync(new List { field });
+ }
+ }
+
+ private async Task EditButton()
+ {
+ // Retrieve all form fields
+ List fields = await viewer.GetFormFieldsAsync();
+
+ // Find and update the submit button field
+ FormFieldInfo? field = fields?.FirstOrDefault(f => f.Name == "SubmitButton");
+ if (field != null)
+ {
+ field.BackgroundColor = "#008000";
+ field.Color = "white";
+ field.FontFamily = "Arial";
+ field.FontSize = 12;
+ field.BorderColor = "black";
+ field.Thickness = 2;
+
+ await viewer.UpdateFormFieldsAsync(new List { field });
+ }
+ }
+
+ private async Task AddPasswordField()
+ {
+ // Set form drawing mode to Password to allow users to draw password fields
+ await viewer.SetFormDrawingModeAsync(FormFieldType.Password);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Form%20Designer/Components/Pages).
+
+## Troubleshooting
+
+- If fields do not appear, verify that the PDF document path is correct and the document loads successfully in the SfPdfViewer2 component.
+- Ensure the form field types (TextBoxField, PasswordField, etc.) are properly imported from the Syncfusion.Blazor.SfPdfViewer namespace.
+- Check that the Bounds coordinates are within the PDF page dimensions to ensure fields are placed correctly.
+- If using async operations, ensure proper error handling and null checks on the viewer reference.
+
+## Related topics
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Modify form fields](./modify-form-fields)
+- [Style form fields](./customize-form-fields)
+- [Remove form fields](./remove-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form Fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/customize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/customize-form-fields.md
new file mode 100644
index 0000000000..aacb420729
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/customize-form-fields.md
@@ -0,0 +1,102 @@
+---
+layout: post
+title: Style form fields in the Blazor SfPdfViewer | Syncfusion
+description: Learn how to configure typography, colors, borders, alignment, and other style settings for form fields using the UI and Programmatically.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Customize the appearance of PDF Form Fields in Blazor SfPdfViewer
+
+**Styling** customizes appearance only (font, color, alignment, border, background, indicator text).
+
+## Customize appearance of form fields using the UI
+Use the **Properties** panel to adjust:
+- Font family and size, text color, and alignment
+- Border color and thickness
+- Background color
+
+
+## Customize appearance of form fields programmatically
+Use [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) to apply styles:
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+Apply Textbox Changes
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ private async Task OnEditTextbox()
+ {
+ if (viewer == null) return;
+
+ List fields = await viewer.GetFormFieldsAsync();
+
+ FormFieldInfo? field = fields?.FirstOrDefault(f => f.Name == "FirstName");
+
+ if (field != null)
+ {
+ (field as TextBoxField).Value = "John";
+ field.FontFamily = "Courier";
+ field.FontSize = 12;
+ field.Color = "black";
+ field.BackgroundColor = "white";
+ field.BorderColor = "black";
+ field.Thickness = 2;
+ field.TextAlignment = TextAlignment.Left;
+
+ await viewer.UpdateFormFieldsAsync(new List { field });
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Set Default Styles for New Form Fields
+Define defaults so fields added from the toolbar inherit styles:
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+}
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Modify form fields](./modify-form-fields)
+- [Remove form fields](./remove-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/modify-form-fields.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/modify-form-fields.md
new file mode 100644
index 0000000000..0b27a1888e
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/modify-form-fields.md
@@ -0,0 +1,433 @@
+---
+layout: post
+title: Modify form fields in the Blazor SfPdfViewer | Syncfusion
+description: Learn how to modify PDF form fields using the UI and programmatically with APIs in the Syncfusion Blazor SfPdfViewer.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Modify PDF Form Field Properties in Blazor
+
+Modify form fields using the UI or programmatically via the 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 [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) to change behavior or data (including position and size):
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+Apply Textbox Changes
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ private async Task OnEditTextbox()
+ {
+ if (viewer == null) return;
+
+ List fields = await viewer.GetFormFieldsAsync();
+
+ FormFieldInfo? field = fields?.FirstOrDefault(f => f.Name == "FirstName");
+
+ if (field != null)
+ {
+ (field as TextBoxField).Value = "John";
+ field.FontFamily = "Courier";
+ field.FontSize = 12;
+ field.Color = "black";
+ field.BackgroundColor = "white";
+ field.BorderColor = "black";
+ field.Thickness = 2;
+ field.TextAlignment = TextAlignment.Left;
+
+ await viewer.UpdateFormFieldsAsync(new List { field });
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Modify PDF Form Field Properties by Field type
+
+### Textbox
+- UI: Update value, font, size, colors, border thickness, alignment, max length, multiline.
+
+- API: [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) for value, typography, alignment, colors, borders.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+Apply Textbox Changes
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ private async Task OnEditTextbox()
+ {
+ if (viewer == null) return;
+
+ List fields = await viewer.GetFormFieldsAsync();
+
+ FormFieldInfo? field = fields?.FirstOrDefault(f => f.Name == "FirstName");
+
+ if (field != null)
+ {
+ (field as TextBoxField).Value = "John";
+ field.FontFamily = "Courier";
+ field.FontSize = 12;
+ field.Color = "black";
+ field.BackgroundColor = "white";
+ field.BorderColor = "black";
+ field.Thickness = 2;
+ field.TextAlignment = TextAlignment.Left;
+
+ await viewer.UpdateFormFieldsAsync(new List { field });
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Button
+- UI: Update appearance, tooltip, font, colors, borders.
+
+- API: [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) for tooltip, typography, colors, borders.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+Edit Button
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ private async Task OnEditButton()
+ {
+ if (viewer == null) return;
+
+ List fields = await viewer.GetFormFieldsAsync();
+
+ FormFieldInfo? field = fields?.FirstOrDefault(f => f.Name == "SubmitButton");
+
+ if (field != null)
+ {
+ field.BackgroundColor = "#008000";
+ field.Color = "white";
+ field.FontFamily = "Arial";
+ field.FontSize = 12;
+ field.BorderColor = "black";
+ field.Thickness = 2;
+ field.TooltipText = "Click to submit";
+
+ await viewer.UpdateFormFieldsAsync(new List { field });
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Password
+
+- UI: Tooltip, required, max length, font, appearance.
+
+- API: [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) for tooltip, validation flags, typography, colors, alignment, borders.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+Edit PasswordBox
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ private async Task OnEditPassword()
+ {
+ if (viewer == null) return;
+
+ List fields = await viewer.GetFormFieldsAsync();
+
+ FormFieldInfo? field = fields?.FirstOrDefault(f => f.Name == "Password");
+
+ if (field != null)
+ {
+ (field as PasswordField).TooltipText = "Enter your password";
+ field.IsReadOnly = false;
+ field.IsRequired = true;
+ field.FontFamily = "Courier";
+ field.FontSize = 10;
+ field.Color = "black";
+ field.BorderColor = "black";
+ field.BackgroundColor = "white";
+ field.TextAlignment = TextAlignment.Left;
+ field.Thickness = 1;
+
+ await viewer.UpdateFormFieldsAsync(new List { field });
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### CheckBox
+- UI: Toggle checked state.
+
+- API: [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) for isChecked, tooltip, colors, borders.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+Edit CheckBox
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ private async Task OnEditCheckbox()
+ {
+ if (viewer == null) return;
+
+ List fields = await viewer.GetFormFieldsAsync();
+
+ FormFieldInfo? cb = fields?.FirstOrDefault(f => f.Name == "Subscribe");
+
+ if (cb != null)
+ {
+ (cb as CheckBoxField).IsChecked = true;
+ cb.BackgroundColor = "white";
+ cb.BorderColor = "black";
+ cb.Thickness = 2;
+ cb.TooltipText = "Subscribe to newsletter";
+
+ await viewer.UpdateFormFieldsAsync(new List { cb });
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### RadioButton
+- UI: Set selected item in a group (same Name).
+
+- API: [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) to set selected value and border appearance.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+Edit RadioButton
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ private async Task OnEditRadio()
+ {
+ if (viewer == null) return;
+
+ List fields = await viewer.GetFormFieldsAsync();
+
+ List? genderRadios = fields?.Where(f => f.Name == "Gender").ToList();
+
+ if (genderRadios?.Count > 1)
+ {
+ (genderRadios[0] as RadioButtonField).IsSelected = false;
+ (genderRadios[1] as RadioButtonField).IsSelected = true;
+ genderRadios[1].Thickness = 2;
+ genderRadios[1].BorderColor = "yellow";
+
+ await viewer.UpdateFormFieldsAsync(genderRadios);
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### ListBox
+- UI: Add/remove items, set selection, adjust fonts/colors.
+
+- API: [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) for items, selection, borders.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+Edit ListBox
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
+
+ private async Task UpdateFormField()
+ {
+ if (viewer == null) return;
+ List formFields = await viewer.GetFormFieldsAsync();
+ // Find and update ListBoxField
+ ListBoxField? listBox = formFields?.FirstOrDefault(f => f.Name == "InterestListBox" && f is ListBoxField) as ListBoxField;
+ if (listBox != null)
+ {
+ listBox.Items = new List {
+ new ListItem { Name = "item 1", Value = "Item 1" },
+ new ListItem { Name = "item 2", Value = "Item 2" },
+ new ListItem { Name = "item 3", Value = "Item 3" }
+ };
+ listBox.FontFamily = "Courier";
+ listBox.FontSize = 10;
+ listBox.Color = "black";
+ listBox.BorderColor = "black";
+ listBox.BackgroundColor = "white";
+ await viewer.UpdateFormFieldsAsync(new List { listBox });
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### DropDown
+- UI: Add/remove items, default value, appearance.
+
+- API: [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) for items, value, borders.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+Edit ListBox
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
+
+ private async Task UpdateFormField()
+ {
+ if (viewer == null) return;
+ List formFields = await viewer.GetFormFieldsAsync();
+ // Find only the specific dropdown by name
+ DropDownField? dropDown = formFields?.FirstOrDefault(f => f.Name == "CountryDropdown" && f is DropDownField) as DropDownField;
+ if (dropDown !=null)
+ {
+ dropDown.Items = new List {
+ new ListItem { Name = "option 1", Value = "Option 1" },
+ new ListItem { Name = "option 2", Value = "Option 2" },
+ new ListItem { Name = "option 3", Value = "Option 3" }
+ };
+ dropDown.FontFamily = "Courier";
+ dropDown.FontSize = 10;
+ dropDown.Color = "black";
+ dropDown.BorderColor = "black";
+ dropDown.BackgroundColor = "white";
+ await viewer.UpdateFormFieldsAsync(new List { dropDown });
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Signature Field
+- UI: Tooltip, thickness, indicator text, required/visibility.
+
+- API: [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) for tooltip, required, colors, borders.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+Edit Signature
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ private async Task OnEditSignature()
+ {
+ if (viewer == null) return;
+
+ List fields = await viewer.GetFormFieldsAsync();
+
+ FormFieldInfo? sig = fields?.FirstOrDefault(f => f.Name == "Sign");
+
+ if (sig != null)
+ {
+ sig.TooltipText = "Please sign here";
+ sig.Thickness = 3;
+ sig.IsRequired = true;
+ sig.BackgroundColor = "white";
+ sig.BorderColor = "black";
+
+ await viewer.UpdateFormFieldsAsync(new List { sig });
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Create form fields programmatically](../create-form-fields-programmatically)
+- [Create form fields](./create-form-fields)
+- [Remove form Fields](./remove-form-fields)
+- [Style form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/move-resize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/move-resize-form-fields.md
new file mode 100644
index 0000000000..0eba98e6e5
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/move-resize-form-fields.md
@@ -0,0 +1,103 @@
+---
+layout: post
+title: Move and Resize form fields in the Blazor SfPdfViewer | Syncfusion
+description: Learn how to move and resize PDF form fields using the UI and programmatically with APIs in the Syncfusion Blazor SfPdfViewer.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Move and Resize PDF Form Fields in Blazor
+The PDF Viewer supports moving and resizing form fields.
+
+- **Move**: drag the form field to reposition it.
+- **Resize**: use the resize handles to change width and height.
+
+
+
+## Move and resize fields programmatically
+
+The API supports setting absolute bounds or moving fields by a delta.
+
+### Set absolute bounds
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+Add Form Fields
+Resize and Move "First Name"
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-designer.pdf";
+
+ private async Task OnAddFormFields()
+ {
+ if (viewer == null) return;
+
+ // Create form fields with initial bounds
+ List formFields = new List
+ {
+ new TextBoxField
+ {
+ Name = "FirstName",
+ Bounds = new Bound { X = 146, Y = 229, Width = 150, Height = 24 }
+ },
+ new PasswordField
+ {
+ Name = "Password",
+ Bounds = new Bound { X = 338, Y = 229, Width = 150, Height = 24 }
+ },
+ new SignatureField
+ {
+ Name = "SignHere",
+ Bounds = new Bound { X = 146, Y = 280, Width = 200, Height = 43 }
+ }
+ };
+
+ // Add the form fields to the PDF document
+ await viewer.AddFormFieldsAsync(formFields);
+ }
+
+ private async Task OnResizeAndMove()
+ {
+ if (viewer == null) return;
+
+ // Retrieve all form fields from the PDF
+ List fields = await viewer.GetFormFieldsAsync();
+
+ // Find the "First Name" field
+ FormFieldInfo? field = fields?.FirstOrDefault(f => f.Name == "FirstName");
+
+ if (field != null)
+ {
+ // Update the bounds (move and resize)
+ field.Bounds = new Bound { X = 140, Y = 210, Width = 220, Height = 24 };
+
+ // Apply the changes
+ await viewer.UpdateFormFieldsAsync(new List { field });
+ }
+ }
+
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Form%20Designer/Components/Pages).
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Remove form Fields](./remove-form-fields)
+- [Customize form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/remove-form-fields.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/remove-form-fields.md
new file mode 100644
index 0000000000..8c499ec18e
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/manage-form-fields/remove-form-fields.md
@@ -0,0 +1,146 @@
+---
+layout: post
+title: Remove form fields in the Blazor SfPdfViewer component | Syncfusion
+description: Learn how to remove PDF form fields using the UI and programmatically in the Syncfusion Blazor SfPdfViewer component.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Remove PDF Form Fields from a PDF in Blazor
+
+The Blazor SfPdfViewer supports removing form fields using the Form Designer UI or programmatically via the API.
+
+## Remove form fields using the UI
+**Steps:**
+1. Enable **Form Designer** mode.
+2. Select the form field.
+3. Click **Delete** in the toolbar or press the **Delete** key.
+
+
+
+
+## Remove Form Fields Programmatically
+
+The [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Boolean_) method removes form fields from the document, enabling efficient management of form structures.
+
+### Delete All Form Fields
+Removes all form fields from the document using [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Boolean_) , clearing all interactive elements at once.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Buttons
+
+
+Delete All Form Fields
+
+
+
+
+
+@code {
+ // Reference to the PDF Viewer instance
+ private SfPdfViewer2 viewer;
+
+ // Path to the PDF document
+ private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
+
+ private async Task DeleteAllFormFields()
+ {
+ // Deletes all form fields from the PDF Viewer.
+ await viewer.DeleteFormFieldsAsync(true);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+The following image illustrates deleting all form fields in Blazor SfPdfViewer:
+
+
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/DeleteAllFields.razor).
+
+### Delete Selected Form Fields
+Deletes only the currently selected form field using [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Boolean_), enabling users to modify the document while keeping the rest of the form structure intact.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Buttons
+
+
+Delete Selected Form Field
+
+
+
+
+
+@code {
+ // Reference to the PDF Viewer instance
+ private SfPdfViewer2 viewer;
+
+ // Path to the PDF document
+ private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
+
+ private async Task DeleteSelectedFormField()
+ {
+ // Delete selected form field from the PDF Viewer.
+ await viewer.DeleteFormFieldsAsync(false);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+The following image illustrates deleting a selected password field in Blazor SfPdfViewer:
+
+
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/DeleteSelectedField.razor).
+
+### Delete Form Fields by IDs
+Removes specific form fields using [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Collections_Generic_List_System_String__) based on their unique identifiers, allowing precise control over which fields are deleted without affecting others. The example below deletes a single field by ID; pass multiple IDs to delete several fields at once.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Buttons
+
+
+Delete Form Field By ID
+
+
+
+
+
+@code {
+ // Reference to the PDF Viewer instance
+ private SfPdfViewer2 viewer;
+
+ // Path to the PDF document that will be loaded into the viewer
+ private string DocumentPath = "wwwroot/data/formDesigner_Document.pdf";
+
+ // Method to delete form fields based on their ID
+ private async Task DeleteFormFields()
+ {
+ List formFields = await viewer.GetFormFieldsAsync();
+ await viewer.DeleteFormFieldsAsync(new List {formFields[0].Id}); // Delete form fields by ID
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+The following image illustrates deleting form fields by their IDs in Blazor SfPdfViewer:
+
+
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/DeleteById.razor).
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Modify form fields](./modify-form-fields)
+- [Customize form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/overview-create-forms.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/overview-create-forms.md
new file mode 100644
index 0000000000..4c8463c6cd
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/overview-create-forms.md
@@ -0,0 +1,19 @@
+---
+layout: post
+title: Overview of Create form fields in React PDF Viewer | Syncfusion
+description: Learn how to create edit each form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Create, edit, style, and remove form fields in React PDF Viewer
+
+The [React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/overview) enables creation of interactive PDF form fields, modification of their behavior and appearance, and removal when no longer required. All form-field operations can be performed using either the [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/form-designer) or the React APIs.
+
+This section explains how to:
+
+- [Create PDF form fields](./manage-form-fields/create-form-fields)
+- [Edit form field behavior and values](./manage-form-fields/modify-form-fields)
+- [Style the appearance of form fields](./manage-form-fields/customize-form-fields)
+- [Remove form fields from a PDF document](./manage-form-fields/remove-form-fields)
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/overview.md
new file mode 100644
index 0000000000..17556f40c1
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/overview.md
@@ -0,0 +1,86 @@
+---
+layout: post
+title: Overview of Forms in Blazor SfPdfViewer Component | Syncfusion
+description: Learn what the Form Designer in Syncfusion Blazor SfPdfViewer offers, supported field types, and how the topics are organized.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Overview of Forms in Blazor SfPdfViewer
+
+The Syncfusion Blazor SfPdfViewer delivers a complete, easy-to-use PDF forms experience. Users can read, fill, add, edit, and delete form fields directly within PDF documents through the viewer UI or programmatically via the Blazor APIs.
+
+The viewer includes import and export support for form data, simplifying integration with backend systems. Developers have fine-grained API control while end users interact with a streamlined form-filling interface.
+
+## Filling PDF Forms
+
+Experience effortless PDF form filling through a clean, intuitive UI or automated workflows using powerful APIs. Flexible form data import and export support ensures smooth and efficient operations when working with PDF forms.
+
+See the [Filling PDF Forms](./form-filling) page for full details.
+
+Use the following code-snippet to configure form-filling in Blazor. Form-filling is enabled by default.
+
+{% tabs %}
+{% highlight razor %}
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+@code{
+ public string DocumentPath { get; set; } = "wwwroot/Data/FormFillingDocument.pdf";
+}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+1. [Programmatically Form fill](./form-filling#fill-pdf-forms-programmatically)
+2. [Form Fill Using UI](./form-filling#fill-pdf-forms-through-the-user-interface)
+3. [Import the Form data](./form-filling#fill-pdf-forms-through-import-data)
+
+## Form Designer
+
+A built in Form Designer lets you quickly add, edit, move, and delete form fields in the PDF documents. This viewer allows you to design fillable PDF forms interactively either using the built-in form designer tools or building your own customized form designer tools.
+
+See the [Form Designer](./form-designer) page for full details.
+
+Use the following code-snippet to configure form-designer in Blazor. Form-designer is enabled by default.
+
+{% tabs %}
+{% highlight razor %}
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+@code{
+ public string DocumentPath { get; set; } = "wwwroot/Data/FormFillingDocument.pdf";
+}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+Create and customize interactive fields directly on the PDF page.
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), or [remove](./manage-form-fields/remove-form-fields) forms
+- [Add a Signature Field](./manage-form-fields/create-form-fields#add-signature-field)
+- [Edit Form Field](./manage-form-fields/modify-form-fields)
+- [Remove Form Field](./manage-form-fields/remove-form-fields)
+- [Form Field Constraints](./form-constrain)
+
+## Supported form field types
+
+- [Textbox](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password](../forms/manage-form-fields/create-form-fields#add-password)
+- [CheckBox](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [RadioButton](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [ListBox](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [DropDown](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/forms/read-form-field-values.md b/Document-Processing/PDF/PDF-Viewer/blazor/forms/read-form-field-values.md
new file mode 100644
index 0000000000..85bb941ecb
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/forms/read-form-field-values.md
@@ -0,0 +1,306 @@
+---
+layout: post
+title: Read and Extract PDF Form Field Values in Blazor | Syncfusion
+description: Learn how to read and extract values from PDF form fields in the Blazor SfPdfViewer, including text, checkboxes, radio buttons, dropdowns, and signatures.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Read and Extract PDF Form Field Values in Blazor SfPdfViewer
+
+The Blazor SfPdfViewer allows you to read the values of interactive PDF form fields including textboxes, checkboxes, radio buttons, dropdowns, signatures, and more. Use the APIs below to retrieve form data programmatically for validation, submission, or syncing with your app state.
+
+This guide shows common patterns with concise code snippets you can copy into your Blazor components.
+
+## Access the Form Field Collection3
+
+Get all available form field data by using the [GetFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetFormFieldsAsync) method.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+Get Form Fields
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-document.pdf";
+
+ private async Task GetAllFormFields()
+ {
+ if (viewer == null) return;
+ List formFields = await viewer.GetFormFieldsAsync();
+ Console.WriteLine($"Total form fields: {formFields.Count}");
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Read Text Field Values
+
+Find the text field by name and read its value property.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+Read Text Field
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-document.pdf";
+
+ private async Task ReadTextFields()
+ {
+ if (viewer == null) return;
+ List formFields = await viewer.GetFormFieldsAsync();
+ TextBoxField? nameField = formFields.FirstOrDefault(field => field is TextBoxField && field.Name == "name") as TextBoxField;
+ string nameValue = nameField?.Value ?? string.Empty;
+ Console.WriteLine($"Name field value: {nameValue}");
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Read Checkbox / Radio Button Values
+
+Check whether a checkbox or radio button is selected by reading its `IsChecked` property.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+Read Checkbox Values
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-document.pdf";
+
+ private async Task ReadCheckboxValues()
+ {
+ if (viewer == null) return;
+ List formFields = await viewer.GetFormFieldsAsync();
+ List radioButtons = formFields.OfType().Where(field => field.Name == "gender").ToList();
+ RadioButtonField? checkedField = radioButtons.FirstOrDefault(field => field.IsSelected);
+ string fieldName = checkedField?.Name ?? string.Empty;
+ Console.WriteLine($"Selected radio button: {fieldName}");
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Read Dropdown values
+
+Read the dropdown's selected option by accessing the `Value` property.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+Read Dropdown Value
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-document.pdf";
+
+ private async Task ReadDropdownValues()
+ {
+ if (viewer == null) return;
+
+ try
+ {
+ List formFields = await viewer.GetFormFieldsAsync();
+ DropDownField? dropdownField = formFields?.FirstOrDefault(field => field is DropDownField && field.Name == "state") as DropDownField;
+
+ if (dropdownField != null && dropdownField.Items != null && dropdownField.Items.Count > 0)
+ {
+ // Read ALL values in dropdown
+ Console.WriteLine("=== All Dropdown Values ===");
+ for (int i = 0; i < dropdownField.Items.Count; i++)
+ {
+ Console.WriteLine($"Index {i}: Name = {dropdownField.Items[i].Name}, Value = {dropdownField.Items[i].Value}");
+ }
+
+ // Get selected item using SelectedIndex
+ int selectedIndex = dropdownField.SelectedIndex;
+ string selectedValue = selectedIndex >= 0 ? dropdownField.Items[selectedIndex].Value : string.Empty;
+ Console.WriteLine($"\nCurrently Selected: Index={selectedIndex}, Value={selectedValue}");
+
+ // Update dropdown with new items
+ dropdownField.Items = new List
+ {
+ new ListItem { Name = "USA", Value = "US" },
+ new ListItem { Name = "Canada", Value = "CA" },
+ new ListItem { Name = "Mexico", Value = "MX" }
+ };
+ dropdownField.SelectedIndex = 0; // Set default selection
+
+ await viewer.UpdateFormFieldsAsync(new List { dropdownField });
+ }
+ }
+ catch (Exception ex)
+ {
+ Console.WriteLine($"Error: {ex.Message}");
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Read Signature Field Data
+
+This reads the signature path data stored in a signature field so it can be later converted to an image.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+Read Signature Data
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-document.pdf";
+
+ private async Task ReadSignatureData()
+ {
+ if (viewer == null) return;
+ List formFields = await viewer.GetFormFieldsAsync();
+ SignatureField? signatureField = formFields.FirstOrDefault(field => field is SignatureField && field.Name == "signature") as SignatureField;
+ string signatureData = signatureField?.Value ?? string.Empty;
+ Console.WriteLine($"Signature data: {signatureData}");
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Extract All Form Field Values
+
+This iterates every field in the collection and logs each field's name and value, useful for exporting or validating all form data.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+Extract All Values
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-document.pdf";
+
+ private async Task ExtractAllFieldValues()
+ {
+ if (viewer == null) return;
+ List formFields = await viewer.GetFormFieldsAsync();
+
+ foreach (FormFieldInfo field in formFields)
+ {
+ if (field is CheckBoxField checkBoxField)
+ {
+ Console.WriteLine($"{field.Name}: {checkBoxField.IsChecked}");
+ }
+ else if (field is RadioButtonField radioButtonField)
+ {
+ Console.WriteLine($"{field.Name}: {radioButtonField.IsSelected}");
+ }
+ else if (field is TextBoxField textBoxField)
+ {
+ Console.WriteLine($"{field.Name}: {textBoxField.Value}");
+ }
+ else if (field is DropDownField dropDownField)
+ {
+ ListItem? selectedItem = dropDownField.Items.ElementAtOrDefault(dropDownField.SelectedIndex);
+ Console.WriteLine($"{field.Name}: {selectedItem?.Value}");
+ }
+ else
+ {
+ Console.WriteLine($"{field.Name}: (unknown type)");
+ }
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Extract Form Data After Document Loaded
+
+Place your form-reading logic inside the `DocumentLoaded` event handler, so values are read after the PDF is loaded in the viewer.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code {
+ private SfPdfViewer2? viewer;
+ private string DocumentPath = "wwwroot/data/form-document.pdf";
+
+ private async Task OnDocumentLoaded()
+ {
+ if (viewer == null) return;
+
+ // Access form data right after the PDF loads
+ List formFields = await viewer.GetFormFieldsAsync();
+ TextBoxField? emailField = formFields.FirstOrDefault(field => field is TextBoxField && field.Name == "email") as TextBoxField;
+ string email = emailField?.Value ?? string.Empty;
+
+ Console.WriteLine($"Email: {email}");
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Form%20Designer/Components/Pages).
+
+## Use Cases
+
+- Validate and pre-fill form fields in your application before user submission.
+- Submit filled form data from the viewer to a back end service for processing or storage.
+- Synchronize form field values with external UI components to keep application state in sync.
+- Export form data for reporting, archival, or integration with other systems.
+
+## Troubleshooting
+
+- Use the exact field names defined in the PDF when searching through the `formFieldCollections`.
+- If a field might be missing in some documents, add null checks.
+
+## See also
+
+- [GetFormFieldsAsync API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetFormFieldsAsync)
+- [Programmatic Support for Form Designer](./create-programmatically)
+- [Form Designer Events](./events)
\ No newline at end of file