Build Mobile-Friendly Responsive Forms in WordPress

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

  • Responsive layouts Forms adjust to different screen sizes.
  • Breakpoint editing Edit layouts for phone, tablet, laptop, and desktop widths.
  • Drag and drop builder Build responsive forms without CSS, JavaScript, or HTML knowledge.
  • Width controls Set field and section widths using a 12-column layout.
  • Offset controls Adjust field and section offsets per breakpoint.
  • Conversational forms Present questions one-by-one in a full-screen format.

Responsive forms adjust their layout to suit the screen size of the device being used. That matters for online forms, where incorrect scaling can make labels and fields difficult to read or interact with.

WS Form lets you build fully responsive forms in WordPress using a drag and drop builder. You can work with breakpoints, change field and section widths and offsets, and create layouts that are easier to use across mobile and desktop screens.

Responsive layouts can also improve accessibility. For a different presentation style, conversational forms show questions one-by-one in a full-screen layout with larger, easier-to-read fields.

  • Designed for smaller screens

    Responsive design helps make form elements easier to read and interact with on mobile devices.

  • Edit by breakpoint

    Use the breakpoint slider in the form editor to view and adjust layouts at different screen widths.

  • Five default breakpoints

    The default WS Form framework includes 5 breakpoints for responsive layout editing.

  • Control widths in columns

    Field and section widths are measured in columns, with a maximum width of 12 columns.

  • Set offsets visually

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

  • Inheritance saves time

    Widths and offsets inherit to larger breakpoints unless you set a specific value at a higher breakpoint.

  • 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.

  • The Team over at WS Form have been amazing in assisting with a complex form we are building. Thank you for the excellent product.

    kenedepot
  • Wow! I can honestly say I have never before received this level of support from a plugin provider. Thank you WS Form!

    jdiprint
  • Thanks so much for this great form plugin. Functionality is awesome and the advanced features are outstanding.

    michelyweb

Frequently Asked Questions

What does responsive mean for forms?

Responsive means the form layout dynamically adjusts to suit the screen size of the device it is being displayed on.

Why are responsive forms important?

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

How do I build responsive forms in WS Form?

You can edit responsive layouts in the form builder by selecting a breakpoint with the slider at the bottom of the screen, then adjusting field and section widths or offsets. For more information, see Responsive Forms.

How are widths set in responsive layouts?

Widths are measured in columns. The maximum width is 12 columns, so a half-width field would be set to 6 columns.

Do widths and offsets carry across breakpoints?

Yes. When you change a width or offset, breakpoints above it inherit that value unless you set a specific width or offset at a higher breakpoint.

Can I reset a responsive layout?

Yes. The reset button clears widths and offsets and returns the form to a single-column format. If you reset in error, you can use the undo tool to revert the form.