Formulario de contacto HTML
Un formulario de contacto en HTML plano. Lo envía el navegador. Sin backend, sin framework y sin fuente.
Qué estás copiando
Esta plantilla es un formulario de contacto en HTML plano. El navegador lo envía con un POST normal. No hay llamada a fetch, ni framework, ni paso de compilación.
Pega el marcado en una página estática, un embed de Webflow o cualquier sitio que acepte un elemento de formulario. La página no necesita su propio servidor.
El formulario pide un nombre, una dirección de email y un mensaje. El teléfono es opcional. Esas palabras son también los nombres de los campos.
Telegram imprime el nombre de cada campo en negrita encima de la respuesta. Los nombres cortos como name, email y message se leen bien en un teléfono.
Aquí no se recoge un archivo, un pago ni una puntuación de Formgong. Solo es una forma de que un visitante llegue hasta ti.
Cómo funciona el envío
La acción del formulario es el origen de Formgong más /submit, con método POST. Un access_key oculto nombra el formulario.
La clave es pública y va en la página. Permite que un visitante envíe un mensaje. Con ella no se cambian los destinatarios ni se activa un webhook.
Un campo oculto _lang lleva el idioma de la página, por ejemplo en. Formgong lo usa para la página de agradecimiento y para el texto de error.
No traduce el mensaje del visitante. Escribe las etiquetas visibles en el idioma de la página y deja los nombres de los campos en inglés.
El honeypot es un input llamado botcheck. Queda fuera de la pantalla, con tabindex -1 y autocomplete desactivado. La gente lo deja vacío.
Un envío que rellena botcheck se guarda como spam y no se entrega. El visitante sigue viendo el camino normal de éxito.
Turnstile es opcional. El fragmento deja el widget dentro de un comentario. En esta plantilla no hay clave de sitio.
Si activas Turnstile para el formulario, quita las marcas de comentario y pega tu propia clave de sitio. Hasta entonces esas líneas no hacen nada.
Sin un _redirect oculto, Formgong muestra su propia página de agradecimiento. El fragmento extra pone _redirect en una dirección https.
Sustituye https://example.com/thanks por una página que controles tú. No se acepta una ruta relativa.
Después de pegarlo
Crea un formulario en el panel, o usa el botón de esta página, y sustituye fk_your_access_key si copiaste el marcador de posición.
Conecta Telegram en los ajustes del formulario cuando quieras el mensaje en el teléfono. En el plan gratuito, el email es un resumen diario y Telegram es inmediato.
Envía una prueba desde la página publicada. Un archivo abierto como file:// no es una prueba fiable del formulario en vivo.
El plan gratuito guarda los envíos 30 días. Los planes de pago pueden guardarlos más tiempo. Formgong los almacena en la UE.
El plan gratuito incluye 300 envíos al mes. El spam no cuenta para ese número.
Si necesitas un formulario de clínica, empleo o presupuesto, usa una plantilla de sector más abajo en este sitio. Esta página es solo el diseño simple de contacto.
Las preguntas sobre el servicio van a support@formgong.com. Formgong es el operador del servicio. Esta plantilla no nombra a ninguna otra empresa como operador.
Vista previa
Código del formulario
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <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 redirección de agradecimiento
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="es"> <input type="hidden" name="_redirect" value="https://example.com/thanks"> <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
¿Este formulario necesita JavaScript?
No. El navegador envía el formulario por su cuenta. La plantilla AJAX es la que se queda en la página con fetch.
¿Adónde van los mensajes?
A la bandeja de Formgong, y al email y a Telegram cuando los conectas. Escribe a support@formgong.com si la pregunta es sobre el servicio en sí.
¿Puedo añadir más campos?
Sí. Añade inputs con nombres cortos, como city. Telegram imprime ese nombre encima de la respuesta. No cambies el nombre de access_key ni de botcheck.
¿La vista previa envía un mensaje real?
No. La vista previa de esta página solo muestra una nota. No se publica nada hasta que pongas el fragmento en tu propio sitio con una clave de acceso real.