How to Build a Beautiful Contact Form with Tailwind CSS

Tailwind CSS makes it easy to build professional-looking forms without writing custom CSS. Its utility-first approach gives you full control over spacing, colors, typography, and responsive behavior directly in your HTML. Combined with Static Forms for the backend, you can have a beautiful, working contact form in minutes.

In this guide, we will build a Tailwind-styled contact form from scratch, add polish with focus states and hover effects, create a dark mode variant, and wire it up to Static Forms for email delivery.

Basic Contact Form

Here is a clean, minimal contact form styled with Tailwind CSS:

Replace YOUR_API_KEY_HERE with your API key from the Static Forms dashboard. This form submits directly to Static Forms and delivers the message to your inbox.

Polished Version with Enhanced States

Let's improve the form with better visual feedback, a card layout, and error state styling:

Key details in this version:

• Hover states on inputs (hover:border-gray-400) give subtle feedback when users mouse over fields
• Focus rings (focus:ring-2 focus:ring-blue-500) clearly indicate the active field
• Validation styling (invalid:border-red-500) highlights fields with errors using native HTML validation
• Active state on the button (active:bg-blue-800) provides click feedback
• Disabled state (disabled:bg-gray-400) for when the form is submitting

Dark Mode Variant

Tailwind's dark: modifier makes it straightforward to add dark mode support. Wrap the same form with dark mode classes:

The dark mode classes adjust backgrounds (dark:bg-gray-800), text colors (dark:text-white), borders (dark:border-gray-600), and the focus ring offset color to match the dark background.

Make sure your Tailwind config has dark mode enabled. In tailwind.config.js, set darkMode: 'class' or darkMode: 'media' depending on whether you want manual toggle or system preference.

Connecting to Static Forms

All the examples above use the standard Static Forms HTML integration. Replace YOUR_API_KEY_HERE with your API key and the form is ready to send emails. For JavaScript-powered submissions with loading states and inline success messages, see our getting started guide.

Wrapping Up

Tailwind CSS and Static Forms are a natural pairing for developers who want good-looking, functional forms without the overhead of a CSS framework or a custom backend. Copy any of the examples above, drop in your API key, and you have a production-ready contact form.

Ready to get started? Sign up for Static Forms and get 500 free submissions per month.