Formulario de contacto mínimo

Etiquetas, tres campos y un botón. Sin bloque de estilo. El navegador dibuja los controles. El envío es el mismo que en las otras plantillas de inicio.

Qué estás copiando

Esta plantilla es el formulario de contacto sin bloque de estilo y sin clases de utilidad. El navegador dibuja los controles con su aspecto por defecto.

Sirve cuando quieres ver la petición con claridad, o cuando tu propia hoja de estilos va a hacer el pintado.

Los campos siguen siendo nombre, email, un teléfono opcional y un mensaje. El botón envía un POST normal.

No hay framework, ni fuente, ni script. Si tu CSS global vuelve a dar estilo a los inputs, ese CSS se aplica. Este archivo no lucha contra él.

La vista previa de esta página también se salta los estilos de tarjeta de las otras plantillas, así que los controles se parecen más a un formulario sin estilo.

Lo que sigue haciendo falta

Hasta un formulario desnudo necesita access_key, _lang y botcheck. Así Formgong reconoce el formulario, el idioma y el honeypot.

El honeypot se oculta con un atributo style corto en su contenedor. Es el único estilo del fragmento. Sin él, la gente podría rellenar la trampa.

Turnstile está en un comentario. El fragmento extra es el mismo formulario con esas líneas sin comentar y YOUR_TURNSTILE_SITE_KEY todavía por sustituir.

Quitar el comentario no crea una clave. Crea el widget en Cloudflare, activa Turnstile en el formulario y luego pega la clave de sitio.

Un script comentado no se ejecuta. Deja el comentario hasta que de verdad quieras el widget.

La misma entrega que las plantillas con estilo

Telegram imprime los nombres de los campos en negrita. Déjalos cortos. Traduce solo el texto que lee el visitante.

Sin _redirect, Formgong muestra su página de agradecimiento. Añade _redirect solo como una URL https absoluta que sea tuya.

El gratuito incluye 300 envíos al mes, 30 días de conservación, Telegram inmediato y un resumen diario por email.

Los datos se almacenan en la UE. Formgong opera el servicio. La dirección de soporte es support@formgong.com.

Cuando el formulario desnudo funciona, puedes envolverlo en tu propio diseño. No tienes que empezar por una plantilla con estilos.

Vista previa

Código del formulario

HTML
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="es">
  <label>Nombre <input type="text" name="name" autocomplete="name" required></label>
  <label>Correo electrónico <input type="email" name="email" autocomplete="email" required></label>
  <label>Teléfono <input type="tel" name="phone" autocomplete="tel"></label>
  <label>Mensaje <textarea 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 type="submit">Enviar</button>
</form>
El mismo formulario con Turnstile sin comentar
El mismo formulario con Turnstile sin comentar
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="es">
  <label>Nombre <input type="text" name="name" autocomplete="name" required></label>
  <label>Correo electrónico <input type="email" name="email" autocomplete="email" required></label>
  <label>Teléfono <input type="tel" name="phone" autocomplete="tel"></label>
  <label>Mensaje <textarea 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 type="submit">Enviar</button>
</form>

Preguntas y respuestas

¿Por qué el honeypot todavía tiene un estilo?

Para que la trampa se quede fuera de la pantalla. Todo lo demás está sin estilo a propósito. Si quitas esa única regla, la trampa se ve.

¿El CSS de mi sitio rompe el POST?

El CSS no cambia el POST. Un estilo puede ocultar el botón de enviar, pero lo que importa son los nombres de los campos y la URL de acción.

¿Es más pequeño por algo?

Sí. Es la misma petición con menos pintura, para que puedas soltarlo en una página que ya tiene un diseño.

¿Necesito el campo de teléfono?

No. Borra esa etiqueta si no quieres un número de teléfono. Deja email si quieres una dirección de respuesta en la bandeja.