Once you have Sintel Forms enabled you can begin customizing the layout. Sintel Forms uses the Office UI fabric to control the layout of your forms allowing you to create a number of layouts to suit your needs.
- Add/remove sections
- Add/remove columns within sections (min 1 column, max 4 columns)
- Add/remove containers within columns
- Add/remove fields within containers
When the forms designer is loaded and you select the Layout option a section containing 2 columns with containers will be automatically added for you. You can immediately start dragging fields from the "Properties Panel" on the right side of your screen.
You can add up to 4 columns within each section and you can add as many containers within each column as you need.
Quick Demo(duration <1 minute)
1 column layout (full width)
2 column layout (50 ,50)
2 column layout (75, 25)
3 column layout (25,25, 50)
4 column (25, 25, 25, 25
To add a section simply click on the grey "Add Section" bar which becomes active when you hover your mouse over it.
Note: By default when you add a section it contains 2 columns and containers to allow you add fields. You can of course delete these elements and create your own if you wish.
When you hover your mouse over the header of any section an option will appear permitting you to add columns or delete the section as shown:
Clicking on the delete icon will delete the section whereas clicking on the add icon will add a new column as shown:
When you hover your mouse over a column a menu will appear that permits you to>
- Move the column left or right
- Resize the column
- Delete the column
To add a container simply click on the "Add container" bar which becomes active when you hover your mouse over a column.
To delete a container simply hover over it and click the delete icon
Once you have added a number of containers onto the form layout you can drag any field from the List field section on any of the containers on the form.