Creating PDF Active Forms
Using Adobe Acrobat™6

Sample form

So What is a PDF Active Form?

A PDF Active Form starts out as a regular PDF file which is then edited by the form provider to become an electronic dynamic form capable of receiving user input. PDF Active Forms can also be smart forms which perform automatic calculations, field completions, and validation to help the user complete the form and avoid errors.

Forms toolbarPDF Active Forms have seven different field types, each of which has a distinct purpose and presentation style and accepts different types of input. The following table summarizes.

Field Type Icon Use Appearance
Radio buttons radio button Allow only ONE selection from a group of options. Single character mark for "on"; default is a bullet, as shown.
Check boxes check box Provide on/off fields for answering closed-ended questions or a choice between multiple options. Allow multiple selections from a group. Single character mark (such as a check mark, circle, cross, star, etc) for "on.".
Combo boxes combo box Allow only ONE selection from a list of preset options. A pull-down menu with down-pointing arrow which, when clicked, displays a list of options.
List boxes list box Allow single or multiple selection from a list of preset options. A scrollable window with up/down arrows on scrollbar.
Text text box Allows for user-supplied input, such as text, numbers, dates, time, comments, etc. Boxes with borders allowing for either single or multiple lines. Boxes may be scrollable or unscrollable.
Buttons button Invokes an action; cursor changes to a hand with pointing index finger when the user moves it over the button. Icons and/or text
Signatures signature Allows insertion of digital signatures. When signed, changes to User Profile display created for the signature.

Create a PDF Active Form

1 -- Open a PDF File

  1. For this exercise, download the Rensselaer Name/Address Change Form [78K PDF].
  2. Save the file to your Desktop, then open it in Acrobat 6. (Note: Users appreciate being told that a link leads to a PDF, so remember to label your PDF links appropriately, as above in Step 1.)

2 -- Define a Text Form Field

  1. Expand the forms toolbar by selecting the Show Forms Toolbar, the last in the list of form field types (upper right, next to the link tool).
  2. Select the Text Tool from the Forms toolbar.
  3. Create a text field by pointing to a space on the document, clicking and holding down the left mouse button, and then dragging the cursor to size it appropriately. Doing this will open the Text Field Properties dialog box.
  4. Enter a Name for the new field. Please note that, since you need to consider how you're going to use the data the user supplies, you should give this name careful consideration. Keep in mind that all field names must be unique, unless you want multiple instances of a field to auto-populate from a single instance of input. (For example, forms with multiple pages may ask a user to enter their name on every page. By providing a relevant name field and allowing subsequent instances of it to auto-populate from the initial input, we can make the process that much quicker and easier for the user.)
  5. Click on the Close button.
  6. Place the text box above the Last Name line on the form. To do this, position the cursor anywhere inside the box, click and hold down the left mouse button, and drag the box to the desired position.

  7. A Word to the Wise
    Name your fields hierarchically. For instance, if asking for first and last name, name those fields, respectively: Name.First and Name.Last. The period separator ( . ) denotes a hierarchy shift in Acrobat; in this example, Name is known as an internal field and First and Last are known as terminal fields. Internal fields have no visible manifestation on the page, but terminal fields do.
    Following this hierarchy will not only help you create forms with greater structure, but will help you when creating actions, validating, auto-creating tables of fields (Acrobat will use this naming convention) or whenever JavaScript is set to manipulate the fields and/or their data.

  8. Enter the desired text for the Tool Tip, which provides a small pop-up description when the user hovers the cursor above the form field. For an idea of what this looks like, move your cursor over any of Acrobat's buttons/tools.
  9. Click the Required check box. Under Common Properties, make sure the Form Field is defined as Visible and that Orientation has a value of 0 (zero).
  10. Click on the Appearance tab. If you wish, you can use the options in the resulting window to specify the colors, if any, of the form field's Borders and Background. However, since, in this case, it might look best if we don't color the field, the box with the red diagonal line indicates to Acrobat not to draw a border and/or background.
  11. If you wish, you may also set the font and change its size (the default setting is Auto, which will automatically size the font to fit the text field you have defined. You may even change the font color from the default black; to do this, click on the small black square which appears to the right of the Text Color field, and select the new color from the palette that appears.
  12. Click on the Options tab, and specify the text alignment, and whether you want a default value.
    A Word to the Wise
    When working with text fields, as in step 11, pay close attention to your options for Multi-line, Scroll long text, Limit of [] Characters, and so forth. By not taking these options into consideraton, you run the risk of receiving text in undesired formats, or creating a field that is difficult for the user to complete.

  13. Click on the Close button to close the Text Field Properties window.
  14. Repeat steps 1 through 12 for the remaining fields which will require textual or numeric input, such as City, State, Social Security Number, etc.

Shortcuts
As with most Windows programs, Acrobat allows you to copy and paste items by using the Ctrl-C and Ctrl-V keys. If the form field is selected and highlighted entirely in red, you can copy and paste the field to quickly reproduce the field type, its size and other properties that fields on your form may share. After pasting the new field, simply double-click inside the new field and begin editing its properties!

3 -- Define a Radio Button Form Field

radio button
  1. On the Forms Toolbar, select Radio Button Tool.
  2. Locate the Employee and Retiree options. Since these are mutually exclusive options, we will use a radio button here, since that particular field format allows only one selection from a group.
  3. As you did for the text field, use the mouse click-hold-drag technique to draw a small box over the one on the form, and place it appropriately. A Radio Button Properties window should appear.
  4. Click on the General tab and enter EmployeeStatus in the Name field.
  5. Click on the Appearances tab, and use the various options to define the field's borders, colors, and fonts.
  6. Click on the Optionstab, and select the field's Button Style. This defines how the selection will appear on the form, such as a bullet, check mark, square, etc.
  7. Also under Options, set the field's Export Value to Employee.
  8. Repeat these steps to create another similar radio button for the Retiree field on the form. Note that this new button should have the same EmployeeStatus field name, but an Export value of Retiree.

4 -- Define a Check Box Form Field

check box
  1. Select the Check Box tool from the Forms Toolbar.
  2. Again, using the same click-hold-drag mouse technique, try creating a check box for each of the "HR Use Only" fields at the bottom of the form.

  3. Some Tips and Reminders
    As you create these new fields, remember to use a hierarchical naming scheme and to set the properties under each of the General, Appearance and Options tabs. Be sure to give the check boxes borders and/or background colors that will be visible to the user. Finally, note that, while the default Export Value is Yes, that you will actually have to supply a unique value for each of the new fields.

    5 -- Add Additional Text to the Form

    Text box edit tool

    Now let's add some more text to our form, to help indicate what kind of choice we want our users to make in the next form field we'll create, a list box.

    1. Select the Text Box tool from the Advanced Commenting Toolbar. (If this has not appeared by default on your screen, you may open it by pulling down the Tools menu, and then selecting the Advanced Commenting and Show Advanced Commenting Toolbar options from the subsequent pop-up menus.)
    2. Place your cursor in the document above the Employee and Retiree radio boxes, and click the left mouse button. A bright yellow text box should appear.
    3. Type "I am making changes to my:" in this new field.
    4. Left-click anywhere on the form to automatically resize the new text field.
    5. To remove the yellow background, left-click anywhere inside the new field. Small blue squares will appear around the border to indicate that it's highlighted.
    6. Right-click inside the highlighted field and select the Properties option from the pop-up menu that appears.
    7. Use the various options under the Appearance tab to define the field's background and border.
    8. You may use this Properties option with any other type of form field you create. The types of properties you can edit will simply change according to the type of field you've selected.
    A Quick Tip
    As you go through this tutorial, remember that it is always a good idea to save your work from time to time. To keep a PDF slim and increase its download speed, use the Save As option instead of a simple Save, to void your history of changes and save only your changes.

    6 -- Define a List Box Form Fieldlist box

    1. Select the List Box tool from the Forms Toolbar.
    2. Create/draw a list box. A List Box Properties window should appear.
    3. Click on the Options tab.
    4. Enter Name in both the Item and Export Value fields, then click on the Add button to include that item in the list that will eventually appear in that field on the form.
    5. Repeat the above step two more times, entering and adding Phone number and Home address to the list of list box options.
    6. Select the Multiple selection option which appears in the middle of this window. Doing this will allow the user to use the Ctrl key to select more than one item from the list of options. (By definition, list boxes allow only one selection from a list. You need to remember that, if you wish to let your users make more than one selection, you need to specify that property.)
    7. Preview your new list box by selecting the Hand tool from the main Acrobat toolbar at the top of the window. Be sure the box allows the user to see all the options without having to scroll. Style the box however you like, but remember your users must be able to identify these options and how to select them.

    7 -- Define a Combination Box Form Field

    >combo box
    1. Select the Combo Box tool from the Forms Toolbar.
    2. Since this field is for testing purposes only in this exercise, create a combo box anywhere on the form.
    3. Create a combination list, using the same list of items as you did in Section 6.
    4. Style the list.

    Notice that, no matter how large you make the combo box, only one item will appear at a time unless you expand the combo box with the arrow button. Why is this?

    When would you use a list box and when would you use a combo box?
    What are the main differences between the two?

    Summary of Form Field Properties
    Field type Appearance Options Actions Format Validate Calculate Selection change Signed
    Text
    Button
    Check box
    Radio button
    Combo box
    List box
    Signature

8 -- Define a Button Form Field

button

Rather than offering options for user selection or an area where users can input data, buttons perform special actions on the data already entered and/or selected. For example, a button can open a file, submit or reset data (or the entire form), execute a menu item in Acrobat, run Javascript code, and so on. Acrobat offers predefined actions in the Button Tool and also allows us to define our own with the Javascript option.

  1. Select the Button Tool from the Forms Toolbar.
  2. Create a button anywhere on the form. Note that Acrobat immmediately opens a Button Properties dialog box.
  3. Click on the Actions tab and select the specific Trigger action, such as Mouse Up, Mouse Down that will "trigger," or execute, the script.
  4. Select the Submit a form option in the Select Action field. (You may also want to take an extra minute to explore the other pre-defined actions available in Acrobat 6.)
  5. Click the Add button to add the button to the form. A Submit Form Selections window will appear, prompting you to enter the URL to which the user's data will be sent.

Where does it go?
Submitting a form on the Web requires the browser to upload the form and/or its data to a web server. Normally the supplier of information, the server must be configured to receive user-supplied data as well. Check with your web server administrator to see what options are available to you. C&CT currently offers a few options for passing user-supplied data from your forms, through out systems and on to you.

How would you create a button that would print the form?
Can you create a button that would Save the file and then Print?


Other Tutorials for Creating PDF Active Forms