Templates

Building your Form View

Last Updated: Nov 14, 2018 09:50AM PST
 

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.

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 / icons in the upper right. The undo functionality allows you to go back up to 20 steps.

Managing pages

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.

Adding/deleting fields

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.

Field layout

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 you see the mouse-move.jpg mouse 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 (mouse-up.jpgmouse-up-left.jpgmouse-left.jpgmouse-down-left.jpgmouse-down.jpgmouse-down-right.jpgmouse-right.jpgmouse-up-right.jpg), 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.



 
f96791875af3f069482b7b5788b9b70b@goformz.desk-mail.com
http://assets2.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete?b_id=13873