# Form Editor Work with Document Solutions PDF Viewer to edit, design, fill, and submit PDF forms using the Form Editor. Learn more in DsPdf Docs. ## Content The Form Editor in DsPdfViewer allows you to edit, design, fill and submit PDF forms. You can create new forms or modify existing ones by adding or removing different types of form fields and setting or modifying form field's properties like Name, ReadOnly, Max Length, Value, Bounds, Border etc. Along with the Form editor's toolbar, you can access all the form fields and various other options directly through the the main toolbar. It provides Form tools button which displays various form field buttons like text field, password field, radio button, checkbox etc. As can be observed, the 'Undo, Redo and Delete' and Redact options are also available in the quick editing toolbar. ![](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/form_tools.png) You can also configure which tools should be displayed in the quick editing toolbar of Form tools by using the **secondToolbarLayout** property. Also, you can use Page tools ![](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/page-tools-icon.png) to add a new blank document, insert a blank page, delete current page and perform undo or redo operations. To know more, refer [Annotation Editor](/document-solutions/dot-net-pdf-api/docs/online/pdfviewer/edit-pdf/editors/annotation-editor). >type=note > **Note:** The editing tools (explained above) are automatically enabled in the main toolbar when [SupportApi](/document-solutions/dot-net-pdf-api/docs/online/pdfviewer/edit-pdf/configure-pdf-editor) is configured in the project (which allows editing operations in a PDF document). Alternatively, you can access all the form fields through the Form editor's toolbar which opens on clicking the Form editor button in the side panel. The below GIF shows a PDF form in DsPdfViewer in which a text field is added using the Form Editor: ![Form Editor](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/formeditor.gif) The different toolbar buttons in the Form Editor are described as below: | **Name** | **Toolbar Icons** | **Description** | | ---- | ------------- | ----------- | | Select | ![Form field icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/icon20.png) | Selects a form field added on PDF | | Text | ![Text field icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/t1.png) | Adds a text field on PDF | | Password | ![Password field icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/t2.png) | Adds a password field on PDF | | Text Area | ![Text area field icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/t3.png) | Adds a text area field to add long text on PDF | | Checkbox | ![Checkbox icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/t4.png) | Adds a check box on PDF | | RadioButton | ![Radio button icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/t5.png) | Adds a radio button on PDF | | PushButton | ![Push button icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/t6.png) | Adds a push button on PDF | | Combobox | ![Combo box icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/t7.png) | Adds a combo box on PDF | | Listbox | ![List icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/t8.png) | Adds a list box on PDF | | Comb-Text Field | ![comb-text field icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/t9.png) | Adds a comb-text field to add text in equally spaced positions on PDF | | Submit Form Button | ![Submit button](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/t10.png) | Adds a submit form button on PDF | | Reset Form Button | ![Reset button](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/t11.png) | Adds a reset form button on PDF | | Delete Form Button[Checkbox and Radio Button](/document-solutions/dot-net-pdf-api/docs/online/pdfviewer/edit-pdf/editors/form-editor/checkbox-radio-button-appearance) | ![Delete button](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/t12.png) | Deletes the form field | Apart from the different types of form fields described above, DsPdfViewer also provides some general editing features while working with PDF documents. They are explained as below: | **Toolbar Icons** | **Description** | | ------------- | ----------- | | ![Undo icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/icon15.png) | Undo changes | | ![Redo icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/icon16.png) | Redo changes | | ![Save icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/icon17.png) | Saves the modified document on client | | ![](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/saveasimage.png) | Saves the modified document as images on client | | ![Blank doc icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/icon18.png) | Creates a new blank document | | ![Blank page icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/icon22.png) | Inserts a blank page | | ![Delete page icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/icon21.png) | Deletes current page | | ![](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/pdf-organizer-icon.png) | Reorders and reorganizes the pages in a PDF document. For more information, see [PDF Organizer](/document-solutions/dot-net-pdf-api/docs/online/pdfviewer/edit-pdf/PDFOrganizer). | >type=note > **Note:** You can view, print or download the original PDF document at any point of time by using the 'Hide Annotations' button on the main toolbar. You can also insert a blank page in a PDF document and set its size by using the newPage method. Alternatively, you can only set the size of an existing page using setPageSize method. To know more, refer [Annotation Editor](/document-solutions/dot-net-pdf-api/docs/online/pdfviewer/edit-pdf/editors/annotation-editor). ## Property Panel of Form Editor When you click the Form Editor icon in the left vertical panel, the Property panel of the Form Editor becomes visible. The Property panel displays the list of all the form fields page-wise in your document. It also allows you to set or modify properties of any form field in the document like its text, border, location etc. For eg. The image below shows the properties of a text field in the Property panel. ![](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/image2.png) ## Enable Form Editor in DsPdfViewer The Form Editor is displayed by default in DsPdfViewer, by enabling the FormEditorPanel in the viewer using code: ```html ``` To customize the form fields in DsPdfViewer, add the following lines of code in the class file where you load the PDF in the Viewer: ```csharp public static DsPdfViewerSupportApiDemo.Models.PdfViewerOptions PdfViewerOptions { get => new DsPdfViewerSupportApiDemo.Models.PdfViewerOptions( DsPdfViewerSupportApiDemo.Models.PdfViewerOptions.Options.FormEditorPanel | DsPdfViewerSupportApiDemo.Models.PdfViewerOptions.Options.ActivateFormEditor, formEditorTools: new string[] { "edit-select-field", "$split", "edit-widget-tx-field", "edit-widget-tx-text-area", "$split", "edit-erase-field", "$split", "edit-undo", "edit-redo", "save" }); } ``` ## Create a PDF form using Form Editor Follow the below steps to create a 'Customer Detail' PDF form using the Form Editor in DsPdfViewer: 1. Configure the [DsPdfViewer for editing](/document-solutions/dot-net-pdf-api/docs/online/pdfviewer/edit-pdf) PDF documents and run the application. 2. Load a PDF document containing static text corresponding to which you want to add form fields. 3. Open the Form Editor using the last icon on the left vertical panel. 4. Add text fields, text area and radio buttons to your form by using form editor tools. 5. Set properties of form fields from the Property panel like location, border etc. 6. Add a combo box which displays various drop down options when clicked (as shown below). 7. Close the Form Editor and go back to View mode. A Customer Detail PDF form is created successfully. You can view the list of all the form fields in the property panel of Form Editor. ![](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/image3.png) ## Tab Order of Form Fields The tab order of form fields can be viewed (if already set in a PDF document) or set in the property panel of Form Editor. It helps to navigate through the form fields using the tab key. This is specially useful when filling long forms. DsPdfViewer allows you to set any of the tab order settings specified in the PDF Specification 2.0, namely: * Row * Column * Structure * Not Specified In [view mode](/document-solutions/dot-net-pdf-api/docs/online/pdfviewer/view-pdf/viewingpdfusinggrapecitydocumentspdfviewer), only the 'Row', 'Column' and 'Not Specified' (follows the order of annotations in the page) tab orders are supported. >type=note > **Note:** 'Structure' is not supported in view mode, but can be set in the editor (to be used by other viewers, for example Adobe Acrobat Reader). ![](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/tab-order.png) You can also set the tab order in a PDF document using DsPdf API. To know more, refer [Forms](/document-solutions/dot-net-pdf-api/docs/online/Features/Forms#i-heading-define-tab-order-of-form-fields). >type=info > \#\# Other Resources > > | Name | Description | > | ---- | ----------- | > | [Using a PDF Form Designer for Web](https://developer.mescius.com/blogs/pdf-form-designer-for-web) | A blog post on how to design new PDF forms or edit the existing ones and use various form editor features. | > | [How to Create a PDF Form Using DsPdfViewer](https://developer.mescius.com/blogs/how-to-create-a-pdf-form-using-gcpdfviewer-part-one) | A detailed blog on how to use the DsPdfViewer to develop a Health Intake form for an online yoga class. | > | [Form Editor](https://developer.mescius.com/documents-api-pdfviewer/demos/id/edit-forms) | The online sample browser demonstrating the AcroForm editing features of DsPdfViewer. | > | [Sample Forms](https://developer.mescius.com/documents-api-pdf/demos/sample-forms) | The online sample browser demonstrating the filling, editing, saving or printing various types of PDF forms like Tax forms, E-commerce, HR, Membership, Events etc. | ## Orientation of Form Field When a form field is placed on a rotated PDF page, it is added in its original position and does not adjust to the new orientation by itself. To enable rotation of form fields placed on a PDF page, DsPdfViewer provides **Orientation** property which lets you set the field orientation in multiples of 90 degrees. Below sample code shows how to set orientation of the form fields in a PDF document. ```javascript // Change orientation to 180 degrees fld1.orientation = 180; ```