Creating Successful Inter ctive PDF Forms

HighEdWebDev 2006October 22-25, 2006; Rochester NY

Presented by:Cal Anderson, TMCC Webmaster

Truckee Meadows Community Collegewww.tmcc.edu

For Higher Education

Presentation Outline

• Introduction• About PDF Forms • Adobe Acrobat and Designer• Authoring a PDF Form• Making it Interactive• Submitting PDF Form Data• Code Overview• Conclusion

Creating Successful Interactive PDF Forms for Higher Education

PDF Forms

About PDF Forms• PDF = Portable Document Format

Invented by Adobe in the early 1990’s PDF is a universal file format

• Platform independent• Browser independent

• A PDF Form is a standard PDF document that contains form fields

• Allows the author to capture information from users by way of submitting data Like HTML forms

• Maintains original form appearance/functionality Paper and online form could be identical

Types of PDF Forms• Static PDF Form

Used to present information to user Not typable

• Dynamic PDF Form Form can grow or shrink according to the amount of data

entered into it Useful to present or collect an indeterminate amount of

data

• Interactive PDF Form Typable form filled out online Form can grow/shrink dynamically Includes buttons for common tasks such as submitting,

printing or saving data Includes selection lists, calculations, and validations

Benefits of Interactive PDF Forms• Quicker and easier to fill out online• Eliminates cumbersome and time-consuming

effort required to process paper forms Significant cost savings Improved customer service

• Reduces inefficient data entry• Enhanced document security and usability• Supports assistive technologies, such as

screen readers• Can submit data in many different formats

URL Encoded PDF FDF, XFDF (Acrobat Only) XML, XDP (Designer Only)

Adobe Acrobat and Designer

About Adobe Acrobat and Designer

• Adobe® Acrobat® Professional 7: Our software tool of choice

• Two ways to create PDF forms:1. Acrobat® Professional

• Create/edit PDF’s from pre-existing source files such as WORD or EXCEL

• Creates forms with technology called Acroforms

2. LiveCycle™ Designer • Client-based point-and-click WYSIWYG PDF form

designer• Creates forms based on Adobe XML Forms Architecture

(XFA)• LiveCycle Designer installs with, and is integrated with

Acrobat Professional 7

• Either tool can be used to make successful interactive PDF forms

Acrobat Work Area

Navigation Pane: Create and edit electronic bookmarks, view page thumbnails, comments, attachments and more.

Navigation Pane: Create and edit electronic bookmarks, view page thumbnails, comments, attachments and more.

Document Pane:This is where your pre-created PDF file is viewed and where the majority of editing work is done.

Document Pane:This is where your pre-created PDF file is viewed and where the majority of editing work is done.

Standard Toolbar: Options to edit PDF document properties and create and customize workspace.

Standard Toolbar: Options to edit PDF document properties and create and customize workspace.

Forms Toolbar: Create and edit form fields on any PDF document.

Toolbar must be loaded initially from the Advanced menu bar and then can be docked and used at a later time.

Forms Toolbar: Create and edit form fields on any PDF document.

Toolbar must be loaded initially from the Advanced menu bar and then can be docked and used at a later time.

Status Bar: Control how to view pages.

Status Bar: Control how to view pages.

Acrobat’s Forms Toolbar• An interactive PDF form created by Acrobat

Professional can contain the following form elements: Buttons Check boxes Combo box List box Radio buttons Text field Digital signature field

• Customize look and feel of elements via property windows Double click element or

right click/properties tocustomize elements

LiveCycle Designer Work Area

Hierarchy Palette: Graphical representation of the contents in a form.

Hierarchy Palette: Graphical representation of the contents in a form.

Layout Editor: Create the contents of the form design.

Layout Editor: Create the contents of the form design.

Toolbar: Options to create and customize workspace.

Toolbar: Options to create and customize workspace.

Library and Object Palettes: “Drag and drop” interface that allows total customization of objects. (See next slide for more details.)

Library and Object Palettes: “Drag and drop” interface that allows total customization of objects. (See next slide for more details.)

Designer’s Library Palette• The Library palette contains all the objects that

you can “drag and drop” on to a PDF form design

• The Standard tab contains the core form objects• The Custom tab contains custom objects

Where form authors custom created objects are kept

Useful Palettes In Designer • Object Palette

Modify properties that are specific to a selected object

• Layout Palette Modify object size and position,

margins and caption position and width

• Accessibility Palette Specify custom text and tooltips

for screen readers!

PDF Form Creation Process

Acrobat Vs. Designer• Q: So which is the better form creator?• A: It depends. Both have their place.• Adobe® Acrobat® Professional 7+

One click PDF creation from source file Forms Toolbar and advanced editing capabilities More post editing features that are easier to implement

• Bookmarks, Initial View, Document Properties Backwards compatible with Adobe Reader 5+

• Adobe® LiveCycle™ Designer Create native PDF files from scratch or import others Tight integration with XML Forms can dynamically expand Must have Reader version 6.02, and in some cases 7.05

to view forms correctly

Authoring A PDF Form

Form Design Considerations

• User needs What will form help users accomplish and why? Will form collect info, provide info, both?

• Design guidelines for forms Establish common form properties (headers/footers) Consistent margins, fonts, borders, etc.

• Appearance and organization Easy to navigate, visually appealing, logically organized?

• Accessibility considerations Screen reader friendly?

• Security considerations Restricted access, password protection?

Regardless of whether you are using Acrobat or Designer, consider the following:

Additional Form Design Considerations

• Form distribution Print or electronic format or both? Internet or Intranet?

• Data-handling requirements Will data be submitted, where and how?

Regardless of whether you are using Acrobat or Designer, consider the following:

Creating PDF Forms• Process for creating PDF forms is different with

Acrobat and Designer Acrobat: All work is done using the Forms Toolbar

• Draw form fields with mouse cursor• Customize by opening and manipulating property windows

Designer: All work is done via the Library and Object Pallets

• Drag and drop objects on to form• Customize by changing properties in the object, layout,

accessibility pallets

• Choose software solution that best suits your abilities, needs and business rules

Making It Interactive

Making A PDF Interactive• Typable Form Fields• Form Field Validations• Calculations• Dynamic Capabilities• Button Objects

Let’s look at each of these more closely!Let’s look at each of these more closely!

Typable Form Fields• Allows users to type data directly into PDF form• Form field objects that are available:

Buttons, Text Fields, List Boxes, Radio ButtonsCheck Boxes and more

• Designer Drag and drop objects

on to form from librarypallet

• Acrobat Use Forms toolbar to

draw items and useproperties window to customize them

Form Field Validation• Create messages to warn users if they have

forgotten to enter data in a field Or if they have entered data incorrectly Can reformat automatically or prompt user

• Make certain fields required• Use Object palette in Designer, OR use field

property window in Acrobat

Apply Calculations Where Applicable

• Apply mathematical, date and time, string, finance, and logic functions to form field objects

• Can use built-in calculation language, FormCalc, or JavaScript to write custom scripts to perform calculations as required

Dynamically Grow or Shrink Fields• Text fields can adjust according to the amount

of data the user enters Text box physically stretches, NO scroller in window

• Allows user to type unlimited amount of data that will be seen when form is printed

• Feature only available in Designer Use subforms to group areas that you wanted expandable

Lorem ipsum dolor sit amet, consectetur adipisicingLorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing

Add Button Objects to the Form• Typically used to submit data or trigger actions• Different types of button objects

HTTP Submit Button Reset Button Print Button E-mail Button

• Use Library palette to drag and drop button objects in Designer, OR use the Forms toolbar to create buttons in Acrobat

• Buttons can be customized with different functionally and style for presentation

Submitting PDF Form Data

Determining Delivery Method• Once PDF is created, how will users get their

form data to you?• Choose a method of delivery

Print Method E-mail Method Database Method

Let’s look at each of these more closely!Let’s look at each of these more closely!

Print Method• Fill out and print any PDF file

Useful for when hard copy is needed

• When clicked, Print button opens print dialog box Script included in the button's Click event

E-mail Method• Fill out and submit data to e-mail• E-mail button allows data to be submitted via e-

mail E-mail will be sent as an XML or FDF attachment

• FDF is the Acrobat-friendly file format used when submitting Form data to a server, receiving a response, and incorporating it back into a PDF Form

XML/FDF attachment can be laterimported back into the PDF to view

Database Method• Fill and submit to a database• Considerations:

1. Database should be already created• Can use MS SQL Server, MySQL, Access, etc.• Create table name, fields, properties, permissions

2. Create code/script to process form data • ASP file is used for our example • Upload code file to your Web server

3. Reference file in PDF form• Specify URL (http://webserver/codefile.asp) in the

properties of the button

4. Test, Upload and Use• Troubleshoot, fix bugs, etc.

Let’s Look at the Code

Server Side Code - Overview• Create code/script to process form data

<!--#include virtual="/includes/conn.asp"--> <%'Simple ASP code to receive values from a PDF form and submit to database

'Always good practice to declare variablesDim ReqFirstName,ReqLastName,etc.

'Populate variables with data from PDF formReqFirstName = Request.Form("ReqFirstName")ReqLastName = Request.Form("ReqLastName")ReqTitle = Request.Form("ReqTitle")etc.

'Dump data from variables into databasesql = "insert into web_tablename (ReqFirstName,ReqLastName,...) values ('" & ReqFirstName & "','" & ReqLastName & ",...)"cn.Execute(sql)%> (To be continued on next slides...)

ASP sample code to submit PDF form data to a database.

Submit and Redirect• Redirect users to a Web page upon successful

PDF form submission Useful for when you want to take a user to a separate

Web page• Post further instructions of contact information?• Redirect users back to home page?

Requires confirmation Web page to be created and placed on server

<%'Send user to a Web page for confirmation. Be sure file exists on server.Response.Redirect http://webserver/confirm.asp

'Done. Close the database connectioncn.Closeset cn = nothing %>

Continuation of ASP sample code to redirect user to a Web page.

Submit and Repopulate• Display same PDF file (repopulated with user

data) upon successful PDF form submission Useful for when you want to allow users to view, print or

save the same form they submitted• Print out is exact copy of PDF to keep same formatting

Does not require any additional coding of a confirmation Web page

• Note: The code used in next example works best with forms created in Adobe Acrobat Uses FDF

Submit and Repopulate

<%Response.ContentType = "application/vnd.fdf"Response.Write "%FDF-1.2" & chr(10) & chr(13)Response.Write "%âaIO" & chr(10) & chr(13)Response.Write "1 0 obj" & chr(10) & chr(13)Response.Write "<< /FDF" & chr(10) & chr(13)Response.Write "<< /F(http://webserver/filename.pdf) /Status (Sent Successfully! Please Print a copy!)"Response.Write "/Fields" & chr(10) & chr(13)Response.Write "[" & chr(10) & chr(13)Response.Write "<< /T(ReqFirstName) /V(" & ReqFirstName & ") >>" & chr(10) &

chr(13)Response.Write "<< /T(Repeat for each field) /V(" & Repeat for each field & ")

>>" & chr(10) & chr(13)Response.Write "]" & chr(10) & chr(13)Response.Write ">>" & chr(10) & chr(13)Response.Write ">>" & chr(10) & chr(13)Response.Write "endobj" & chr(10) & chr(13)Response.Write "trailer" & chr(10) & chr(13)Response.Write "<</Root 1 0 R>>" & chr(10) & chr(13)Response.Write "%%EOF" & chr(10) & chr(13)

'Done. Close the database connectioncn.Closeset cn = nothing %>

Continuation of ASP sample code to repopulate a PDF form with data.

Creating FDF: 1) Set up the FDF Header and define object

Creating FDF: 1) Set up the FDF Header and define objectCreating FDF:

2) Determine file specification where data will be sent to.

Creating FDF: 2) Determine file specification where data will be sent to.Creating FDF: 3) Set up /Fields array where you match up PDF form fields with variable names to re-populate a PDF.

Creating FDF: 3) Set up /Fields array where you match up PDF form fields with variable names to re-populate a PDF.

Creating FDF: 4) Close FDF container, all end brackets, etc. Trailer, Root and EOF required.

Creating FDF: 4) Close FDF container, all end brackets, etc. Trailer, Root and EOF required.

Wrap It Up

Conclusion• Quick Review

About PDF Forms Adobe Acrobat and Designer Authoring a PDF Form Making it Interactive Submitting PDF Form Data Look at the Code

• This presentation and full sample code are available online!

• Can use our code to easily submit your PDF form data to any database No third party software to install, no server set up or costs Fully functioning, cut and paste and use! Change/tweak as needed

http://presentation.tmcc.edu

Thank You! Any questions?

Contact Information:

Cal Anderson, TMCC Webmastercanderson@tmcc.eduwebmaster@tmcc.edu

775-673-8267www.tmcc.edu