formpit

Free form template

Tailwind CSS Contact Form Template (HTML)

A clean contact form styled with Tailwind CSS utility classes. Drop it into any Tailwind project; submissions go to your email and Formpit inbox.

Preview

The code

<form action="https://formpit.com/f/YOUR_FORM_ID" method="POST" class="mx-auto max-w-lg space-y-4 rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
  <div>
    <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
    <input id="name" type="text" name="name" required class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200">
  </div>
  <div>
    <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
    <input id="email" type="email" name="email" required class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200">
  </div>
  <div>
    <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
    <textarea id="message" name="message" rows="5" required class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200"></textarea>
  </div>
  <input type="text" name="_gotcha" class="hidden" tabindex="-1" autocomplete="off">
  <button type="submit" class="rounded-lg bg-indigo-600 px-5 py-2.5 font-semibold text-white hover:bg-indigo-700">Send message</button>
</form>
  1. Create a free Formpit form and copy its endpoint from the Setup tab.
  2. Paste the code into your page and replace YOUR_FORM_ID.
  3. Submit it once: the message arrives by email and in your inbox.

Tips

More templates

Contact form · File upload form · Newsletter signup form · Waitlist form · Quote request form · Job application form · Event RSVP form · Feedback form · Bootstrap contact form · Contact form with CSS