Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating Successful Interactive PDF Forms for Higher Education

2,960 views

Published on

  • Be the first to comment

  • Be the first to like this

Creating Successful Interactive PDF Forms for Higher Education

  1. 1. 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
  2. 2. Presentation Outline <ul><li>Introduction </li></ul><ul><li>About PDF Forms </li></ul><ul><li>Adobe Acrobat and Designer </li></ul><ul><li>Authoring a PDF Form </li></ul><ul><li>Making it Interactive </li></ul><ul><li>Submitting PDF Form Data </li></ul><ul><li>Code Overview </li></ul><ul><li>Conclusion </li></ul>Creating Successful Interactive PDF Forms for Higher Education
  3. 3. PDF Forms
  4. 4. About PDF Forms <ul><li>PDF = Portable Document Format </li></ul><ul><ul><li>Invented by Adobe in the early 1990’s </li></ul></ul><ul><ul><li>PDF is a universal file format </li></ul></ul><ul><ul><ul><li>Platform independent </li></ul></ul></ul><ul><ul><ul><li>Browser independent </li></ul></ul></ul><ul><li>A PDF Form is a standard PDF document that contains form fields </li></ul><ul><li>Allows the author to capture information from users by way of submitting data </li></ul><ul><ul><li>Like HTML forms </li></ul></ul><ul><li>Maintains original form appearance/functionality </li></ul><ul><ul><li>Paper and online form could be identical </li></ul></ul>
  5. 5. Types of PDF Forms <ul><li>Static PDF Form </li></ul><ul><ul><li>Used to present information to user </li></ul></ul><ul><ul><li>Not typable </li></ul></ul><ul><li>Dynamic PDF Form </li></ul><ul><ul><li>Form can grow or shrink according to the amount of data entered into it </li></ul></ul><ul><ul><li>Useful to present or collect an indeterminate amount of data </li></ul></ul><ul><li>Interactive PDF Form </li></ul><ul><ul><li>Typable form filled out online </li></ul></ul><ul><ul><li>Form can grow/shrink dynamically </li></ul></ul><ul><ul><li>Includes buttons for common tasks such as submitting, printing or saving data </li></ul></ul><ul><ul><li>Includes selection lists, calculations, and validations </li></ul></ul>
  6. 6. Benefits of Interactive PDF Forms <ul><li>Quicker and easier to fill out online </li></ul><ul><li>Eliminates cumbersome and time-consuming effort required to process paper forms </li></ul><ul><ul><li>Significant cost savings </li></ul></ul><ul><ul><li>Improved customer service </li></ul></ul><ul><li>Reduces inefficient data entry </li></ul><ul><li>Enhanced document security and usability </li></ul><ul><li>Supports assistive technologies, such as screen readers </li></ul><ul><li>Can submit data in many different formats </li></ul><ul><ul><li>URL Encoded </li></ul></ul><ul><ul><li>PDF </li></ul></ul><ul><ul><li>FDF, XFDF (Acrobat Only) </li></ul></ul><ul><ul><li>XML, XDP (Designer Only) </li></ul></ul>
  7. 7. Adobe Acrobat and Designer
  8. 8. About Adobe Acrobat and Designer <ul><li>Adobe® Acrobat® Professional 7: Our software tool of choice </li></ul><ul><li>Two ways to create PDF forms: </li></ul><ul><ul><li>Acrobat® Professional </li></ul></ul><ul><ul><ul><li>Create/edit PDF’s from pre-existing source files such as WORD or EXCEL </li></ul></ul></ul><ul><ul><ul><li>Creates forms with technology called Acroforms </li></ul></ul></ul><ul><ul><li>LiveCycle™ Designer </li></ul></ul><ul><ul><ul><li>Client-based point-and-click WYSIWYG PDF form designer </li></ul></ul></ul><ul><ul><ul><li>Creates forms based on Adobe XML Forms Architecture (XFA) </li></ul></ul></ul><ul><ul><ul><li>LiveCycle Designer installs with, and is integrated with Acrobat Professional 7 </li></ul></ul></ul><ul><li>Either tool can be used to make successful interactive PDF forms </li></ul>
  9. 9. 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.
  10. 10. Acrobat’s Forms Toolbar <ul><li>An interactive PDF form created by Acrobat Professional can contain the following form elements: </li></ul><ul><ul><li>Buttons </li></ul></ul><ul><ul><li>Check boxes </li></ul></ul><ul><ul><li>Combo box </li></ul></ul><ul><ul><li>List box </li></ul></ul><ul><ul><li>Radio buttons </li></ul></ul><ul><ul><li>Text field </li></ul></ul><ul><ul><li>Digital signature field </li></ul></ul><ul><li>Customize look and feel of elements via property windows </li></ul><ul><ul><li>Double click element or right click/properties to customize elements </li></ul></ul>
  11. 11. 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.)
  12. 12. Designer’s Library Palette <ul><li>The Library palette contains all the objects that you can “drag and drop” on to a PDF form design </li></ul><ul><li>The Standard tab contains the core form objects </li></ul><ul><li>The Custom tab contains custom objects </li></ul><ul><ul><li>Where form authors custom created objects are kept </li></ul></ul>
  13. 13. Useful Palettes In Designer <ul><li>Object Palette </li></ul><ul><ul><li>Modify properties that are specific to a selected object </li></ul></ul><ul><li>Layout Palette </li></ul><ul><ul><li>Modify object size and position, margins and caption position and width </li></ul></ul><ul><li>Accessibility Palette </li></ul><ul><ul><li>Specify custom text and tooltips for screen readers! </li></ul></ul>
  14. 14. PDF Form Creation Process
  15. 15. Acrobat Vs. Designer <ul><li>Q: So which is the better form creator? </li></ul><ul><li>A: It depends. Both have their place. </li></ul><ul><li>Adobe® Acrobat® Professional 7+ </li></ul><ul><ul><li>One click PDF creation from source file </li></ul></ul><ul><ul><li>Forms Toolbar and advanced editing capabilities </li></ul></ul><ul><ul><li>More post editing features that are easier to implement </li></ul></ul><ul><ul><ul><li>Bookmarks, Initial View, Document Properties </li></ul></ul></ul><ul><ul><li>Backwards compatible with Adobe Reader 5+ </li></ul></ul><ul><li>Adobe® LiveCycle™ Designer </li></ul><ul><ul><li>Create native PDF files from scratch or import others </li></ul></ul><ul><ul><li>Tight integration with XML </li></ul></ul><ul><ul><li>Forms can dynamically expand </li></ul></ul><ul><ul><li>Must have Reader version 6.02, and in some cases 7.05 to view forms correctly </li></ul></ul>
  16. 16. Authoring A PDF Form
  17. 17. Form Design Considerations <ul><li>User needs </li></ul><ul><ul><li>What will form help users accomplish and why? </li></ul></ul><ul><ul><li>Will form collect info, provide info, both? </li></ul></ul><ul><li>Design guidelines for forms </li></ul><ul><ul><li>Establish common form properties (headers/footers) </li></ul></ul><ul><ul><li>Consistent margins, fonts, borders, etc. </li></ul></ul><ul><li>Appearance and organization </li></ul><ul><ul><li>Easy to navigate, visually appealing, logically organized? </li></ul></ul><ul><li>Accessibility considerations </li></ul><ul><ul><li>Screen reader friendly? </li></ul></ul><ul><li>Security considerations </li></ul><ul><ul><li>Restricted access, password protection? </li></ul></ul>Regardless of whether you are using Acrobat or Designer, consider the following:
  18. 18. Additional Form Design Considerations <ul><li>Form distribution </li></ul><ul><ul><li>Print or electronic format or both? </li></ul></ul><ul><ul><li>Internet or Intranet? </li></ul></ul><ul><li>Data-handling requirements </li></ul><ul><ul><li>Will data be submitted, where and how? </li></ul></ul>Regardless of whether you are using Acrobat or Designer, consider the following:
  19. 19. Creating PDF Forms <ul><li>Process for creating PDF forms is different with Acrobat and Designer </li></ul><ul><ul><li>Acrobat: All work is done using the Forms Toolbar </li></ul></ul><ul><ul><ul><li>Draw form fields with mouse cursor </li></ul></ul></ul><ul><ul><ul><li>Customize by opening and manipulating property windows </li></ul></ul></ul><ul><ul><li>Designer: All work is done via the Library and Object Pallets </li></ul></ul><ul><ul><ul><li>Drag and drop objects on to form </li></ul></ul></ul><ul><ul><ul><li>Customize by changing properties in the object, layout, accessibility pallets </li></ul></ul></ul><ul><li>Choose software solution that best suits your abilities, needs and business rules </li></ul>
  20. 20. Making It Interactive
  21. 21. Making A PDF Interactive <ul><li>Typable Form Fields </li></ul><ul><li>Form Field Validations </li></ul><ul><li>Calculations </li></ul><ul><li>Dynamic Capabilities </li></ul><ul><li>Button Objects </li></ul>Let’s look at each of these more closely!
  22. 22. Typable Form Fields <ul><li>Allows users to type data directly into PDF form </li></ul><ul><li>Form field objects that are available: </li></ul><ul><ul><li>Buttons, Text Fields, List Boxes, Radio Buttons Check Boxes and more </li></ul></ul><ul><li>Designer </li></ul><ul><ul><li>Drag and drop objects on to form from library pallet </li></ul></ul><ul><li>Acrobat </li></ul><ul><ul><li>Use Forms toolbar to draw items and use properties window to customize them </li></ul></ul>
  23. 23. Form Field Validation <ul><li>Create messages to warn users if they have forgotten to enter data in a field </li></ul><ul><ul><li>Or if they have entered data incorrectly </li></ul></ul><ul><ul><li>Can reformat automatically or prompt user </li></ul></ul><ul><li>Make certain fields required </li></ul><ul><li>Use Object palette in Designer, OR use field property window in Acrobat </li></ul>
  24. 24. Apply Calculations Where Applicable <ul><li>Apply mathematical, date and time, string, finance, and logic functions to form field objects </li></ul><ul><li>Can use built-in calculation language, FormCalc, or JavaScript to write custom scripts to perform calculations as required </li></ul>
  25. 25. Dynamically Grow or Shrink Fields <ul><li>Text fields can adjust according to the amount of data the user enters </li></ul><ul><ul><li>Text box physically stretches, NO scroller in window </li></ul></ul><ul><li>Allows user to type unlimited amount of data that will be seen when form is printed </li></ul><ul><li>Feature only available in Designer </li></ul><ul><ul><li>Use subforms to group areas that you wanted expandable </li></ul></ul>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. 26. Add Button Objects to the Form <ul><li>Typically used to submit data or trigger actions </li></ul><ul><li>Different types of button objects </li></ul><ul><ul><li>HTTP Submit Button </li></ul></ul><ul><ul><li>Reset Button </li></ul></ul><ul><ul><li>Print Button </li></ul></ul><ul><ul><li>E-mail Button </li></ul></ul><ul><li>Use Library palette to drag and drop button objects in Designer, OR use the Forms toolbar to create buttons in Acrobat </li></ul><ul><li>Buttons can be customized with different functionally and style for presentation </li></ul>
  27. 27. Submitting PDF Form Data
  28. 28. Determining Delivery Method <ul><li>Once PDF is created, how will users get their form data to you? </li></ul><ul><li>Choose a method of delivery </li></ul><ul><ul><li>Print Method </li></ul></ul><ul><ul><li>E-mail Method </li></ul></ul><ul><ul><li>Database Method </li></ul></ul>Let’s look at each of these more closely!
  29. 29. Print Method <ul><li>Fill out and print any PDF file </li></ul><ul><ul><li>Useful for when hard copy is needed </li></ul></ul><ul><li>When clicked, Print button opens print dialog box </li></ul><ul><ul><li>Script included in the button's Click event </li></ul></ul>WWW Demo!
  30. 30. E-mail Method <ul><li>Fill out and submit data to e-mail </li></ul><ul><li>E-mail button allows data to be submitted via e-mail </li></ul><ul><ul><li>E-mail will be sent as an XML or FDF attachment </li></ul></ul><ul><ul><ul><li>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 </li></ul></ul></ul><ul><ul><li>XML/FDF attachment can be later imported back into the PDF to view </li></ul></ul>WWW Demo!
  31. 31. Database Method <ul><li>Fill and submit to a database </li></ul><ul><li>Considerations: </li></ul><ul><ul><li>Database should be already created </li></ul></ul><ul><ul><ul><li>Can use MS SQL Server, MySQL, Access, etc. </li></ul></ul></ul><ul><ul><ul><li>Create table name, fields, properties, permissions </li></ul></ul></ul><ul><ul><li>Create code/script to process form data </li></ul></ul><ul><ul><ul><li>ASP file is used for our example </li></ul></ul></ul><ul><ul><ul><li>Upload code file to your Web server </li></ul></ul></ul><ul><ul><li>Reference file in PDF form </li></ul></ul><ul><ul><ul><li>Specify URL ( http://webserver/codefile.asp ) in the properties of the button </li></ul></ul></ul><ul><ul><li>Test, Upload and Use </li></ul></ul><ul><ul><ul><li>Troubleshoot, fix bugs, etc. </li></ul></ul></ul>
  32. 32. Let’s Look at the Code
  33. 33. Server Side Code - Overview <ul><li>Create code/script to process form data </li></ul><!--#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.
  34. 34. Submit and Redirect <ul><li>Redirect users to a Web page upon successful PDF form submission </li></ul><ul><ul><li>Useful for when you want to take a user to a separate Web page </li></ul></ul><ul><ul><ul><li>Post further instructions of contact information? </li></ul></ul></ul><ul><ul><ul><li>Redirect users back to home page? </li></ul></ul></ul><ul><ul><li>Requires confirmation Web page to be created and placed on server </li></ul></ul><% '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!
  35. 35. Submit and Repopulate <ul><li>Display same PDF file (repopulated with user data) upon successful PDF form submission </li></ul><ul><ul><li>Useful for when you want to allow users to view, print or save the same form they submitted </li></ul></ul><ul><ul><ul><li>Print out is exact copy of PDF to keep same formatting </li></ul></ul></ul><ul><ul><li>Does not require any additional coding of a confirmation Web page </li></ul></ul><ul><li>Note: The code used in next example works best with forms created in Adobe Acrobat </li></ul><ul><ul><li>Uses FDF </li></ul></ul>
  36. 36. 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!
  37. 37. Wrap It Up
  38. 38. Conclusion <ul><li>Quick Review </li></ul><ul><ul><li>About PDF Forms </li></ul></ul><ul><ul><li>Adobe Acrobat and Designer </li></ul></ul><ul><ul><li>Authoring a PDF Form </li></ul></ul><ul><ul><li>Making it Interactive </li></ul></ul><ul><ul><li>Submitting PDF Form Data </li></ul></ul><ul><ul><li>Look at the Code </li></ul></ul><ul><li>This presentation and full sample code are available online! </li></ul><ul><li>Can use our code to easily submit your PDF form data to any database </li></ul><ul><ul><li>No third party software to install, no server set up or costs </li></ul></ul><ul><ul><li>Fully functioning, cut and paste and use! </li></ul></ul><ul><ul><li>Change/tweak as needed </li></ul></ul>http://presentation.tmcc.edu
  39. 39. Thank You! Any questions?  Contact Information: Cal Anderson, TMCC Webmaster [email_address] [email_address] 775-673-8267 www.tmcc.edu

×