When designing forms, achieving precise, intuitive layouts is essential. While Infowise Form Designer offers drag-and-drop flexibility, you can unlock even finer control using nested containers — containers within containers — acting like an invisible grid system. This lets you build complex and well-aligned form layouts without writing any code.
In this tutorial, we will build a Project Form as shown in the screenshot below.
The layout is structured by combining containers and columns to achieve a clean, professional design.
Instructions
Step 1: Plan Your Layout
Before starting, visualize the final design. In our example, the form will include:
- Main container → holds the entire form.
- Four nested containers inside it:
- First container → 4 columns.
- Second container → 4 columns.
- Third container → 2 columns, with two more nested containers inside:
- Left container (2 columns).
- Right container (1 column).
- Fourth container → 2 columns, with two more nested containers inside, each set to 1 column.
This structure allows precise alignment of columns like Project Name, Department, Start Date, End Date, Project Manager, Budget, Priority, etc.
Step 2 – Create Your Base Container
- Open your list in SharePoint and go to Design → Form Designer.
- From the layout panel, drag a Container onto the canvas.
- This first container will serve as the main wrapper for the entire form.
Step 3 – Add Nested Containers and Place Columns
Inside the main container, build the structure as follows:
- Container 1 (4 columns): Place columns like Project Name, Department, Start Date, End Date.
- Container 2 (4 columns): Place columns like Project Manager, Phone, Mobile, and Email.
- Container 3 (2 columns):
- In the left column, add another container with 2 columns → for Projected Budget and Cost Center.
- In the right column, add another container with 1 column → for Brief Description.
- Container 4 (2 columns):
- Left column → add a nested container with 1 column → for Priority
- Right column → add a nested container with 1 column → for Initiative and Initiative Reference.
Final Result
The completed form should look like this (example screenshot):
For a visual demonstration, see the video below:
Summary
By using containers and nested containers as a flexible grid system, you can build professional forms without any code.
Benefits:
- Precisely align columns in rows and columns.
- Create responsive layouts that scale.
- Group related columns visually for a better user experience.
- Maintain a clean, manageable structure for complex forms.
