Centro de ayuda
Funciones de chat

Formularios personalizados

Última actualización:

Los formularios personalizados te permiten crear tus propios formularios de varios pasos y usarlos en lugar de los formularios integrados de captación de leads (Lead Collection) o de contacto humano (Human Contact Form). Tú eliges los campos, el mensaje de agradecimiento y el botón de envío; luego, vinculas el formulario a la sección donde quieras que se muestre.

Dónde encontrar los formularios

Selecciona tu chatbot y ve a Settings > Forms (Ajustes > Formularios). En esta página se listan tus formularios personalizados guardados. Si todavía no has creado ninguno, muestra "No custom forms yet" (Aún no hay formularios personalizados) con el botón Create your first form (Crea tu primer formulario). Los formularios personalizados están disponibles como una función premium - aparecerá un aviso para mejorar el plan si tu plan no los incluye.

Crear un formulario

Haz clic en New form (Nuevo formulario) - o en Create your first form si la lista todavía está vacía - para abrir el creador de formularios.

Settings > Forms con el botón New form destacado

Diseña el formulario

El creador tiene todo lo necesario para definir el formulario en una sola pantalla, con una vista previa en vivo a la derecha. Para una pizzería, podrías recopilar los datos de contacto en el primer paso y las preferencias del pedido en el segundo.

El creador de formularios personalizados

  • Form name (Nombre del formulario) - un nombre interno para que puedas identificar el formulario más adelante en los menús desplegables.
  • Thank-you message (Mensaje de agradecimiento) - el texto de confirmación que se muestra después de que un visitante envía el formulario.
  • Submit button (Botón de envío) - define el texto del botón, elige un icono opcional y selecciona su color.
  • Pestañas Build (Diseño) y Custom CSS (CSS personalizado) - diseña los campos de forma visual o cambia a Custom CSS para aplicar tus propios estilos.

Añade campos

En la pestaña Build, asigna un título opcional al paso y luego haz clic en el botón de un tipo de campo para añadirlo. Un formulario admite hasta 10 pasos, 50 campos en total y 3 campos de subida de archivos. Los campos de selección admiten hasta 100 opciones cada uno.

Los botones de tipos de campo resaltados en el creador de formularios

  • Name (Nombre) - un campo de una sola línea para el nombre del visitante.
  • Email (Correo electrónico) - captura una dirección de correo electrónico, validada como tal.
  • Phone number (Número de teléfono) - captura un número de teléfono.
  • Date (Fecha) - un selector de fecha.
  • Time (Hora) - un selector de hora.
  • File upload (Subida de archivo) - permite al visitante adjuntar y subir un archivo (consulta más abajo).
  • Short answer (Respuesta corta) - un campo de texto libre de una sola línea.
  • Long answer (Respuesta larga) - un campo más amplio de varias líneas para respuestas más extensas.
  • Checkbox (Casilla de verificación) - una sola casilla para marcar, por ejemplo para aceptar términos.
  • Dropdown (Menú desplegable) - un menú donde el visitante elige una opción de una lista.
  • Single choice (Opción única) - un conjunto de opciones donde el visitante elige exactamente una.
  • Multiple choice (Opción múltiple) - un conjunto de opciones donde el visitante puede marcar varias a la vez.

Cada campo tiene un Label (Etiqueta, lo que ve el visitante) y un Name (Nombre, la clave interna utilizada en exportaciones y notificaciones). Puedes marcar un campo como Required (Obligatorio), definir su Width (Ancho) para que los campos queden uno al lado del otro, y arrastrar los campos para reordenarlos. Los campos de Dropdown, Single choice y Multiple choice también admiten una lista de opciones, una por línea.

Añade pasos

Para formularios más largos, divide los campos en pasos en lugar de usar una sola pantalla extensa. Haz clic en Add step (Añadir paso) y luego añade campos a ese paso. Al arrastrar, reordenas los campos dentro de un paso. Cada paso es su propia tarjeta con un título opcional.

Los visitantes ven cada paso como una pantalla independiente en el chat y se desplazan entre ellos con los botones Next (Siguiente) y Previous (Anterior), que aparecen automáticamente cuando un formulario tiene más de un paso. Si el formulario tiene varios pasos, el creador también te permite configurar el texto, el icono y el color de los botones Next y Previous.

Asigna a cada paso un título breve y orientado a la acción (por ejemplo, "Tus datos" y luego "Tu solicitud") para que los visitantes sepan siempre en qué parte del formulario se encuentran.

Campos de subida de archivos

Un campo File upload permite al visitante adjuntar un archivo a su envío. Para cada campo de archivo puedes configurar:

  • Accepted extensions (Extensiones aceptadas) - una lista separada por comas, por ejemplo pdf, png, jpg. Solo se permiten archivos con estas extensiones.
  • Max size (Tamaño máximo) - el tamaño máximo del archivo en MB, hasta 10 MB.

Las subidas se comprueban en el momento del envío: la extensión debe estar en tu lista de permitidas, el archivo debe cumplir con el límite de tamaño y su contenido real debe coincidir con el tipo declarado.

Vista previa en vivo

El panel Live preview (Vista previa en vivo) a la derecha muestra el formulario exactamente como lo verán los visitantes, actualizándose a medida que añades campos, agregas pasos y cambias el estilo.

Cuando el formulario esté listo, haz clic en Save (Guardar). El formulario aparecerá ahora en tu lista bajo Settings > Forms (Ajustes > Formularios).

Usar un formulario personalizado

Un formulario personalizado guardado no se muestra a los visitantes por sí solo. Vincúlalo a una sección:

  • Settings > Lead Collection (Ajustes > Captación de leads) - abre el desplegable Form shown to the visitor (Formulario mostrado al visitante) y selecciona tu formulario personalizado en lugar del formulario integrado.
  • Settings > Human Contact Form (Ajustes > Formulario de contacto humano) - abre el desplegable Form shown to the visitor (Formulario mostrado al visitante) y selecciona tu formulario personalizado en lugar del formulario integrado.

El visitante verá tu formulario personalizado siempre que se active esa sección.

Activa primero la sección elegida. Lead Collection muestra los formularios que contienen un campo de Name (Nombre) y un campo de Email (Correo electrónico) o Phone number (Número de teléfono). Human Contact Form muestra los formularios que contienen un campo de Email (Correo electrónico); su primer campo de Long answer (Respuesta larga) proporciona el mensaje de soporte. Consulta Captación de leads y Formulario de contacto con soporte humano para conocer los activadores y los ajustes de notificación.

También puedes ofrecer un formulario de forma independiente a través de Settings > Actions > Add action for custom form (Ajustes > Acciones > Añadir acción para formulario personalizado). Configura cuándo debe mostrarlo la IA; guardar un formulario por sí solo no activa ninguna acción.

Cómo lo ve el visitante

Míralo en una conversación

Recopilar una solicitud estructurada

Crea un formulario y vincúlalo a una función o acción compatible. Los valores de ejemplo están rellenados previamente; la demostración no envía una solicitud real ni confirma una reserva.

Ejemplo de ChatLabConversación ilustrativa

Visitante: Me gustaría reservar una mesa para el viernes.

Reproduce el ejemplo o léelo abajo. No se utilizan datos reales de clientes.
1 / 5

Una solicitud pertinente activa el formulario configurado.

La reproducción se pausa cuando este ejemplo sale de la pantalla. Esto es una simulación, no un chat en vivo. Los controles del widget dentro de la reproducción no son interactivos.
Leer el ejemplo completo
  1. Una solicitud pertinente activa el formulario configurado.

    Visitante: Me gustaría reservar una mesa para el viernes.

  2. Primero, el visitante completa sus datos de contacto.

    Nombre: Anna Weber; Correo electrónico: anna@example.com

  3. Siguiente avanza a las preferencias de la solicitud; Atrás regresa a los datos de contacto.

    Hora preferida: Viernes, 19:00; Número de comensales: 4

  4. Valores de ejemplo recopilados por el formulario.

    Nombre: Anna Weber; Correo electrónico: anna@example.com; Hora preferida: Viernes, 19:00; Número de comensales: 4

  5. Una solicitud recibida no es una reserva confirmada.

    Asistente: Hemos recibido tu solicitud. El equipo confirmará la disponibilidad.

El formulario aparece dentro de la ventana de chat. La animación muestra una solicitud de mesa con datos de contacto, seguida de las preferencias de la solicitud. Las capturas de pantalla estáticas que aparecen a continuación muestran otra consulta para un pedido de pizza: el visitante primero completa Your details (Tus datos) y luego pasa al siguiente paso.

Ver la captura de pantalla estática

Paso Your details de un formulario personalizado en el widget de chat|width=40

El paso 2, Order preferences (Preferencias del pedido), muestra un desplegable Preferred pizza (Pizza preferida) y Additional notes (Notas adicionales). El visitante puede volver con Back (Atrás) o enviar con Send request (Enviar solicitud). Estas son las etiquetas de los botones configuradas para este ejemplo; tu formulario utiliza las etiquetas que elijas en el creador. Tras el envío, aparece en el chat el mensaje de agradecimiento configurado. Este ejemplo no incluye un campo para subir archivos.

Ver la captura de pantalla estática

Paso Order preferences con Preferred pizza, Additional notes, Back y Send request|width=40

Consulta los envíos en la pestaña Leads

Cuando un visitante envía un formulario personalizado vinculado a Lead Collection o al Human Contact Form (formulario de contacto humano), el envío se guarda como lead. Abre la pestaña Leads del bot para revisarlo.

Junto a los datos estándar de Name, Email, Phone, Collected date y Entry point, la columna Form data (Datos del formulario) muestra el envío completo: la etiqueta de cada campo seguida del valor que introdujo el visitante, en una línea por campo. En el caso de un campo File upload (Subida de archivos), se muestra el nombre del archivo subido; tanto el correo de notificación de leads como la exportación en CSV (el botón Export [Exportar] en la pestaña Leads) incluyen un enlace de descarga al propio archivo.

Envío de un formulario personalizado mostrado en la pestaña Leads

Desde cada lead también puedes hacer clic para ir a la Conversation (Conversación) completa y ver el chat relacionado con el envío.

Prueba el activador seleccionado en Overview (Resumen), completa todos los pasos y envía el formulario. Confirma el mensaje de agradecimiento y comprueba el envío guardado. Si las notificaciones están activadas, prueba su entrega con una dirección que controles. Los formularios de acción independientes se registran en la conversación; no des por sentado que cada envío independiente crea un lead.

Artículos relacionados