Positioned Section Layout. This is to be used by experienced Builders ONLY

You can set the Section's to appear in different positions on the form. This requires training, and should not be performed until you have had a training session with your Builder Training as the layout may look alright on the form builder, but when it is used the layout may change as section CANNOT overlap. See the steps below for more details on setting up an advanced layout for a form.

Knowing how to set up your form helps to avoid issues like the one in the image here when the section runs off the page due to formatting issues, and one section does not even appear on the page because of placement issues

Knowing how to set up your form helps to avoid issues like the one in the image here when the section runs off the page due to formatting issues, and one section does not even appear on the page because of placement issues

By default when you set up your section properties you cannot manually place them side by side on the page. This must be enabled on the Advanced Properties on the Form Properties. Click on The Form name to access the Form Properties

By default when you set up your section properties you cannot manually place them side by side on the page. This must be enabled on the Advanced Properties on the Form Properties. Click on The Form name to access the Form Properties

Once you set the Form Positioning settings as "Positioned" save the form and then go back into the form from the events page.

Once you set the Form Positioning settings as "Positioned" click on Preview and then go back to the Form properties and select the size of the page.

Once you set the Form Positioning settings as "Positioned" click on Preview and then go back to the Form properties and select the size of the page.

Most pages are 800 pixels wide, and the length depends on the number of questions and your layout (from 400 to 1200 pixels).

As you create your form, your may need to come back to increase or decrease the height of the form to suit your needs accordingly.

Now go to the Advanced Properties for each section and set the width of the section. Remember that it will only compact to the smallest width based on the fields in that section.

Now go to the Advanced Properties for each section and set the width of the section. Remember that it will only compact to the smallest width based on the fields in that section.

Even though the form width is set to 300 (pixels), the example here shows that because the "Single Selection field" has it's selections set horizontally, the section size cannot reduce below the width of the questions. To overcome this you could set the selection horizontally or as a drop down as shown in the questions below the single selection. Any large text boxes or single selections have modified, move the sections around. Additionally, single line or text or paragraph of text sizes will also affect how small the section can actually go and you may need to rethink question order or section order to make the form flow well. Also, to reduce the question sizes, all of the sections Advanced Properties for layout have been set to horizontal, small right aligned with tool tip.

Click on the Section name and a four way arrow will appear and you will be able to drag the section around the form.

Click on the Section name and a four way arrow will appear and you will be able to drag the section around the form.

Move the section to the place you require in the form. Again, this may take a while to get the correct place you need if you have multiple sections that need placing.

Incorrect Placement: The sections must NOT overlap horizontally (as shown in the image here), but they can overlap vertically if you have a number of fields that are hidden

Incorrect Placement: The sections must NOT overlap horizontally (as shown in the image here), but they can overlap vertically if you have a number of fields that are hidden

You can clearly see that the sections are overlapping. When the data is entered into this system the section on the right will get "pushed" off the page on the actual application, just like in the image in the first step of this lesson.

Correct Placement: How close can sections be horizontally?

Correct Placement: How close can sections be horizontally?

Click on the section on the left so that it is highlighted and this will show you how far the field actually extends (to the end of the grey colour). The arrow shows how far the field in the section actually go to. The next section (on the right) cannot overlap this line or the sections will not place well on the actual application. Both sections are in good positions as you can see on the actual in the form in the application image in the step below.

Always check the form using the preview and then double check it on the actual application by entering in data into each field.

Always check the form using the preview and then double check it on the actual application by entering in data into each field.

Correct Horizontal Placement: Placing sections horizontally depends on the type of fields used in the section and whether you have fields that are hidden and the size of those fields.

Correct Horizontal Placement: Placing sections horizontally depends on the type of fields used in the section and whether you have fields that are hidden and the size of those fields.

The image here shows that the section underneath the Injury Information (the light red selected section) is overlapping the section Injury/Illness Duration. This overlap is OK because it is NOT overlapping any sections to the left of the page. The overlapped section will automatically be shifted downwards when a user enters data into the form.

Incorrect Placement

Incorrect Placement

The selected section here will not place well on the page (see the image in the step below) as it overlaps the sections on the left. The Injury/Illness Details will be pushed right down the page (see the image below).

Poor Placement and the sections do not work at all.

Poor Placement and the sections do not work at all.

Keep moving sections around on the builder until the placement works and the form performs as required. The image here shows that 5 different section have been placed here successfully.

Keep moving sections around on the builder until the placement works and the form performs as required. The image here shows that 5 different section have been placed here successfully.

Move your sections, update section layouts, and change field types if you need to get the desired effect and placement for the form. However, if you are changing field names or field types always do it the safe way. If in doubt, ask your distributor.

0 Comments

Add your comment

E-Mail me when someone replies to this comment