The Section Element

Last updated Jan 04 2018

What is the section?
The section is a box, a container you can drag elements into and though it seems like a very basic element, the FormTitan section is very versatile and has graphic as well as a functional significance. 

What can you use the FormTitan section for?
1- Using the section to graphically create visual segments in the form
2- Using it instead of the image element
3- Turn it into a repeated section
4- Use it as auto repeated section
5- Use it to create an area with tabs
6- Use it to hide/show areas in the form
7- Use it in a collapse/expand parts of the form

1- Visual Segments
In order to create forms and especially landing pages you need to arrange your content in a structured and clear way so users will immediately understand where they landed and how to proceed. You can, ofcourse, drag elements and place them next to each other without using a section, however when you place them into a section you can easily move them all as a group.

In addition, the section element, just like all of the other elements, may be styled, which creates an area that is visually different.

2- Instead of the image element
When you use an image in your form it must keep its proportions, otherwise it is distorted. So you will need to use a graphic tool to cut and prepare your image, to the specific size you need.
When you are using a section element, on the other hand, you can place the image as background and changing the section size will not distort it. The section will display the image or part of it, based on its size and proportion, but it will not distort it.

3- Repeated section
Sometimes you need to allow your form filler to enter more than one item, for example if you ask him to enter the details of his kids (names, ages etc). You can, of course, add a 6 lines in advance, for those who have six kids, but this would take up a lot of your form space. And what would people with eight kids do?
The solution for this is using one line of fields by default, which the form filler can repeated if he needs to.
This is done by using the repeated section.
Read how to use the repeated section

4- Auto repeated section
When you integrate your FormTitan form with Salesforce your form fields can easily be populated from Salesforce objects. However, there are cases in which you need to draw data in a hierarchical way, in a one-to-many relationship. For example, when you want to display the cases belonging to each contact.
Setting this up in your form builder is simple- all you need to do is put the fields connected to the child object (in this example: case) inside a section and once they are populated, if multiple items are found, the section will repeat automatically to display them all.

5- Tabbed area
When you want to keep your form organized and save space at the same time you can use a tabbed section. Once you will enable “Tabs” in your section you will be able to display different groups of data under each tab allowing your form filler to view only one at a time.
Read more about how to create a tabbed section

6- Hide/show areas in the form
It is a known fact of CRO rules that having fewer fields improves its conversion. Displaying fields in your form, that are not relevant to the form filler can lead to confusion, frustration, longer time to fill it in and even form abandonment. This is easily tackled with field conditional logic, that allows you to set rules for showing/hiding field, pages and sections.
Once you place content in the section you can have it displayed or hidden according to your terms.

7- Collapse/expand parts of the form
Sometimes you want to have your section collapsed by default, hiding its content, except for a an expand icon and a short header text. This saves you space on screen, but is still visible to the user (contrary to hide/show which keeps the section completely out of sight, and out of users controle).
Well, this is another thing our section can do - By enabling the “Collapse” mode in the section properties a header is added at the top of it. You can change the collapse button and collapse header text and style - and voila, it works. No need for any coding.

CommentsLogin Required
Didn’t find what you were looking for?
Try the following for assistance or Use the Search box.