Documents for PDF .NET Edition
GrapeCity Documents PDF Viewer / Edit PDF / Editors / Form Editor
In This Topic
    Form Editor
    In This Topic

    The Form Editor in GcDocs PDF Viewer 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. All the form fields of a form are listed in the Property panel so that any field can be accessed and modified at any point of time.

    The below image shows a PDF form in GcDocs PDF Viewer in which a text field is added using the Form Editor:

    Form Editor

    The different toolbar buttons in the Form Editor are described as below:

    Name Toolbar Icons Description
    Select Form field icon Selects a form field added on PDF
    Text Text field icon Adds a text field on PDF
    Password Password field icon Adds a password field on PDF
    Text Area Text area field icon Adds a text area field to add long text on PDF
    Checkbox Checkbox icon Adds a check box on PDF
    RadioButton Radio button icon Adds a radio button on PDF
    PushButton Push button icon Adds a push button on PDF
    Combobox Combo box icon Adds a combo box on PDF
    Listbox List icon Adds a list box on PDF
    Comb-Text Field comb-text field icon Adds a comb-text field to add text in equally spaced positions on PDF
    Submit Form Button Submit button Adds a submit form button on PDF
    Reset Form Button Reset button Adds a reset form button on PDF
    Delete Form Button Delete button Deletes the form field

     

    Apart from the different types of form fields described above, GcDocs PDF Viewer also provides some general editing features while working with PDF documents. They are explained as below:

    Toolbar Icons Description
    Undo icon Undo changes
    Redo icon Redo changes
    Save icon Saves the modified document on client
    Blank doc icon Creates a new blank document
    Blank page icon Inserts a blank page
    Delete page icon Deletes current page
    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.

    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.

     

    Property panel of form editor

     

    Enable Form Editor in GcDocs PDF Viewer

    The Form Editor is displayed by default in GcDocs PDF Viewer, by enabling the FormEditorPanel in the viewer using code:

    Index.cshtml
    Copy Code
    <script>
        var viewer = new GcPdfViewer("#host", { supportApi: 'SupportApi/GcPdfViewer' });
        viewer.addDefaultPanels();
        viewer.addFormEditorPanel();
        viewer.beforeUnloadConfirmation = true;
        viewer.open("Home/GetPdf");
    </script>
    

     

    To customize the form fields in GcDocs PDF Viewer, add the following lines of code in the class file where you load the PDF in the Viewer:

    C#
    Copy Code
    public static GcPdfViewerSupportApiDemo.Models.PdfViewerOptions PdfViewerOptions
            {
                get => new GcPdfViewerSupportApiDemo.Models.PdfViewerOptions(
                    GcPdfViewerSupportApiDemo.Models.PdfViewerOptions.Options.FormEditorPanel |
                    GcPdfViewerSupportApiDemo.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 GcDocs PDF Viewer:

    1. Configure the GcDocs PDF Viewer for editing 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. 

    GcDocs PDF Viewer

    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. GcDocs PDF Viewer allows you to set any of the tab order settings specified in the PDF specification 1.7, namely:

    In view mode, only the 'Row', 'Column' and 'Not Specified' tab orders are supported (which follow the order of annotations in the page).

    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).

    You can also set the tab order in a PDF document using GcPdf API. To know more, refer Forms.

    Other Resources

    Using a 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 GcPdfViewer A detailed blog on how to use the GcDocs PDF Viewer to develop a Health Intake form for an online yoga class.
    Form Editor The online sample browser demonstrating the AcroForm editing features of GcDocs PDF Viewer.
    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.