How to Use Responsive Containers (Forms)

Last Updated: 12/05/2018 Introduced in Version:

Overview

Responsive Containers help the designer to more easily define the width, length, height, and size of sections on a form. When using Responsive Containers you can drop more than one container type on a form and because it is responsive it will automatically adjust its settings to fit the screen. When you add a container to the form each container will have its own section that you can edit to configure your form. In contrast, Grids will allow you to move and edit the size of components while Responsive Containers will allow you to specify where you want your grid as well as configure its dimensions. When your form is set to responsive under container type in the properties panel the containers will automatically adjust as you drag and drop them where you want on your form. Grids allow you to move the size of different components, while responsive containers allow you to specify where you want your grid to be as well as its dimensions. 

Note: When you resize your form the Responsive Containers will shift dynamically as the device changes. If the Form is displayed side by side on a computer screen and then opened in a mobile phone the form will shift and the Responsive Containers will display vertically instead of horizontally.

Example

In the example below, you will see a demonstration of how to use and edit Responsive Containers with multiple containers. Start by selecting Create Form in the blue Action Panel located on the bottom of the Designer Studio.  

Choose your template and select Create:

 

Name your form and select Create:

 

Start with a blank canvas, you may have to delete the grids off of the Form. Select the grid and delete until the Form is a blank canvas. 

 

Now in the Properties Tab on the right under Layout select the drop-down menu and set the Container Type to Responsive.

 

Grid 1: Header Grid

Locate the Steps Tab on the right, select Layouts>Grid, drag the Step onto the Form and drop. 

Drag and drop your first Grid onto the blank Responsive Container Form. 

 

In this example, we will name four separate Grids and set the dimensions for each. Name the first grid and set the settings using the images below

 

After you set the settings for Grid 1 the Form should look like the image below. 

 

Grid 2: Information Grid

Locate the Steps Tab on the right, select Layouts>Grid, drag the Step onto the Form and drop. Drag and drop your second Grid onto the Responsive Container Form. 

 

Name the second Grid and set the settings using the images below. 

 

After you set the settings for Grid 2, the Form should look like the image below. This Grid did not need any changes in its settings. 

 

Grid 3: Footer Grid

Locate the Steps Tab on the right, select Layouts>Grid, drag the Step onto the Form and drop. Drag and drop your third Grid onto the Responsive Container Form. 

 

Name the third Grid and set the settings using the images below. When setting the settings notice the Astrid (*), this shows that you have selected that Column or Row to either Resize, Grow or Fix. Make sure that each number has the appropriate Astrid. Select the drop-down menu under Layout to choose the Resize type. 

Under Columns, Set 1 to Resize. Select the pencil icon to edit the column size. Choose the drop-down menu and select Resize. Set 120 to Fixed by selecting Fixed in the drop-down menu. Set 20 to Fixed by selecting Fixed in the drop-down menu. Under Rows, set 1 to Resize. Set 30 to Fixed and set the last 1 to Resize. 

 

In the drop-down menu choose the Resize Type for each Column or Row. 

 

After you set the settings for Grid 3, the Form should look like the image below. 

 

Grid 4: Grid

Locate the Steps Tab on the right, select Layouts>Grid, drag the Step onto the Form and drop. Drag and drop your Forth Grid onto the Responsive Container Form. 

 

Name the forth Grid and set the settings using the images below. 

 

Navigate to the Form, right click and choose> Select Parent [Root Container [Responsive Container] to edit sections. Hover over the pencil icon and select to edit sections. 

 

Next on the right in the Properties PanelEdit sections by selecting the Pencil Icon. This gives the option to edit Minimum Width and Height of the Form. 

 

 Grid 1, Header Grid: Select the box Take Full Width. This selection will cause the Header Grid to always take the Full Width of the form. 

 

Grid 2, Information Grid: Change the minimum width to 100.

 

Grid 3, Footer Grid: Select the box Take Full Width. This selection will cause the Header Grid to always take the Full Width of the form. 

 

Grid 4, Grid: Change the minimum width to 300.

 

After setting the Width and Heights the Form should look like the example in the image below. 

 

Finally, design your layout with labels and text, add a button and complete your Form. Here is an example of what your form should look like as a Responsive Container using four different Grids.

 

You have now completed the Responsive Containers tutorial, now that we have created our first Responsive Container form you can create a new flow to test the form.  

 

For more information on how to run a form inside a flow go to the following link:

https://documentation.decisions.com/creating-your-first-form-flow/

To learn more about Responsive Containers watch the video webinar on Responsive Forms in the link below: 

https://decisions.com/videos/responsive-forms/?submissionGuid=34633ccf-236a-4647-950b-850094450b9f

Additional Resources