Filling out PDF Forms in ColdFusion

How to use the cfdocument tag and some Dreamweaver magic

Jun. 16, 2005 09:00 AM

A few years back, when CF5 was still in the beta stages, a client wanted to be able to fill out PDF forms through their web browser and save, and print, the filled out PDF form.

After experimenting with a few free methods, such as the use of FDF files, I stumbled upon the ActivePDF toolkit. ActivePDF provides a series of tools for PDF manipulation. The toolkit is a COM object that can be used to fill out PDF forms. It did the job wonderfully. I spent more time creating the PDF form with Acrobat than I did creating the ColdFusion markup to allow people to fill out the form via the web.

Now we can jump forward to more recent times, I recently had the opportunity to revisit the project. ColdFusion MX does not deal with COM as well as CF5 did, so we decided to look into other options. CFMX7 has some built in PDF capabilities, so investigating them seemed like an obvious choice. Although CFMX7 does not deal with PDF forms, there is an alternative method that worked well for our purposes. We used the cfdocument tag and some Dreamweaver magic to implement our solution. I'm going to explain that method to you today.

Prepping the Form
You can do this with any PDF form. For example purposes, I'm going to use the US copyright form PA, downloadable from there web site, here: www.copyright.gov/forms/formpa.pdf. You'll want to extract the PDF as an image. I was able to open it in Adobe Photoshop and save each page as an 8.5 x 11 image. If you don't have access to Photoshop, there are also various low cost converter programs that will convert a PDF's contents to an image. Two such programs are ReaCoverter pro from ReaSoft, or VeryPDF's PDF to Image Converter. They are located at www.reasoft.com/products/reaconverter/ and www.verypdf.com/pdf2tif/index.htm respectively.

Now you have your form as an image. What next? I know this will be a tough move for many of you hard-core developers out there, but next we are going to use Dreamweaver in design mode. These are the steps:

Create a new page. I named mine "formip.cfm" for a "form input processing" page.
Expand the property panel if it is not already expanded. If it is not displayed, you can display it using "Properties" from the window menu. Click the "Page Properties…" button. If you don't see this button in the property panel, click on the body tag and it should show up.
You should see a window like the one shown in Figure 1. For the category select appearance. For the background image, click browse and select the form that you
Click OK to save your changes. Now move to the design view by clicking the design button. You should see your form in the background of the page. Depending on the size of your screen, it will probably tile but for our purposes it doesn't matter.
Display the insert bar in Dreamweaver if it is not already displayed. You can do this from the select "insert" from the window menu. Click the layout tab of the insert bar. The insert bar is shown in Figure 3. Roll your mouse over the third button and it should say "Draw Layer". This will allow you to draw a layer anywhere on the screen. Behind the scenes it will create a div layer, positioned using absolute position. Click this button.
You will now be able to draw the layer anywhere on the page just by clicking and dragging. Create a layer for each line of the form that you want to fill out.
Adjust the layer properties to give it a background color that is equal to the background color of your form. This will probably be white. Each layer will contain one form field, surrounded by pound signs, so that ColdFusion knows to process it. For the title of this work field, I would name it "#form.titleofwork#. You can add these specifics in either the code view of the design view, but it may be easier in the design view to tell which layer goes to which line of the form.

Here's a sample of the finished template. For brevity, I only included two fields in the sample template (Title of Work, and Previous Title):

<cfdocument format="PDF">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Copyright Form PA PDF </title>
<style type="text/css">

</style>

</head>

<cfoutput>
<body>
<div id="Layer1" style="position:absolute; left:86px; top:199px; width:502px;
height:27px; border:1px none ##000000; z-index:1">
#form.TitleOfWork#
</div>
<div id="Layer2" style="position:absolute; left:86px; top:243px; width:503px;
height:22px; border:1px none ##000000; z-index:2">
#form.PreviousOrAlternate#
</div>
</body>
</html>
</cfoutput>
</cfdocument>

Using the cfdocument tag
Create a new page in Dreamweaver. This one can be done all in code view if you want. I named this page, formi.cfm (for "form input"). The code is as follows:

<form action="formip.cfm" method="post">
Title Of Work: <input type="text" name="TitleOfWork"><Br>
Previous Or Alternate: <input type="text" name="PreviousOrAlternate"><Br>
<input type="submit">
</form>

It contains an HTML form with two input boxes, one for the Title of the Work and one for the Previous or Alternate title. The form posts onto the formip.cfm page that you created in the previous section of this article. You probably aren't finding anything new to you in this template.

Published Jun. 16, 2005— Reads 32,231 — Feedback 2
Copyright © 2005 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.

Related Links

▪ Figure 2

About Jeffry Houser
Jeffry is a technical entrepreneur with over 10 years of making the web work for you. Lately Jeffry has been cooped up in his cave building the first in a line of easy to use interface components for Flex Developers at www.flextras.com . He has a Computer Science degree from the days before business met the Internet and owns DotComIt, an Adobe Solutions Partner specializing in Rich Internet Applications. Jeffry is an Adobe Community Expert and produces The Flex Show, a podcast that includes expert interviews and screencast tutorials. Jeffry is also co-manager of the Hartford CT Adobe User Group, author of three ColdFusion books and over 30 articles, and has spoken at various events all over the US. In his spare time he is a musician, old school adventure game aficionado, and recording engineer. He also owns a Wii. You can read his blog at www.jeffryhouser.com, check out his podcast at www.theflexshow.com or check out his company at www.dot-com-it.com.

Latest Cloud Developer Stories

Bringing Cloud to the Business at Cloud Expo New York

By Elizabeth White

Can you bring services from the cloud to your customers faster and have them adopt it with ease of use or bring the power of bundled services to the fingertips of your clients without creating new rigid ‘apps stove pipes'? Do you want to prevent your business running away to publ...

OCZ Launches Z-Drive R4 CloudServ PCI Express

By Pat Romanski

OCZ Technology Group, a provider of high-performance solid-state drives (SSDs) for computing devices and systems, on Tuesday announced the Z-Drive R4 CloudServ PCI Express (PCIe) flash storage solution, designed to accelerate cloud computing applications and reduce operating expe...

Cloud Expo New York: The Compliant Cloud

By Liz McMillan

Many organizations have embraced, or are considering, the benefits of cloud computing – speed, flexibility, increased expertise, shared workload, reduced costs, etc. The benefits are many – but so are the risks. What are the threats to cloud security? Which parties assume respons...

SHI Annual Revenues Up 28% in 2011

By Elizabeth White

In August 2011, SHI Enterprise Solutions (ESS) division launched the SHI Cloud, offering reliable and cost-effective industrial-grade cloud computing platforms. That same division achieved an 82 percent increase in revenue over 2010.

SoftLayer Introduces Searchable Object Storage

By Liz McMillan

SoftLayer Technologies on Tuesday announced the immediate worldwide availability of SoftLayer Object Storage, a redundant and highly scalable cloud storage service that allows users to easily store, search and retrieve data across the Internet, with optional CDN connectivity, or ...