No Time Dad

A blog about web development written by a busy dad

How to Create a Tailwind CSS Contact Form

I’ve needed to create a contact form for sites on more than a few occasions. Creating the form elements themselves is the easy part. I’ve always found that styling the forms is difficult and often where I spend most of my time.

Styling forms is hard. There’s a lot to think about. Using a library like Tailwindcss makes it easier. Below is an example on how to create a tailwind css contact form. It isn’t fancy, but it’s a good starting point. And honestly, I’d use that form in its current state. Maybe I’d add some different colors or a border, but for the most part it’s fine.

// package.json
...
"tailwindcss": "^2.1.2",
"@tailwindcss/forms": "^0.3.2",
"react": "^17.0.2",
import React from 'react';

export const ContactForm = () => (
  <div className="p-6">
    <form>
      <div className="grid grid-cols-2 gap-4">
        <div className="flex flex-col">
          <label htmlFor="first-name">First name</label>
          <input type="text" id="first-name" name="first-name" className="form-input px-3 py-2 rounded-md" required />
        </div>
        <div className="flex flex-col">
          <label htmlFor="last-name">Last name</label>
          <input type="text" id="last-name" name="last-name" className="form-input px-3 py-2 rounded-md" required />
        </div>
        <div className="flex flex-col">
          <label htmlFor="email">Email</label>
          <input type="email" id="email" name="email" className="form-input px-3 py-2 rounded-md" required />
        </div>
        <div className="flex flex-col">
          <label htmlFor="phone">
            <div className="flex align-items">
              Phone
              <span className="ml-auto opacity-75">Optional</span>
            </div>
          </label>
          <input type="tel" id="phone" name="phone" className="form-input px-3 py-2 rounded-md" />
        </div>
        <div className="flex flex-col col-span-2">
          <label htmlFor="subject">Subject</label>
          <input type="text" id="subject" name="subject" className="form-input px-3 py-2 rounded-md" required />
        </div>
        <div className="flex flex-col col-span-2">
          <label htmlFor="subject">
            <div className="flex align-items">
              Message
              <span className="ml-auto opacity-75">Max. 500 characters</span>
            </div>
          </label>
          <textarea maxLength="500" rows="4" type="text" id="subject" name="subject" className="form-input px-3 py-2 rounded-md" required />
        </div>
      </div>
      <div className="flex justify-end py-4">
        <button type="submit" class="bg-blue-700 text-white font-bold py-2 px-4 rounded focus:ring focus:ring-blue-300 hover:bg-blue-500">
          Submit
        </button>
      </div>
    </form>
  </div>
);

The fun thing about this tailwind css contact form is that it uses css grid to determine the spacing and width of the input fields. I’ve used tailwindcss grid utility classes in the past for larger layouts, but it can also be used for smaller elements like this contact form. In fact, css grid was extremely helpful in this element.

The basic idea is that the form element contains a child div that has the input fields in a two column grid. This allows some fields to be next to each other naturally, and other fields to span the width of both columns by adding tailwind’s col-span-2.

I also managed to squeeze in some flexbox usage in this tailwind css contact form. Primarily to put the label element above it’s corresponding input or textarea element. This is done by wrapping both element in a div and adding tailwind’s flex flex-col utility classes. These create a flexbox container and change the flex-direction to column from row.