Dynamic FormsHow 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 form2. to control the horizontal width of your items

Just OK Form Design1 line, 1 question

Better Form Design with TablesMakes online forms look like paper forms

To add a table to your formSelect 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 WidthsA good rule of thumb is to build forms at

-------------------------------------- 900 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

-------------------------------------- 900 Pixels --------------------------------------------

2 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 WidthsHere 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.

-------------------------------------- 900 Pixels --------------------------------------------

Aligning fields using TablesThe 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 TablesWhy 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 TablesYou 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 SizesThe most common example of this?

Here there are three tables to support the need for different data input

Final ExerciseModify your form

Task #1: Add a 2 x 2 table to your form with first name and last name as fields

DESIGN FORMS