Creating Successful Inter ctive PDF Forms

1
Creating Successful Inter ctive PDF Forms
For Higher Education

• HighEdWebDev 2006
• October 22-25, 2006 Rochester NY
• Presented by
• Cal Anderson, TMCC Webmaster
• Truckee Meadows Community Collegewww.tmcc.edu

2
Presentation Outline
Creating Successful Interactive PDF Forms for
Higher Education

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

3
PDF Forms
4
About PDF Forms

• PDF Portable Document Format
• Invented by Adobe in the early 1990s
• 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

5
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

6
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)

7
Adobe Acrobat and Designer
8
About Adobe Acrobat and Designer

• Adobe Acrobat Professional 7 Our software tool
  of choice
• Two ways to create PDF forms
• Acrobat Professional
• Create/edit PDFs from pre-existing source files
  such as WORD or EXCEL
• Creates forms with technology called Acroforms
• 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

9
Acrobat Work Area
Standard Toolbar Options to edit PDF document
properties and create and customize workspace.
Document Pane This is where your pre-created PDF
file is viewed and where the majority of editing
work is done.
Navigation Pane Create and edit electronic
bookmarks, view page thumbnails, comments,
attachments and more.
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.
10
Acrobats 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
  to customize elements

11
LiveCycle Designer Work Area
Toolbar Options to create and customize
workspace.
Layout Editor Create the contents of the form
design.
Hierarchy Palette Graphical representation of
the contents in a form.
Library and Object Palettes Drag and drop
interface that allows total customization of
objects. (See next slide for more details.)
12
Designers 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

13
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!

14
PDF Form Creation Process
15
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

16
Authoring A PDF Form
17
Form Design Considerations
Regardless of whether you are using Acrobat or
Designer, consider the following

• 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?

18
Additional Form Design Considerations
Regardless of whether you are using Acrobat or
Designer, consider the following

• Form distribution
• Print or electronic format or both?
• Internet or Intranet?
• Data-handling requirements
• Will data be submitted, where and how?

19
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

20
Making It Interactive
21
Making A PDF Interactive

• Typable Form Fields
• Form Field Validations
• Calculations
• Dynamic Capabilities
• Button Objects

Lets look at each of these more closely!
22
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

23
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

24
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

25
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
adipisicing
Lorem 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
26
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

27
Submitting PDF Form Data
28
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

Lets look at each of these more closely!
29
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

30
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

31
Database Method

• Fill and submit to a database
• Considerations
• Database should be already created
• Can use MS SQL Server, MySQL, Access, etc.
• Create table name, fields, properties,
  permissions
• Create code/script to process form data
• ASP file is used for our example
• Upload code file to your Web server
• Reference file in PDF form
• Specify URL (http//webserver/codefile.asp) in
  the properties of the button
• Test, Upload and Use
• Troubleshoot, fix bugs, etc.

32
Lets Look at the Code
33
Server Side Code - Overview

• Create code/script to process form data

ASP sample code to submit PDF form data to a
database.
lt!--include virtual"/includes/conn.asp"--gt
lt 'Simple ASP code to receive values from a PDF
form and submit to database 'Always good
practice to declare variables Dim
ReqFirstName,ReqLastName,etc. 'Populate
variables with data from PDF form ReqFirstName
Request.Form("ReqFirstName") ReqLastName
Request.Form("ReqLastName") ReqTitle
Request.Form("ReqTitle") etc. 'Dump data from
variables into database sql "insert into
web_tablename (ReqFirstName,ReqLastName,...)
values ('" ReqFirstName "','" ReqLastName
",...)" cn.Execute(sql) gt (To be continued on
next slides...)
34
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

Continuation of ASP sample code to redirect user
to a Web page.
lt 'Send user to a Web page for confirmation. Be
sure file exists on server. Response.Redirect
http//webserver/confirm.asp 'Done. Close the
database connection cn.Close set cn nothing gt
35
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

36
Submit and Repopulate
Continuation of ASP sample code to repopulate a
PDF form with data.
lt Response.ContentType "application/vnd.fdf" Re
sponse.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 "ltlt /FDF" chr(10)
chr(13) Response.Write "ltlt /F(http//webserver/fil
ename.pdf) /Status (Sent Successfully!
Please Print a copy!)" Response.Write "/Fields"
chr(10) chr(13) Response.Write "" chr(10)
chr(13) Response.Write "ltlt /T(ReqFirstName)
/V(" ReqFirstName ") gtgt" chr(10)
chr(13) Response.Write "ltlt /T(Repeat for each
field) /V(" Repeat for each field ")
gtgt" chr(10) chr(13) Response.Write ""
chr(10) chr(13) Response.Write "gtgt" chr(10)
chr(13) Response.Write "gtgt" chr(10)
chr(13) Response.Write "endobj" chr(10)
chr(13) Response.Write "trailer" chr(10)
chr(13) Response.Write "ltlt/Root 1 0 Rgtgt"
chr(10) chr(13) Response.Write "EOF"
chr(10) chr(13) 'Done. Close the database
connection cn.Close set cn nothing gt
Creating FDF 1) Set up the FDF Header and
define object
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 4) Close FDF container, all end
brackets, etc. Trailer, Root and EOF required.
37
Wrap It Up
38
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
39
Thank You!
Any questions? ? Contact
Information Cal Anderson, TMCC
Webmaster canderson_at_tmcc.edu webmaster_at_tmcc.edu 77
5-673-8267 www.tmcc.edu