Responsive forms: designing for all screen sizes

You test your form on your desktop and it looks perfect. Full width, two columns, spacious. You submit a test on mobile and immediately know something is wrong. The fields are tiny. The keyboard covers half the form. You tap the wrong field. The whole experience feels broken.

Half your visitors are on mobile. If your form is not responsive, you are losing half your submissions. This article covers how to design forms that work on phones, tablets, and desktops.

Mobile forms are different from desktop forms

Mobile users fill forms differently than desktop users. On desktop, you have space. You can use multi-column layouts. You can put labels next to fields. On mobile, every pixel matters.

Mobile keyboards are huge. When the keyboard opens, it covers half the screen. Your form scrolls. The user loses context. A button that was visible is now hidden behind the keyboard.

Touch targets need to be bigger. A clickable area that is 14 by 14 pixels works fine with a mouse. A finger needs at least 48 by 48 pixels or the user will miss it.

Mobile users are on spotty networks. Every extra form load or image adds time. Speed matters more than on desktop.

The single-column form layout

The safest responsive form is single-column. One field per row, no matter the screen size.

Single-column layouts are simple, work on all screens, create a consistent experience, and are highly predictable. The main disadvantage is that forms appear longer on desktop, requiring more scrolling.

Most forms should be single-column. If your form is five fields, a single column is actually shorter than a two-column layout on desktop. The user scrolls less and sees more context.

To create a single-column layout, use input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. This stacks everything vertically at all breakpoints.

Two-column layouts on desktop, single-column on mobile

If you want to use horizontal space on large screens, use a grid with .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } and a media query @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }. On desktop this creates two columns, and on mobile it stacks to one, keeping the layout simple and responsive.

Only group fields that are truly related. A "First Name" and "Last Name" field next to each other makes sense. A "Street Address" and "Country" field next to each other does not.

Touch targets and finger-friendly design

The minimum touch target on mobile is 44 by 44 pixels (according to Apple) or 48 by 48 pixels (Android). Aim for at least 44.

Touch target sizing applies to input fields, which need to be tall enough to tap easily (40 to 50 pixels is good), checkboxes and radio buttons, which default to 13 by 13 pixels and should be expanded to at least 44 by 44 using CSS or JavaScript, buttons, which should be at least 44 by 44 pixels with added padding, and labels, which need to be 44 by 44 pixels too if clickable via the for attribute. Sometimes the label and input together create the complete touch target.

To make input fields bigger and easier to tap, use input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. The padding makes the field taller and improves tappability.

Keyboard handling

On mobile, the browser's keyboard covers the bottom half of the screen. If your form is at the bottom of the page, the submit button gets hidden. The user has to scroll down or dismiss the keyboard to see the button.

Keep your form near the top of the page. Or place the submit button at the top as well as the bottom. Do not hide critical buttons under the keyboard.

The keyboard type matters too. For an email field, use <input type="email"> to show an email keyboard with an @ key. For a phone field, use <input type="tel"> to show a numeric keyboard. For numeric input, use <input type="number"> to show a number keyboard. Using the correct input type lets the browser handle keyboard selection automatically.

When the user taps an input field, the browser scrolls that field into view. This is good. The field is visible when they need to type. But it can sometimes scroll past other context. Test your form on a real phone to see the behavior.

Label positioning on mobile

On desktop, labels can be above, beside, or inside fields. On mobile, above is almost always best.

A label above the field is clear. The user sees the label, then the input. On a narrow screen, a label beside the input wastes horizontal space. A placeholder inside the field disappears when you start typing.

Best practice: Place labels above fields. Always.

<label for="email">Email</label>

<input type="email" id="email">

Spacing and padding

Responsive forms need more spacing on mobile, not less. Your instinct is to compress everything to fit the screen. Fight that instinct.

Use generous padding and margins: at least 1rem (16 pixels) between fields, at least 0.75rem (12 pixels) on all sides for input padding, and at least 1rem (16 pixels) on all sides for button padding. Generous spacing makes forms easier to use, reduces mis-taps, improves readability, and on mobile, breathing room is more valuable than screen space.

Text size on mobile

Use at least 16 pixels for input fields. Smaller text forces users to zoom or squint. 16 pixels is the default and it works.

Labels can be smaller, around 14 pixels. But input fields should be 16 pixels minimum.

Some browsers auto-zoom when you tap an input smaller than 16 pixels, causing the form to jump and zoom unexpectedly. Use input { font-size: 16px; } to avoid this behavior.

Common responsive form mistakes

Using a two-column layout on all screen sizes

Forms are squeezed on mobile. Fields are tiny. Labels stack awkwardly. Always stack to one column at smaller breakpoints.

Making touch targets too small

Checkboxes, radio buttons, and buttons need to be at least 44 by 44 pixels. Test on a real phone. If you have to concentrate to tap it, it is too small.

Using placeholder text as the only label

When the user starts typing, the placeholder disappears. They forget what the field is for. Always use a proper label element. Keep the placeholder if you want, but never rely on it alone.

Placing the form at the bottom of a long page

The user scrolls down to a contact form, taps the email field, and the mobile keyboard covers the form. They cannot see what they are typing or reach the submit button. Put forms near the top or make sure they fit on screen with the keyboard.

Not testing on real mobile devices

Your desktop browser has a mobile view mode. It is useful for a quick check. But it does not show how your form really works on a phone. Test on actual devices. Borrow a phone if you do not have one.

Responsive form techniques

CSS Grid for flexible layouts

Use .form-group { display: grid; gap: 0.5rem; } and .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. The auto-fit and minmax values create a layout that flows based on available space, allowing fields to stack at narrow widths and sit side by side at wide widths.

Flexbox for button layouts

Use .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } and .form-actions button { flex: 1; min-width: 150px; }. Buttons sit next to each other on desktop, wrap to multiple rows on mobile, and each button grows to fill available space.

Media queries for specific breakpoints

Use @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } } to force single-column layout at screens smaller than 480 pixels.

How WEMASY forms respond to all screen sizes

WEMASY's form builder automatically creates responsive forms. Build on desktop, and mobile is already handled. Forms stack to single-column on phones. Touch targets are sized for mobile. Labels and fields are properly spaced. No extra work needed.

See how form responsiveness works in your WEMASY plan.

Frequently asked questions