Diseño web e IA
Formulario de contacto: cómo crear uno que reciba mensajes y no spam
Los campos que de verdad hacen falta, honeypot, Cloudflare Turnstile o reCAPTCHA, el aviso y la casilla del RGPD, una plantilla HTML y lo que comprobamos en Chrome.
Un buen formulario de contacto pide solo nombre, correo y mensaje, frena el spam sin obligar a nadie a resolver puzles y deja claro qué haces con los datos. Con eso recibes más mensajes de clientes y menos basura en la bandeja.
Hemos leído la documentación de Cloudflare, Google y la normativa de protección de datos, hemos preguntado a ChatGPT, Perplexity y Gemini y hemos probado en Chrome cómo se comporta un formulario de verdad. Ninguna de las tres IA mencionó el RGPD, y el navegador da por buenos correos que no existen.
Aquí tienes qué campos pedir, cómo crearlo paso a paso, qué antispam usar, qué exige el RGPD y una plantilla HTML lista para adaptar.
En esta guía
Qué es un formulario de contacto y cuándo lo necesitas
Un formulario de contacto conviene cuando quieres recibir consultas ordenadas desde tu web sin publicar tu correo a la vista de los robots.
Un formulario de contacto es un formulario web con unos pocos campos (normalmente nombre, correo y mensaje) que envía la consulta del visitante a tu buzón o a tu CRM. Ahorra al cliente abrir su correo y a ti, las consultas sin datos para responder.
Lo que no es: no es una landing page de captación ni un alta en tu newsletter, aunque comparta campos. Y no siempre hace falta: en Notablia, de momento, el contacto es un correo por idioma y no un formulario. Para un negocio que responde por móvil, un enlace directo de WhatsApp puede funcionar mejor. Todo esto encaja en el diseño web de tu página de contacto.
Cada mensaje que llega es un cliente potencial. Si quieres medirlos como tal, repasa qué es un lead y cómo se cuenta.
Tipos de formularios web: cuál usar según tu objetivo
Hay seis tipos de formularios que te sirven en una web de negocio, y el de contacto es solo el más simple.
| Tipo | Para qué sirve | Campos típicos |
|---|---|---|
| Contacto | Resolver dudas y recibir consultas | Nombre, correo, mensaje |
| Presupuesto | Filtrar a quien quiere comprar | Los de contacto, más servicio y plazo |
| Captación de leads | Dar un recurso a cambio del correo | Correo y un dato más |
| Suscripción | Apuntar a alguien a tu boletín | Correo |
| Reserva o cita | Cerrar día y hora | Servicio, fecha, hora |
| Encuesta | Medir opiniones | Respuestas cortas |
Un formulario recoge datos para actuar (contestar, reservar, presupuestar). Un cuestionario o una encuesta mide opiniones y se analiza en conjunto. Por eso la regla es sencilla: empieza por el de contacto y añade el de presupuesto solo cuando ya sepas qué datos necesitas para cotizar.
Qué campos poner: ejemplo de formulario de contacto que se rellena
Pide solo lo que necesitas para responder la primera vez: con tres campos casi siempre basta.
El caso más citado es antiguo, de 2008: la agencia Imaginary Landscape pasó de 11 a 4 campos y su tasa de conversión subió de 5,4 % a 11,9 %, con muy pocos envíos medidos. Datos más recientes van en la misma línea: según Zuko, que analizó 1.362 formularios, el campo de teléfono provoca un 6,28 % de abandonos de media, casi tanto como el de correo.
| Campo | ¿Obligatorio? | Por qué |
|---|---|---|
| Nombre | Sí | Para dirigirte a la persona |
| Correo | Sí | Para responder |
| Mensaje | Sí | Para saber qué quiere |
| Teléfono | Opcional | Solo si de verdad vas a llamar |
| Motivo (desplegable) | Opcional | Útil si repartes consultas entre personas |
| Empresa, presupuesto, cargo | Mejor no | Pregúntalo en la respuesta |
Una academia de inglés de Zaragoza no necesita la fecha de nacimiento para contestar «¿tenéis grupos de B2 por la tarde?».
Cómo crear un formulario de contacto paso a paso
Para crear tu formulario, decide primero quién responde y luego elige la herramienta: el orden evita mensajes que nadie lee.
-
Decide adónde llegan los mensajes
Un buzón que alguien revise a diario, o tu CRM. Fija un plazo de respuesta y escríbelo junto al formulario.
-
Elige la herramienta
Plugin en WordPress, Formularios de Google, el bloque de tu constructor o un formulario HTML conectado a un servicio de envío.
-
Pon tres campos
Nombre, correo y mensaje. Añade un cuarto solo si cambia tu forma de responder.
-
Escribe etiquetas visibles y errores claros
Cada campo con su etiqueta, no solo con un texto gris dentro. Es lo que pide la WCAG para la accesibilidad web.
-
Añade el aviso de privacidad
Responsable, finalidad, derechos y enlace a la política, junto al botón. La casilla, solo para publicidad.
-
Activa el antispam por capas
Un honeypot invisible para todos y Cloudflare Turnstile o reCAPTCHA si el spam sigue.
-
Prueba el envío desde otro correo
Manda tres mensajes de prueba y mira si llegan a la bandeja o a la carpeta de spam.
-
Crea la página de gracias
Confirma que el mensaje llegó, repite el plazo de respuesta y ofrece algo útil mientras tanto, como tu página Quiénes somos.
¿WordPress, Formularios de Google o HTML?
| Opción | Para quién | Ojo con |
|---|---|---|
| Formulario de contacto WordPress con Contact Form 7 | Webs en WordPress; más de 10 millones de instalaciones activas | El antispam y el estilo se configuran aparte |
| WPForms Lite | WordPress con editor visual; más de 5 millones de instalaciones | Integra Turnstile en la versión gratis |
| Formularios de Google | Sin web o para empezar ya | Se nota que es externo y el diseño es limitado |
| Formulario HTML propio | Webs a medida | Necesita un servidor o servicio que envíe el correo |
Datos de instalaciones según wordpress.org, consultados en 2026.
Antispam sin fastidiar: honeypot, Cloudflare Turnstile o reCAPTCHA
El mejor antispam es el que el cliente no ve: un honeypot primero y, si hace falta, una comprobación invisible.
| Método | Cómo funciona | Para el usuario |
|---|---|---|
| Honeypot | Un campo oculto que solo rellenan los robots | Invisible |
| Cloudflare Turnstile | Comprueba el navegador en segundo plano | Casi siempre invisible |
| reCAPTCHA v3 | Puntúa cada envío de 0,0 a 1,0 | Invisible |
| Captcha de imágenes | Pide elegir fotos o escribir letras | Molesto |
El honeypot es una técnica práctica, no un estándar: no está en la documentación de OWASP. Turnstile, según los planes oficiales de Cloudflare Turnstile, es gratis con verificaciones ilimitadas y no obliga a usar otros servicios de Cloudflare. El recaptcha de Google, en su plan Essentials, es gratis hasta 10.000 evaluaciones al mes y pide una forma de pago en Google Cloud. Y un detalle que casi nadie cuenta: según su documentación, pasado el cupo, la verificación clásica falla en abierto y deja pasar los envíos.
¿Por qué me llega spam si tengo captcha?
Porque muchos robots escriben a mano o con servicios que resuelven captchas, y porque una mala configuración deja pasar todo. Combina capas: honeypot, tiempo mínimo de envío y verificación en el servidor, no solo en el navegador.
Formulario de contacto RGPD: el aviso y la casilla
Un formulario de contacto RGPD necesita un aviso básico junto al botón; la casilla de consentimiento, solo si además quieres mandar publicidad.
El artículo 11 de la Ley Orgánica 3/2018 de protección de datos permite una primera capa con lo básico: quién es el responsable, para qué usas los datos y cómo ejercer los derechos, más un enlace al resto. La guía de la AEPD sobre el deber de informar pide ponerlo en el mismo campo de visión que el botón de enviar.
| Situación | Qué hace falta |
|---|---|
| Solo vas a responder la consulta | Aviso básico y enlace a la política |
| Quieres mandar también tu newsletter o promociones | Una casilla aparte, sin marcar (LSSI, artículo 21) |
| Cualquier caso | Nunca casillas ya marcadas: no valen como consentimiento |
¿Hace falta casilla para responder una consulta?
En nuestra lectura de la norma, no: si alguien te escribe para pedirte información, responderle es atender su propia petición, una base distinta del consentimiento. No hemos encontrado una guía de la AEPD específica sobre formularios de contacto, así que si tratas datos sensibles, consúltalo con un profesional.
Plantilla formulario de contacto: el código HTML que sí envía
Esta plantilla formulario de contacto lleva etiquetas, honeypot accesible y aviso: solo te falta la dirección del servicio que envía el correo.
<form action="/tu-servicio-de-envio" method="post">
<label for="nombre">Nombre</label>
<input id="nombre" name="nombre" autocomplete="name" required>
<label for="correo">Correo</label>
<input id="correo" name="correo" type="email" autocomplete="email" required>
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" required></textarea>
<div aria-hidden="true" style="position:absolute;left:-9999px">
<input name="pagina" tabindex="-1" autocomplete="off">
</div>
<p>Responsable: [tu empresa]. Usamos tus datos solo para responderte. Derechos y más información en la política de privacidad.</p>
<button type="submit">Enviar</button>
</form>En el servidor, descarta todo envío con el campo «pagina» relleno. Ese formulario de contacto html es la base; si lo prefieres, un formulario web de tu constructor hace lo mismo con dos clics.
Revisa este formulario de contacto de mi web [pega el HTML o describe los campos]. Dime qué campos sobran para responder una primera consulta, si cada campo tiene etiqueta visible, si el aviso de privacidad cumple la primera capa del RGPD (responsable, finalidad, derechos y enlace) y cómo añadir un honeypot accesible. No inventes requisitos legales: si algo depende del caso, dilo.
Formulario de contacto para generar leads: mide y responde a tiempo
Un formulario que no se mide es una caja negra: no sabes si funciona ni qué cambiar.
La cuenta básica es la tasa de conversión de la página: envíos entre visitas. Pongamos una academia con 800 visitas al mes a su página de contacto y 24 envíos: 24 entre 800 es un 3 %. Es un supuesto para la guía, no un dato de mercado.
Para contar los envíos en Google Analytics 4, usa el evento recomendado generate_lead, que según la documentación de Google mide cuándo se genera un lead, por ejemplo a través de un formulario. Dispáralo al enviar, o mide las visitas a tu página de gracias, y márcalo como evento clave. Si lo necesitas, admite un parámetro lead_source para saber de qué canal viene el contacto.
Con 24 envíos al mes, pasar a 28 puede ser casualidad. Cambia una sola cosa cada vez (el texto del botón, un campo menos, el plazo de respuesta) y deja correr semanas antes de decidir. Y apunta una cifra más: cuánto tardas en contestar. Un lead que espera días se enfría, y ningún cambio de diseño lo arregla.
Formulario html en Chrome: lo que comprobamos
Un formulario html no valida tanto como crees: el navegador acepta correos con erratas y un honeypot mal hecho atrapa a personas.
Preguntas frecuentes sobre el formulario de contacto
¿Qué se pone en datos de contacto?
En la página de contacto, además del formulario, pon un correo, un teléfono si atiendes llamadas, tu horario y, si tienes local, la dirección con un mapa. Si contestas por WhatsApp, añade el enlace directo. Y di cuánto tardas en responder: «te contestamos en un día laborable» quita más dudas que cualquier diseño. En un formulario, en cambio, pide solo lo que necesitas para responder: nombre, correo y mensaje.
¿Cómo obtener el enlace de un Forms para compartir?
En Formularios de Google, abre el formulario, pulsa «Enviar», elige la pestaña del enlace y copia la dirección; puedes marcar «Acortar URL» para que quede más corta. En Microsoft Forms, el botón es «Recopilar respuestas» y desde ahí copias el vínculo. Ese enlace sirve para mandarlo por correo, WhatsApp o redes. Si lo que quieres es meter el formulario dentro de tu web, usa la opción de insertar HTML en lugar del enlace.
¿Cómo hacer un formulario desde el celular?
Con Formularios de Google, desde el navegador del móvil: entra en forms.google.com con tu cuenta, pulsa el botón de crear y añade las preguntas. No hace falta instalar nada. Para un formulario de contacto, crea tres preguntas (nombre, correo y mensaje), marca como obligatorias las dos primeras y, al terminar, comparte el enlace. Es la vía más rápida si aún no tienes web.
¿Cómo poner un formulario de contacto en Blogger?
Blogger tiene un gadget de formulario de contacto ya hecho. Entra en tu blog, ve a «Diseño», pulsa «Añadir un gadget» en la zona donde lo quieras (normalmente la barra lateral) y elige «Formulario de contacto». Los mensajes llegan al correo de la cuenta que administra el blog. Es básico y no trae aviso de privacidad: añade debajo un texto con el aviso y el enlace a tu política.
¿Qué es un captcha?
Un captcha es una prueba para distinguir a una persona de un programa automático antes de dejarle enviar un formulario o entrar en una web. Los clásicos piden escribir letras deformadas o elegir fotos con semáforos; los modernos, como Cloudflare Turnstile o reCAPTCHA v3, trabajan en segundo plano y casi nunca molestan. Su nombre viene de las siglas en inglés de una prueba de Turing automática para diferenciar ordenadores de humanos.
¿Cómo crear un formulario en Formularios de Google?
Entra en forms.google.com con tu cuenta de Google y crea un formulario en blanco. Ponle título, añade una pregunta de respuesta corta para el nombre, otra para el correo (con validación de correo) y una de párrafo para el mensaje. En la configuración, activa la recogida de correos si la necesitas. Las respuestas se ven en la pestaña «Respuestas» y puedes llevarlas a una hoja de cálculo. Para ponerlo en tu web, usa «Enviar» y la opción de insertar HTML.
¿Qué es reCAPTCHA v3?
reCAPTCHA v3 es la versión de Google que no enseña ninguna prueba: puntúa cada envío de 0,0 a 1,0 según lo humano que parezca y tú decides a partir de qué nota lo aceptas. Desde la migración a Google Cloud, sus claves se gestionan en un proyecto de Cloud y el plan gratuito llega a 10.000 evaluaciones al mes. Bien configurado no molesta; mal configurado, rechaza a clientes reales o deja pasar spam.
Sigue con estas guías
- Diseño web e IA Moodboard: qué es y cómo hacer uno para tu marca o tu web (paso a paso) Leer la guía
- Diseño web e IA Banco de imágenes gratis: los mejores y qué permite cada licencia Leer la guía
- Diseño web e IA Página Quiénes somos: cómo escribirla para que genere confianza (con ejemplos) Leer la guía