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 del Lead Collection o el Human Contact Form integrados. 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

Ve a Settings > Forms (Configuración > Formularios). Esta página muestra tus formularios personalizados guardados. Si aún no has creado ninguno, verás el mensaje "No custom forms yet" junto con el botón Create your first form (Crea tu primer formulario).

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ñar el formulario

El creador incluye todo lo necesario para definir el formulario en una sola pantalla, con una vista previa en tiempo real a la derecha. En este artículo creamos un formulario de ejemplo de "Solicitud de catering" para una pizzería: el paso 1 recopila los datos de contacto y el paso 2 pregunta sobre el evento.

El creador de formularios personalizados

  • Form name (Nombre del formulario) - un nombre interno para 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 el 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 (Crear) y Custom CSS (CSS personalizado) - diseña los campos de forma visual o cambia a Custom CSS para aplicar tus propios estilos.

Añadir campos

En la pestaña Build, asigna un título opcional al paso y luego haz clic en el botón del tipo de campo que quieras añadir. Puedes agregar tantos campos como necesites y combinar cualquiera de los siguientes tipos en un solo formulario:

Los botones de tipos de campo destacados 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 con formato de email.
  • 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 archivos) - permite al visitante adjuntar y subir un archivo (ver más abajo).
  • Short answer (Respuesta corta) - un campo de texto libre de una sola línea.
  • Long answer (Respuesta larga) - un campo multilínea más amplio para respuestas más extensas.
  • Checkbox (Casilla de verificación) - una sola casilla para marcar, por ejemplo para aceptar términos y condiciones.
  • Dropdown (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 una 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), ajustar su Width (Ancho) para que los campos aparezcan uno al lado del otro, y arrastrar los campos para reordenarlos. Los campos de tipo Dropdown, Single choice y Multiple choice también admiten una lista de opciones, una por línea.

Añadir pasos

En formularios más largos, divide los campos en pasos en lugar de mostrar una sola pantalla extensa. Haz clic en Add step (Añadir paso) para agregar otro paso y luego arrastra o añade campos en él. 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 de forma automática en cuanto un formulario tiene más de un paso. Cuando un formulario consta de 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 siempre sepan en qué parte del formulario se encuentran.

Campos de subida de archivos

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

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

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

Vista previa en tiempo real

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

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

Usar un formulario personalizado

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

  • Settings > Lead Collection - abre el menú desplegable Form shown to the visitor (Formulario mostrado al visitante) y selecciona tu formulario personalizado en lugar del formulario integrado.
  • Settings > Human Contact Form - abre el menú desplegable Form shown to the visitor y selecciona tu formulario personalizado en lugar del formulario integrado.

A partir de ese momento, el visitante verá tu formulario personalizado cada vez que se active esa sección.

Cómo lo ve el visitante

El formulario aparece dentro de la ventana de chat. Aquí tienes el ejemplo del formulario de "Solicitud de catering" vinculado a Lead Collection: el visitante ve el paso 1 con los campos de contacto y avanza con el botón Next.

Paso 1 de un formulario personalizado mostrado en el widget de chat|width=60

El paso 2 muestra los campos del evento, incluyendo el Dropdown, la Long answer y el campo de File upload. El visitante puede retroceder con Previous o enviar el formulario con Submit (Enviar). Tras el envío, el mensaje de agradecimiento configurado en el creador se muestra en el chat.

Paso 2 de un formulario personalizado con un menú desplegable, respuesta larga y campo de subida de archivos|width=60

Ver 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, el envío se guarda como un lead. Abre la pestaña Leads (Leads) del bot para revisarlo.

Junto a los campos habituales 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 introducido por el visitante, a razón de una línea por campo. En el caso de un campo de File upload, se muestra el nombre del archivo subido; tanto el correo electrónico de notificación del lead como la exportación en CSV (a través del botón Export de la pestaña Leads) incluyen un enlace de descarga al propio archivo.

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

Desde cada lead también puedes hacer clic para acceder a la Conversation (Conversación) completa y revisar el chat generado en torno al envío.