El formulario de contacto de Webflow tiene un aspecto impecable desde el primer momento, pero Webflow solo te envía los datos por correo electrónico: no guarda los envíos en una base de datos, no se conecta a tu CRM ni ejecuta ninguna lógica personalizada. Si necesitas algo más que una simple notificación por email, tienes que enrutar los envíos del formulario a través de un servicio externo. La buena noticia es que puedes hacerlo sin escribir ni una sola línea de código en el backend.
Tabla de contenidos
Qué ofrece Webflow por defecto
El gestor de formularios integrado de Webflow hace tres cosas: envía una notificación por correo al propietario del sitio, muestra un mensaje de confirmación y registra los envíos en el panel de control de Webflow (en los planes de pago). Esto es suficiente para formularios de contacto básicos en sitios pequeños, pero se queda corto en cuanto necesitas cualquiera de lo siguiente:
- Respuestas automáticas a la persona que completó el formulario
- Envíos reenviados a una bandeja de entrada de equipo específica o a un CRM
- Lógica condicional (por ejemplo, enrutar leads según el producto de interés)
- Filtrado de spam más allá del honeypot básico de Webflow
- Un registro de entregas fiable con marcas de tiempo y reintentos
Nada de esto está disponible de forma nativa. Necesitas una capa externa, y hay tres formas realistas de añadirla.
Integraciones nativas - Zapier y Make
Webflow tiene integración directa con Zapier y Make (antes Integromat). Cuando llega un nuevo envío de formulario, se dispara el trigger y puedes encadenar cualquier acción: añadir una fila en Google Sheets, crear un contacto en HubSpot, enviar un mensaje en Slack, etc.
Este es el camino sin código al que la mayoría de diseñadores recurre primero. La configuración es así:
- En Webflow, ve a Configuración del proyecto > Integraciones y conecta tu cuenta de Zapier.
- En Zapier, crea un nuevo Zap con Webflow - New Form Submission como trigger.
- Selecciona el formulario concreto por nombre.
- Añade tu paso de acción (Gmail, Slack, Airtable, etc.).
- Prueba con un envío real y activa el Zap.
Make es más económico para flujos de trabajo complejos, pero ambas plataformas añaden una dependencia: si Zapier o Make caen, o tu cuenta alcanza el límite, los envíos fallan silenciosamente o se quedan en cola.
Usar un webhook de Webflow
Un webhook de Webflow es una ruta más directa. Webflow lanza un HTTP POST a la URL que especifiques cada vez que se envía un formulario. Tú controlas el endpoint receptor, por lo que puedes hacer lo que quieras con el payload.
Para configurarlo:
- Ve a Configuración del proyecto > Integraciones > Webhooks en Webflow.
- Haz clic en Añadir webhook y elige el trigger Envío de formulario .
- Pega la URL del endpoint de tu servicio receptor.
- Guarda y prueba con un envío real.
El payload que envía Webflow es un objeto JSON que contiene todos los valores de los campos, el nombre del formulario y metadatos del sitio. Un payload típico tiene este aspecto:
{
"name": "Contact Form",
"site": "my-webflow-site",
"data": {
"Name": "Jane Smith",
"Email": "[email protected]",
"Message": "Hi, I'd like a quote."
},
"submittedAt": "2024-11-15T10:22:00Z"
}El problema: necesitas algo que reciba ese webhook. Las opciones incluyen un pequeño Cloudflare Worker , un flujo de trabajo en Pipedream o un backend dedicado para formularios. Escribir tu propio receptor es exactamente el problema del "backend personalizado" que este artículo intenta ayudarte a evitar. Ahí es donde los servicios de formulario a email se convierten en la solución más limpia.
Reemplazar el endpoint del formulario con un servicio externo
En lugar de usar el gestor de formularios de Webflow, puedes apuntar el atributo
action
de tu formulario a un servicio externo. El servicio recibe el POST, lo valida, filtra el spam y te envía los resultados por correo. Sin backend de tu parte.
El proceso en Webflow es:
- En el editor de Webflow, selecciona el elemento del formulario.
-
En el panel de
Configuración del formulario
, establece el campo
Acción
con la URL del endpoint de tu servicio de formularios (por ejemplo,
https://sendform.net/!your-form-id). - Establece el Método en POST .
-
Asegúrate de que cada campo tenga el atributo
name- Webflow los añade por defecto. - Publica el sitio y prueba un envío.
Este enfoque omite por completo el gestor de formularios de Webflow. El envío va directamente desde el navegador del visitante al servicio de formularios. Tú recibes el email, el servicio gestiona los reintentos y el spam, y Webflow actúa solo como capa de interfaz.
Este mismo patrón funciona con cualquier sitio estático o sin código. Si también alojas en GitHub Pages o Cloudflare Pages, el artículo sobre cómo alojar un sitio web estático gratis con formularios de contacto funcionales cubre exactamente el mismo enfoque.
Sendform frente a las alternativas
Varios servicios de formularios funcionan con Webflow. Aquí tienes cómo se comparan las principales opciones en los aspectos que realmente importan para un formulario de contacto:
| Servicio | Plan gratuito | Complejidad de configuración | Redirección personalizada | Filtrado de spam | Compatible con GDPR |
|---|---|---|---|---|---|
| Sendform | Sí | Pegar una URL | Sí | Sí | Sí |
| Formspree | 50 envíos/mes | Registrarse + pegar URL | Solo en planes de pago | Básico (reCAPTCHA en planes de pago) | Parcial |
| Netlify Forms | 100 envíos/mes | Requiere alojamiento en Netlify | Sí | Sí | Parcial |
| Zapier (via webhook) | 100 tareas/mes | Flujo de trabajo de varios pasos | Manual | Sin filtro integrado | Depende del Zap |
| Basin | 100 envíos/mes | Registrarse + pegar URL | Sí | Sí | Parcial |
Sendform destaca por varias razones concretas que van más allá de lo que cabe en una tabla:
- Configuración sin fricciones: Obtienes una URL de endpoint para el formulario sin necesidad de crear una cuenta primero. Pégala en el campo de acción de Webflow y listo.
- Sin almacenamiento de envíos por defecto: Sendform envía los datos por correo y no los retiene en sus servidores, lo cual es el comportamiento correcto para el cumplimiento del GDPR. Competidores como Formspree almacenan todos los envíos en su panel de control, lo que significa que los datos de tus usuarios quedan en un servidor de terceros de forma indefinida.
- Pensado para desarrolladores, usable sin código: A diferencia de Zapier, no hay ningún flujo de trabajo que mantener. A diferencia de Netlify Forms, no está atado a ningún proveedor de alojamiento concreto: funciona con Webflow, GitHub Pages o cualquier otro host.
- Plan gratuito honesto: Sin barreras ocultas del tipo "actualiza para desbloquear las redirecciones" que otros servicios usan para empujarte a los planes de pago.
¿Qué opción elegir?
La respuesta correcta depende de lo que necesites hacer después de que se envíe el formulario:
- Solo notificaciones por email: Usa Sendform. Pega la URL del endpoint en el campo de acción de Webflow y en dos minutos está listo.
- Email + sincronización con CRM o hoja de cálculo: Usa Sendform para la entrega del email y añade opcionalmente un paso en Zapier disparado por el email entrante, o usa la salida webhook de Sendform si está disponible en tu plan.
- Automatización compleja de varios pasos: Un webhook de Webflow conectado a Make o Zapier tiene sentido aquí, pero ten en cuenta el coste del plan de pago.
- Ya usas Netlify: Netlify Forms está bien para casos sencillos, pero alcanzarás el límite de 100 envíos al mes rápidamente en cualquier sitio con actividad.
Para la gran mayoría de formularios de contacto en Webflow - un campo de nombre, email y mensaje que necesita llegar a tu bandeja de entrada de forma fiable - Sendform es el camino más rápido y limpio. Sin backend, sin límites de tareas mensuales que vigilar y sin datos de envíos guardados en el panel de un tercero que olvidaste borrar.
Gestiona tu formulario de contacto de Webflow sin escribir un backend
Sendform te da un endpoint listo para usar que puedes pegar directamente en el campo de acción de Webflow: los envíos de tu formulario llegan a tu bandeja de entrada al instante, con filtrado de spam y configuración compatible con GDPR incluidos.
Prueba Sendform gratis →
Cuando apuntas la acción del formulario de Webflow a un endpoint externo, el estado de confirmación integrado de Webflow ya no se activa automáticamente. La mayoría de servicios de formularios resuelven esto redirigiendo a una página de agradecimiento que tú especificas. En Sendform, configuras una URL de redirección en los ajustes del formulario, de modo que los visitantes llegan a tu página de confirmación personalizada tras enviar. También puedes usar JavaScript para interceptar el evento de envío del formulario, hacer el POST mediante fetch() y mostrar el estado de confirmación de Webflow de forma manual.
Sí. En Configuración del proyecto > Integraciones > Webhooks puedes añadir un webhook que se dispara con cada nuevo envío de formulario. Webflow envía un POST JSON a la URL que indiques con todos los valores de los campos, el nombre del formulario y una marca de tiempo. Esto requiere un endpoint receptor: una función serverless, un flujo de trabajo en Pipedream o un servicio de formularios que acepte webhooks. La función de webhook está disponible en los planes CMS y Business de Webflow.
Zapier se sitúa entre Webflow y tu destino (email, CRM, etc.) y añade una capa de flujo de trabajo. Es potente para automatizaciones de varios pasos, pero tiene coste más allá de las 100 tareas al mes y añade un punto de fallo. Sendform es un endpoint directo para formularios: los envíos van directamente desde el navegador a Sendform, que te los envía por email de inmediato. No hay ningún flujo de trabajo que mantener, ningún contador de tareas y ningún riesgo de que un Zap falle silenciosamente. Para formularios de contacto sencillos, Sendform es más rápido de configurar y más fiable en el día a día.
Depende del servicio. Los servicios que almacenan los envíos en su propia base de datos (Formspree, Basin, Netlify Forms) actúan como encargados del tratamiento de datos, lo que significa que necesitas un Acuerdo de Tratamiento de Datos y debes mencionarlos en tu política de privacidad. Sendform está diseñado para reenviar los datos sin retenerlos por defecto, lo que reduce considerablemente la carga de cumplimiento. Independientemente del servicio que uses, debes actualizar tu política de privacidad para indicar cómo se gestionan y transmiten los datos del formulario de contacto.
Sí, y tienes varias opciones. La mayoría de servicios de formularios, incluido Sendform, incorporan filtrado de spam en su extremo. También puedes añadir un campo honeypot: un campo oculto que los bots rellenan pero los usuarios reales no, y el servicio receptor ignora los envíos donde ese campo tiene valor. Para formularios con mucho tráfico, los servicios que admiten reCAPTCHA v3 o hCaptcha añaden una capa extra de protección. El filtro antispam propio de Webflow solo se aplica cuando usas el gestor de formularios nativo de Webflow, por lo que al cambiar a un endpoint externo dependes de las herramientas antispam del servicio elegido.
No. Apuntar el atributo de acción del formulario a una URL externa funciona en cualquier plan de Webflow, incluido el plan gratuito Starter, porque simplemente estás cambiando un atributo HTML en una página publicada. La restricción en los planes gratuitos es que el gestor de formularios propio de Webflow (almacenamiento en el panel de control, notificaciones por email a través de Webflow) requiere un plan de sitio. Usar un servicio externo como Sendform evita esa restricción por completo: el formulario simplemente hace un POST a los servidores de Sendform independientemente del plan de Webflow que tengas.