Dynamic Forms How to use Tables

What is a Table? Usually you see a table on a form like this…. 3 columns X 3 rows with grey border lines But this could also be a table too… 2 columns X 1 row with no lines

What is a Table? Dynamic Forms tables allow you: 1. to place more fields across the horizontal space in a form 2. to control the horizontal width of your items Just OK Form Design 1 line, 1 question Better Form Design with Tables Makes online forms look like paper forms

To add a table to your form Select Page Item: Table

Table Basics Name: Typically not important, but provide a descriptor of section Step 1: This is where you will apply all the characteristics about your new table, including how many rows, columns and if it will display grid lines.

Table Basics Columns and Rows: Initial thoughts on how big table should be

Table Basics Borders: Allows you to choose the type of border and the color

Table Basics How Wide?: Most important field in Dynamic Forms

Table Widths A good rule of thumb is to build forms at Pixels Why? All users would not need to scroll left or right to complete the form.

Why 900 pixels? Another great reason to keep forms at 900 pixels – you can read the PDF! Here is an example of a PDF at 900 pixels.

Why 900 pixels? Here is that exact same form at 1500 pixels. Why so small? The PDF writer looks at the widest part of the form and puts everything else in relationship to that widest component, making sure it fits all onto the page, regardless of readability.

Table Widths Pixels x 2 table at 900 pixels 2 x 2 table at 600 pixels 2 x 2 table at 300 pixels Now while keeping table widths at 900 pixels max is a good idea, that does not mean that making smaller table is not a good idea. For example….

Table Widths Here is a good example of why a form author would want to use a table with a width less than 900 pixels. In this case, the form author is moving the choice list answers closer to the title of the class. If the table was 900 pixels, the choice list option would be much further to the right form Pixels

Aligning fields using Tables The best way to line up fields is by using tables. For example, view the following questions in this table. In this example, the form author created a 4 column by 2 row table. They separated the field label from the field input field to create this alignment. Here is how this table looks in the forms designer.

Aligning fields using Tables Why separate the field labels from the data input fields? Here is an example of not separating the labels….. As you can see the boxes do not line up in the first column because the labels are not separate fields. The form police will not arrest anyone for this, but if you want the boxes aligned, spend a little extra time to separate the labels. The form is a reflection of your work and your school – spend the extra couple of minutes to make them look great! Also, be sure that your labels fonts are the same style and font size.

Aligning fields using Tables You can also use fields inside the table to give the affect of an indentation of text such as the example below. Here, the form author just entered a text field in column 1 of about twenty spaces then added the other fields in the remaining columns.

Table Column/Row Sizes Wide First column Wide Second column Small First Column Super Wide Second column One table cannot have different column widths by row Wide First column Small First Column Table 1 Table 2 You will need to create two separate tables to do this

Table Column/Row Sizes The most common example of this? Here there are three tables to support the need for different data input

Final Exercise Modify your form Task #1: Add a 2 x 2 table to your form with first name and last name as fields DESIGN FORMS