Use the global Style → Form Container section in Smart Form Builder by Dragwyb to control the form wrapper, its width, alignment, background, border, shadow, and spacing. These settings affect the overall form layout rather than the appearance of an individual field.
Open the Form Container settings
- Open the form you want to style in the Smart Form Builder editor.
- Select the Style tab in the editor.
- Expand Form Container and adjust the controls described below.
- Save the form, then use Frontend Preview to review the layout at desktop and mobile sizes.
Configure the container appearance
Background
Use Background to configure the form wrapper’s background. Choose a treatment that keeps the form readable against the surrounding page. For a card-style form, use a background that contrasts gently with the page and leaves enough visual separation around the fields.
CSS Filter
CSS Filter provides filter effects for the wrapper and enables the available backdrop-filter options. Use these effects sparingly and check the result against the actual page background; a strong effect can reduce contrast or make the form harder to read.
Border and Box Shadow
Use Border to define the container outline and Box Shadow to add depth around it. A subtle border or shadow can help separate a form from nearby content. You do not need both effects if the page design already provides enough separation.
Set alignment and width
Justify Content
Justify Content offers Left, Center, and Right. Select the alignment that suits the form layout. The configured default is Left.
Width
The responsive Width control supports px, em, and %. Use a percentage when the form should scale with its available area, or a pixel/em value when you need a more fixed width. The width control is responsive, so review its value at each available device breakpoint rather than assuming one value suits every screen.
- For a wide form: use a percentage width and check that the fields remain comfortable to read on smaller screens.
- For a compact form: use a narrower width and check that the form sits correctly within the surrounding page layout.
- For responsive layouts: adjust the width at the relevant device breakpoint and verify the result in the frontend preview.
Adjust margin, padding, and row spacing
Margin
Margin controls the space outside the form wrapper. Use it to separate the form from nearby page content. The responsive dimensions control supports px, em, and %, and lets you set the top, right, bottom, and left values independently.
Padding
Padding controls the space inside the wrapper, between its edges and the form content. Increase it when fields or labels feel too close to the container border. Like Margin, it supports responsive top, right, bottom, and left values using px, em, and %.
Row Gap
Row Gap controls vertical spacing between form rows. Its configured default is 15px; the control supports px and %. Increase the gap when the form feels crowded, or reduce it when you need a more compact layout. Check long forms as well as short ones so that spacing remains consistent throughout.
Example container configurations
- Card-style form: choose a distinct Background, a subtle Border or Box Shadow, and enough Padding to separate the fields from the wrapper edges.
- Centered form: choose a suitable Width and set Justify Content to Center. Check how the wrapper aligns within the page layout in the frontend preview.
- Compact form: reduce Padding and Row Gap carefully, while preserving enough space for labels, help text, and validation feedback.
- Mobile-friendly form: review responsive Width, Margin, and Padding values at mobile size. Avoid relying only on the desktop preview.
Check the result
- Confirm the form width and alignment are appropriate for the page.
- Check that labels, inputs, and validation messages have enough room inside the wrapper.
- Review the form at desktop and mobile sizes, including any responsive values you changed.
- Save the form and inspect it in Frontend Preview before publishing the change.
Related design guides
- Form Design and Templates — overview of all seven global Style sections.
- Customize Form Field Styles — configure labels, help text, inputs, choice fields, and message colors.
- Customize Form Typography — style the text used throughout the form.
Screenshot to add: Style tab expanded to Form Container, showing Background, Width, Justify Content, Margin, Padding, and Row Gap controls