Tailwind contact form

Utility classes only. Your page must already have Tailwind. This snippet does not add a CDN script or a font.

What you are copying

This starter is the contact form marked up with Tailwind utility classes. It is still a normal POST to Formgong.

The snippet does not load Tailwind. It does not add a CDN script, and it does not load a font.

Your page, or your build, must already include Tailwind. If the classes are missing, the form still posts, but it will look unstyled.

The preview on this page is drawn with Formgong CSS so you can see the fields. It is not a Tailwind render.

Visible labels follow the page language. Field names stay name, email, phone and message for Telegram.

Classes and the dark extra

Inputs use a border, padding and a small radius. The button uses a dark background and light text. There is no custom font family.

Do not add a class that points at a downloaded font. The site font, whatever you already use, is enough.

The extra snippet adds dark: classes for text, borders and backgrounds. They do nothing until your Tailwind build has dark mode.

Tailwind dark mode might follow the system, or a class on the html element. This template does not configure that. It only adds the classes.

If you do not use dark mode, copy the first snippet and ignore the extra one.

The honeypot stays visually hidden with a small style attribute, not with a Tailwind class, so it stays hidden even if Tailwind is missing.

The same post as the HTML starter

Action, method, access_key, _lang and botcheck match the plain HTML starter. Tailwind does not change the request.

Turnstile stays in a comment until you enable it and paste a site key. The placeholder YOUR_TURNSTILE_SITE_KEY is not a real key.

On the free plan, Telegram arrives at once and email is a daily digest. Submissions stay for 30 days. The monthly allowance is 300.

Replace fk_your_access_key with the key from the dashboard, or use the button on this page while you are signed in.

Formgong is the operator. Product questions go to support@formgong.com.

Preview

Form code

HTML

<!-- This markup expects Tailwind on the page already. It does not load Tailwind, a CDN or a font. -->
<form action="https://formgong.com/submit" method="POST" class="relative mx-auto grid max-w-lg gap-4">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="en">
  <label class="grid gap-1 text-sm"><span class="font-medium">Name</span><input class="w-full rounded-md border border-neutral-300 px-3 py-2" type="text" name="name" autocomplete="name" required></label>
  <label class="grid gap-1 text-sm"><span class="font-medium">Email</span><input class="w-full rounded-md border border-neutral-300 px-3 py-2" type="email" name="email" autocomplete="email" required></label>
  <label class="grid gap-1 text-sm"><span class="font-medium">Phone</span><input class="w-full rounded-md border border-neutral-300 px-3 py-2" type="tel" name="phone" autocomplete="tel"></label>
  <label class="grid gap-1 text-sm"><span class="font-medium">Message</span><textarea class="w-full rounded-md border border-neutral-300 px-3 py-2" name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>Leave this field empty <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
Optional. Turn Turnstile on for this form, then remove these comment marks and paste your site key.
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="en"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white" type="submit">Send</button>
</form>

Same fields with Tailwind dark: classes

Same fields with Tailwind dark: classes

<!-- This markup expects Tailwind on the page already. It does not load Tailwind, a CDN or a font. -->
<form action="https://formgong.com/submit" method="POST" class="relative mx-auto grid max-w-lg gap-4 dark:text-neutral-100">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="en">
  <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">Name</span><input class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" type="text" name="name" autocomplete="name" required></label>
  <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">Email</span><input class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" type="email" name="email" autocomplete="email" required></label>
  <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">Phone</span><input class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" type="tel" name="phone" autocomplete="tel"></label>
  <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">Message</span><textarea class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>Leave this field empty <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
Optional. Turn Turnstile on for this form, then remove these comment marks and paste your site key.
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="en"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white dark:bg-neutral-100 dark:text-neutral-900" type="submit">Send</button>
</form>

Questions and answers

Will this work in Lovable or Bolt?

Often yes, because those tools already use Tailwind. The AI builder starter on this hub is a prompt that says the same rules in words.

Can I load Tailwind from a CDN in this snippet?

This template does not. A CDN script is a third-party dependency, and it is unnecessary when your app already builds Tailwind.

Why is the preview not using my colours?

The preview cannot see your Tailwind build. Copy the code into a page that has Tailwind, and the utility classes apply there.

Do dark: classes force a dark page?

No. They apply only when your Tailwind dark mode is active. The separate dark-mode starter is plain CSS for pages without Tailwind.