|
Introduction
Forms have long been and will continue to be a central part of any interactive site. Collecting information from a form has been solved, first by posting the data to an e-mail address, then by using Common Gateway Interface (CGI) scripts, and currently by using other server-side technologies, such as ASPs. Collecting and storing this data into a database is a fairly simple process and even prepopulating a form with user-specific data via session variables or cookies has become a sort of standard. Though we are deep within the Information Age, we still require forms to be printed out and physically signed. Perhaps in 10 years or so everyone will have a digital signature and this will no longer be necessary. But, until that day we are faced with a kind of dilemma -- How to present a form that is connectable to a database and that can be printed for signature or other purposes. Along comes Adobe's Portable Document Format (PDF) which is both printable and transportable. On top of this they have added a layer called Forms Data Format (FDF), which is very similar and similar to HTML form elements.
This article series will discuss three methods of presenting and printing a form that is connectable to a database. Each has its own unique set of advantages and disadvantages, but at least one method will meet your needs.
Download all the sample files for part I: 010822.zip
Getting Started
We will discuss the handling of the most common form elements in detail, from the front end of prepopulating and presenting a form, the actual presentation and client-side entry, to the back-end processing, collection, submission, and printing of that form. I will not go into any detail on retrieving data from a database, client-side or server-side validation, or getting the data back into a database. Everything discussed here will be relative to the form itself.
The textbox and text area will be handled identically.
The check box and radio button will be handled similarly, with some additional tips.
The drop-down and list box will be handled identically without the support of multiple selections. One instance will be a blank select box with no options, while the other will contain a list of five options.
The Submit button will be handled in a unique way with alternatives using the little-known button tag.
Everything discussed is HTML 4.01-compliant, compatible with ASP 2.0 and Adobe Acrobat and Adobe Acrobat Reader 5.0. All code examples have been tested on an IIS 4 server with an IE 5.1 browser on the client.
Required Software
Adobe Acrobat 5.0 (the full version) is required by the form developer.
Adobe Acrobat Reader 5.0 is required by the client or user.
We will create a generic form using all of the above-mentioned form elements. For convenience sake, keep all your files in the same folder.
Bold text signifies the label of a dialog box, tab, grouped area, button, or a specific property within a grouped area.
Italicized text signifies the value or setting of a specific property.
"Double quotes" signify the exact text to be entered, unless it obviously doesn't apply.
Step 1: Create an Adobe Acrobat form as follows:
- Open a document as Adobe PDF (select Open as Adobe PDF … under File) or open a new blank document in another application, such as MS Word and print the document to the Acrobat Distiller (this will appear as a printer choice). Name the file "FormTest.pdf."
- Select the FreeText Tool (S) (On a mouseover of the FreeText Tool in Adobe Acrobat 5.0 a tooltip pops up and reads "FreeText Tool (S)." The purpose of the "(S)" is to denote that the letter is a shortcut to the FreeText Tool and that pressing "Shift-S" will incrementally select a tool within the (S) grouping.).
- Click and drag the tool on your document to form a small rectangle.
- In this box, type "Enter your first name:". You can select the Hand Tool (H) from the menu and click inside of your newly formed FreeText area. You can then move this area around, change its size, and right click to edit its properties. For now, I have the borders set at 0 pt (zero points).
- Create five more FreeText areas (numbered here as 1 through 5), leaving plenty of space around them for the form elements. (1) "Describe your programming experience:"; (2) "'Choose the language(s) you are familiar with:"; and immediately under this area enter three more FreeText areas: "VBScript," "C++,", and "Java." Next, enter (3) "Pick your gender:," and immediately under this area enter two more FreeText areas: "Female" and "Male." Next, enter (4) "Select your favorite site:" and finally (5) "Select the most appealing HTML color:".
- Select the Form Tool (F).
- Click and drag the tool on your document to form a small rectangle just below the "Enter your first name:" FreeText area.
- As soon as you release the mouse button a Field Properties dialog box will open. Type "txtFirstName" into the Name: box and select Text from the Type: box. Under the Appearance tab I have selected the Border/Border Color as black, the Border/Width as Thin, and the Border/Style as Solid. You can also specify the font. Ensure that under Common Properties that nothing is checked and that the Form Field Is: is set as Visible. For this discussion we will not change any of the other default settings.
- Click and drag the tool on your document to form a large rectangle just below the "Describe your programming experience:" FreeText area.
- As soon as you release the mouse button a Field Properties dialog box will open. Type "txtExperience" into the Name: box and select Text from the Type: box. Ensure that all other settings are identical to the ones in Step 8. Under the Options tab check the Multi-line checkbox and uncheck the Do Not Spell Check checkbox.
- Click and drag the tool on your document to form a small square just below the "Choose the language(s) you are familiar with:" FreeText area and to the left of the "VBScript" area.
- As soon as you release the mouse button a Field Properties dialog box will open. Type "chkVBS" into the Name: box and select Check Box from the Type: box. Ensure that all other settings are identical to the ones in Step 8. Under the Options tab select Check in the Check Style box.
- Ensure that the checkbox that you just created is still selected. Press Ctrl-C or right click and select Edit> Copy. Press Ctrl-V or Edit> Paste. Do this once more. Move each copied checkbox beside their respective choices and double click each one. Just change the Name: of each to "chkC" for one and "chkJava" for the other.
- Click and drag the tool on your document to form a small square just below the "Pick your gender:"FreeText area and to the left of the "Female" area.
- As soon as you release the mouse button a Field Properties dialog box will open. Type "radGender" into the Name: box and select Radio Button from the Type: box. Ensure that all other settings are identical to the ones in Step 8. Under the Options tab type "Female" in the Export Value box and select the Circle in the Radio Style box. Notice that there are 5-6 other style options in this box. The fact that you can make a radio button square and look like a checkbox is very convenient and eliminates an incredible amount of scripting that you would normally need to include in an HTML form to get the same look and behavior. Keep this in mind when you decide upon what method is best for you.
- Ensure that the radio button that you just created is still selected. Press Ctrl-C or right click and select Edit> Copy. Press Ctrl-V or Edit> Paste. Move the copied radio button beside the "Male" area and double click it. Just change the Export Value to "Male".
- Click and drag the tool on your document to form a large rectangle just below the "Select your favorite site:" FreeText area.
- As soon as you release the mouse button a Field Properties dialog box will open. Type "selSite" into the Name: box and select List Box from the Type: box. Ensure that all other settings are identical to the ones in Step 8. Under the Options tab enter these values in the Item: box and press the Add button each time: "internet.com", "microsoft.com", "netscape.com", "sun.com", and "yahoo.com". Each quoted item is actual text that needs to be entered into the Item: box. They are entered one at a time and the Add button is pressed to add each of these items to the list box.
- Click and drag the tool on your document to form a small rectangle just below the "Select the most appealing HTML color:" FreeText area.
- As soon as you release the mouse button a Field Properties dialog box will open. Type "selColor" into the Name: box and select Combo Box from the Type: box. Ensure that all other settings are identical to the ones in Step 8. Do not add any options to this field element; we will be populating this combo box from an ASP!
- Click and drag the tool on your document to form a small rectangle below all the other areas, this will be our submit button.
- As soon as you release the mouse button a Field Properties dialog box will open. Type "btnSubmit" into the Name: box and select Button from the Type: box. Under the Options tab enter "Submit" into the Button Face Attributes/Text: box. Notice that in the Layout: box, you can select any combination of Text and Icon (which could be a small GIF). I will examine these options later and show you how this is possible, even in HTML. For now, just select Text only. Under the Actions tab select the Mouse Down option in When this happens…. Next, press the Add button to the right. An Add an Action dialog will open. Select Submit Form, near the bottom of the Type: list. Once selected, a Select URL… button will appear. Press this button and a Submit Form Selections dialog will open. Enter "FormTestSubmit.asp" into the Enter a URL for this link: box and, very important, select HTML for the Export Format. Press OK, then press Set Action, and then press OK again.
- Click and drag the tool on your document to form a small rectangle below all the other areas, this will be our Import Data button.
- As soon as you release the mouse button a Field Properties dialog box will open. Type "btnImport" into the Name: box and select Button from the Type: box. Under the Options tab enter "Import Data" into the Button Face Attributes text box. Under the Actions tab select the Mouse Down option in When this happens.…. Next, press the Add button to the right. An Add an Action dialog will open. Select Submit Form near the bottom of the Type: list. Once selected a Select URL button will appear. Press this button, and a Submit Form Selections dialog will open. Enter "FormTestImport.asp#FDF" into the Enter a URL for this link: box and, very important, select HTML for the Export Value format. Press OK, then press Set Action, and then press OK again
- Click and drag the tool on your document to form a small rectangle below all the other areas. This will be our Reset button.
- As soon as you release the mouse button a Field Properties dialog box will open. Type "btnReset" into the Name: box and select Button from the Type: box. Under the Options tab enter "Reset" into the Button Face Attributes text box. Under the Actions tab select the Mouse Down option in When this happens.... Next, press the Add button to the right. An Add an Action dialog will open. Select Reset Form near the top of the Type: list. Once selected, a Select Fields button will appear. Press the Set Action button, and then press OK.
Alternately, you can download my FormTest.pdf (get from complete source code in previous section). However, it would be wise to go through the trouble of creating your own PDF.
Step 2: Create the front-end ASP that retrieves data from a database (if desired) and prepopulates all the fields in FormTest.pdf. This first example is very basic and uses literals for the Adobe PDF form field elements. This is not very useful in a dynamic environment. The second example uses variables in some instances to demonstrate various possibilities. Name this file as FormTestImport.asp and don't forget to specify your unique URL.
Example 1
<%@ LANGUAGE = VBScript%>
<%
'SET UP YOUR PAGE
'*************************************************************************
Option Explicit
' DECLARE ALL THE VARIABLES
'*************************************************************************
Dim strFirstName 'First Name value for the txtFirstName field
Dim strProgTitle 'Title for Program Language(s) most familiar w/
' SET UP YOUR CONNECTION OBJECT HERE
'*************************************************************************
' SET UP YOUR RECORDSETS OR COMMAND OBJECTS HERE
'*************************************************************************
' SET THE DECLARED VARIABLES' VALUES BASED ON DATABASE RESULTS
'*************************************************************************
strFirstName = "Eric"
strProgTitle = "chkVBS"
'CLOSE & CLEAN UP YOUR RECORDSETS, COMMAND OBJECTS,
'& CONNECTION OBJECT HERE
'***************************************************************************
' END DATA COLLECTION, BEGIN FDF FORMATION
'***************************************************************************
' All FDF/PDF form fields, no matter their type, are accessed by the
' Title(Name)(/T)
' followed by the Value (/V) keys. For List Boxes & Combo Boxes,
' you only need to refer to
' the Option fields when you are populating the boxes with new data
' using the /Opt key.
' form field Titles and Values are case sensitive. If you misspell or use
' incorrect casing, the form field will be ignored, and you will not
' receive an error.
' The File (/F) key links this ASP (FDF) with a specific PDF file.
' You must specify a complete absolute URL.
' Unfortunately, relative URLs do not work as intended.
' After the Title (/T), Value (/V), Option (/Opt), and File (/F) keys,
' enter the respective "value" within parentheses, e.g., /T (txtFirstName).
'You may enter these values as literals or as an abbreviated Response.Write.
' e.g. /T (<% = strTitle (closing asp delimiter here)). The following
'ASP will provide examples of this.
%>
<% Response.ContentType = "application/vnd.fdf" %>
%FDF-1.2
1 0 obj
<<
/FDF
<<
/Fields [
<< /T (txtFirstName) /V (Eric) >>
<< /T (txtExperience)
/V (9 months in HTML, 6 months in ASP & VBScript, 1 month in JavaScript & DHTML) >>
<< /T (chkVBS) /V (Yes) >>
<< /T (radGender) /V (Male) >>
<< /T (selSite) /V (microsoft.com) >>
<< /T (selColor) /Opt [(#6699FF) (#0000CC) (#990033) (#000080) (#FFCC00)] /V (#000080) >>
]
/F (http://Inetpub/wwwroot/PDF/FormTest.pdf) >>
>>
endobj
trailer
<< /Root 1 0 R >>
%%EOF
Example 2
Note that you can intermix ASP and FDF just as you would with HTML. If you are going to use both examples, name this one FormTestImport2.asp. Again, don't forget to specify your unique URL.
<%@ LANGUAGE = VBScript%>
<%
' SET UP YOUR PAGE
'**********************************************************************
Option Explicit
' DECLARE ALL THE VARIABLES
'***********************************************************************
Dim strFirstName 'First Name value for the txtFirstName field
Dim strProgExp 'Short description of programming experience
Dim strVBS 'Title for Program Language(s) most familiar w/-VBScript
Dim strC 'Title for Program Language(s) most familiar w/-C++
Dim strJava 'Title for Program Language(s) most familiar w/-Java
Dim strGender 'Gender of individual
Dim strFavSite 'Favorite Web site
Dim arrColors 'An array of HTML colors
Dim intFavColor 'Index of HTML colors array
Dim i 'Counter used to iterate through arrColors
' SET UP YOUR CONNECTION OBJECT HERE
'**************************************************************************
' SET UP YOUR RECORDSETS OR COMMAND OBJECTS HERE
'**************************************************************************
' SET THE DECLARED VARIABLES' VALUES BASED ON DATABASE RESULTS
'**************************************************************************
strFirstName = "Eric"
strProgExp = "9 months in HTML, 6 months in ASP & VBScript, 1 month in JavaScript & DHTML"
strVBS = "Yes"
strC = "Off"
strJava = "Off"
strGender = "Male"
strFavSite = "microsoft.com"
arrColors = Array("FFFF00", "000080", "DF0029", "666666", "009F62")
intFavColor = 1
'CLOSE & CLEAN UP YOUR RECORDSETS, COMMAND OBJECTS,
'& CONNECTION OBJECT HERE
'*******************************************************************************
' END DATA COLLECTION, BEGIN FDF FORMATION
'**************************************************************************
' All FDF/PDF form fields, no matter their type,
' are accessed by the Title(Name) (/T)
' followed by the Value (/V) keys. For List Boxes & Combo Boxes,
' you only need to refer to
' the Option fields when you are populating the boxes with new data with
' the /Opt key.
' Form field Titles and Values are case sensitive. If you misspell
' or use incorrect
' casing, the form field will be ignored, and you will not receive an error.
' The File (/F) key links this ASP (FDF) with a specific PDF file. You must
' specify a complete absolute URL.
' Unfortunately, relative URLs do not work as intended.
' After the Title (/T), Value (/V), Option (/Opt), and File (/F) keys,
' you enter the respective "value" within parentheses, e.g., /T (txtFirstName).
' You may enter these values as literals or as an abbreviated Response.Write.
' e.g. /T (<% = strTitle (closing asp delimiter here)).
%>
<% Response.ContentType = "application/vnd.fdf" %>
%FDF-1.2
1 0 obj
<<
/FDF
<<
/Fields
[
<< /T (txtFirstName) /V (<% = strFirstName %>) >>
<< /T (txtExperience) /V (<% = strProgExp %>) >>
<< /T (chkVBS) /V (<% = strVBS %>) >>
<< /T (chkC) /V (<% = strC %>) >>
<< /T (chkJava) /V (<% = strJava %>) >>
<< /T (radGender) /V (<% = strGender %>) >>
<< /T (selSite) /V (<% = strFavSite %>) >>
<< /T (selColor)
/Opt
[
<%
For i = 0 to UBound(arrColors)
%>
(<% = "#" & arrColors(i) %>)
<%
Next
%>
]
/V (<% = "#" & arrColors(intFavColor) %>) >>
]
/F (http://InetPub/wwwroot/PDF/FormTest.pdf)
>>
>>
endobj
trailer
<< /Root 1 0 R >>
%%EOF
Step 3: Create the back-end ASP that collects the user's inputs and stores it to a database (if desired). Name this file as FormTestSubmit.asp.
<%@ LANGUAGE = VBScript%>
<%
' SET UP YOUR PAGE
'***********************************************************************
Option Explicit
Response.Buffer = True
Response.Expires = -1441
' DECLARE ALL THE VARIABLES
'***********************************************************************
Dim strFirstName 'First Name value from the txtFirstName field
Dim strProgExp 'Short description of programming experience
'from the txtExperience field
Dim strVBS 'Value of the Program Language(s) most familiar w/-VBScript
'from the chkVBS field
Dim strC 'Value of the Program Language(s) most familiar w/-C++
'from the chkC field
Dim strJava 'Value of the Program Language(s) most familiar w/-Java
'from the chkJava field
Dim strGender 'Gender value from the radGender field
Dim strFavSite 'Favorite Web site value from the selSite field
Dim strFavColor 'Favorite Color value from the selColor field
Dim strColor 'Color of text based on Favorite Color selected
' BEGIN YOUR FORM DATA COLLECTION HERE
'***********************************************************************
' As long as you set your Submit Form Selections - Export Format to HTML
'within your PDF, then you simply collect your form data as you would in
'any other HTML form.
' Here I check for the presence of the first field in the PDF.
' If it is empty, I redirect the user back to the Import ASP. If not,
' I collect all the form field data.
If Request.Form("txtFirstName") & "" = "" Then
Response.Redirect "FormTestImport.asp"
Else
strFirstName = Request.Form("txtFirstName")
strProgExp = Request.Form("txtExperience")
strVBS = Request.Form("chkVBS")
strC = Request.Form("chkC")
strJava = Request.Form("chkJava")
strGender = Request.Form("radGender")
strFavSite = Request.Form("selSite")
strFavColor = Request.Form("selColor")
End If
' Just using the selColor data as an example of providing feedback
If strFavColor = "#FFFF00" OR strFavColor = "#FFCC00" Then
strColor = "black"
Else
strColor = "white"
End If
' SET UP YOUR CONNECTION OBJECT HERE
'***********************************************************************
' SET UP YOUR RECORDSETS, COMMAND OBJECTS, OR SQL STATEMENTS HERE
' AND DUMP YOUR COLLECTED FORM DATA INTO A DATABASE
'**************************************************************************
' CLOSE & CLEAN UP YOUR RECORDSETS, COMMAND OBJECTS,
'& CONNECTION OBJECT HERE
'***************************************************************************
%>
<html>
<head>
<title>FormTest.pdf Posted Results</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
<p>This will accept the data from FormTest.pdf</p>
<table width="50%" border="1" cellspacing="5" cellpadding="5">
<tr>
<td>This is the value from the txtFirstName field:</td>
<td> <% = strFirstName %> </td>
</tr>
<tr>
<td>This is the value from the txtExperience field:</td>
<td> <% = strProgExp %> </td>
</tr>
<tr>
<td>This is the value from the chkVBS field:</td>
<td> <% = strVBS %> </td>
</tr>
<tr>
<td>This is the value from the chkC field:</td>
<td> <% = strC %> </td>
</tr>
<tr>
<td>This is the value from the chkJava field:</td>
<td> <% = strJava %> </td>
</tr>
<tr>
<td>This is the value from the radGender field:</td>
<td> <% = strGender %> </td>
</tr>
<tr>
<td>This is the value from the selSite field:</td>
<td> <% = strFavSite %> </td>
</tr>
<tr>
<td>This is the value from the selColor field:</td>
<td bgcolor="<% = strFavColor %>"><font color="<% = strColor %>">
<% = strFavColor %> </font></td>
</tr>
</table>
</body>
</html>
<%
' The following causes the HTML to be sent to the client.
' Up to this point, no HTML has actually been downloaded to the client
' browser.
Response.Flush
%>
Conclusion
This is all there is to it. There are many other keys in FDF. The ones here are the most rudimentary. Notice that if you included both the Reset button and the Import Data button, you can refresh the FormTestImport.asp after a Form Reset from within the PDF (very cool!), and you can even specify a different ASP that runs behind the scenes. In fact, you could probably take advantage of this ability to perform something completely different inside or even outside of the PDF. Let your imagination run.
Part II of this article addresses the FDF Toolkit ActiveX version 4, common form handling elements, and real world scenarios where this application would be used.
Resources
For an article on "How to populate a PDF file's form with data from a web server,"see
http://www.planetpdf.com/mainpage.asp?WebPageID=369.
For an FDF Toolkit Overview, see
http://partners.adobe.com/asn/developer/acrosdk/docs/fdftk/FDFToolkitOverview.pdf.
About the Author
Eric Coffman is currently working as an ASP (mostly!) programmer for SIMA San Diego's Web Development and Information Systems. Adobe Acrobat PDF forms are used to automatically route various requests through a user's specific chain of command within an intranet environment.
He can be contacted at komodo@backpacker.com.
|
