PDF Workflow

This option defined how the PDF will be transformed from a PDF file into a web document.

Standard - 1:1 Conversion - In this mode RackForms matches the original PDF as closely as possible. Every item on the form, from graphics to form fields, will be placed as closely as possible to its original position as will the page size will be kept as close as possible to the original.

When taken together, this means a form page that's free form, has elements that mostly have no outlines or styling, and so on. This is a great choice when matching the original PDF takes precedence over web usability.

Mobile Ready - In this mode RackForms will discard most of the original PDF file's formatting and style data, and instead keeps as much of the form field data as possible.

We call this mobile mode as, 9 times out of 10, a PDF file imported into RackForms will not work well as a mobile document. Thus, instead of trying to make a document that was originally intended to be printed on a sheet of paper work well on the mobile web, we throw away this data and instead focus on the form fields.

PDF Scale

This value sets the scale the PDF and form elements are rendered at. A default value of 1.3335 is suitable for most uses, though 1.5 may work better for full page forms.

One item of note is a value of 1, while tempting, usually creates form jobs that are a touch too small for web use.

Text Mode

We can render text content in one of two ways:

We can render text as an image.
If we render text as an image we're guaranteed to get a 100% accurate representation of the original PDF content. The downside is images are larger than raw text, so performance will suffer. Such jobs will also not render as well on smaller mobile devices.

We can render text as a series of DIV elements.
This method creates smaller files, but is subject to all manner of restrictions, such as a loss of formatting and characters.

Use this setting with caution, and if possible, try to copy and paste text blocks in from the original PDF file if possible.

PDF Create Mode

When set to the default New Job, every PDF file we drop on to the processing box will remove all previous editor content and create a new job. If set to Append To Current, the PDF file pages are added to the existing job.

Radio/Checkbox Label Rendering

When we process a PDF file radio and checkbox items will render differently depending on how they were created in your PDF program. In some cases items will have no text value, and will simply render as a lone form element. Other times they will indeed have a text value, which will display as that items label. The trick with PDF import processes is these values may or may not work with the final form layout.

If a value is present it will display as the radio or checkbox items label. In many form layouts this is not desired, which is why this option exists. The default is to render text values as that items label. If this text label value breaks a form layout, we can use the second option, which will leave the text value but color the text white.

Failing this, the final option is to convert the form item into a Boolean only value. Such items are very common in tightly constrained forms. The best policy is to try several variations and see which one works best for your form.

Please note in each case the name of the form item remains the same, only the display of the label changes.

Custom Radio/Checkbox Offsets

Because PDF radio and checkbox items can contain arbitrary sizes that their HTML equivalents cannot, the position and size of these imported items may need a nudge in one or more directions to match the PDF original. The best policy here will be to leave as the default values at first, and if adjustment is needed, apply a few pixels at a time.

Positive numbers push elements down and to the right. Negative to the top and left. Specify negative values with a minus sign in front of the number.

For the technically curious: It's important to note text boxes (and text areas), do not have this size issue and therefore no need for such adjustments, as these elements have a 1 to 1 matching for size in PDF and web format. If a text box is 100 pixels by 30 pixels in the PDF original, that's what it will be in the web version.

Radio and checkbox items, by contrast, have one set size in HTML which will vary depending on OS and browser. As the PDF format allows users to define any size for these items the "anchor" point of each item can and will often have no set relationship to the visual location on the converted form. By allowing us a "fudge" factor we can ensure such items match the visual presentation of the original form.

Custom Radio/Checkbox Scale

Use this field to correct one of the most common rendering issues in PDF import: the original display element for the radio or checkbox item being larger than the default HTML input field equivalent.

Technically, this option applies the CSS code to the field items Extra Field Style Attribute property:

transform: scale(2);

Where n is the value we define for this option.

Custom Text Box Offsets

Use this option to offset text box fields by the desired x and y amounts.

Form Field Style Hints

Text and text area fields are assigned classes, .PDF_FormField_Text and .PDF_FormField_Textarea, respectively, via the elements Extra Attribute(s), JS, Event Code, etc attribute. We can edit these style declarations at any time via the rackforms/app/movefiles/formpage.css file.

The purpose of these styles is to remove the fields border and make the background color a light blue.

It's key to note that when we upload a PDF file, the best way to think of this process is to think of RackForms as simply overlaying HTML form fields over any existing ones the PDF file contained. Thus, from a styling prospective we want to design the PDF form as one where our form fields are "part" of the file.

For example, if we want to ask for a users name, we could use a single underline for a style, and have the PDF form field be a simple, border-less, colorless field. When RackForms creates the form field for this item, the background image we create will show the single underline, and a form field will be placed on top. Thus, as a user of the form we'll see a single underline, a blue, border-less box for text input.

Two final hints: let your PDF form breath! Tightly confined form fields may have problems rendering, as their are small size and rendering differences between a RackForms form field and the PDF original. Providing space between form fields and layout design elements (such as lines, borders, and so on) will ensure form fields are easy to select and use.

Second, it's a good idea to remove all field styling form your PDF form file, as these may not always be covered up by the HTML form fields. If you find you can't quite match a desired look, it may help to change the PDF Scale option by small amounts.