Forms & CSS

How to make an HTML form responsive for mobile devices

Learn how to use CSS media queries and flexbox to make your HTML forms look great and work perfectly on smartphones and tablets.

April 19, 2026 · 6 min read · MyFormConnect

A non-responsive form is incredibly frustrating for users on mobile devices. If they have to pinch and zoom just to tap an input field, they will likely leave your site without submitting.

1. The Viewport Meta Tag

Before you write any CSS, you must ensure your HTML document has the viewport meta tag in the <head> section. Without this, mobile browsers will render your page like a desktop site and zoom way out.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Max-Width and Box-Sizing

You want your form inputs to take up the full width of their container, but never overflow the screen. Use box-sizing: border-box; and width: 100%; on all form elements.

input, textarea, select {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

3. Prevent Mobile Safari Auto-Zoom

A common issue on iPhones is that iOS Safari automatically zooms in when you tap an input field if the font size is less than 16px. The fix is simple: ensure your input text is exactly 16px or larger.

input, textarea, select {
  font-size: 16px; /* Prevents auto-zoom on iOS */
}

4. Stack inputs using Media Queries

On desktop, you might want "First Name" and "Last Name" side-by-side. But on mobile, they should stack vertically. We use CSS Grid or Flexbox combined with a Media Query to achieve this.

<div class="row">
  <div class="col">
    <label>First Name</label>
    <input type="text">
  </div>
  <div class="col">
    <label>Last Name</label>
    <input type="text">
  </div>
</div>

/* Default (Mobile First): Stack vertically */
.row {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Tablets and Desktops: Place side-by-side */
@media (min-width: 768px) {
  .row {
    flex-direction: row;
  }
  .col {
    flex: 1; /* Each column takes up equal space */
  }
}

By building "mobile-first", you ensure the form always looks great on a phone, and then use the @media query to enhance it for larger screens.