Text Size

Automatically create web forms from PDF forms

I love this photo ... it sort of sums up how I feel after releasing the latest version of our online PDF web form tool, Doculicious.com: happy, a little delirious and looking to relax on the beach after a hard bit of work. Sydney's getting cold now though, so I'll probably just stay in and program some more cool features.

Anyway, this latest release has something which has been on the drawing board for a while. The ability to upload a PDF file with fields and have it converted into a web form has been requested by many of our users, and I'm happy to say that our first version of this is ready to go. Our goal with this release was to enable someone with a bunch of PDF forms to upload them and have them automatically converted to web forms. This means that if you have a PDF file with fields, you will have a working web form in minutes after uploading it to Doculicious. If the original file doesn't have fields, the system will still help, but there will be some manual work to do. I'll give some tips on re-creating a form like this very quickly, so don't worry ... if your PDF files don't have fields, this new feature will still cut the time it takes to create a form by at least half.

PDF's are messy

PDF files are not nice ordered documents that make it easy to extract text. However, they print very well, and will pretty much look the same when sent to any printer. This gave us a clue as to how to implement the form conversion. We take the uploaded PDF and generate screenshots of each page by printing to an image file. We then create a new Doculicous template and use the images of each page as a background for that page. If the PDF has form fields, we re-create each one in the correct place, ensuring that drop down lists are filled with the right options, checkboxes and radio buttons are created and using the right groups and that some of the same formatting is applied, such as text alignment. Doculicious has a great feature that will scale images to load faster when viewed on the web, but will use a larger image when output as PDF. This lets converted forms stay small for the web form, but still print nice when downloaded.  Ok, enough background, here is the detail.

Converting your PDF to a web form

Doculicious makes this really simple. Just follow these steps:

Step 1 - Go to "Your templates" and click on the "Upload form" button

This will show the "Choose file" or "Browse" button , depending on your web browser. 

Step 2 - Click to choose a file to upload

You can choose a PDF file, postscript file or image files. Only PDF have form fields, but postscript can have multiple pages, and can be useful to convert a MS Word form into a web form. Images can be used to create single page templates, and are great if your source form is a scan of a paper form.

Step 3 - Wait for the PDF to Web Form conversion to complete

It should only take a few seconds, but PDF's with many pages could take a while. When completed, refresh the page to see your new template at the top.

Step 4 - Web form goodness! You're ready to rumble

That's it. If your PDF form had fields, they should be converted properly into Doculicious elements, so all you should need to do now is load up the template and check that everything looks ok, then press publish and activate it on your dashboard. Some things you may want to consider is turning on number validation for numeric only fields and checking that each form element has a nice name or your CSV downloads may be hard to decipher. Also, you may find that some elements may not line up perfectly with the background image. In my experience text boxes all work fine, but radio buttons and check boxes may be off by a few pixels. A small nudge using the arrow keys will fix this up in no time.

My PDF doesn't have fields, what do i do?

Don't worry, atleast 50% of your form is complete. You just need to add the text boxes and move them into position. Luckily you have a nice background image that will help you do this, and Doculicious' keyboard shortcuts will help you get this done fast. We'll soon be posting a video capture of how to do this really quick, but for now make sure you use the "c" for clone keyboard shortcut. Most text fields on a PDF form are the same width, border style, font style etc. You just need to create one text field, put it in place, and then press "c" select the new element and place in the right position, then press "c" and move the new one down to the right position, then press "c" ... you get the idea. Forms that use to take 60 minutes to re-create can be done in about 10 minutes or less!

Comments

The traditional way of

The traditional way of generating PDF files from web forms is a pain in the a**. This looks really cool and a great time saver.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.