BASICS
Build the form described in this fly-through and you’ll understand the basics. The rest of this User’s Guide will fill in the details of Fillably's operation, introducing additional functions and showing you alternative ways of doing some of the things covered in the fly-through.
Constructing a fillable form with Fillably is easy. You start with a “flat” PDF image of your form; it looks like a form but can’t be filled in. Using Fillably, you lay out fields over the PDF image. When you save it, the fields are “baked into” the PDF and it becomes fillable. Then any user can open it in Preview, fill it in, and save it.
You love chinchillas so much that you’ve decided to start “Chinchillas-R-Us,” a business boarding them. One thing you’ll need will be a registration form to check in new clients.
Legibility is important, so paper forms are out. You also want to make it easy for clients to download, complete, and print the form at home if they wish. That makes it easier on everyone because it lets you focus on the pet rather than the paperwork. You decide that a PDF fill-in form will fit your needs perfectly.
NOTE: In several places in this fly-through you’ll see a “PRO-TIP” heading indicating material that doesn’t strictly belong in the fly-through. It’s included because the context is perfect for introducing the additional useful information. You don’t have to be a pro to benefit from these tips, but they will make you feel like one. :-)
GETTING STARTED
You use your favorite word processing or graphics app — such as Pages – to create the form. Then you save it as a PDF file. This gives you a “flat” form that could be printed out and filled in by hand. But it’s also the first step toward making the fill-in form you need.
Taking a peek ahead, this is what your completed form will look like when it’s filled in:
Launch Fillably. Its menu bar and tool palette will appear. Open Chinchillas-R-Us.pdf. It will be the background image over which you lay out form fields.
It’s easier to lay out fields when the form is blown up. So you expand the page to be quite large either by resizing the window – the image zooms to fit the new size – or alternatively by zooming in on the document several times using ⌘=.
Notice that Fillably’s page resizing maintains a full page view as you zoom in, screen size permitting.
PREFERENCES
Let’s look at the Preferences before starting to lay out the form. Choose Fillably > Preferences to open them.
You can play with the Stroke preferences as you’re laying out the form to find the settings that make it easiest for you to work with fields. The boxes you lay out can have solid, dashed, or dotted lines, of whatever color suits your fancy which can be 1, 2, or 3 pixels wide.
The Fonts preferences can wait for now, but you’ll need to set them before you save the final version of your form. They’ll be registered in the form and will be used by Preview when the form is filled in.
TOOL PALETTE
A typical drawing app, Fillably has a palette of tools. The arrow tool is used for selecting, resizing, and moving fields. The other tools correspond to the type of field that is sketched when they’re selected.
Except for the Arrow Tool, tool palette items are “sticky.” If you single click on one, it will only be active for the next item you sketch. But if you double-click on one, it will remain active until you click on another tool, including the Arrow Tool. You can also turn off a sticky tool simply by clicking somewhere in the graphics view without sketching anything.
SKETCHING FORM FIELDS
Select the text field tool on the tool palette. When you move the mouse pointer over your document window, it changes from an arrow to a plus sign (+). Sketch out a wide, thin rectangle for the “Pet's Name” field. Notice that it has selection handles that you can use to resize it, and also that an Annotations Inspector panel has appeared. That happens whenever a single field is selected. We don’t need to do anything with the inspector right now, but it will be useful later.
POSITIONING AND RESIZING FORM FIELDS
Before you continue sketching text fields, it’s useful to understand how positioning and resizing work.
You want to adjust the text field you just sketched to be a certain size and in a particular location.
Go back to the tool palette and select the arrow tool.
You can adjust a selected field’s position by dragging the field. You can fine-tune its position a pixel at a time using the arrow keys.
You can resize a selected field by dragging one of its handles. Dragging the corner handles allows both horizontal and vertical resizing. Dragging the mid-line handles only allows you to resize perpendicularly to the line the handle is on.
You can fine-tune the height and width of a selected field a pixel at a time using the arrow keys. Option-Up raises it, Option-Down lowers it, Option-Left shrinks it, and Option-Right expands it.
Fiddle with the text field you just sketched to position and resize it the way you want.
TEXT FIELDS
There are two approaches to doing text field layout, one in which you copy and paste existing fields to create new ones. Alternatively, you could continue to sketch fields iteratively with the mouse; it’s your choice. Let’s look now at the copy and paste method.
You have already sketched out one or more text fields and be sure the arrow tool is selected for this.
The recipe for building a form by copying and pasting is to iteratively copy and then paste one or more of the completed fields.
By default, the pasted item(s) will appear just below the original one(s), and slightly offset to the right.
Drag the pasted item to its desired location and lengthen or shorten it. Repeat this, moving down the form rapidly. The fields you’ve laid out won’t be positioned perfectly, but you’ll fine-tune them in the next phase.
👉🏿 USE PASTE HINTS FOR FASTER PLACEMENT OF PASTED ITEMS
By clicking on the image you can override the default placement location of pasted items. The paste target will be a tiny red rectangle at the point where you clicked. And it will become the location of the bottom-left corner of the item you are pasting. The Paste target is shown on mouse up when the mouse hasn't moved, so you can clear it by moving the mouse slightly as you click it.
If multiple items are selected and copied, they will be pasted as if the bottom-left corner of their selection rectangle were geometrically translated to the paste target.
Using "Paste Hints” will improve your control over the location of items you paste so there will be less dragging to get them in place. This will really speed things up!
👉🏿 A COUPLE OF THINGS TO KNOW ABOUT PASTE
The items being pasted must fit on 1 page or they will not be pasted (although no error is given if this occurs). And pasted items do not replace selected items.
Do this with the “Pet's Name” field, dragging the pasted item into the “Weight” field. Drag the middle handle on its right end and shorten it to be the width you want.
Next, copy and using a paste hint, paste the “Weight” field at the approximate location of the “How many times a day” field and then nudge it into position with arrow keys and adjust its length.
Then copy the “Pet's Name” field again, and paste using a paste hint at the approximate location of the “Own supply” field. nudge it into position with arrow keys and and make it wider by extending the end to the right.
Continue with this until you’ve laid out all the text fields.
👉🏿 PRO-TIP: ALIGN BOXES
If you accidentally resize a field’s height when you’re stretching or shrinking it, you can deal with that by selecting it and another field – one with the correct height – using an area selector like the one the Finder uses. Then Option-click on the good field to specify it as the anchor (it turns green) and choose the Align Boxes > Make Same Height command.
The anchor is the reference item. The command will make the other items in the selection conform to its attributes.
Note that the Align Boxes commands are not enabled unless there’s a compound selection with a designated (green) anchor.
TEXT ALIGNMENT
Text fields can be left justified, centered, or right justified. There is a convenient Justify Text menu that lets you change the alignment of one or more selected fields if the initial settings were off. Note that it’s not enabled if the selection includes items other than text fields.
CHECK BOXES
Now we want to add in the check boxes. We’ll use the same Copy and Paste recipe for this as we did with text fields.
Sketch the first one, adjust its size. Notice that it was automatically constrained to be a square.
Our check boxes all come in pairs, so copy and paste the check box. Move it into a position complementing the first one and align their bottom edges.
Then copy and paste these check boxes and move the new pair into place – adjusting their horizontal spread as needed – repeating until they’re all done. Then save the document again.
RADIO BUTTONS
Alternatively Radio Buttons could be used in lieu of Check Boxes and it might even make sense to do so since all our Check Box pairs have mutually exclusive settings – if one is checked the other will be unchecked – behavior which is automatic for Radio Buttons.
FINE TUNING
Make sure you’ve finished all of the initial layout — including fields that aren’t demarcated in the background by lines or boxes — copying and pasting fields and moving them to their needed positions.
Once all the fields are in place, you’ll want to fine-tune their positions and sizes using the arrow keys and the Align Boxes commands.
For example, it’s a good idea to have the fields float a consistent distance above their underlines, so that the form has a smooth appearance when it’s been filled in. To do this, use the arrow keys like little tugboats to nudge the fields into their moorings.
Be sure to make text fields high enough so that text will be visible during data entry. But you can always go back and make "mass" changes if you need to.
Another example of fine tuning is to align the right edges of all the fields that extend to the form’s right margin to give it a crisp look. To do this, just select them, Option-click on the reference item, and choose Align Boxes > Right Edges.
Now save the work you’ve done with the File > Save command (⌘-S).
SET THE TAB ORDER
When the form is being filled in, you want the user to be able to tab in a logical order from field to field. In Fillably, it’s a breeze to set the fields’ tab order. Here’s how.
Click in the form to make its window active and to clear any selection.
Next, Command-click on the fields in the order in which you want to tab through them. When you’re done, click once on the form to clear the selection. That seals the tab order.
You can Show/Hide the tab order with ⌘-0.
👉🏿 PRO-TIP: FAULT TOLERANCE
If making a mistake while setting the tab order meant that you had to start the process all over again, it would be a tense and unpleasant task, especially for long forms. But it can be performed incrementally, if need be.
When your setting of the tab order “goes off the road,” here’s what to do: Find the last item that’s in the correct tab order, select it, and Command-click on succeeding fields in the tab order you want. When you’ve finished, click once to clear the selection, resealing the tab order. It’s that simple.
INSPECT FIELD SETTINGS
Now that you can tab between fields in the order you want, it’s time to tab through them to inspect their settings and change them if necessary.
As noted earlier, an Annotations Inspector panel appears whenever you have a single field selected. As you tab through the fields, the inspector changes to show the settings for the currently selected item. Notice that the fields already have default names; these were set as you set the tab order.
When a text field is selected, Field Name, Max Length, and Alignment settings are shown.
When a check box is selected, its Field Name setting is shown.
When a radio button is selected, its Cluster Name and Button Position settings are shown.
All the buttons in a cluster have the same cluster name. That’s what links them together. And the different button positions allow the toggling off of a “set” button when you click on another button in the cluster to turn it on.
If you edit a field’s settings as you tab through the form, you’ll need to return focus to the form by clicking back on the selected field in order to continue tabbing.
PRO-TIP: When you copy and paste fields, their settings are preserved. If you want a group of items to have the same settings, be sure that the first one has those settings so that the copied ones will too.
FINISH UP
When all the field settings are correct, make sure that the Fonts preferences are set to your liking; then save the document one last time, and you’re done. You now have the Chinchillas-R-Us form for your website.
This fly-through is dedicated to John Spragens, the late cousin of my good friend Alan Spragens, who introduced me to this genre of writing. John was a creatively gifted and generous person. I’m lucky to have known him.
You can drag the template, below, onto your desktop. Then double-click it. It will open as a png file in Preview app. Then Print it as a pdf file and save for use with the fly-through!
