Formularios

Importante: Los formularios en ZappWay son herramientas flexibles de recopilación de datos que pueden integrarse en su sitio web, compartirse como páginas independientes o integrarse con sus empleados de IA para la calificación automatizada de clientes potenciales y atención al cliente.

​

🔢 Tabla de contenidos

1. What are Forms?
2. Creating Your First Form
3. Form Templates
4. Adding Form Fields
5. Configuring Start and End Screens
6. Publishing Your Form
7. Embedding Forms
8. Form Submissions
9. Best Practices

​

1. ¿Qué son los formularios?

​

Descripción general

• Múltiples tipos de formularios: formularios tradicionales, formularios conversacionales y formularios impulsados por IA
• Plantillas inteligentes: plantillas prediseñadas para casos de uso comunes
• Integración de IA: conecte formularios a empleados de IA para obtener respuestas automatizadas
• Cargas de archivos: acepte documentos, imágenes y otros archivos
• Calificación de clientes potenciales: califique y enrute clientes potenciales automáticamente según las respuestas
• Marca personalizada: combine su marca con un estilo personalizable
• Multilingüe: soporte para múltiples idiomas listo para usar
• Integración de Webhook: envía datos del formulario a sistemas externos

​

Casos de uso comunes

• Envío de tickets de soporte
• Informes de errores
• Solicitudes de funciones
• Asistencia de cuenta

• Formularios de contacto
• Solicitudes de demostración
• Solicitudes de cotización
• Reservas de consultas

• Comentarios sobre el producto
• Encuestas de satisfacción del cliente
• Comentarios de los empleados
• Registros de eventos

• Incorporación de nuevos clientes.
• Incorporación de empleados
• Registro de socios
• Configuración de cuenta

​

2. Creando tu primer formulario

​

Inicio rápido

1. Navigate to Forms in the sidebar (or visit /forms)
2. Click “Create Form” button
3. Choose a template or start from scratch
4. Configure form settings:
   • Name: Internal name for the form
   • Type: Traditional or conversational
   • Template: Select a pre-built template (optional)
5. Click “Create”

​

Tipos de formulario

• Formularios web estándar con todos los campos visibles a la vez
• Ideal para: recopilación de datos sencilla, formularios de contacto, registro
• Experiencia de usuario: complete todos los campos y envíe

• Una pregunta a la vez, interfaz tipo chat
• Ideal para: encuestas, cuestionarios detallados, experiencias interesantes
• Experiencia de Usuario: Responde preguntas paso a paso

​

Configuración inicial

1. Form Settings Panel (left): Configure fields and screens
2. Live Preview (right): See changes in real-time
3. Top Bar: Template selector and publish button

​

3. Plantillas de formulario

​

Plantillas disponibles

​

Desde cero

• Plantilla vacía para una personalización completa
• Sin campos preconfigurados
• Construye exactamente lo que necesitas

​

Formulario de cliente potencial

• Campo de nombre
• Campo de correo electrónico
• Campo de empresa
• Área de texto del mensaje
• Perfecto para: captura general de clientes potenciales

​

Contactar con Ventas

• Nombre, correo electrónico, empresa
• Número de teléfono
• Selección de departamento
• Selección del tipo de consulta
• Perfecto para: consultas de ventas B2B

​

Comentarios sobre el producto

• Nombre y correo electrónico
• Selección de productos
• Campo de calificación
• Área de texto de comentarios
• Perfecto para: recopilar comentarios sobre productos

​

Formulario de incorporación

• Campos de información personal
• Selección de rol/departamento
• Preferencias
• Perfecto para: incorporación de nuevos usuarios

​

Cliente potencial entrante

• Datos de contacto
• Fuente principal
• Rango de presupuesto
• Selección de línea de tiempo
• Perfecto para: clientes potenciales de ventas calificados

​

Comentarios

• Campo de calificación
• Descripción de la experiencia
• Sugerencias de mejora
• Perfecto para: recopilación de comentarios generales

​

Seleccionar una plantilla

1. Open the Template Selector dropdown (top of settings panel)
2. Browse available templates
3. Click to select
4. Fields are automatically populated
5. Customize as needed

• Puedes cambiar de plantilla en cualquier momento.
• Los campos personalizados existentes se conservan cuando sea posible
• Los campos de plantilla reemplazan los campos de plantilla anteriores

​

4. Agregar campos de formulario

​

Tipos de campo

• Texto corto: entrada de texto de una sola línea
  • Usar para: Nombres, títulos, respuestas cortas
  • Opciones: marcador de posición, requerido, longitud mínima/máxima
• Texto largo (área de texto): entrada de texto de varias líneas
  • Usar para: mensajes, descripciones y comentarios detallados
  • Opciones: marcador de posición, requerido, longitud mínima/máxima, filas
• Correo electrónico: entrada de dirección de correo electrónico con validación
  • Usar para: Información de contacto
  • Opciones: Requerido, crear contacto automáticamente
  • Validación: garantiza un formato de correo electrónico válido
• Número de teléfono: entrada del número de teléfono con código de país
  • Usar para: Información de contacto
  • Opciones: código de país predeterminado, obligatorio, crear contacto
  • Formato: formato de número de teléfono internacional

• Seleccionar (desplegable): elija una opción de una lista
  • Uso para: Categorías, departamentos, selección de productos.
  • Opciones: opciones personalizadas, obligatorias, marcador de posición
• Opción múltiple: seleccione múltiples opciones
  • Usar para: selección de intereses, preferencias de funciones
  • Opciones: múltiples selecciones, requeridas

• Carga de archivos: aceptar archivos adjuntos
  • Uso para: Documentos, imágenes, currículums.
  • Opciones: restricciones de tipo de archivo, límites de tamaño, obligatorio
  • Compatible: PDF, imágenes, documentos, hojas de cálculo
• Número: Entrada numérica
  • Usar para: Edad, cantidad, calificaciones
  • Opciones: Valores mínimos/máximos, requeridos

​

Agregar campos

1. Scroll to “Form Fields” accordion
2. Click “Add Field” dropdown at bottom
3. Select field type from list
4. New field appears in the list
5. Click field to expand and configure

• Etiqueta: el nombre de la pregunta o del campo que se muestra a los usuarios.
• Marcador de posición: texto auxiliar dentro de la entrada
• Obligatorio: marcar el campo como obligatorio
• Opciones: configuraciones específicas del tipo (varía según el tipo de campo)

​

Reordenar campos

1. Click and hold the drag handle (⋮⋮) on the left of any field
2. Drag field up or down
3. Drop in desired position
4. Order is updated automatically

​

Eliminando campos

1. Expand field by clicking on it
2. Click Delete button (trash icon) on the right
3. Field is removed immediately
4. Cannot be undone

​

5. Configurar las pantallas de inicio y fin

​

Pantalla de inicio

• Los usuarios de titulares principales ven primero
• Ejemplo: “Contacte con nuestro equipo de ventas”
• Mantenlo claro y orientado a la acción.

• Texto de respaldo que explica el propósito del formulario.
• Ejemplo: “Complete este formulario y nuestro equipo se comunicará con usted dentro de las 24 horas”
• Incluya cualquier información importante que los usuarios necesiten saber.

• Texto del botón para iniciar la conversación.
• Ejemplo: “Comenzar”, “Comenzar”, “Iniciar”

• “Obtenga una cotización gratuita” → “Cuéntenos sobre su proyecto y reciba una cotización personalizada dentro de 1 día hábil”
• “Reportar un error” → “¡Ayúdanos a mejorar! Describe el problema que encontraste y nuestro equipo lo investigará”.
• “Programe una demostración” → “Vea ZappWay en acción. Complete este formulario para reservar su demostración personalizada”

• Títulos vagos como “Formulario” o “Enviar”
• Demasiado texto que los usuarios no leerán
• No hay explicación de lo que sucede después del envío.

​

Pantalla final

• Texto de confirmación agradeciendo al usuario.
• Ejemplo: “¡Gracias! Se ha recibido su envío”.
• Asegurar a los usuarios que su información fue capturada

• Etiqueta: texto del botón para la siguiente acción
  • Ejemplo: “Visita Nuestro Blog”, “Regresar a Casa”, “Ver Precios”
• URL: donde enlaza el botón
  • Puede ser una URL interna o externa
• Destino: Cómo se abre el enlace
  • _blank: Nueva pestaña (enlaces externos)
  • _self: Misma pestaña (navegación interna)

• “¡Gracias por comunicarte! Responderemos dentro de 24 horas” + [Explore nuestros recursos]
• “Su ticket ha sido enviado. ¡Estamos en ello!” + [Verificar estado]
• “¡Formulario enviado correctamente! Consulte su correo electrónico para conocer los próximos pasos” + [Volver a la página de inicio]

• “Gracias” genérico sin próximos pasos
• Dejando a los usuarios preguntándose qué pasará después.
• Enlaces CTA rotos o irrelevantes

​

6. Publicar su formulario

​

Antes de publicar

• [] Todos los campos están configurados correctamente
• [] Los campos obligatorios están marcados adecuadamente
• [] El título y la descripción de la pantalla de inicio son claros
• [] La pantalla final proporciona los siguientes pasos
• [] Formulario de prueba completándolo en la vista previa
• Webhook configurado (si se utilizan sistemas externos)

​

Proceso de publicación

1. Review your changes in the Live Preview panel
2. Click “Publish Updates” button (top of settings panel)
3. Wait for confirmation toast: “Form published successfully”
4. Form is now live and accessible via public URL

• El borrador de la configuración se convierte en la versión publicada.
• La URL del formulario público se actualiza con los últimos cambios.
• Los formularios incrustados existentes se actualizan automáticamente
• Los envíos anteriores permanecen sin cambios.

​

URL del formulario

• Compartir directamente: enviar enlace por correo electrónico, chat o redes sociales
• Código QR: genera código QR para materiales físicos
• Incrustar: utilizar como fuente de iframe o integrar con código de inserción

1. Look for the public URL in the preview panel (appears after first publish)
2. Click the Copy button next to the URL
3. Paste wherever needed

​

7. Incrustar formularios

​

Formulario alojado (sin código)

• Se necesita una configuración rápida
• No hay recursos técnicos disponibles
• Prueba de formularios antes de la integración personalizada.

1. Publish your form
2. Copy the public URL
3. Share link directly or create a button that links to it

• No se requiere código
• Siempre actualizado
• Móvil responsivo

• Redirige a los usuarios fuera de su sitio
• Personalización de estilo limitada

​

Insertar widget (código bajo)

• Quiere formulario en su sitio web sin redireccionamiento
• Necesita una integración perfecta
• Tener acceso HTML básico

1. Navigate to Widgets → Form → Standard Widget
2. Copy the embed code:

<script src="https://cdn.zappway.ai/form-widget.js"></script>
<div data-zappway-form="YOUR_FORM_ID"></div>

3. Paste code where you want the form to appear
4. Replace YOUR_FORM_ID with your actual form ID

​

Uso con Chatbot

• Quiere que AI califique clientes potenciales antes de mostrar el formulario
• Necesita visualización de formulario contextual
• Construir experiencias conversacionales.

• Guía de formulario con Chatbot

​

8. Envíos de formularios

​

Ver envíos

• Fecha de envío: cuando se envió el formulario
• Correo electrónico del usuario: si se proporciona en el formulario
• Estado: Nuevo, En progreso, Resuelto
• Vista previa: vista rápida de las respuestas

• Todas las respuestas de campo.
• Marca de tiempo de envío
• Información del usuario (si se captura)
• Cualquier archivo adjunto
• Conversación asociada (si el empleado de AI está conectado)

​

Gestión de envíos

1. Open submission details
2. Click “Mark as Resolved”
3. Submission moves to resolved status

1. Go to Submissions tab
2. Click “Export” button
3. Choose format (CSV, Excel)
4. Download file with all data

• Por rango de fechas
• Por estado (Nuevo, En curso, Resuelto)
• Por valores de campo específicos
• Búsqueda por palabras clave

​

Integración de webhook

1. In form editor, open “Webhook” accordion
2. Enter webhook URL
3. Form data is posted to this URL on each submission

• Enviar a CRM (Salesforce, HubSpot)
• Activar notificaciones por correo electrónico
• Actualizar bases de datos
• Iniciar flujos de trabajo de automatización

​

9. Mejores prácticas

​

Diseño de formulario

• Haga solo las preguntas esenciales
• 3-5 campos para captura de clientes potenciales
• 5-10 campos para formularios detallados

• Formularios largos con campos innecesarios.
• Solicitar información que ya tienes.
• Varias páginas a menos que sea necesario

• “¿Cuál es tu dirección de correo electrónico?”
• “Nombre de la empresa”
• “¿Cómo podemos ayudarte?”

• “Entrada” o “Campo 1”
• Jerga técnica
• Preguntas ambiguas

1. Start with easy questions (name, email)
2. Build to more complex questions
3. End with optional fields
4. Put required fields first

​

Experiencia de usuario

• Explique cuánto tiempo lleva el formulario (por ejemplo, “2 minutos para completarse”)
• Indique qué sucede después de la presentación.
• Proporcionar garantía de privacidad si se recopilan datos confidenciales

• Utilice mensajes de validación claros
• Resalte qué campos necesitan corrección
• Explique por qué el campo no es válido (no solo “Error”)

• Prueba en dispositivos móviles
• Asegúrese de que los campos sean fáciles de tocar
• Utilice tipos de entrada apropiados (tel para teléfono, correo electrónico para correo electrónico)
• Evite textos pequeños o botones

​

Actuación

• Minimizar el número de campos inicialmente visibles
• Utilice lógica condicional para mostrar/ocultar campos
• Optimice los límites de tamaño de carga de archivos

• Mostrar un estado de carga claro durante el envío
• Mostrar mensaje de éxito inmediatamente
• No recargar la página innecesariamente

​

Seguridad y privacidad

• Recopile sólo los datos que realmente necesita
• Indique cómo se utilizarán los datos en la pantalla de inicio.
• Cumplir con GDPR/regulaciones de privacidad
• Utilice HTTPS para todas las páginas del formulario

• Considere agregar reCAPTCHA para formularios públicos
• Supervisar envíos duplicados
• Establecer límites de tarifas razonables

​

Pruebas

• [] Complete el formulario usted mismo por completo
• [] Prueba de validación del campo requerido
• [] Envíe el formulario y verifique que los datos aparezcan correctamente
• [] Prueba en dispositivo móvil
• [] Verificar que el webhook entregue datos (si está configurado)
• [] Verifique que el enlace CTA de la pantalla final funcione

​

📞 Soporte y recursos

​

Obteniendo ayuda

• Botón de ayuda en el tablero
• Chat en vivo (disponible en planes Pro+)

• Referencia de campos de formulario
• Documentación del widget de formulario
• Guía de formularios alojados
• Integración de Chatbot

​

Comentario

• Usar el botón de comentarios en el tablero
• Correo electrónico: support@zappway.ai
• Incluye:
  • Identificación del formulario
  • Pasos para reproducir el problema
  • Comportamiento esperado versus real

​

✅ Referencia rápida

​

Acciones esenciales

​

Guía rápida de tipos de campos