Cómo Agregar un Formulario a una Página
Usa el elemento Formulario cuando quieras capturar leads directamente en una landing page, página de ventas, registro de webinar o sección de seguimiento de quiz. Esta guía muestra cómo agregar el formulario, configurar las opciones principales que afectan los envíos y verificar que los leads lleguen correctamente.
Antes de Empezar
Asegúrate de tener:
- Una página abierta en el Page Builder.
- Una lista clara de los campos que necesitas (por ejemplo, nombre, correo electrónico, teléfono).
- Acceso a Leads para revisar los envíos después de las pruebas.
- Credenciales de autoresponder, webhook o Google Sheets listas si planeas enviar datos fuera de Atomicat.
Paso 1: Agregar el Elemento Formulario
- Abre Pages y haz clic en Edit en la página objetivo.
- En el Page Builder, abre el panel de elementos.
- Arrastra Formulario al contenedor o sección correcta (generalmente cerca de tu CTA o bloque de oferta).
- Haz clic en el formulario en el canvas para abrir el panel de configuración a la derecha.
Coloca el formulario donde los visitantes ya esperan actuar. Los formularios debajo del pliegue en mobile suelen necesitar listas de campos más cortas para convertir bien.
Paso 2: Nombrar el Formulario
En la configuración del formulario, define un nombre del formulario que tu equipo pueda reconocer después en Leads e integraciones.
Ejemplos:
Registro webinar – oferta marzoCaptura de leads VSLSeguimiento resultado quiz
Nombres claros facilitan mucho el filtrado y la resolución de problemas de webhook cuando ejecutas varias campañas.
Paso 3: Configurar los Campos del Formulario
Cada campo controla qué datos recopilas y si el visitante puede enviar sin completarlo.
| Configuración | Qué hace |
|---|---|
| Tipo de campo | Elige el tipo de entrada: nombre, correo electrónico, teléfono, texto u otros tipos soportados. |
| Etiqueta | La pregunta o nombre del campo visible (por ejemplo, Correo electrónico). |
| Placeholder | Texto de ayuda dentro del campo antes de que el visitante escriba. |
| Valor predeterminado | Prellena el campo cuando la página carga. |
| Obligatorio | Bloquea el envío hasta que el campo esté completado. |
| Visibilidad | Muestra u oculta el campo cuando la lógica condicional está disponible. |
| Visibilidad de la etiqueta | Muestra u oculta la etiqueta manteniendo el campo de entrada visible. |
| Validación | Aplica reglas como formato válido de correo electrónico o teléfono. |
| ID del componente | ID interno usado para integraciones, seguimiento o soporte. |
Campos de teléfono
Cuando agregas un campo de teléfono, también puedes ver:
- Selector de país — Permite que los visitantes elijan un código de país.
- Detectar país automáticamente — Identifica el país del visitante cuando está soportado.
- Países predeterminados / permitidos / preferidos — Controla qué países aparecen en el selector.
Usa validación de teléfono cuando tu equipo de ventas necesita un número en formato marcable.
Orden de los campos
Reordena los campos arrastrándolos en la lista de campos. Coloca los campos de mayor fricción al final y mantén los campos obligatorios al mínimo.
Consejo: Los formularios cortos suelen convertir mejor. Agrega solo los campos que tu proceso de seguimiento realmente utiliza.
Paso 4: Configurar el Botón de Envío
| Configuración | Qué hace |
|---|---|
| Texto del botón | La etiqueta del CTA que los visitantes hacen clic para enviar (por ejemplo, Obtener acceso, Registrarse, Enviar). |
| Comportamiento de destino | Controla qué sucede al hacer clic—normalmente el envío del formulario en la misma página. |
| Comportamiento de éxito | Lo que los visitantes ven después de un envío exitoso: mensaje, redirección o siguiente paso cuando está configurado. |
| Comportamiento de error | Retroalimentación cuando la validación falla o ocurren errores de envío. |
Usa un texto de botón que explique el resultado. Registrarse en el webinar convierte mejor que un genérico Enviar.
Paso 5: Conectar un Autoresponder (Opcional)
Usa Autoresponder cuando los envíos también deben ir a una herramienta de email marketing o CRM.
| Configuración | Qué hace |
|---|---|
| Autoresponder | Selecciona el proveedor (solo aparecen proveedores conectados). |
| Cuenta | Elige qué cuenta conectada usar. |
| Tipo | Tipo de destino como lista, formulario o contacto—depende del proveedor. |
| Lista o formulario | La lista o formulario externo que recibe el lead. |
| Tags | Tags aplicadas al contacto cuando el proveedor las soporta. |
| Mapeo de campos | Mapea los campos de Atomicat a los campos del proveedor. El mapeo de correo electrónico es obligatorio para muchos destinos de lista. |
| Leads abandonados | Envía datos parciales cuando un visitante comienza pero no termina el formulario. |
Después de mapear los campos, guarda la página y envía un envío de prueba desde la URL publicada. Confirma que el contacto aparece en la herramienta externa con los datos correctos.
Paso 6: Conectar un Webhook (Opcional)
Los webhooks envían datos de envío a una URL externa en tiempo real.
| Configuración | Qué hace |
|---|---|
| Nombre del webhook | Etiqueta interna para tu equipo. |
| URL del webhook | Endpoint que recibe el payload. |
| Descripción | Nota opcional sobre la integración. |
| Enviar leads abandonados | Envía envíos incompletos cuando está habilitado. |
| Historial del webhook | Muestra estado de entrega, respuesta, intentos y estado de reintento. |
| Reenviar webhook | Reenvía un payload anterior cuando está soportado. |
Consulta Conectar un formulario a un webhook y Google Sheets para guías de configuración extendidas.
Paso 7: Ajustar el Layout (Principales Opciones de Estilo)
No necesitas estilizar cada color para lanzar. Enfócate en estas configuraciones de layout primero:
| Área | Qué verificar |
|---|---|
| Layout de los campos | Espaciado entre campos, ancho de los campos y comportamiento de columnas en desktop vs mobile. |
| Ancho del contenedor del formulario | Si el formulario ocupa el ancho total o una columna más estrecha. |
| Altura y padding de los inputs | Legibilidad en mobile—los campos deben ser fáciles de tocar. |
| Ancho del botón | Botones de ancho total suelen rendir mejor en landing pages mobile. |
Previsualiza en mobile después de cambiar el layout de los campos. Inputs apretados son una razón común de abandono de formulario.
Paso 8: Guardar, Publicar y Probar
- Haz clic en Save en el builder.
- Publica la página en tu sitio o dominio. Consulta Publicar una página.
- Abre la URL en vivo en una ventana de incógnito.
- Envía el formulario con datos de prueba realistas.
- Abre Leads y confirma que el envío aparece. Consulta Leads de formulario.
Checklist de pruebas
- Deja campos obligatorios vacíos y confirma que aparecen los mensajes de validación.
- Prueba formatos inválidos de correo electrónico o teléfono si la validación está habilitada.
- Confirma que el mensaje de éxito o redirección funciona.
- Verifica la entrega del autoresponder o webhook si están conectados.
- Prueba en un dispositivo mobile.
Solución de Problemas
| Problema | Qué verificar |
|---|---|
| El formulario no envía | Campos obligatorios, reglas de validación y que la página fue guardada. |
| Lead ausente en Atomicat | La página fue publicada; probaste la URL en vivo correcta. |
| El autoresponder no recibió el lead | Proveedor, cuenta, lista, tags y especialmente el mapeo de campos. |
| Webhook falló | URL correcta, endpoint activo, revisa el historial del webhook. |
| Layout roto en mobile | Ancho de los campos, espaciados y ancho del botón en el breakpoint mobile. |
Resultado
Después de completar este flujo de trabajo, tu página captura información de visitantes a través del elemento Formulario. Los envíos aparecen en Leads y pueden fluir a autoresponders, webhooks o Google Sheets cuando están configurados.
Documentación Relacionada
- Referencia del elemento Formulario
- Leads de formulario
- Webhooks de formulario
- Visión general de Leads
- Publicar una página
FAQ
¿Cuántos campos debo agregar a un formulario de landing page?
Agrega solo lo que tu seguimiento necesita—a menudo nombre y correo electrónico, a veces teléfono o una pregunta calificadora. Los formularios más cortos suelen convertir mejor, especialmente en mobile.
¿A dónde van los envíos del formulario?
Los envíos publicados aparecen en Leads cuando el formulario está configurado correctamente. También puedes enviar datos a autoresponders, webhooks o Google Sheets cuando esas conexiones están configuradas.
¿Necesito publicar antes de probar?
Sí. Prueba en la URL en vivo publicada en una ventana de incógnito. Los guardados de borrador en el builder no envían leads reales a integraciones de producción.
¿Por qué es importante el mapeo de campos del autoresponder?
Las herramientas externas necesitan que los campos de Atomicat se mapeen a sus campos de destino. Si el correo electrónico no está mapeado correctamente, los contactos pueden crearse con datos faltantes o incorrectos.
¿Puedo capturar datos abandonados o parciales del formulario?
Sí, cuando leads abandonados está habilitado en la configuración de autoresponder o webhook. Usa esto solo si tu proceso de seguimiento está diseñado para manejar envíos incompletos.