Templates/Contact form

Tailwind contact form template

The same contact form layout we use on FormsReach - first name, last name, work email, subject, and message - in a light theme you can paste into any stack.

Send us a message

Fill in the form and we will get back to you as soon as we can. For urgent technical issues, include your account email and a short description of the problem.

Powered byFormsReach

Copy the code

Same Tailwind fields as the preview. Paste into your stack, then connect your own submit handler or form backend.

          <div class="mx-auto w-full max-w-2xl font-geist text-zinc-900">
  <div class="text-center">
    <h2 class="font-geist text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">Send us a message</h2>
    <p class="mx-auto mt-3 max-w-2xl font-geist text-sm leading-7 text-zinc-600 sm:text-base">Fill in the form and we will get back to you as soon as we can. For urgent technical issues, include your account email and a short description of the problem.</p>
  </div>
  <form method="post" action="#" class="relative mx-auto mt-8 max-w-2xl space-y-5 font-geist">
    <div class="grid gap-5 sm:grid-cols-2">
      <label class="block font-geist text-sm">
        <span class="mb-1.5 block font-medium text-zinc-900">First name</span>
        <input type="text" name="first_name" required autocomplete="given-name" class="block h-12 w-full rounded-xl border border-zinc-300 bg-white px-4 font-geist text-[0.9375rem] text-zinc-900 transition hover:border-[#fbbf24] focus:border-[#eab308] focus:outline-none focus:ring-[3px] focus:ring-[#eab308]/25 focus-visible:!outline-none" />
      </label>
      <label class="block font-geist text-sm">
        <span class="mb-1.5 block font-medium text-zinc-900">Last name</span>
        <input type="text" name="last_name" required autocomplete="family-name" class="block h-12 w-full rounded-xl border border-zinc-300 bg-white px-4 font-geist text-[0.9375rem] text-zinc-900 transition hover:border-[#fbbf24] focus:border-[#eab308] focus:outline-none focus:ring-[3px] focus:ring-[#eab308]/25 focus-visible:!outline-none" />
      </label>
    </div>
    <label class="block font-geist text-sm">
      <span class="mb-1.5 block font-medium text-zinc-900">Work email</span>
      <input type="email" name="email" required autocomplete="email" class="block h-12 w-full rounded-xl border border-zinc-300 bg-white px-4 font-geist text-[0.9375rem] text-zinc-900 transition hover:border-[#fbbf24] focus:border-[#eab308] focus:outline-none focus:ring-[3px] focus:ring-[#eab308]/25 focus-visible:!outline-none" />
    </label>
    <label class="block font-geist text-sm">
      <span class="mb-1.5 block font-medium text-zinc-900">Subject</span>
      <select name="subject" required class="block h-12 w-full cursor-pointer appearance-none rounded-xl border border-zinc-300 bg-white bg-[url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371717a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")] bg-[length:1rem] bg-[right_0.9rem_center] bg-no-repeat px-4 pr-10 font-geist text-[0.9375rem] text-zinc-900 transition hover:border-[#fbbf24] focus:border-[#eab308] focus:outline-none focus:ring-[3px] focus:ring-[#eab308]/25 focus-visible:!outline-none">
        <option value="" disabled selected>Select a topic</option>
        <option value="Technical support">Technical support</option>
        <option value="Billing & account">Billing & account</option>
        <option value="Sales & pricing">Sales & pricing</option>
        <option value="Enterprise enquiry">Enterprise enquiry</option>
        <option value="Partnership / affiliate">Partnership / affiliate</option>
        <option value="Press & media">Press & media</option>
        <option value="Other">Other</option>
      </select>
    </label>
    <label class="block font-geist text-sm">
      <span class="mb-1.5 block font-medium text-zinc-900">Message</span>
      <textarea name="message" rows="5" required class="block min-h-32 h-auto w-full resize-y rounded-xl border border-zinc-300 bg-white px-4 py-3 font-geist text-[0.9375rem] text-zinc-900 transition hover:border-[#fbbf24] focus:border-[#eab308] focus:outline-none focus:ring-[3px] focus:ring-[#eab308]/25 focus-visible:!outline-none"></textarea>
    </label>
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <button type="submit" class="inline-flex h-11 items-center justify-center rounded-full bg-[#eab308] px-6 font-geist text-sm font-normal text-[#1c1917] transition hover:bg-[#facc15] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#eab308] active:scale-[0.98]">Send message</button>
    </div>
    <p class="flex items-center gap-2 pt-1 font-geist text-xs text-zinc-500">
      <span>Powered by</span>
      <span class="inline-flex items-center gap-1.5 text-xs font-medium text-zinc-700">
        <img src="/brand/icon.svg" alt="" width="14" height="14" class="h-3.5 w-3.5" />
        FormsReach
      </span>
    </p>
  </form>
</div>

When to use this contact form template

Use this for brochure sites, support hubs, and product contact pages that need first/last name, work email, a subject topic, and a message.

How FormsReach fits

Create an API key at app.formsreach.com, then point this form at FormsReach (see the HTML integration guide). Submissions are metered from your monthly credit pool. Start on Free for email delivery; upgrade when you need more credits or WhatsApp.

Next steps

FAQ

Quick answers about fields, styling, and wiring this template to your own backend.

Does this contact form need a PHP or Node backend?+

No. Wire the submit handler to your own API, or point it at FormsReach when you want hosted delivery.

Why does it look like the FormsReach contact page?+

The fields and layout match our public contact form, restyled for a light background so it fits marketing and docs pages.

Can I change the subject options?+

Yes. Edit the select options to match your support topics.

Is WhatsApp included on Free?+

No. Free includes email, webhooks, and workflow rules with 500 credits every month. WhatsApp unlocks on Pro and Agency.

Ready to receive form leads?

Create a free API key. Upgrade when you need more monthly credits.

Get started →All templates