Using a PDF Form Designer for Web

A PDF form can be defined as an interactive PDF file, which is used to gather information from users. You have probably come across a number of PDF forms either online or in physical paper form, a few examples could be banking, taxation, and registration. The Grapecity Documents PDF Viewer provides a Form Editor tool.

With this tool, you can design new PDF forms or edit the existing ones. Download the created or edited PDF form using the Save option from the Form Editor tool.

This blog shows you how to create or edit PDF forms using GcPdfViewer. Let's start by describing what features of GcPdfViewer support the designing of Acroforms.

Form Editor

The Form Editor tool provides a set of form fields and a form field property panel to design and edit new and existing PDF forms respectively. Configure GcPdfViewer to enable the Form Editor tool. The steps for configuring GcPdfViewer are here. After GcPdfViewer is configured and the Form Editor tool is enabled, click the last item in the left panel of GcPdfViewer to open Form Editor.

Form Fields

A form field is used to enter data in PDF forms. Its appearance is represented by a Widget Annotation. GcPdfViewer provides many different types of form fields and they are displayed in the form of a toolbar at the top of Form Editor. All these form fields have a set of properties associated with them that are used to set the field value or customize its appearance.

There are a few properties that are common to all the form fields. Common properties include Name, ReadOnly, Value, Border, BackColor, and Bounds. Apart from the common properties, a few properties are specific to the type of form field.

The table below lists all the available form fields along with their toolbar icon, description, and unique properties:

Field	Toolbar Icon	Description	Specific Properties
Text		Adds a text field on PDF	Align, Forecolor, Font size, MaxLength, Required
Password		Adds a password field on PDF	Align, Forecolor, Font size, MaxLength, Required
Text Area		Adds a text area field to add long text on PDF	Align, Forecolor, Font size, MaxLength, Required
Checkbox		Adds a check box on PDF	-------
Radio Button		Adds a radio button on PDF	Export value
Push Button		Adds a push button on PDF	-------
Combobox		Adds a combo box on PDF	Options
Listbox		Adds a list box on PDF	Options, Multi-select
Comb-Text Field		Adds a comb-text field to add text in equally spaced positions on PDF	Align, Combs count, Forecolor, Font size, Required
Submit Form Button		Adds a submit form button on PDF	Submit URL
Reset Form Button		Adds a reset form button on PDF	-------

Form Field Property Panel

The form field property panel is displayed in the left of the Form Editor and lists all the form fields available in the currently loaded document. Each form field has its own set of properties, which are displayed when you click on any form field in the form field property panel. Each form field can be configured using these sets of properties which include name, location, value etc.

Other Form Editor Features:

Toolbar Options

Apart from form fields, the Form Editor toolbar provides few more options to edit PDF form, here is a summarized list describing the same:

Toolbar Icons	Description
	Undo changes
	Redo changes
	Saves the modified document on client
	Creates a new blank document
	Inserts a blank page
	Deletes current page

Alignment and Margin

GcPdfViewer provides snap alignment and snap margin features. These features align and maintain margins between form fields. Both features are enabled by default in GcPdfViewer. The snap alignment feature provides temporarily visible dashed lines to align the form fields with respect to each other. They start appearing when you add new form fields or move an existing field to alter its position. By default, the snap margin feature adds a margin of 10 points between two fields or page edges.

For further details, refer to following link.

Clone Form Fields

GcPdfViewer lets you create a copy of an existing form field with either the copy paste option or the clone button. The copy paste action can be performed by using the Form Editor context menu or the usual keyboard shortcut keys i.e. Ctrl+c/Ctrl+v. The clone button can be accessed by expanding the properties of a form field in the form field property panel. The cloned form field is added in the same position as the existing field with the same set of properties. The same behavior is observed when pasting the copied form field using the context menu. When pasting the form field with the keyboard shortcut key, it is pasted in the center of the page. This feature is helpful for adding similar form fields in different positions.
For further details on these features, refer to following link.

Now, let's create a PDF form that includes the features described above.

Create New PDF Form (Acroform)

GcPdfViewer lets you design simple to complicated PDF forms. We will consider a scenario of confirming trip details with a travel agent using a PDF form. Most travel agencies provide booking forms either online or offline to clients. Clients must fill and submit the PDF to confirm their booking. The PDF form is shared with the customer. Whether the form is shared through a website link or as a PDF file, the form can be created in PDF format using form fields. Here is a quick view of the form:

The following steps explain how to create A PDF form using GcPdfViewer.

Step 1: Design PDF Form Layout

The first step to designing a PDF form is creating the form layout. The layout includes the text and images contained in the PDF form such as labels describing the value that needs to be entered in a specific form field, a company logo, etc. Design this layout with the GcPdf API members. Add the form title and labels using the Free Text Annotation available in the Annotation Editor of GcPdfViewer.

Here is the PDF form layout:

Download the sample used to create this PDF form layout here.

Step 2: Configure Application

1. Download and run the sample attached in the step 1 to generate the PDF form template containing the layout of the PDF form
2. Create a new ASP.NET Core web application using MVC template and configure it to render GcPdfViewer with all the editing tools including Annotation Editor and Form Editor (This link describes the steps to configure GcPdfViewer.)
3. Copy and paste the PDF form template generated in the first step to your project folder
4. Build and run the application to see GcPdfViewer in action. The Form Editor tool is displayed as the last option in the left panel of GcPdfViewer, but is currently disabled as no document has been loaded yet.
5. To load the PDF form template containing the PDF Form layout, click on the open button in the toolbar displayed at the top of the Viewer and load the template file from the project folder.

After the PDF Form template is loaded, the Form Editor Tool icon is enabled:

Step 3: Add Form Fields Using GcPdfViewer Form Editor Tool

We will be adding ComboBox, TextBox, Checkbox, Radio button, TextArea, Submit push button and Reset push button form fields to the above form layout to complete the creation of PDF Form. The sections below will guide you on how to add form fields:

Adding Form Field:

1. Click on the form field in the toolbar displayed at the top of GcPdfViewer
2. Click on the position in the form where you want to add the field and draw the field with the required width and height
3. The property panel expands to show the properties of the added Form field
4. Set the properties to either set the value of the form field or customize its appearance

Using the above defined common steps to populate the form layout with appropriate form fields. The snap alignment, copy paste and clone features are also used.

Open the Form Editor tool by clicking on the last option in the left panel of GcPdfViewer. A toolbar displayed at the top of Viewer consists of all the form fields that can be used to create a PDF form. On the left it displays the form field property panel which lists all the fields contained in the form along with their properties.

Add Combobox Field for Departure and Destination:

1. Add a Combobox field next to Departure label. Set the Options property to define the list of values for a Combobox field with the form field property panel.

2. Set the following properties to customize the appearance of Combobox field:

   • Backcolor: White
   • Border Color: Light grey Bound X: 175
   • Bound Y: 162
   • Width: 368
   • Height: 24

3. Click on the Clone button at the end of the Combobox properties to create a copy of the Combobox field added above. It is added at the top of the first Combobox.

4. Drag the second Combobox field next to Destination label. Adjust its position using the snap alignment and margin feature of GcPdfViewer to place it right below the first Combobox.

Add Textbox field for Departure Date, Return Date, Name, Address, Phone and Email:

1. Add a Textbox field next to Departure Date label

2. Set the following properties to customize the appearance of Textbox field:

   • Backcolor: White
   • Border Color: Light grey

3. Adjust the size and position to match with the Combobox using snap alignment and margin feature

4. Click on the Clone button at the end of the Textbox properties to create a copy of the Textbox field added above. It is added at the top of the first Textbox
5. Drag the second Textbox field next to Return Date label. Adjust its position using the snap alignment and margin feature of GcPdfViewer to place it right below the first Textbox

Similarly clone and add Textbox fields next to Name, Address, Phone and Email labels.

Add Checkbox field for Flights, Rental Car, Hotels and Entertainment:

1. Add a Checkbox field next to the Flights label

2. Set the following properties to customize the appearance of Checkbox field:

   • Backcolor: White

3. Adjust the size and position using snap alignment and margin feature

4. Click on the Clone button at the end of the Checkbox properties to create a copy of the Checkbox field added above
5. Drag the second checkbox field next to Rental Car label. Adjust its position using the snap alignment and margin feature of GcPdfViewer

Clone and add checkbox fields next to Hotels and Entertainment labels.

Add Radio Button Field for Yes and No:

1. Add a Radio Button field next to Yes label.
2. Set the Value property to 1 and Export Value property to “Yes” for label checkbox.

3. Set the following properties to customize the appearance of Radio Button field:

   • Backcolor: White

4. Adjust the size and position using snap alignment and margin feature

5. Click on the Clone button at the end of the Radio Button properties to create a copy of the Radio Button field added above.

6. Drag the second Radio button field next to _No_ label. Adjust its position using the snap alignment and margin feature of GcPdfViewer and set the Export Value property to “No.”

The Name property of both these buttons must be set to the same value to make sure that they form a group and hence the user is able to select only one value from either of these.

Add Text Area Field for Special Request:

1. Add a Text area field below the Do you have any Special Request section and adjust the size and position using snap alignment and margin feature.

2. Set the following properties to customize the appearance of Textbox field:

   • Backcolor: White
   • Border Color: Light grey

Add Reset Push Button Field:

1. Add a Reset Form push button field at the bottom of the TextArea, which would be used to delete all the filled in values in the form and reset it to its default state.
2. Adjust the size and position using snap alignment and margin feature.

3. Set the following properties to customize the appearance of reset push button field:

   • Backcolor: Light Blue
   • Border Color: Light grey

Add Submit Push Button Field:

1. Add a Submit Form push button field at the bottom of the TextArea, which would be used to submit the filled form data back to the server.
2. Adjust the size and position using snap alignment and margin feature.

3. Set the following properties to customize the appearance of Reset push button field:

   • Backcolor: Light Blue
   • Border Color: Light grey

4. Set the Submit URL property to a server side handler to handle the submit operation.

This completes the creation of a PDF form and this is how it looks, displaying all the added form fields in the form field property panel.

Download the created PDF form:

Click on the Save button in the Form Editor toolbar or in GcPdfViewer toolbar to save a copy of the created PDF form.

Edit Existing Acroform

The above steps can even be used to customize an existing PDF form. You can load the PDF form in GcPdfViewer and open the Form Editor tool to view all the existing form fields in the form. Select and delete any of the existing fields or add new fields as described above.

A demo sample implementing the same can be found here.

Download Sample

A sample configured to enable the Form Editor tool and implement the Submit button handler can be downloaded here.

Download and use it to design the PDF form created by following the steps above. After the form has been created, close the Form Editor tool and fill in the created form. Click on the submit button in the form to download a copy of the filled PDF form.

Make sure you set the Submit URL property of the Submit push button field to "HandleFormSubmitXml" to get the submit button working.

Design a few PDF forms and let us know if you have any questions.