This article goes over how to build the Form View layout of your form using the Form tab in the Template Editor’s builder area.
- See here for the difference between Form View and List View
- See here for building a List View layout
The following Form View topics are covered in this article:
As you build your Form View, use the general purpose tools at the top as needed.
- To zoom in and out, use the slider and +/- buttons in the upper right. Zooming in is useful when working on a specific field or set of fields, and zooming out is useful when you want to view the entire form as a whole.
- To undo or redo actions, use the undo/redo icons in the upper right. The undo functionality allows you to go back up to 20 steps.
The Form View contains multiple pages uploaded from a PDF or JPG file, with digital form fields super-imposed on top of that paper form base. You can easily add, delete, replace or reorder your pages using the Page Editor. To access this functionality, click the Page Editor link above the Template Builder area. See here for details.
To add a field to your Form View, drag-and-drop it from the Template Fields panel on the left into the Template Builder area in the middle. The new field will appear in the builder in light blue. In the example below, the Text field from the Add New Fields area is being dragged into the form next to the “City” label. See here for more on the Template Fields panel.
To delete a field from the Form View, simply select the field and press the [Delete] key on your keyboard. To delete multiple fields, select multiple fields using the drag-and-drop area select tool, then press [Delete]. Note that deleted fields stay in the Template Fields area on the left, so you can always bring a deleted field back into your form if you change your mind.
The Form View has very flexible layout — you can move and resize fields within the Form View however you want. You can do this directly in the Builder area, or in the Properties panel on the right side of the Template Editor.
To reposition a field, do one of the following:
- Drag-and-drop. Hover over the field in the Builder until the mouse pointer changes to a four-way arrow move pointer, then drag-and-drop the field to its new location. As you drag your field, you will notice it snapping to align with other elements in your form, with vertical and horizontal guidelines demonstrating this alignment. This makes it easier to position your field exactly where you want it with respect to other form fields.
- Use the arrow keys. Click on the field in the Builder to select it, then use the arrow keys on your keyboard to move the field by small increments. Hold down the [Shift] key while using the arrows to move the field by larger increments.
- Use the Properties panel. Click on the field in the Builder to select it, then find the Left and Top properties in the Properties panel on the right. These properties give the field’s exact position as pixel offsets from the top left corner of the page.
To resize a field, do one of the following:
- Drag-and-drop. Hover over the field’s edge until one of the resize mouse pointers appears, then click and drag to change the field’s dimensions.
- Use the Properties panel. Click on the field in the preview area to select it, then find the Width and Height properties in the Properties panel on the right. These properties give the field’s exact height and width in pixels.
The layout methods you use depend on personal preference.
Editing field appearance and behavior
A field’s appearance and behavior are controlled via properties. Click your field in the Builder to bring up its properties in the dynamic Properties panel on the right. The Field section contains behavior properties, while the Display section contains appearance properties.