Use containers in the form builder to organize your content into columns, add background colors and images, and create polished layouts. Containers are also the key to adding full-width images to your forms.

To get started, navigate to Forms ➔ Form templates and open a form template in the form builder. You can also open a project, click the Forms tab, and open a form.

In the Elements panel, click Container to add it to your form. A container is added with two columns by default.

Click the container to open its settings. From there you can configure the number of columns, container and content width, background color, text color, background image, padding, and margins.

Use the Number of columns setting to toggle between One, Two, Three, or Four columns.

To add elements to a column, click the + button inside the column or drag an existing element into it. To move the entire container, drag it from the header that appears above the container.

Containers can be placed inside other containers for more complex layouts. For example, you might nest a two-column container inside a larger one-column container to create a section with a shared background.

For ease of use, keep nesting to three layers or fewer.

Be careful when reducing the number of columns on a container that already has content.

Dubsado forms are responsive. On smaller screens, columns stack into a single column automatically.

For the best experience on mobile, use a separate container for each row of fields in a multi-column layout. This preserves the correct reading order when columns stack on smaller screens.

The container settings include two width sliders for controlling layout.

Container width controls the width of the entire container as a percentage of its parent. If the container is at the root level of the form, it is relative to the page width. Both sliders have a Reset button that returns the width to the default value.

Content width controls the maximum width of elements inside the container, relative to the container's own width. A content width of 50% means the content inside the container takes up half the container's width.

When a container is nested inside another container, its container width is relative to the parent container's content width.

Content width is always relative to the container's own width, regardless of nesting.

Containers offer several visual styling options to help you create distinct sections on your form.

Use the Background color picker or enter a HEX code to add a background color. Containers are transparent by default. Click the reset button to clear the color.

Use the Text color picker or enter a HEX code to change the color of text displayed within the container. Click the reset button to return to the default text color.

Upload a new image or select one from the Image Library. Click Open gallery view to browse your images in a larger modal.

The background image fills the container and reveals more of the image as you add content. We recommend a minimum width of 2500 px for container background images, though the ideal size depends on how much content you plan to add.

Use the Background image opacity slider to control the transparency of the image. Click the reset button to remove the background image.

Set both a background color and a background image, then lower the image opacity to create a color overlay effect. This is useful for darkening or lightening a busy image to make text more readable.

Use padding and margins to control spacing around your container content.

Padding adds space inside the container, between the container edge and its content. There are four fields: Top padding, Right padding, Bottom padding, and Left padding. Values are in pixels.

Margins add space outside the container, between the container and surrounding elements. There are four fields: Top margin, Right margin, Bottom margin, and Left margin. Values are in pixels.

Toggle Show title to display a title above the container's content on the form. When enabled, enter your title text in the Title field that appears. The title is hidden by default.

Full-width images add visual impact to your forms — whether you want a hero banner with text overlay or a standalone image that stretches across the page. Here are two techniques using containers and image elements.

Containers let you place a background image behind your content, making them ideal for hero sections, banners, and section headings. To set up a full-width background image with content on top:

If you want a standalone full-width image without text overlay, you need to use an image element inside a container. Empty containers do not appear when clients view the form, even if they have a background image — so a background image alone is not enough.

Containers must have at least one element inside to render on the client-facing form. Add a text box, image, or other element to make the container visible.

Elements in the rightmost column are removed when you reduce the column count. Drag any elements you want to keep into another column before making the change.

Use a separate container for each row of content. When columns stack on smaller screens, this preserves the correct reading order. You can nest these row containers inside a single one-column container for easy grouping and a shared background.

Empty containers do not appear when clients view the form. Add at least one element inside the container — a text box, image element, or spacer — for the container and its background image to display.

A minimum width of 2500 pixels is recommended for background images. The ideal dimensions depend on how much content you place inside the container — taller containers need taller images. The background image adjusts to fill the container as content is added. Uploaded images must be under 8 MB.

The image element has alignment options (left, center, right) in its element settings. However, for a true full-width image at 100% scale, alignment has no visible effect since the image already fills the entire container.