WS Form - Smart, fast, forms for WordPress
My Account
Get WS Form

← All Features

Build Responsive Forms in WordPress for Every Screen Size

Create responsive forms that adapt to phones, tablets, laptops, and desktops.

  • Breakpoint-based layouts Adjust form layouts for different screen widths.
  • Drag and drop editing Build responsive forms without CSS, JavaScript, or HTML knowledge.
  • Field width controls Set field widths in a 12-column layout.
  • Section width controls Change section widths per breakpoint.
  • Offset controls Offset fields and sections using columns.
  • Inheritance across breakpoints Widths and offsets carry upward unless overridden.

Responsive forms adjust their layout to suit the screen size of the device being used. That matters because incorrect scaling can make form elements harder to read and interact with, especially on smaller screens.

With WS Form, you can build fully responsive forms in WordPress using a drag and drop interface. You can work with breakpoints, change field and section widths and offsets, and create layouts that are easier to use across different devices.

Widths are measured in columns, with a maximum of 12 columns per field or section. You can start with a single-column mobile layout, then progressively introduce more columns at larger breakpoints for tablets, laptops, and desktop screens.

  • Designed for smaller screens

    Responsive layouts help make form elements easier to read and interact with on phones and other small devices.

  • Edit by breakpoint

    Use the layout slider to select a breakpoint, click to view it, or drag to preview different screen widths.

  • Five default breakpoints

    The default WS Form framework uses five breakpoints, from extra small through extra large.

  • 12-column grid

    Field and section widths are measured in columns, with up to 12 columns available.

  • Control offsets visually

    You can change offsets for fields and sections by dragging the offset bar in the layout editor.

  • Keep form settings consistent

    Tabs, sections, and fields stay in the same order across breakpoints, and field settings remain the same.

  • Reset to one column

    The reset button clears widths and offsets and returns the form to a single-column layout.

  • Framework support

    WS Form supports different frameworks such as Bootstrap and Foundation, and shows their breakpoints in the layout editor.

Real Customer Reviews

Trusted by thousands of WordPress professionals.

  • I’ve used several form plugins for WordPress but WS Form is by far my favorite. Its features are way more advanced than the other popular ones and the customer support has been great so far. I highly recommend it for those with more complex needs.

    – Jon Lewis

  • By FAR!! The very best form builder I’ve used!! …. watch out Gravity!

    – Melanie Wise

  • I’ve tested many different form plugins and WS Form is really one of the best. The core feature set is very robust and the support is incredible.

    – hellojosh

Frequently Asked Questions

What are responsive forms?

Responsive forms dynamically adjust their layout to suit the screen size of the device they are displayed on.

Why are responsive forms important?

They help prevent incorrect scaling on the front end, which can make form elements difficult to read or interact with. Responsive forms also improve accessibility.

How do I build responsive forms in WS Form?

Edit your form and use the breakpoint slider at the bottom of the screen to choose the breakpoint you want to work on. You can then change widths and offsets for sections and fields. For more guidance, see Responsive Forms.

How are widths set in responsive forms?

Widths are measured in columns, with a maximum width of 12 columns. For example, a half-width field would be set to 6 columns.

Do widths and offsets carry across breakpoints?

Yes. When you change the size or offset of a field or section, breakpoints above that inherit the same setting unless you set a specific value at a higher breakpoint.

Can I edit breakpoint settings in the sidebar?

Yes. When editing a section or field, open the Advanced tab and use the breakpoint width and offset column editor near the bottom.

Resources