PDF In-Depth

Acrobat PDF Forms: A Step-by-step Introduction

February 01, 2001

Advertisement
Advertisement
 

Why Forms?

Forms use:

Almost all purchases of goods and services require some kind of directly or indirectly related forms completion. Using a credit card for purchasing goods requires you to have at least filled out a form to acquire the credit card. E-commerce is continuing to grow at quantum leaps and all e-commerce sites require forms completion. Take a simple example of applying for a fishing license in the US. A form is needed for:

  • The original application

  • A form is used to return your acceptance/rejection from the Department of Fish and Game

  • A form is used to issue the license

  • A form is used to issue citations of infraction

  • A form is used for renewal of the application each season

Just about anything you can think of requires filling out a form at one time or another. And, just about any company or organization using a form, needs to get the form data onto digital media.

Forms and Costs

Costs derived in using forms:

Take an example of a computer book author. When a publication is complete and sales begin, the pub-lishing house returns a monthly statement to the author on the sales volume of a given book. These sales reports often include royalty amounts to be distributed to the author. A form is used to detail the sales ?foreign and domestic, amounts held for reserves, and royalty amounts to be received at a later date. Assuming a large publishing house has 5,000 titles currently selling, the cost of distribution of forms for each title include:

  • Envelopes to mail the form at 9x12 inches and printed with publisher address -- .03

  • Photocopies or laser prints to be distributed (one copy for author, one for publisher) -- .06

  • Postage to mail the form (actual cost of envelopes I have received) -- .55

  • Total costs per each form to be mailed -- .64

  • Monthly cost for the publisher to distribute 5,000 forms (5,000 X .64) -- $3,200.00

  • Costs per year for 5,000 titles -- $38,400.00

  • 5 year costs -- $192,000.00

  • 10 year costs -- $384,000.00

Add all the publishers and all the authors and the number of forms to be distributed monthly and the numbers easily rise to multi-millions of dollars.

Bottom line: Analog form distribution is costly and inefficient.

The Buying Public

Forms for transactions:

One of the largest growing uses of forms is found with e-commerce and online forms. For anyone designing forms for commercial use in completing transactions, it first helps to understand a little bit about the economy and psycho/social habits of the buying public. Then move to another level and try to comprehend the sophistication of the individual targeted for the purchas-es. In the US, the largest purchasers of goods and services is the boomers. In the year 2000, this population is aged between 40 and 60. The buying behavior of this group has been:

  • They never saved

  • They spend everything they earn

  • They need to continue working past 65 because they don't have enough saved to retire

Short range projections indicate the 3percent unemployment rate will continue past the year 2020. Between now and then, the boomers will inherit over 12 trillion dollars. This money will be recycled back into the economy because they'll be certain to follow the same habits ?the boomers won't save it and they'll spend it all.

Computer skills of the boomers

Unless there are products targeted at specific age groups, the largest purchasing group will continue for the next two decades to be the boomers. If we assume online pur-chasing will grow and more transactions will be complet-ed through e-commerce, then forms accessibility and completion needs to be targeted at this population ?after all, they're going to spend over 12 trillion dollars within the next 20 years.

Computer skills of this population are generally less astute than the average 14 year old child in the US. Online home connections are inexpensive and slow. The population is generally impatient and they don't have the technical expertise to resolve complex configuration prob-lems. They want it simple, fast and painless.

Form Requirements

Regardless of whether forms are created for transactions or information archiving, they all need to be designed with:

  • Ease of completion - this includes analog forms as well as online electronic forms.

  • Precision: in the form architecture, the smart forms need to be designed to prevent as much user error as possible.

  • A need for retrieval capability: Since the data on most analog forms eventually needs to be elec-tronically catalogued, it only makes sense to have as many original forms as possible submitted electronically.

Why Acrobat for Online Forms?

Acrobat PDF Forms

Search around the Web for only a few minutes and you'll find a site containing a form. Forms you see on Web pages are HTML based and the data is collected by a CGI (Common gateway Interface) at the Web server.

Acrobat forms can be downloaded from a server to a remote computer and saved for later use. You can complete an Acrobat form and submit the form data to a Web server in a few ways - either as a file format unique to Acrobat called FDF (Forms Data Format) or in HTML format.

One disadvantage of having an HTML form is it requires an uninterrupted connection between the user and the server hosting the form. According to Shane Hughes, CEO of Pyxis Consulting, "Today, up to 95 percent of users that start a transaction on the Web fail to complete it."1 This figure sounds staggering, however it stands to reason many people pass a site when first encountering a connection problem.

1 Reported by Tony McKinley in an e-paper on Adobe's Web site at http://www.adobe.com/epaper/columns/mckinley/991129tm.html

PDF forms are more flexible when using them for online completion. The PDF document itself can be downloaded by the user and completed off-line. A seamless internet connection is not required for completing PDF forms.

The final form data can be parsed and processed either by submitting the data as FDF format or HTML format.

Acrobat Forms - what are they?

People have different definitions of what an Acrobat Form is and is not. Most Web sites hosting forms provide users with various application documents available for downloading. These forms may be Word Documents, PDF or other application software compatible file formats. These so called forms are intended to be downloaded from a server, printed to a laser printer by the end user, completed through hand written methods and faxed or mailed back to the host. Just perform a search on the Internet for PDF Forms and you'll find thousands of Web links to pages linked to PDF forms.

The mass amount of forms contained on the Web in PDF format are nothing more than paper documents scanned and converted to PDF or original document pages converted to PDF via Acrobat Distiller, PDFWriter or PDFMaker. These files don't provide either the PDF author or end user the power of working with Acrobat forms. At the least they are archaic and unusable for electronic exchange of data.

Invariably, the PDF author dispensing forms in this manner has yet to experience a more efficient workflow and hasn't helped reduce the labor needed to process forms data. Anyone downloading a form from the Internet who files an application, requests information, completes a survey, applies for licensing, or any other number of reasons to complete a form, will supply information that ultimately needs to be converted to electronic media. PDF forms downloaded, printed, completed and finally mailed or faxed require a technician to input all the hard copy data into an electronic environment.

Acrobat Smart Forms

To tap the power of Acrobat, smart forms, at the least, enable the user to electronically fill out a form. The form has data fields where text can be entered, pop-up menus or scroll boxes where choices are selected, radio buttons for selecting alternatives or multiple closed questions. Smart forms also help the user stay within the parameters defined by the form author. Alternative choices for example can be limited to only the acceptable responses the forms designer intended. Open field entries can limit the number of characters for any intended field. Various field boxes can be hidden from the user so as eliminate confusion between consumer input and authorized input.[BELOW: "Smart" Form with Editable Fields]

Interactive PDF Form

Even when forms are necessary for analog signatures and hard copy documents required by licensing agencies, completing smart forms will make them more legible and offer the end user the ability to keep backup copies electronically stored. In this case, the need for photocopying at least one piece of paper has been eliminated. For electronic submission of forms, the benefits are obvious. No paper copies need to be produced and the forms author can collect data that can be submitted to a data base and electronically stored. The need for a technician to enter the data fields will be eliminated. Personnel will still be necessary when reviewing forms for authenticity and correctness.[BELOW: Static Form Scanned: No Editable Fields]

Importing images into pdf forms

Designing Forms

Converting Electronic Forms

Any form designed in almost any application can be converted to PDF. When converting an electronic file to PDF, use Acrobat Distiller after printing the PostScript file. Any elements such as EPS imported images will require distilling the PostScript file and you'll need to avoid using PDFWriter. Some applications such as Illustrator 8 and 9, CorelDraw 9, Adobe InDesign and Adobe PageMaker can export direct to PDF. PageMaker requires a two step process transparent to the user when exporting to PDF.

Many forms originally designed for an analog use may include boxes, lines and separators you may wish to eliminate when creating field boxes in Acrobat. You can usually eliminate these items successfully in Acrobat 4.0x with the TouchUp Tool. It will most often be best to create the PDF with these elements to help you carefully place field boxes. After all the fields have been created in Acrobat, use the TouchUp Text Tool to eliminate any unnecessary items.

Scanning Printed Forms

If you donít have an electronic version of a form and want to duplicate the design of a printed form, you can scan the original. Scanned images wonít reproduce as well as forms converted from electronic files especially with scanned type. Also, the documents will be larger in file size and require more time to download from a Web server.

If using a scanned image, try to place the scan in a vector art editing program like Adobe Illustrator or CorelDraw. You can trace elements in the form with the tools from the illustration program. Any logos or images that need to be included in the form design can be cropped and added as smaller elements thereby reducing the total file size.

Creating Forms

Like using scanned templates, forms will be best designed in either an illustration program or layout application. Microsoft Word and some other word processors can be suitable for some designs. Regardless of the program used to design the architecture of the form, follow the guidelines above and create field boxes that can eventually be eliminated in Acrobat after the form has been completed. If much text control is needed, you may wish to consider a layout program over an illustration program when typographic controls are needed.

Importing images into pdf forms

Modifying Forms

Acrobat behaves similar to other Adobe products supporting layering. When you create a PDF file, the PDF document will appear similar to a background in a program like Photoshop. Although Acrobat does not physically support layers, when you create form fields, links, and annotations, these elements behave as though they are resting on a separate layer. If you create a PDF from an authoring application and need to modify it after creating form fields, you must exercise care in modifying your document. The Document --> Delete Pages or Document --> Insert Pages commands will destroy the form fields when you want to update a page where these fields appear. If you need to update a page, use the Document --> Replace Pages command. When a page is replaced, the data fields will remain undisturbed.

Some Basics with Form Fields

Fields for Buttons

Form Fields are intuitively used for creating field boxes for data. Before we move on to a discussion of data fields in a PDF document, let's look at the benefits of using the Form Tool for creating buttons and links to views. The disadvantage of using the Link Tool for creating page and view links is the link and its properties can not be copied and pasted or duplicated from within Acrobat. This is a major limitation of the Link feature. Links work well when you have limited numbers of links to create in a PDF or when you define a text block to support link activation. However, when creating a number of links that can be easily duplicated, the Form Tool will work much better.

Creating the Field

Like any other field to be created in Acrobat, select the Form Tool and draw open a rectangle where you wish the field to appear. The Properties dialog will appear: For a Button, select the Button Type from the pop-up menu in the dialog box. If you want an Icon to appear as the button, select Icon Only from the Layout pop-up menu, then click on the Browse button to find the PDF file to be used as a button. Rollover effects are supported in Acrobat. To create a rollover, select Rollover from the Button Face When options, then click on the Browse button again to find an icon that will appear when the cursor moves over the button.

Creating pdf form fields

Creating the Link

The action to be invoked needs to be defined in the Actions portion of the dialog box. Click on the Actions tab to display the options. In this example a link is created to the first page in the document. The number of pages in the document is 50. This button needs to appear on all fifty pages and it needs to link to the first page.

Creating pdf form links

Form fields don't provide you the ability to navigate pages in your document when the properties dialog box is open. Link Properties provide navigation, however the same navigation when using Form Fields requires a different approach. Rather than use Menu commands or navigation tools, this link will include a JavaScript to link to the first page in the document.

Click on the Add button in the Field Properties dialog box and select JavaScript from the pop-up menu for the Type.

Another dialog box appears where the JavaScript code is entered. To navigate to a specific page in a PDF document enter the following:

this.pageNum=(0)

The code this.pageNum(N) will navigate to the page number specified within the (). You always need to keep in mind the page numbers are zero based and JavaScript sees the first page as page 0 (zero). After clicking OK and setting the Action, you can duplicate this field to all pages in your document by selecting Tools --> Forms --> Fields --> Duplicate. The field will be duplicated at the same location on all pages. The link properties defined in the JavaScript will apply to all pages where the form field is present.

Creating pdf form links 2nd

Using Page Templates in Acrobat is a great feature you'll want to use many times over. Any page in a PDF file can be used as a template and the template can be either visible or invisible. Templates can be used to spawn new pages much like you would add a page in a layout application or templates can be containers of information that you can add to an existing document like icons, images, graphics and text blocks. Creating a Page Template is handled by selecting Tools --> Forms --> Page Templates... You must navigate to the page to be used as a template before accessing the menu. When the menu command is invoked, a dialog box will appear:

Creating pdf form page templates

Each template in a PDF document requires a different name. Enter the name in the Name field and click on the Add button. In Windows, the icon on the left side of the template name in the list will appear with an Eye icon to indicate the template page is currently visible. To hide the page from view, click on the Eye icon and it will change to an empty square signifying the template page is now invisible. When you hide a page template, the PDF page will be hidden as well. The total pages indicated in the sta-tus bar will only reflect visible pages. Therefore, if you have three visible pages and three invisible pages, the status bar will display page N of 3 pages.

Macintosh users have the same options as Windows users, however the icon display in the Document Templates dialog box will display a bullet aside the template name to indicate a visible page. When the page is made invisible by clicking on the bullet, a dashed line will appear indicating the page is hidden from view.

Creating Stamp Icons with Page Templates

Creating pdf form stamp icons

A simple use of templates can be illustrated by creating Stamp icons. Acrobat ships with a few libraries from which to choose various images with the Stamp tool. To create your own custom stamps, follow these steps:

  • Create a PDF document with images or icons on separate pages.

  • Move to the first page to be used as a template and select Tools --> Forms --> Page Templates.

  • Provide a name in the Document Template dialog and click on the Add button. Click Close to close the dialog when finished.

  • Move to the next page and repeat the above -- adding new template names for each subsequent page.

  • When finished creating the templates, select File --> Document Info --> General.

  • In the General Info dialog box, add a name for the Title field. The name you supply here will be the name that appears in the list of Categories for the Stamps. The template names will appear after you select the Category in the Stamp Properties dialog box.

  • Save your file to the Acrobat: plug_ins:Stamps folder. The file must reside here for the Stamp tool to see the new category name.

NOTE: You can create icons by using a stylized font such as Wingdings or Dingbats. In a program like CorelDraw, Illustrator or a layout application, create a text character on separate pages. You can create a single additional page where all icons will appear on the first page. Supply a name below each icon. Distill the file(s) and create a single PDF document. You can link the icons on the first page to their respective pages.

Organizing Fields

Assuming you have a PDF file that was created in an authoring application, it's now time to create all the fields in Acrobat. The fields are created as discussed earlier with the Form tool from the Acrobat Tool Bar. When you drag open a rectangle, you choose the field type from the Type pop-up menu.

Organizing pdf form fields

When the user fills out a form, the mouse can be used to navigate through all the fields or the user can strike the tab key to move from one field to another. When you create fields in Acrobat, the tab order is determined by the order in which the fields were created. Many times this order will need to be changed for a more logical and intuitive flow to make it easier for the user to complete the form.

After creating all your fields on a form, select Tools -->Forms -->Fields -->Set Tab Order. Note: the Form Tool must be selected in the Tool Bar in order to select the menu option. When you select the menu command, each field will display a number in the top left corner indicating its current order. To redefine the order from the first field, click on the field you want to have appear as number 1 or the first field the user will logically complete. Each subsequent click on different fields will renumber them in sequence.

If you have an order that's acceptable in the first range of fields but need to renumber somewhere in the middle of your document, you can begin the reording by holding the Option/Alt key down while clicking on a field. This click tells Acrobat you are going to start with the current field number. The next click you make on a subsequent field will renumber it as the next logical number. For example, if you Option/Alt click on field 15, then the next click you make on another field will renumber its order to 16. Continue clicking and each subsequent field will be numbered in sequence.

Sizing Fields

Often when you create a field, then a second field, you'll want the field sizes to be the same dimen-sions. Acrobat makes it easy to size all fields to an anchor field you designate. In the Example below, multiple fields have been selected and one of these fields is an anchor field.

To select multiple fields, select the Form tool from the Acrobat Tool Bar and hold the Control key down (Windows) or Shift key (Macintosh) and drag the marquee through the fields to be included in your selection. When you select multiple fields, the fields will be highlighted in Blue with one field among the selected group appearing with a Red highlight. The Red highlighted field is your anchor field. When you globally change the size of all fields selected, they will conform to the field box size of the anchor field. If you want to change the anchor while the fields are selected, press the Control key (Windows) or Option key (Macintosh) and click on the field to be used as the anchor.

Sizing pdf form fields

When all fields are selected, select Tools --> Forms --> Fields --> Size and choose the option for sizing. The options will include Height, Width, or Both. When "Both" is selected, the field box size for all the blue-highlighted fields will become identical to the size of the anchor field box.

Manually sizing fields can be handled with keyboard modifiers. You can nudge sizes of multiple selected fields by using the Shift key (Windows/Mac) and the arrow keys on your keyboard. Hold the Shift key down and strike the down arrow to vertically size the field boxes larger. Hold the Shift key down and strike the right arrow key to size the field boxes larger horizontally. Use the opposite keys respectively to size the vertical/horizontal smaller.

Aligning Fields

Acrobat has a grid feature that can be used to help align field boxes while designing the form. You can elect to show the Grid by selecting the View menu and choose the Show Forms Grid command.

Sizing pdf form fields

Additionally you can toggle the Snap to Forms Grid on and all form fields will snap to the grid. At times you may have a need to align field boxes without snapping to the grid. A separate submenu is available by selecting Tools --> Forms --> Fields --> Align. Aligning fields can be made to the Left, Right, Top, Bottom, Horizontally and Vertically positions of the anchor field. Like the example used when sizing fields, you can select and CTRL/Option click among the selected fields to determine what field box will be used as the anchor. When the anchor is determined, choose the menu option for the alignment to be performed.

Field Naming Conventions

Field names are critical to many forms you design. It can mean the difference between creating forms with a few short steps or spending much time in reorganizing the fields and extra time to get the behavior from field actions that you want. Smart forms provide both you and the user the ability to spend less time completing forms. Repetitive tasks for example can be minimized with designing forms to facilitate reusing identical information without user entry every time the form is completed. Here's an example:

Customer ID Data

The figure above is a form for entering identifying information. The same information is used every time the user completes a form for a given vendor. Rather than have the user fill out redundant information, the Customer ID Data File is used to complete all identical information that will appear on other forms. Once this form is completed, the data is exported. The order form on the right has a button to import the data so the user won't have to re-enter the same information.

Order Form

In order for the Customer ID Form and the Order Form to work with importing data, the field names have to be identical on both forms. In these examples, the first name of the customer has a field name of address.first. The name for this field is identical on both forms. If you use different names on the two forms, Acrobat won't be able to import the data successfully.

Exporting and Importing Data

When the user completes a form the data can be exported to a file. The file format is native to Acrobat and designated as FDF (Forms Data Format). To facilitate user export of data, a button can exist on Acrobat forms for exporting and importing data. To export data from a button click, create a form field and follow these steps:

  • Provide a name for the field. In this example I use Export for the field name. Try to make the name of the field similar to the action to be invoked. This will help you when you may need to revisit the form later for updating or editing. Field names such as x1, abc, etc. will make it more difficult to immediately identify a field name when you go back to the form and attempt to revise it.

  • Select the Actions tab and leave the default Button Face When item at Up.

  • Click on the Add button and choose Execute Menu Item from the Type pop-up menu in the Add an Action dialog box.

  • Click on Edit Menu Item button appearing in the Add an Action dialog box.

  • Select File --> Export --> Form Data from the Menu Item Selection dialog box.

Export Image Data

Export Image Data

  • Click OK through the dialogs until you return to the Field Properties dialog appearing above.

  • Click OK to return to the document window.

In most cases you'll want the default button action to take place when the user releases the mouse button (MouseUp). If you use Down in the Button Face When options, the user won't have an opportunity to rethink the button click. Users often click a mouse button and think about their action before releasing the button. If the mouse is moved outside the form field before the button is released, the user can halt the action. This behavior is more intuitive and common across most application software programs.

If you want to use an icon for the button face, you can follow the steps outlined earlier in this document. If you don't use an icon, you might wish to select the Appearance tab in the Field Properties dialog to define a border and/or background color. If not using an icon you might wish to supply text for the button contents in the Options tab for the field properties.

Smart forms provide PDF authors the elimination of computation tasks that can easily be performed by the computer. Rather than calculating sums of numbers or other math tasks, an Acrobat form can have data fields assigned where these computations are automatically calculated. How you create the form and more importantly the names you provide for data fields will determine how easy your programming will be. This is especially important when creating forms where math calculations are performed.

Field Names

In the form (above), calculations are used for the totals for each line, a sales tax computation, shipping is calculated according to the total amount, a grand total is calculated and the date is automatically generated when the user opens the PDF document. To set up the form, all the fields need to be created and the math calculation formulas need to be established. Follow these steps to create such a form:

General considerations: Each field must have a unique name. For the Price column, you can create a field with the form tool, provide a name and then create the next field in the same manner. This method will take much longer than duplicating the field. For an easier approach:

  • Create the first field with the Form tool for Price in the first line. Set all the attributes for appearance, font size and alignment.

  • Name the field price.0.

  • Duplicate the field by holding the Option/CTRL key down and the shift key to constrain movement and drag horizontally to the right.

  • Name this field qty.0.

  • Option/CTRL -- Shift drag to the right again.

  • Name the third field total.0.

  • Shift-Click to select the three fields. Note: You can hold the Shift key down and drag through the three fields to select them all.

  • Hold the Option/CTRL key down and drag a copy of all three fields to the next line.

Field Names II

Each of these new three fields are exact duplicates of the first line of fields. The names for the second row needs to be changed otherwise the data from the first row will be repeated every time the user makes an entry. Since we name our fields price.0, qty.0 and total.0, we can easily change the names to the next integer up following each field name. This is easily handled by:

  • With the three fields in the second row selected, strike the + (plus) key on your keyboard. Acrobat will rename the fields price.1, qty.1 and total.1. The plus key increments the field name while the (-) minus key decrements the field name.

To complete the next three lines, Option/CTRL drag the next order of fields down and strike the plus key. Continue until all fields are entered.

Performing Calculations

Performing Calculations

Using the above example, creating calculation formulas are also easier when naming fields in the above manner. If you want to add all the totals and didn't exercise care when naming the fields, the calculation will need to address each field name in the calculation script. That is, you would need to sum total1 + total2 + total3 + total4 + total5. When you name the fields with name.1, name.2, etc. The calculation script can be written as illustrated right:

The difference between the two naming conventions is the field name separated by a period (.). Acrobat recognizes this convention as an integer that can be incremented with the keyboard modifier (i.e. + to increment and - to decrement).

Using Hidden Fields

In the form above, a subtotal field is needed to perform the sales tax calculation. The form itself doesn't display a subtotal field, however one exists hidden from view from the user. In our example, we need to sum the total fields and place the sum in a field that will not display on the form. To create the calculation, follow these steps:

  • Create a field with the Form tool. Set the Type to Text from the Type pop-up menu.

  • For the Field Properties dialog box, select Format and choose Number for the format with 2 decimal places and a dollar sign.

  • Name the field. In this example I use subtotal.

  • Create the calculation script. Select the Calculate tab and click on the button Value is the: and choose Sum from the pop-up menu. At this point you can easily create the sum of the total field by entering total in the field box.

  • Hide the field: after checking your calculation to be certain the results are correct, return to the field properties and select the item for Form Field is: and choose Hidden from the pop-up menu (Windows) or under Visibility choose Hidden on screen and when printed (Macintosh). (Note: see screens next page).

[BELOW] The field can be placed (dragged) to any location in the document window. When the user opens the form, this field will be a container and hidden from view. We'll create a sales tax calculation from this field.

Hidden Fields

The Sales Tax Calculation

For sales tax calculation, we'll use a custom script in the calculation field box. This JavaScript code will look at the subtotal field and perform a calculation for the sales tax to be placed in a field we'll call tax. First, you'll need to create a new field. In the earlier example, the tax field is positioned below the last item in the totals column. You need to identify the type of field (text in this case), name the field and also format the number as described in the preceding pages.

Performing Calculations

Select the Calculate tab in the field properties box and click on the Custom Calculation Script radio button. In order to create a script, you need to select the Edit button that becomes active when you select the radio button. Another dialog box will appear where the script is typed. To create a calculation for computing sales tax, use the following code:

var a = this.getField("subtotal");
event.value = Math.round (a.value * 7.25) / 100

Where a is a variable you define, it could easily be another character or a name you provide. subtotal is the name of the field we created for the subtotal calculation. event.value will place the result in the tax field box. The remaining formula calculates the tax from a rate of 7.25% You can easily change the rate by returning to the calculation script and entering a different value.

JavaScript and Acrobat Forms

The last example included a bit of JavaScript to perform the calculation for sales tax. We also used JavaScript code when we created a field button that linked to the first page in a document and duplicated the field on all pages. JavaScript can add a great deal of functionality to Acrobat Forms and you can create scripts that behave similar to HTML forms. For the non-programmers, you can find a number of forms on the Web or distributed on the Acrobat CD that offer some help when writing code for form fields. If you don't want to spend a lot of time studying code, you can copy and paste code from different forms into a template that you can use with the forms you are likely to create.

You can create a PDF document and place all the fields you may commonly use on document pages. Use this template to copy and paste form fields between your template and the new forms you create. If, for example, you use a date stamp; sales tax calculation; pricing, quantity and total fields, spawning new pages from templates, etc. you can create all these fields on your template. Whenever you design a new form, open the template and copy the field(s) you need and paste them into your new form document. When it comes to writing JavaScript code, non-programmers will find this method an easy way to design new forms.

The opportunities for creating custom fields with JavaScripting is limitless. We can't cover all the possibilities for using JavaScript with forms, so we'll look at just a few examples of how a little code can help you develop smart forms:

Date Stamping

One thing you may wish to include on a form to be used with transactions or certification is having the date the form is completed or submitted automatically calculated. You can create a form field that uses the current date from the computer clock to be placed in the field contents automatically without user entry. Barring any deviants changing the system clock, this will assure the proper date is included when the form data is submitted. To create a date field that automatically supplies the current date, follow these steps:

Date Stamping PDF Forms

  1. Create a new form field with the Form Tool from the Acrobat Tool Bar.

  2. Select Text for the Type from the pop-up menu choices.

  3. Provide a name for the field in the Field Properties dialog box.

  4. Select the Appearance tab and click on Read Only under the Common Properties item in the lower left of the dialog box. When you select Read Only, the text field can not be edited without returning to the Field Properties.

  5. Click on the Calculate tab and select the Edit button.

  6. Enter the following script in the Acrobat Forms dialog box:

event.value = util.printd
("mm/dd/yy", new Date());

Date Stamping PDF Forms II

The "mm/dd/yy" defines the date format. "event.value" will place the data in the field box where the calculation script has been entered. In this case, in the today field box. To view the date, select the Hand Tool from the Acrobat Tool Bar and the date will be displayed in your new field.

Importing Images

You can create PDF files that will behave similar to layout applications where graphics and text are merged into a document page. This feature is particularly helpful when you have a template like an employee ID card and you want to import a photo of a new employee on a template that you created in Acrobat. Images can be imported as icons for button type forms. The image that gets imported as a button face needs to first be in Acrobat PDF format. You can scan images directly into Acrobat via a TWAIN plug-in or use your scanner with Photoshop and save the scanned images as Single Page PDFs from Photoshop. When you have images saved as PDF, the form where these images will be imported will have a JavaScript instructing Acrobat to import an image. To create such a field, follow these steps:

Importing images into pdf forms

  1. Create a form field with the Form Tool from the Acrobat Tool Bar.

  2. Name the field (in this example I'll use image.1 as my field name).

  3. Select Button for the type from the Type pop-up menu.

  4. Select the Options tab. You may wish to have a default icon appear within the field box. The display of this button might appear with an icon that indicates to you no image has yet been imported into the form. In this example, I use a "?" mark to signify a field box that needs to have an image imported. Whenever I see this icon, I know I need to import the final image into the form. For the Layout in the Field Properties dialog for Options, select Icon only and click the browse button. You'll be able to navigate your hard drive to find the icon you wish to have appear as the default image.

  5. Select the Action tab. By default, the Action dialog box has Mouse Up selected for the activation of the action. Leave the default at Mouse Up and click on the Add button.

  6. Select JavaScript for the Type in the Add an Action dialog box.

  7. Click on Edit to open the Acrobat Forms dialog where the JavaScript code will be supplied.

  8. Enter the following script:

    event.target.buttonImportIcon();

    The above code will open a dialog box when the button is selected with the Hand Tool in Acrobat. The dialog box will enable navigation on your hard drive to locate the PDF image to be imported.

Spawning Pages from a Template

It's not very impressive to import a single icon in a PDF form. After all, you could create a document in a layout application and convert it to PDF with the image already imported. Having a template means you'll typically want to import multiple images and have field data that differs on each page in a document. In this scenario, you'll want to be able to add more pages to your form template and have those pages established with unique field names. If you copy and paste fields across pages, the contents of the data will be the same unless the field names are unique.

Rather than create individual pages in a layout application, you can let Acrobat and JavaScript create new pages and automatically add new fields with unique names. To do this, you need to use a JavaScript command known as Spawn Pages from Template. The process involves several steps. First, you need to create a template page where all fields are named and positioned on the page. Second, you need to create a Document-level JavaScript that will clone the field names and supply new names for the fields for each page. Thirdly, you'll need a button to activate the Spawn page from Template action that creates your new page.

Letís break this down into the three categories and follow steps to create such a form. To begin, youíll need a PDF document with a template. Hereís a form I designed to keep track of possessions listed on an insurance homeowners policy.

New page is spawned

The idea is to have a description of all the furniture, the price and a photo and have the PDF written to a CD. The insurance agent would have a copy of the CD and an Acrobat Reader installer. If an event such as natural disaster or theft resulted in damage or loss, all items would be easily assessed by the insurance claims adjuster to facilitate the claims settlement.

The figure above is the first page in the document. When the right arrow is clicked, a new page is spawned from the template in the file. The page below is a form where data is entered and the icon represents a button import JavaScript that enables a new image to be loaded on this page.

New page is spawned

Final page created

The final page is completed as displayed just above. New pages are added by returning to the home page and clicking on the right arrow again. Each new page contains a button that links to the home page (top right corner). When a new page is created, a page action takes the user to the page to be filled out. Presuming you have a PDF document with a page template identified, hereís how we create such a form:

Document Level JavaScripts

The first order of business is to create a Document JavaScript. The document JavaScript will increment the field names in the PDF file so all pages will have unique names. If this step is avoided, then every time you enter field data on one page, the same data will be supplied for the same field on all subsequent pages. To create a Document JavaScript:

Document Level JavaScripts

  1. Select Tools --> Forms --> Document JavaScripts

  2. Provide a name for the JavaScript and click on the Add button.

  3. In the Acrobat Forms dialog box enter the following code:

    if (this.numFields < 1) {
    var n = this.numPages;
    for (i = 0; i < n; i++){
    -this.spawnPageFromTemplate ("newpage");
    }
    }
    

    In the above code, the two lines of the var n item will increment field names for the template identified here. The name of the template is newpage - note the item (" ") in the code. The template name you provide in your forms document must appear within these quotes.

  4. Click on the Close button when you finish editing the code.

Creating a button to spawn a new page

Youíll need a button with a JavaScript action to create the new pages from your template. The code we supplied in the Document JavaScript wonít initiate spawning pages from a template. It just orders the field names and keeps them unique on each page. to create a button with the appropriate action type, follow these steps:

Create a button to spawn pages

  1. Create a form field with the Form Tool from the Acrobat Tool Bar.
  2. Select Button for the Type and add an icon you wish to represent the appearance.
  3. Name the field. In my example I used a field name of new.
  4. Select the Actions tab and click on the Add button.
  5. Select JavaScript for the Type in the Add an Action dialog box.
  6. Click on the Edit button to open the Acrobat Forms dialog box where the JavaScript code will be supplied.
  7. In the dialog box, enter the following code: this.spawnPageFromTemplate ("newpage"); The above code will spawn a new page from the newpage template we identified. Again, the name within the parentheses is the name of the template you provide when it was created.

When the button is selected, the new page will be appended to the PDF document. The Document JavaScript insures each new page created will have unique field names. When pages are spawned as illustrated above, Acrobat provides no internal navigation to have the new page appear in view and ready to enter data. You must physically navigate to the new page. To facilitate navigation, you can add a second item in the Actions tab for this button that will take the user to the last page in the document (Note: all pages spawned will be appended at the end of the document). To add another action, follow these steps.

Spawn pages

  1. After the JavaScript for spawning a page has been entered, click OK in the Acrobat Forms dialog and return to the Actions tab in the Field Properties dialog box.
  2. Click on Add.
  3. Select Execute Menu Item from the Type pop-up menu.
  4. Click on the Edit Menu Item button.
  5. Select Document --> Last Page. When a new page is created from the JavaScript code, the user will immediately be taken to the newly spawned page where new data will be filled out.

JavaScript & Destinations

Another method of creating navigation ease in PDF documents is to use named destinations and a JavaScript to create a pop-up menu. You might have occasion to create complex forms spanning many pages. To help ease user navigation and conserve space in the document window, you can create a button that will deliver a pop-up menu where navigation to the menu contents can be made with a mouse click.

Using the insurance asset form in the previous examples, I created a pop-up menu after spawning pages and making field entries. The button on the first page delivers a pop-up menu where the categories for Living Room, Dining Room and Family Room each have submenu items for specific items contained in these rooms. When the button is selected, the pop-up delivers the three categories. When the mouse cursor moves over a category a sub menu displays all contents for that category. To create this kind of pop-up menu that enables navigation to respective pages, you first need to create destinations for each page.

Javascript destinations I

Creating Named Destinations

Destinations work similar to bookmarks and are created in a palette. To begin creating Destinations, select Window --> Show Destinations. The first action to be performed is scanning the current document for any existing destinations. Click on the Scan Document icon located at the bottom of the palette. The icon appears as a broken page. Once youíve scanned the document, the Destinations palette will now let you create new destinations:

Javascript destinations II

  1. Navigate to the page you wish to have appear as a Destination.

  2. Select New Destination from the palette fly-away menu or click the right mouse button (Windows) or Control-Click (Macintosh) to open a context sensitive menu. In the context sensitive menu, select New Destination.

  3. Navigate to the next page and create another Destination.

  4. Repeat the same process for all pages in the document or where you wish to have all destinations identified.

Creating the pop-up menu with JavaScript

After all the Destinations have been created, select the Form Tool from the Acrobat Tool Bar and drag open a field box:

  1. Name the field.

  2. Select button from the Type pop-up menu.

  3. Select Options and choose an Icon for the appearance or use text to represent the button contents.

  4. Select the Actions tab and add a JavaScript Action as described earlier.

  5. In the Acrobat Forms window, I added the following code appearing on the next page (and right) to display the pop-up menu in the figure above:
    var c = app.popUpMenu(["Living Room", "Chair", "LoveSeat",
    "Sofa", "Cabinet","TV", "Painting", "WheelChair"], ["Dining
    Room", "Hutch", "Dining Table"], ["Family Room", "Bar",
    "GlassDoors", "PoolLamp", "Gas Pump", "Oil Pump", "Howdy
    Marionette", "Howdy Puppet", "JukeBox", "50_TV"]);
    
    this.gotoNamedDest(c);

    Javascript destinations III

    A variable needs to be assigned. In my example I simply called the variable var c which is defined for the application popup menu. All the items within the parentheses will appear within the popup menu. Within brackets [] I created my categories. All the names within quotes are the Destination names with the exception of Living Room, Dining Room, and Family Room. These three names appear directly after each left bracket and are the category names. Youíll notice that each name is also separated by a comma. The final line of code instructs Acrobat to go to the Named Destination for variable c.

    The one thing to be certain about is providing identical names in the JavaScript code as you have for each Named Destination. To facilitate writing the code, keep the Destinations palette open and in view while entering the names.

    Names will appear in the pop-up menu according to the order you specify in the JavaScript code. If you want to reorder the names, move them around in the Acrobat Forms window in the order to which you wish them to appear.

JavaScripts & Forced Field Entries

More user restriction can be made with JavaScripts to control user input to prevent user error. If, for example, you have an option from one field that corresponds to a second field, you may want to restrict the user to only make choices acceptable within the range of field one for decisions on field two. To illustrate this example, suppose you have several items for the user to choose within a combo box. The choices may be something like golf balls, golf shirts, and golf gloves. The user can choose any one of these items from a popup menu within a field combo box. A second field might have different manufacturers of golf balls, different sizes of golf shirts and different sizes for golf gloves. If the user selects golf shirts as a choice for field box one, then you may wish to restrict the choices for field two to only small, medium, large and xtra large. Obviously, it would make no sense for a user to make a selection for a Pinnicle golf ball when selecting shirts.

Smart forms can help guide the user in making only logical and acceptable responses for filling out form data. When you leave field boxes open ended and only offer text entry, the user can make errors which will often prevent you from completing a transaction. Using the above example of golfers paraphernalia, letís look at a form that limits user choices from one field to another.

Forced Field Entries

The figure above illustrates two combo field boxes. Among the choices in the first box is Golf Balls. When this option is selected, the second field box choices are Titleist, Pinnacle and MaxFli ?these three options come from different manufacturers. If the second option is selected in the first box (Golf Hats), then the choices in the second field box will be limited to Navy, White, and Green. The user only has a choice of three color options.

Price Field calculation

The subsequent choices for the first field box all offer different secondary choices within the second field box. In addition to these two field boxes, the Price field is a Read Only field that prevents the user from changing the price. The Total field is also Read Only as well as the calculation fields. On this form the only selections the user can make are for the items, types and quantities.

The Price field has a calculation performed based on the choices made for the item and type. In this regard, there is no opportunity for user error when choosing an item and having the price calculated.

Letís look at how this form is designed...

Creating Combo boxes

In the previously illustrated form, the first step is to create combo boxes for the Item column and the type column. With the Form Tool, draw open a field box and select Combo for the Type. The naming conventions and appearance will follow the same rules discussed earlier.

Combo boxes

  1. Enter a name in the Item field for the first item.

  2. Enter an Export value for this item you identify The export value will be needed if you intend to export the data or submit the data to a server.

  3. Click on the Add button. The new item will be placed in the list below the Export value box.

  4. Continue adding all fields for this Combo box.

  5. Before exiting the Options tab, be certain to include a blank field. This field can be created by striking the space bar once and clicking on the Add button. The blank field will be used to clear all the data in the fields each time the form is reset. If a blank field is not created, the first item in the Combo box will appear as the default.

  6. Select the blank field in the list below and click on the Up button on the right side of the Options dialog box. Move the blank field to the top of the list. This position will insure a blank view for the default when viewing the form and clearing the data.

Create a second Combo box for the Type field. In this example I identified my first field as item.0 and the second field as type.0. The second field should be a Combo box, but no items should be identified in a list. The choices for this box will come from the code we write for the Item field. All the Type fields will need to be created before you can write the code for the Item fields, so be certain all fields for these two columns have been created before proceeding.

Using the Format Tab

Among the choices available for Combo boxes are options for Format and Validation. In this example, weíll use the Format tab in the Field Properties dialog box and establish the format for the Type field. Be certain all fields have been created and go back to the first Combo box field. In this example itís the Item field. Weíll write the code in this field to set up the format for the Type field options.

Field Properties

  1. Open the field properties dialog box and select the Format tab.

  2. Click on Custom in the Category list.

  3. When Custom is selected, two Edit buttons will appear. Click on the second Edit button for Custom Keystroke Script:

  4. In the Acrobat Forms dialog box I entered the following code to define the options for the Golf Ball selection:
    if (!event.willCommit) {
    var a = this.getField("type.0");
    a.clearItems();
    switch (event.change) {
    case "Golf Balls":
    a.setItems([" ", "Titleist", "Pinnacle", "MaxFli"]);
    break;
    case "Golf Hats":
    a.setItems([" ", "Navy", "White", "Green"]);
    }
    }
    

Create and edit Javascript

The first line of code is necessary for any fields you set up like this example. It sets up the event and later makes a switch when the event changes. Var a is defined as the variable to contain the items from the selection made which will be positioned in the Type Combo box. Case pulls the categories established in the Item Combo box. In the first series, case "Golf Balls": is followed by a.setItems which contains the options within the brackets . The first item " " , creates the blank field followed by the list that will appear in the Type Combo box whenever Golf Balls is selected in the Item Combo box. The break line sets up a new case ? in this example, Golf Hats. If you want to add more categories for the Item field and more options for the Type field, just include a new break before the two brackets at the bottom, set up a new case and include more items within the brackets [] following the same syntax as described above.

NOTE: A space must be entered within " " in the first item for each case. If you donít include a space between the quotes, Acrobat may yield an application error on Windows. Macintosh users wonít find a problem when entering "" without a space, however when the PDF is ported to Windows, Acrobat may crash.

PDF In-Depth Free Product Trials Ubiquitous PDF

Debenu Quick PDF Library

Get products to market faster with this amazing PDF developer SDK. Over 900 functions and an equally...

Download free demo

Back to the past, 15 years ago! Open Publish 2002

Looking back to 2002, it's amazing how much of the prediction became a reality. Take a read and see what you think!

September 14, 2017
Platinum Sponsor





Search Planet PDF
more searching options...
Planet PDF Newsletter
Most Popular Articles
Featured Product

Debenu PDF Aerialist

The ultimate plug-in for Adobe Acrobat. Advanced splitting, merging, stamping, bookmarking, and link control. Take Acrobat to the next level.

Features

Adding a PDF Stamp Comment

OK, so you want to stamp your document. Maybe you need to give reviewers some advice about the document's status or sensitivity. This tip from author Ted Padova demonstrates how to add stamps with the Stamp Tool along with related comments.