Episode VII: Finalizing the Form
This week’s article covers the finishing touches of form creation. You will learn how to change the layout of the form and add some custom HTML items, and then we will briefly introduce you to JSPs. Let’s begin by taking a look at the form that you started in Episode VI: Form Fundamentals
This form has no layout features at the moment. Throughout this article you will improve the aesthetics of the form.
Let’s begin by organizing the items according to topic. The easiest way of doing this in Teaming is by adding similar entries to tables. Teaming allows both two-column tables and three-column tables, and you can choose the appropriate type depending on your needs and the size of the entries you want to group together. Items can also be grouped within a table by using boxes. In your Form and View Designer, select Entry Form Definition > Form, then select Add > Box. After you create the box, you will need to move items into it. We will move all items pertaining to the applicant’s address into one box, and all items pertaining to the applicant’s contact information into another box. We will then place the two boxes into a Two-Column Table by selecting Form > Add > Two-Column Table. When you are finished, the form should look like this:
You can see that the boxes within the two-column table improved the look and feel of the form.
Now, we will add a simple divider to our form to separate the applicant’s personal information from the required data. Select Form > Add > Divider. The divider is added at the bottom of the work tree. Select Divider > Move, then choose the new location of the divider. For our purposes, put the divider just below the two-column table. One final touch before we move on is to place the City, State, and Zip Code boxes into a three-column table, using the same techniques as above. Then final result should look like this:
The divider adds a distinct feeling of organization to the form, allowing a user to see where information needs to go at a glance.
Because our divider is followed immediately by other form elements, it might look nice if you put a header on the next section of information. This can be done quite easily by using the HTML features within Teaming. Select Form > Add > HTML An area appears that you can fill in with a very simple HTML code as shown below.
The HTML code creates a header just after the divider. You are only limited by your knowledge of HTML code.
We have exaggerated the size and color of the font for demonstration purposes.
As you can see, Teaming has a wide range of features for customizing the layout of a form. Although you can do quite a few things with these basic features, Teaming has one more feature that allows you to customize a form to any degree that you want. This is the JSP, or the Java Server Page. With this feature and an adequate knowledge of code, you can create a form that looks any way you want.
This is a W-4 Tax Form created by using the JSP feature in Teaming, just to give you an idea of the customization power at your fingertips.
We will be going into detail on how to do this in a future article, so stay tuned!