• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Creating Successful Interactive PDF Forms for Higher Education
 

Creating Successful Interactive PDF Forms for Higher Education

on

  • 2,545 views

 

Statistics

Views

Total Views
2,545
Views on SlideShare
2,545
Embed Views
0

Actions

Likes
0
Downloads
26
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Introduction About PDF Forms Adobe Acrobat and Designer Authoring a PDF Form Making it Interactive Submitting PDF Form Data Code Overview Conclusion
  • 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 Paper and online form could be identical
  • 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
  • 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® Professional 7: Our software tool of choice! Two ways to create PDF forms: Acrobat® Professional Create/edit PDF’s 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
  • 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
  • The Library palette contains all the objects that you can add to a form design The Standard tab contains the core form objects The Custom tab contains custom objects Where form authors custom created objects are kept
  • 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!
  • 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
  • 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?
  • Form distribution Print or electronic format or both? Internet or Intranet? Data-handling requirements Will data be submitted, where and how?
  • 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
  • Typable Form Fields Form Field Validations Calculations Dynamic Capabilities Button Objects
  • Allows users to type data directly into PDF form Form field objects that are available: Buttons, Text Fields, List Boxes, Radio Buttons Check Boxes and more Designer Drag and drop objects on to form from library pallet Acrobat Use Forms toolbar to draw items and use properties window to customize them
  • Create messages to warn users if they have forgotten to enter data in a field Or if they have entered an incorrect format Make certain fields required Can reformat automatically or prompt user Use Object palette in Designer, OR use field property window in Acrobat
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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 later imported back into the PDF to view
  • 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.
  • Create server side code to process data
  • 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
  • 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
  • Chr(10) returns a linefeed character Chr(13) returns a carriage return character See the PDF reference guide at http://partners.adobe.com/public/developer/en/pdf/PDFReference15_v5.pdf for more information on FDF. 1 0 obj The data types in a FDF are borrowed from PDF. It's simple: this is the first object "1", and it's the first generation "0", of the object. When we create a dynamic FDF, we'll always be creating a file with a single, first generation object. Thus "1 0 obj" is the only indirect object we'll need to worry about. The object is closed later with the keyword "endobj". What's is this object? A dictionary. A dictionary is a construct borrowed from the PostScript programming language. A dictionary contains key-value pairs, and is delimited by double angle brackets. So line 03 creates an object, and lines 4 and 15 define the object as a dictionary. A dictionary contains key-value pairs. In PDF and FDF files, the "keys" are always names. A Name is a datatype, it's basically a "variable name", a string with a leading "/". The "value" part can be any other datatype. Content-type header: For an FDF file, this is "application/vnd.fdf". If you don't do this, your FDF will be interpreted as a text file. The /F entry, is required, and is called the "file specification". The value is a string, delimited with parentheses. The string is the path to the "parent" PDF. The data in this FDF will be loaded into the PDF referenced in the file specification. The /Fields array contains a dictionary per form field. Since our form contained many form fields, the /Fields array contains many dictionaries. A dictionary contains key-value pairs. In PDF and FDF files, the "keys" are always names. A Name is a datatype, it's basically a "variable name", a string with a leading "/". The "value" part can be any other datatype. Each dictionary in the /Fields array contains two key-value pairs. /T is the name of the field, /V is the value to place in the field. The field names and values are both strings, and so are wrapped in parentheses. Note: The Field entries must match the actual field names in the PDF Form. The FDF file ends with the "trailer" keyword, and the actual trailer. The trailer contains a dictionary of all the indirect objects in the file. The only required entry is "Root", which will list the object containing the /FDF dictionary: << /Root 1 0 R >>. We wrap things up with the EOF comment.
  • 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! Change/tweak as needed

Creating Successful Interactive PDF Forms for Higher Education Creating Successful Interactive PDF Forms for Higher Education Presentation Transcript

  • Creating Successful Inter ctive PDF Forms HighEdWebDev 2006 October 22-25, 2006; Rochester NY Presented by: Cal Anderson, TMCC Webmaster Truckee Meadows Community College www.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:
      • Acrobat® Professional
        • Create/edit PDF’s 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
  • Acrobat Work Area 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. 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. 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 to customize elements
  • LiveCycle Designer Work Area Hierarchy Palette: Graphical representation of the contents in a form. Layout Editor: Create the contents of the form design. 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.)
  • 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!
  • Typable Form Fields
    • Allows users to type data directly into PDF form
    • Form field objects that are available:
      • Buttons, Text Fields, List Boxes, Radio Buttons Check Boxes and more
    • Designer
      • Drag and drop objects on to form from library pallet
    • Acrobat
      • Use Forms toolbar to draw items and use properties 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 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
  • 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!
  • 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
    WWW Demo!
  • 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 later imported back into the PDF to view
    WWW Demo!
  • 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.
  • Let’s Look at the Code
  • Server Side Code - Overview
    • Create code/script to process form data
    <!--#include virtual=&quot;/includes/conn.asp&quot;--> <% '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(&quot;ReqFirstName&quot;) ReqLastName = Request.Form(&quot;ReqLastName&quot;) ReqTitle = Request.Form(&quot;ReqTitle&quot;) etc. 'Dump data from variables into database sql = &quot;insert into web_tablename (ReqFirstName,ReqLastName,...) values ('&quot; & ReqFirstName & &quot;','&quot; & ReqLastName & &quot;,...)&quot; 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 connection cn.Close set cn = nothing %> Continuation of ASP sample code to redirect user to a Web page. WWW Demo!
  • 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 R epopulate <% Response.ContentType = &quot;application/vnd.fdf&quot; Response.Write &quot;%FDF-1.2&quot; & chr(10) & chr(13) Response.Write &quot;%âaIO&quot; & chr(10) & chr(13) Response.Write &quot;1 0 obj&quot; & chr(10) & chr(13) Response.Write &quot;<< /FDF&quot; & chr(10) & chr(13) Response.Write &quot;<< /F(http://webserver/filename.pdf) /Status (Sent Successfully! Please Print a copy!)&quot; Response.Write &quot;/Fields&quot; & chr(10) & chr(13) Response.Write &quot;[&quot; & chr(10) & chr(13) Response.Write &quot;<< /T(ReqFirstName) /V(&quot; & ReqFirstName & &quot;) >>&quot; & chr(10) & chr(13) Response.Write &quot;<< /T(Repeat for each field) /V(&quot; & Repeat for each field & &quot;) >>&quot; & chr(10) & chr(13) Response.Write &quot;]&quot; & chr(10) & chr(13) Response.Write &quot;>>&quot; & chr(10) & chr(13) Response.Write &quot;>>&quot; & chr(10) & chr(13) Response.Write &quot;endobj&quot; & chr(10) & chr(13) Response.Write &quot;trailer&quot; & chr(10) & chr(13) Response.Write &quot;<</Root 1 0 R>>&quot; & chr(10) & chr(13) Response.Write &quot;%%EOF&quot; & chr(10) & chr(13) 'Done. Close the database connection cn.Close set 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: 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. WWW Demo!
  • 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 Webmaster [email_address] [email_address] 775-673-8267 www.tmcc.edu