Updated Aug 15, 2023
Container elements are great for organizing the content on your form and creating layouts with columns. They have some pretty awesome style options as well!
The features shown in this article require legacy mode to be turned OFF. To learn more about legacy mode, click here.
Add elements to a container
Use containers to:
Display your form elements in one, two, three, or four columns.
Group elements together in a section that can be moved around your form.
Create colorful sections on your form with background colors and images.
Add a container element.
Click on the container element to adjust the number of columns.
Click the plus button inside a column to add a new element, or drag an existing element inside.
To move a container around your form, click and drag from the green toolbar that appears above the container when you hover.
👋 Here’s a tip… You can add containers inside of other containers! This is helpful when you need more columns or a different layout. For ease of use, we recommend sticking to three layers of nested containers or less.
⛔ Heads up! If you reduce the number of columns after adding elements to your container, you will lose the elements in the column furthest to the right when you are done editing. Drag any elements you want to save out of the container before reducing the number of columns.
Columns and mobile devices
Dubsado forms are responsive and will automatically adjust to display on smaller devices like smartphones. At smaller screen widths, elements inside of containers with columns will stack on top of one another into a single column.
To optimize your form for the best experience on mobile, we recommend adding a separate two-column container for each row of form fields or content. This will ensure that the content stays in the correct order when it stacks on smaller screens.
In the example below, all the contact fields were added to the same two-column container. Notice how the desired display order changes when the columns stack on mobile:
When a separate container is used for each row, the desired display order stays the same when the columns stack on mobile:
👋 Here’s a tip… Nest your rows of two-column containers inside a one-column container to make the entire group of elements easier to move around on your form. This also makes it easy to add a single background color or image to that section.
Container and content width settings
The container width controls the width of the entire container element as a percentage. When you set the container width to 100%, it will take up the full width of the page.
The content width controls the maximum width that elements inside the container are allowed to take up. It is relative to the container width. A content width of 50% means that the content inside the container will be half as wide as the container.
Width settings on nested containers
The container width setting is relative to where the container is on the form. When the container is added directly to the form, the container width will be relative to the page width.
If a container is nested inside another container, the nested container’s width will be relative to the content width of its parent container.
The content width is always relative to the width of the container, no matter where it is on the form.
Reset default widths
Both the container width and content width settings have a Reset option. Resetting the widths will return the container and content to the original Dubsado form defaults.
Background colors and images
Background color
Adding a background color to a container is a great way to create sections on your form. Just use the color picker or enter the HEX code of a specific color! Container backgrounds are transparent by default.
Background image
Background images are perfect for hero sections at the top of your form and decorative headings! You can add a new image or select one from your image library. The background image opacity can also be adjusted.
The background image will adjust to fill the container as more elements are added inside. We recommend a minimum width of 2500px for container background images, but the best image size depends on how wide and tall the container will be. The more content you plan to add to your container, the taller your image should be.
In the example below, watch how more of the background image is revealed as more content is added to the container:
👋 Here’s a tip… For a container to appear on your form, there must be elements inside. Empty containers will not show up when your client views the form, even if there is a background color or image. Check out this article to learn how to add a full-width image to your form.
Combine a background color and image
The background color and image can be blended together for a color overlay effect! This is great for darkening or lightening an image to make the text more readable.
Set a background color.
Choose a background image.
Adjust the background image opacity until you reach the desired mix of color and image.
Padding and margins
Padding is space added inside the container. If your container has a background color or image, you will see more of the background when you add top or bottom padding.
A margin is space added outside the container. Margins allow you to add more space between the container and surrounding elements.
