How to Create a Responsive HTML Form

More than half of all form submissions now happen on phones. A form that's comfortable on a laptop can be miserable on a 375-pixel screen: tiny tap targets, side-by-side fields squashed into slivers, and the page zooming every time you tap an input.

Here's how to build a form that adapts gracefully from a small phone to a wide desktop.

1. Start with the viewport meta tag

Without this line, mobile browsers render your page at desktop width and shrink it down. Nothing else in this guide works without it.

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

2. Use fluid widths, not fixed ones

Give the form a maximum width and let it shrink below that. Make every control fill its container.

*, *::before, *::after { box-sizing: border-box; }

form {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 40px);
}

input, select, textarea, button {
  width: 100%;
  font: inherit;
}

box-sizing: border-box stops padding from pushing inputs wider than 100%. clamp() gives a smaller padding on phones and a roomier one on desktops — no media query needed.

3. Build the layout mobile-first with CSS Grid

Design for one column first, then add columns when there's space.

<form class="rf" action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <div class="grid">
    <div class="field">
      <label for="first">First name</label>
      <input id="first" name="first_name" autocomplete="given-name" required>
    </div>
    <div class="field">
      <label for="last">Last name</label>
      <input id="last" name="last_name" autocomplete="family-name" required>
    </div>
    <div class="field span-2">
      <label for="email">Email</label>
      <input id="email" name="email" type="email" autocomplete="email" required>
    </div>
    <div class="field">
      <label for="city">City</label>
      <input id="city" name="city" autocomplete="address-level2">
    </div>
    <div class="field">
      <label for="zip">Postcode</label>
      <input id="zip" name="postcode" autocomplete="postal-code" inputmode="numeric">
    </div>
    <div class="field span-2">
      <label for="msg">Message</label>
      <textarea id="msg" name="message" rows="5"></textarea>
    </div>
  </div>

  <button type="submit">Send</button>
</form>

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .span-2 { grid-column: span 2; }
}

On phones, every field gets the full width. From 600px up, short fields pair up while email and message keep spanning both columns.

No media queries: auto-fit

For a grid of similar fields, let the browser decide how many columns fit:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

4. Make controls touch-friendly

input, select, textarea {
  min-height: 48px;
  padding: 12px 14px;
  font-size: 16px;            /* stops iOS zooming on focus */
  border: 1px solid #d4d4e0;
  border-radius: 10px;
}

button {
  min-height: 52px;
  font-size: 16px;
  font-weight: 700;
}

/* Bigger hit area for checkboxes and radios */
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.check input { width: 20px; height: 20px; }

• 16px font size on inputs — anything smaller and iPhones zoom in when the field is focused.
• 44–48px minimum height for anything tappable, matching Apple and Google guidelines.
• Wrap checkboxes in their labels so the whole line is tappable, not just the tiny box.

5. Show the right keyboard

On phones, the input type decides the keyboard. This is the single biggest mobile usability win:

Field	Markup	Keyboard
Email	type="email"	Includes @ and .
Phone	type="tel"	Phone keypad
Postcode, code	inputmode="numeric"	Number pad
Price	inputmode="decimal"	Numbers with decimal point
Website	type="url"	Includes / and .com

Add autocomplete values too, so phones can fill in names, addresses and emails in one tap. Full details are in HTML Input Types: Complete Guide.

6. Keep labels above fields

Labels to the left of fields look tidy on desktop but break on phones. Labels above fields work everywhere and are faster to scan. If you really want side labels on large screens, switch with a media query:

.field { display: grid; gap: 6px; }

@media (min-width: 900px) {
  .field.inline { grid-template-columns: 180px 1fr; align-items: center; }
}

7. Mind the on-screen keyboard

• The keyboard covers about half the screen. Keep forms short and avoid fixed-position elements that cover the active field.
• Put the submit button right after the last field, not in a sticky footer that may hide behind the keyboard.
• Set enterkeyhint="send" or "next" to change the label on the keyboard's enter key.

8. Test on real devices

Browser developer tools are a good start, but always test on at least one real phone:

• Can you complete the whole form with your thumb?
• Does the page zoom when you tap a field?
• Does the right keyboard appear each time?
• Are error messages visible above the keyboard?
• Does it work in landscape?

Submissions from any device

Because the form posts to Formclick's endpoint, it works the same from a phone, tablet or desktop — no server to configure. Every submission arrives in your inbox and dashboard.

All of our HTML form templates are responsive out of the box. To polish the look further, read How to Style HTML Forms Using CSS.