By default, responsive columns in WS Form are based on the width of the browser window. This works well for most forms, but it can cause layouts to appear too wide when the same form is used in a narrow container such as a sidebar, modal, popup, footer, or card.
Breakpoint Queries let you choose whether responsive columns are based on the browser width or the width of the form itself. This makes it easy to reuse the same form in different locations without creating separate versions or writing custom CSS.
This setting only affects the WS Form responsive column grid. It does not change the layout of your theme or other page content.
Before You Start
- Your front end framework must be set to WS Form (WS Form > Settings > Appearance / Markup > Framework).
- Layout CSS must be enabled. This is enabled by default when using the WS Form framework.
This setting is not available when using Bootstrap or Foundation because those frameworks provide their own responsive grid system.
How to Enable Breakpoint Queries
- Edit your form in the Layout Editor.
- Click Settings in the top toolbar.
- Open the Styling tab.
- Locate the Breakpoint Queries setting.
- Select either Browser Width or Form Width.
- Click Save or Save & Close, then publish your form if required.
Breakpoint Query Options
| Option | Description |
|---|---|
| Browser Width | Responsive columns are based on the width of the browser window. This is the default behavior. |
| Form Width | Responsive columns are based on the width of the form itself. Ideal for forms displayed in sidebars, popups, modals, cards, footers, and other narrow containers. |
Breakpoint Sizes
Changing the Breakpoint Queries setting does not change the breakpoint sizes. Only what is measured changes.
- Extra Small: Up to 575px
- Small: 576px and above
- Medium: 768px and above
- Large: 992px and above
- Extra Large: 1200px and above
Learn more about building responsive layouts in Responsive Forms.
When to Use Form Width
Form Width is recommended when your form is displayed inside a container that is significantly narrower than the browser window.
- Sidebars
- Modals and popups
- Cards and panels
- Footer areas
- The same form is reused in multiple locations with different widths
Choose Browser Width if your forms are typically displayed full width or you want to retain the default responsive behavior.
Example
Imagine you have a two-column contact form that is used on a full width contact page and inside a 320px sidebar.
- With Browser Width, the sidebar version may remain in two columns because the browser window is still wide.
- With Form Width, the sidebar version automatically stacks into a single column because the form itself is narrow.
Browser Support
Form Width uses CSS Container Queries, which are supported by current versions of Chrome, Edge, Firefox, and Safari.
If you need to support very old browsers that do not support Container Queries, use the Browser Width option instead.
Troubleshooting
I Can’t See the Breakpoint Queries Setting
Breakpoint Queries are only available when using the WS Form framework. If you are using Bootstrap or Foundation, this setting will not appear because those frameworks manage responsive layouts themselves.
Nothing Changed After Enabling Form Width
- Save and publish your form after changing the setting.
- If Compile CSS is enabled under WS Form > Settings, save the global settings to rebuild the layout CSS.
- Confirm the form is actually narrower than the breakpoint you expect.
Only Part of My Form Changed
Breakpoint Queries only control the WS Form responsive column grid. Third party widgets, custom CSS, and theme styles continue to use their own responsive behavior.
For Developers
When Form Width is enabled, WS Form adds the wsf-form-container-query class to the form and uses CSS Container Queries to control responsive columns. This makes it easy to target container based layouts with your own custom CSS if required.