Home/Tools/Responsive Form

React Form with Responsive Form

CSS Grid makes responsive form layouts straightforward — a two-column layout on desktop that collapses to one column on mobile requires a single class change, not media query overrides for every element. Fields that need more space (like a full-width name field or a cover letter textarea) span both columns with col-span-2.

ReactForm Team·May 2026·3 min read

The challenge

Making forms responsive across screen sizes often requires manual layout tweaks and results in inconsistent field widths.

Deciding which fields span full width and which share a row on desktop
Ensuring the grid reflow to single column on mobile does not leave awkward field sizes
Making labels and their associated inputs stay vertically aligned on all screen sizes
Testing the layout at breakpoints between mobile and desktop where partial reflow can look broken

Working code example

Here is a complete, self-contained working example you can drop directly into any React project. It uses Tailwind CSS for styling and requires no external dependencies beyond React itself.

ResponsiveJobForm.jsx

import { useState } from 'react';

export default function ResponsiveJobForm() {
  const [form, setForm] = useState({
    fullName: '', jobTitle: '', email: '', phone: '',
    city: '', country: '', linkedin: '', portfolio: '', coverLetter: '',
  });
  const [submitted, setSubmitted] = useState(false);

  const handle = (e) => setForm({ ...form, [e.target.name]: e.target.value });

  if (submitted)
    return <p className="max-w-2xl mx-auto p-6 text-green-600 font-medium">Application submitted!</p>;

  return (
    <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}
      className="max-w-2xl mx-auto p-6 bg-white rounded-2xl shadow">
      <h2 className="text-xl font-bold text-gray-800 mb-6">Job Application</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

        <div className="sm:col-span-2">
          <label className="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
          <input name="fullName" value={form.fullName} onChange={handle}
            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-teal-500" />
        </div>

        {[
          { name: 'jobTitle', label: 'Job Title' },
          { name: 'email', label: 'Email Address' },
          { name: 'phone', label: 'Phone Number' },
          { name: 'city', label: 'City' },
          { name: 'country', label: 'Country' },
          { name: 'linkedin', label: 'LinkedIn URL' },
          { name: 'portfolio', label: 'Portfolio URL' },
        ].map(({ name, label }) => (
          <div key={name}>
            <label className="block text-sm font-medium text-gray-700 mb-1">{label}</label>
            <input name={name} value={form[name]} onChange={handle}
              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-teal-500" />
          </div>
        ))}

        <div className="sm:col-span-2">
          <label className="block text-sm font-medium text-gray-700 mb-1">Cover Letter</label>
          <textarea name="coverLetter" value={form.coverLetter} onChange={handle}
            rows={5} style={{ resize: 'none' }}
            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-teal-500" />
        </div>

        <div className="sm:col-span-2">
          <button type="submit"
            className="w-full bg-teal-600 text-white font-semibold py-2.5 rounded-lg hover:bg-teal-700 transition">
            Submit Application
          </button>
        </div>
      </div>
    </form>
  );
}

How ReactForm.co helps

ReactForm's visual builder handles all of the above — responsive form configuration, validation rules, state management, and responsive layout — without writing a single line of code. Drag fields onto the canvas, configure their properties in the sidebar, and get production-ready React output. You can publish the form and collect responses instantly, or export the JSX to drop into your own codebase.

Build this form visually

Frequently asked questions

How do I make a two-column form layout that stacks on mobile with Tailwind?

Use grid grid-cols-1 sm:grid-cols-2 gap-4 on the form container. All fields default to single-column on mobile. On sm screens and above, they flow into a two-column grid. Fields that should span the full width get the class sm:col-span-2. This is the standard responsive form pattern with Tailwind.

Which fields should span the full width in a two-column form?

Fields that typically need full width: full name (longer text), address/cover letter/bio textareas, email (important, deserves its own row), and submit buttons. Two-column fields work well for: first name + last name, city + state/country, phone + extension, start date + end date. The key principle is pairing fields that are naturally related.

Should I use CSS Grid or Flexbox for form layouts?

CSS Grid is better for form layouts because it enforces two-dimensional alignment — fields in the same row stay the same height regardless of their content. Flexbox is one-dimensional and fields can become different heights if labels wrap. Use Grid for the main form layout and Flexbox for individual field components (label + input + error message).

Build this form visually — no code needed

ReactForm.co handles responsive form fields, validation, conditional logic, and responsive layout automatically. Publish in minutes and collect responses for free.

Open Form Builder Try the Playground