How to Create a PDF Form Using GcPdfViewer - Part 1

Using the GcPdfViewer Javascript widget included with GrapeCity Documents for PDF, your end users can create and design rich PDF forms. In this blog, I will demonstrate how to use the GcPdfViewer to develop a Health Intake form for an online yoga class. I will be using this template form as a base and use this online demo sample for GcPdfViewer to create the document.

Step 1: Open the Template

Click the "Open" button in the upper-left of the toolbar (or press Ctrl+O) and browse for the template form. We will load that template PDF into the GcPdfViewer:

Figure 1 – Open template PDF using Open Document tool

Step 2: Open the Fields List

Click the "Form Fields" button along the bottom left to open the Fields List and form fields toolbar:

Figure 2 – Open Form Field list and form controls toolbar

Step 3: Add a Text Field

Click the Text Field tool, which is the first tool after the save button in the form fields toolbar along the top of the GcPdfViewer:

Figure 3 – Click "Add text field" in the toolbar

Use the text field for form fields that need to accept a single line of text.

Step 4: Draw the new Text Field

Draw a new text field next to the label for "Name:" as shown:

Figure 4 – Draw text field for Name

Repeat this step for the other form fields on the first page that need to accept a single line of input: e-mail, address, city, state, zip, date of birth, best phone numbers, emergency contact (name/relationship), and emergency phone numbers (up to the first yes/no questions).

Step 5: Set Form Field Names

Open the Form Fields list again (click the Form Editor tool along the bottom left side) to show the field list, then select each field and set the Name to the field name you want to use for that form field:

Figure 5 – Set Form Field Names

Many other properties can be set for each form field: read-only, Value, Align, etc. if required.

Step 6: Get and Set Form Field Location and Size

To align and size your form fields consistently, you can scroll down the Form Editor properties to bounds. Bounds will show the Location and Size and ensure that all text fields are aligned and sized to appear in the form:

Figure 6 – Set form field bounds for consistency

Step 7: Add Radio Buttons in the Form

Use the Radio Button tool to create radio buttons in the form for the "Yes" and "No" options for the "Do you smoke?" question:

Figure 7 – Add radio buttons

Step 8: Set Radio Button Properties

Use the Form Fields list to show the radio button properties and set up the radio buttons to operate in a group:

Figure 8 – Set radio button properties to create a group

Radio button fields must use the same name to be in the same radio button group. Set the Name for both radio buttons to radiogroupSmoke and set Export Value to the value that the radio button should return when selected. Set Value to the initial value that the radio group should show in the form. Each radio button is sized to 14x14 to make it appear approximately the same size as the other text in the form.

After the radio buttons are added and initialized, you can continue creating the text field for "How Long" and then repeat steps 7 and 8 to make the radio buttons for the "Do you take prescription medication" question.

Step 9: Add Text Area Fields

Use the text area field to create a form field which can accept multiple lines of text:

Figure 9 – Add text area field

Most of the remaining fields in the form require text area fields until the last page.

Step 10: Create the Text Area Fields

Draw the text area fields for each form field that requires multiple lines (up to "Are you pregnant" on page 5):

Figure 10 – Create text area fields

After creating all the text area fields in each page, you can use the Form Editor as in step 6 to adjust each text area field's size and location to make them consistently sized and aligned.

Step 11: Create More Radio Buttons

To create the radio buttons for "Are you pregnant?" repeat steps 7 and 8 to create the radio buttons for Yes, No, and N/A.

After you make those radio buttons, create a simple text field for the "If yes, when are you due?" question; repeat steps 7 and 8 to create two sets of ten radio buttons to build the scales for pain and level of stress.

Add the final text area field for the "What are your goals..." question.

Step 12: Create Signature and Name Fields Using Text Fields

Use the Text field to create the Signature and Date fields for participant and parent/guardian:

Figure 11 – Create Signature and Date fields

After building all the form fields, you can close the Form Editor and test the form fields to see if any need to be adjusted. The order of the form fields in the Form Editor determines the tab order. You can use the gripper tool at the far right of the form control in the form editor to drag and drop the form fields to rearrange the ordering.

When the form fields are all in order, and the form is complete and ready to save, click the Save button to save the PDF. The final result should look like this.