Formulario de contacto Tailwind

Solo clases de utilidad. La página ya debe tener Tailwind. Este snippet no añade un script de CDN ni una fuente.

Qué estás copiando

Esta plantilla es el formulario de contacto marcado con clases de utilidad de Tailwind. Sigue siendo un POST normal a Formgong.

El fragmento no carga Tailwind. No añade un script de CDN y no carga una fuente.

Tu página, o tu build, ya tiene que incluir Tailwind. Si faltan las clases, el formulario se envía igual, pero se verá sin estilos.

La vista previa de esta página está dibujada con el CSS de Formgong para que veas los campos. No es un render de Tailwind.

Las etiquetas visibles siguen el idioma de la página. Los nombres de los campos se quedan en name, email, phone y message para Telegram.

Clases y el extra oscuro

Los inputs usan un borde, padding y un radio pequeño. El botón usa un fondo oscuro y texto claro. No hay una familia de fuentes propia.

No añadas una clase que apunte a una fuente descargada. La fuente del sitio, la que ya uses, basta.

El fragmento extra añade clases dark: para el texto, los bordes y los fondos. No hacen nada hasta que tu build de Tailwind tenga modo oscuro.

El modo oscuro de Tailwind puede seguir al sistema, o a una clase en el elemento html. Esta plantilla no configura eso. Solo añade las clases.

Si no usas el modo oscuro, copia el primer fragmento y deja el extra.

El honeypot sigue oculto a la vista con un atributo style pequeño, no con una clase de Tailwind, así que sigue oculto aunque falte Tailwind.

El mismo envío que la plantilla HTML

La acción, el método, access_key, _lang y botcheck coinciden con la plantilla HTML plana. Tailwind no cambia la petición.

Turnstile se queda en un comentario hasta que lo actives y pegues una clave de sitio. El marcador YOUR_TURNSTILE_SITE_KEY no es una clave real.

En el plan gratuito, Telegram llega al momento y el email es un resumen diario. Los envíos se quedan 30 días. El cupo mensual es 300.

Sustituye fk_your_access_key por la clave del panel, o usa el botón de esta página mientras has iniciado sesión.

Formgong es el operador. Las preguntas sobre el producto van a support@formgong.com.

Vista previa

Código del formulario

HTML

<!-- Este marcado espera que Tailwind ya esté en la página. No carga Tailwind, ni un CDN, ni una fuente. -->
<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="es">
  <label class="grid gap-1 text-sm"><span class="font-medium">Nombre</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">Correo electrónico</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">Teléfono</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">Mensaje</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>Deja este campo vacío <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
Opcional. Active Turnstile para este formulario, quite estas marcas de comentario y pegue la clave del sitio.
<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="es"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white" type="submit">Enviar</button>
</form>

Los mismos campos con clases dark: de Tailwind

Los mismos campos con clases dark: de Tailwind

<!-- Este marcado espera que Tailwind ya esté en la página. No carga Tailwind, ni un CDN, ni una fuente. -->
<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="es">
  <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">Nombre</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">Correo electrónico</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">Teléfono</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">Mensaje</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>Deja este campo vacío <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
Opcional. Active Turnstile para este formulario, quite estas marcas de comentario y pegue la clave del sitio.
<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="es"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white dark:bg-neutral-100 dark:text-neutral-900" type="submit">Enviar</button>
</form>

Preguntas y respuestas

¿Funciona en Lovable o Bolt?

A menudo sí, porque esas herramientas ya usan Tailwind. La plantilla para el constructor de IA en este hub es un prompt que dice las mismas reglas con palabras.

¿Puedo cargar Tailwind desde un CDN en este fragmento?

Esta plantilla no lo hace. Un script de CDN es una dependencia de terceros, y no hace falta cuando tu aplicación ya construye Tailwind.

¿Por qué la vista previa no usa mis colores?

La vista previa no puede ver tu build de Tailwind. Copia el código en una página que tenga Tailwind y las clases de utilidad se aplican allí.

¿Las clases dark: fuerzan una página oscura?

No. Solo se aplican cuando el modo oscuro de Tailwind está activo. La plantilla oscura aparte es CSS plano para páginas sin Tailwind.