Saltar al contenido

Capítulo 5 de 11

Formularios

Recoger los datos de quien te escribe y saber dónde acaban.

  • 29 min de lectura
  • 23 apartados
  • 24 capturas
  • Actualizado el 5 de octubre de 2026
En esta página
  1. 5.1Dónde está el panel de formularios
  2. 5.2Tus formularios
  3. 5.3Crear un formulario a mano
  4. 5.4Las preguntas: la etiqueta que ve el visitante y el nombre técnico
  5. 5.5Los ajustes: qué pasa después de que te envíen el formulario
  6. 5.6Crear un formulario con la inteligencia artificial
  7. 5.7Poner el formulario en una página de tu web
  8. 5.8Trabajar con los formularios sobre la propia página (modo Formularios)
  9. 5.9Editar un formulario y verlo cambiar en la página
  10. 5.10Plantillas: empezar con un formulario ya hecho
  11. 5.11Apariencia: el aspecto del formulario
  12. 5.12Formularios por pasos, preguntas que dependen de otras y columnas
  13. 5.13Código para pegar el formulario fuera de tu web
  14. 5.14Formularios que ya estaban en tu web
  15. 5.15Dos cosas que muerden en silencio
  16. 5.16Los mensajes que te han enviado
  17. 5.17El detalle de un mensaje
  18. 5.18Avisos: a qué correo llegan tus formularios
  19. 5.19El correo con el que se envían los avisos (SMTP)
  20. 5.20Enviar los contactos a tu CRM
  21. 5.21Conectar el CRM y emparejar los campos
  22. 5.22Cuidado con: lo que no se puede deshacer
  23. 5.23Si algo falla

Un formulario es el sitio donde tus visitantes te dejan sus datos: el «Escríbenos» de la página de contacto, el «Pide presupuesto», el «Apúntame al boletín». Speaksite te deja crearlos, ponerlos en tu web y leer cómodamente todo lo que te llega, sin salir del panel y sin tocar una línea de código.

Todo lo de este capítulo vive dentro del editor de tu proyecto, en los dos modos, Fácil y Avanzado.

5.1Dónde está el panel de formularios

Para qué sirveEs la puerta de entrada a todo lo demás: la lista de tus formularios, los mensajes recibidos, el correo de aviso y la conexión con tu CRM.

Cómo llegar

  1. En Mis Proyectos, pulsa Abrir Editor en la tarjeta de tu web.
  2. En la columna de iconos de la izquierda, busca el icono del portapapeles, justo debajo de Blog. Pásale el ratón por encima: pone «Formularios». Púlsalo.

En el móvil esa columna no se ve: pulsa el botón redondo de Herramientas, abajo a la derecha, y elige Formularios.

Está en los dos modos. El panel de Formularios sale igual en Fácil que en Avanzado: no hace falta tocar el interruptor de la cabecera para crear un formulario ni para leer lo que te llega por él.

El panel de formularios abierto en modo Fácil: fíjate arriba, el interruptor está en «Fácil». A la izquierda, la lista de tus formularios; a la derecha, tu web como la ve el visitante.
Figura 5.1El panel de formularios abierto en modo Fácil: fíjate arriba, el interruptor está en «Fácil». A la izquierda, la lista de tus formularios; a la derecha, tu web como la ve el visitante.

5.2Tus formularios

Para qué sirveVer de un vistazo todos los formularios de tu web, en qué estado están y cuánta gente te ha escrito por cada uno.

Qué hay en pantalla. Cada formulario es una tarjeta con:

  • El nombre que le has puesto («Contacto», «Encargo de tarta»).
  • Su dirección (/contacto), el número de preguntas que tiene y el número de Leads — que es como el panel llama a los mensajes recibidos.
  • Activo / Inactivo. Un formulario inactivo sigue en tu web pero deja de aceptar envíos. Sirve para cerrar temporalmente una promoción sin borrar nada.
  • Una línea en naranja que te dice en qué páginas está puesto. Si pone «Sin insertar en ninguna página todavía», el formulario existe pero ningún visitante puede verlo aún: te falta el paso de ponerlo en una página.

Debajo de cada tarjeta hay una fila de iconos. De izquierda a derecha: Editar, Vista previa (ver cómo le queda al visitante), Código HTML, Insertar con IA, Duplicar, Desactivar y Eliminar (la papelera roja).

Arriba del todo: el botón grande Crear formulario, y a su derecha dos botones pequeños, Generar con IA (la varita) y Detectar formularios (la lupa).

Cuidado con… la papelera. Al eliminar un formulario se van con él todos los mensajes que te habían llegado por ese formulario. Si solo quieres dejar de recibir, usa Desactivar, que se puede deshacer. Si el formulario está puesto en alguna página, el aviso de borrado te lo dice y te ofrece quitarlo también de esas páginas (viene marcado): si no, se quedaría en la web un formulario que ya no puede enviar nada.

5.3Crear un formulario a mano

Para qué sirveMontar el formulario pregunta a pregunta, cuando sabes exactamente qué quieres pedir.

Cómo llegarEn la lista, pulsa Crear formulario.

Qué hay en pantalla. Arriba, dos datos del formulario entero:

  • Nombre del formulario: para ti, para reconocerlo en la lista.
  • Slug: la dirección corta con la que el sistema lo identifica (contacto). Se escribe en minúsculas y sin espacios ni acentos.
Un formulario recién creado, todavía en blanco. Solo te pide el nombre y el slug: las preguntas se añaden una a una con «Agregar campo».
Figura 5.2Un formulario recién creado, todavía en blanco. Solo te pide el nombre y el slug: las preguntas se añaden una a una con «Agregar campo».

Un ejemplo de principio a fin: «quiero recoger peticiones de presupuesto»

  1. Pulsa Crear formulario.
  2. En Nombre del formulario escribe Pide tu presupuesto.
  3. En Slug escribe presupuesto.
  4. Pulsa + Agregar campo. Aparece una pregunta nueva.
  5. En Etiqueta escribe ¿Cuántos comensales sois?.
  6. Repite el paso 4 para el nombre, el correo y el teléfono.
  7. Baja hasta Configuración y escribe el mensaje de gracias.
  8. Pulsa Guardar, arriba a la derecha.
El mismo formulario a medio hacer: ya tiene nombre («Pide tu presupuesto»), dirección («presupuesto») y la primera pregunta escrita. Hasta que no pulses «Guardar», nada de esto se ha guardado.
Figura 5.3El mismo formulario a medio hacer: ya tiene nombre («Pide tu presupuesto»), dirección («presupuesto») y la primera pregunta escrita. Hasta que no pulses «Guardar», nada de esto se ha guardado.

Cuidado con… salirte sin guardar. Mientras estás montando el formulario nada está guardado: si cierras el panel o te vas a otra pestaña, lo pierdes.

Para editar uno que ya existe es la misma pantalla: pulsa Editar en su tarjeta. Arriba salen el nombre y la dirección, en medio las preguntas y abajo la Configuración. Se guarda con el botón Guardar de arriba a la derecha.

El formulario «Contacto» abierto para editar. Arriba su nombre y su dirección, debajo las preguntas una tras otra y, al final, la configuración con el mensaje de gracias.
Figura 5.4El formulario «Contacto» abierto para editar. Arriba su nombre y su dirección, debajo las preguntas una tras otra y, al final, la configuración con el mensaje de gracias.

5.4Las preguntas: la etiqueta que ve el visitante y el nombre técnico

Para qué sirveCada pregunta de tu formulario tiene dos nombres, y confundirlos es el error más común de esta pantalla.

Cómo llegarAbre un formulario con Editar y baja hasta Campos del formulario.

Qué hay en pantalla. Cada pregunta ocupa un bloque con:

  • Etiqueta: lo que lee el visitante encima de la casilla («Tu correo», «Teléfono»). Escríbelo en cristiano, con acentos y como se lo dirías a un cliente.
  • Nombre: el nombre técnico con el que llega el dato cuando lo recibes (email, telefono). Va en minúsculas, sin acentos ni espacios. Se genera solo a partir de la etiqueta: solo tienes que cambiarlo si tu CRM espera otro nombre concreto. En una pregunta que ya está guardada, cambiar la etiqueta no cambia el nombre: así los mensajes antiguos y los nuevos siguen juntos.
  • Tipo de campo: un desplegable con Texto, Email, Teléfono, Área de texto, Selector, Checkbox, Radio, Número, URL, Fecha, Archivo y Oculto. Elegir bien el tipo no es cosmético: si pones Email, el navegador no deja enviar una dirección mal escrita, y si pones Teléfono, el móvil saca el teclado numérico.
  • Placeholder: el texto gris de ejemplo que se ve dentro de la casilla vacía.
  • Obligatorio: si lo marcas, el visitante no puede enviar sin rellenarlo.

A la derecha de cada pregunta tienes las flechas Subir y Bajar para reordenarlas, Duplicar campo y Eliminar campo.

Las preguntas de un formulario. En cada bloque, arriba a la izquierda la «Etiqueta» (lo que ve el visitante) y a la derecha el «Nombre» técnico (cómo te llega el dato). Son cosas distintas: «Tu correo» / `email`.
Figura 5.5Las preguntas de un formulario. En cada bloque, arriba a la izquierda la «Etiqueta» (lo que ve el visitante) y a la derecha el «Nombre» técnico (cómo te llega el dato). Son cosas distintas: «Tu correo» / email.

Cuidado con… cambiar el Nombre de una pregunta de un formulario que ya está recibiendo mensajes. Los mensajes antiguos se guardaron con el nombre viejo y los nuevos llegarán con el nuevo: en la lista de recibidos verás la misma pregunta partida en dos. Si no tienes un motivo claro, deja el Nombre como está y cambia solo la Etiqueta — al visitante solo le afecta la Etiqueta.

Si eliges el tipo «Selector», «Radio» o «Checkbox» aparece una casilla más, Opciones (una por línea). Si la dejas vacía, el desplegable saldrá vacío en tu web y el visitante no podrá elegir nada; el panel te avisa en amarillo. Si quieres recibir un dato distinto del texto que lee el visitante, escribe la opción como Etiqueta | valor. Con pocas opciones, en la web salen como chips (botones redondeados) en vez de como lista.

Nota sobre las fotos de este apartado: el desplegable de «Tipo de campo» es de los que dibuja el propio sistema operativo, no la página. Por eso no hay una foto con la lista de tipos desplegada: no se puede fotografiar desde dentro del navegador. Los doce tipos son los que están enumerados arriba.

5.5Los ajustes: qué pasa después de que te envíen el formulario

Cómo llegarCon un formulario abierto, baja hasta Configuración.

Qué hay en pantalla

  • Mensaje de éxito. Lo que lee el visitante justo después de darle a enviar. Por defecto es un «¡Gracias! Hemos recibido tu mensaje.», pero gana mucho si lo personalizas y dices cuándo vas a contestar: «Gracias, te contestamos en cuanto salgamos del horno».
  • URL de redirección. Si en vez de un mensaje prefieres mandarlo a una página tuya de agradecimiento, pon aquí su dirección (/gracias). Si la rellenas, manda esto y no el mensaje de éxito.
  • Emails de notificación. Las direcciones que reciben un aviso cada vez que alguien te escribe, separadas por comas. Puedes poner varias (pedidos@…, obrador@…).
  • Protección anti-spam (honeypot). Déjala activada. Añade una casilla invisible que las personas no ven y los robots sí rellenan; cuando llega rellena, el envío se descarta. No molesta a tus visitantes.
  • Texto del botón de envío. «Enviar», «Pide tu presupuesto», «Apúntame».
Los ajustes de un formulario: el mensaje de gracias, la página de redirección, los correos que reciben el aviso y la protección anti-spam.
Figura 5.6Los ajustes de un formulario: el mensaje de gracias, la página de redirección, los correos que reciben el aviso y la protección anti-spam.
  • Tipo de visualización. Dos formas de enseñar el formulario:
    • En línea (inline): el formulario se ve dentro de la página, como una sección más. Es lo normal.
    • Pop-up / Modal: aparece flotando encima de la página. Al elegirlo se abre un bloque más de opciones: Disparador (al pasar unos segundos, al bajar un porcentaje de la página, al pulsar un botón, o cuando el visitante va a irse), el retraso, el ancho máximo, el color del fondo y cuántas horas no volver a enseñarlo a quien ya lo cerró.
Con «Pop-up / Modal» aparecen las opciones de la ventana emergente: cuándo salta, cuánto tarda y cuántas horas se queda callada si el visitante la cierra.
Figura 5.7Con «Pop-up / Modal» aparecen las opciones de la ventana emergente: cuándo salta, cuánto tarda y cuántas horas se queda callada si el visitante la cierra.

Cuidado con… las ventanas emergentes al entrar y sin retraso. Molestan, y Google penaliza a las webs que tapan el contenido nada más llegar. Si usas pop-up, deja unos segundos de retraso o dispáralo cuando el visitante ya haya bajado por la página.

5.6Crear un formulario con la inteligencia artificial

Para qué sirveDescribir con tus palabras el formulario que quieres y que la IA te lo monte con las preguntas y los tipos ya puestos. Es la forma más rápida de empezar.

Cómo llegarEn la lista de formularios, el botón de la varita que hay junto a «Crear formulario».

Qué hay en pantalla. Un cuadro de texto para describir lo que necesitas y cuatro Ejemplos rápidos que puedes pulsar para empezar: Formulario de contacto, Reserva de cita, Solicitud de presupuesto y Registro de evento.

Un ejemplo concretoEn vez de escribir «formulario de reservas», que te dará algo genérico, sé concreto y di qué quieres pedir y qué es obligatorio:

«Formulario para reservar mesa en la panadería: nombre, teléfono, día, hora y número de personas. El teléfono obligatorio.»

El diálogo de crear con IA, con una petición bien escrita: dice qué preguntas quiere y cuál es obligatoria. Debajo, los cuatro ejemplos rápidos.
Figura 5.8El diálogo de crear con IA, con una petición bien escrita: dice qué preguntas quiere y cuál es obligatoria. Debajo, los cuatro ejemplos rápidos.
El mismo diálogo recién abierto, antes de escribir nada. Los «Ejemplos rápidos» rellenan el cuadro por ti si no sabes cómo empezar.
Figura 5.9El mismo diálogo recién abierto, antes de escribir nada. Los «Ejemplos rápidos» rellenan el cuadro por ti si no sabes cómo empezar.

Cuidado con… dar por bueno el resultado sin mirarlo. La IA acierta mucho, pero revisa siempre las etiquetas y qué campos ha marcado obligatorios antes de poner el formulario en tu web. Generar un formulario consume consultas de tu plan (arriba a la derecha ves cuántas te quedan).

5.7Poner el formulario en una página de tu web

Para qué sirveCrear el formulario no lo pone en tu web. Este es el paso que falta, y el motivo de que la lista diga «Sin insertar en ninguna página todavía».

Cómo llegarHay dos caminos. El más directo es el modo Formularios de la barra flotante, que se explica en el apartado siguiente: pulsas sobre la página, en el sitio donde lo quieres, y lo insertas ahí mismo. El otro es el icono de insertar de la tarjeta del formulario, que es el que se ve en esta foto.

Qué hay en pantalla. El formulario que vas a insertar, un desplegable Seleccionar página con las páginas de tu web y tres formas de colocarlo: Al final de la página (la plataforma lo escribe ella misma, con su diseño y sin gastar consultas), Sustituir el formulario existente (si esa página ya tiene uno con el mismo nombre) y Que lo coloque la IA, con un cuadro de Instrucciones adicionales por si quieres decirle dónde ponerlo («en la sección de contacto, debajo del mapa»).

Cuando lo coloca la IA, lo inserta adaptándolo al estilo visual de tu sitio: coge tus colores y tus tipos de letra, no pega un formulario con pinta de ajeno. Sea cual sea el camino, el panel comprueba después que el formulario ha quedado en la página.

El diálogo de insertar. Eliges en qué página va y, si quieres, le dices en qué parte; la IA lo coloca con el estilo de tu web.
Figura 5.10El diálogo de insertar. Eliges en qué página va y, si quieres, le dices en qué parte; la IA lo coloca con el estilo de tu web.

Cuidado con… dos cosas. Solo el camino de la IA consume consultas de tu plan. Y como cualquier otro cambio del editor, después hay que Publicar para que lo vean tus visitantes: hasta entonces el aviso naranja «Cambios sin publicar» sigue arriba.

5.8Trabajar con los formularios sobre la propia página (modo Formularios)

Para qué sirveHasta ahora todo pasaba por el panel de la izquierda: creabas la ficha y luego pedías a la IA que la pusiera en una página. El modo Formularios de la barra flotante te deja hacerlo sobre la página: ves el formulario donde lo ve el visitante, lo tocas ahí y decides dónde va otro.

Cómo llegarEn la barra flotante que hay debajo de la vista previa (los iconos de seleccionar, texto, dibujar, ver y navegar) hay uno más con un portapapeles: «Formularios». Púlsalo. Mientras está activo, al pasar el ratón por la página cada formulario se marca en violeta con su nombre, y el resto de elementos se marcan con un borde discontinuo: son sitios donde podrías insertar uno.

Qué hay en pantalla. Pulsa sobre un formulario y aparece un panel pequeño pegado a él con:

  • Su nombre y, debajo, si es un formulario gestionado por la plataforma (lo puso Speaksite y puede reescribirlo) o escrito a mano en un fichero de tu web (en ese caso te dice en cuál).
  • Editar: abre su ficha en el panel de Formularios con la edición en vivo (es el siguiente apartado).
  • Ver envíos: te lleva a la pestaña Leads.
  • Insertar otro aquí: pone otro formulario justo después de este.
  • Quitar de la página: retira el formulario de esta página. La ficha y los mensajes recibidos se conservan; solo desaparece de la página.
El modo Formularios activo: el formulario de contacto marcado en violeta y su panel con Editar, Ver envíos, Insertar otro aquí y Quitar de la página.
Figura 5.11El modo Formularios activo: el formulario de contacto marcado en violeta y su panel con Editar, Ver envíos, Insertar otro aquí y Quitar de la página.

Insertar junto a cualquier elemento. Con el modo activo, pulsa sobre un título, un párrafo o una sección de la página. Se abre el panel de insertar: eliges qué formulario (o Nuevo desde plantilla), la posición —Antes, Después o Dentro, al final— y pulsas Insertar. El formulario aparece en la página al momento, con el diseño de la plataforma y sin gastar consultas de IA. Si ese punto exacto no se encuentra en el código de la página, el panel te ofrece ponerlo al final de la página o que lo coloque la IA.

El panel de insertar sobre un elemento de la página: qué formulario, en qué posición, y el botón de crear uno nuevo desde plantilla.
Figura 5.12El panel de insertar sobre un elemento de la página: qué formulario, en qué posición, y el botón de crear uno nuevo desde plantilla.

Cuidado con… una página que en realidad son varias. Hay webs en las que un mismo fichero pinta varias páginas (la ficha de cada centro, de cada servicio). Si insertas ahí, el formulario saldrá en todas, y el panel te lo avisa antes de insertar con «Esta vista sirve N páginas». Para un formulario distinto en cada una hace falta un parcial con variable, que es cosa de quien programe tu web.

Y como siempre en el editor: lo que insertes o quites lo ven tus visitantes cuando publicas.

5.9Editar un formulario y verlo cambiar en la página

Para qué sirveCambiar una etiqueta, añadir una pregunta o retocar el aspecto y ver el resultado en la página, al momento, sin recargar y sin publicar.

Cómo llegarEn el modo Formularios, pulsa sobre el formulario y luego Editar. Se abre su ficha en el panel de la izquierda con una marca «En vivo en la página» junto al título.

Qué hay en pantalla. La misma ficha de siempre (preguntas, pasos, apariencia y ajustes), con una diferencia: cada cambio que haces se pinta en el formulario de la página mientras escribes. Al pulsar Guardar se guarda la ficha y se reescribe el formulario en la página (y en cualquier otra página donde lo haya puesto la plataforma). Si vuelves atrás sin guardar, la página recupera el formulario tal y como estaba.

La ficha abierta en vivo: la etiqueta cambiada en el panel ya se lee cambiada en el formulario de la página, antes de guardar.
Figura 5.13La ficha abierta en vivo: la etiqueta cambiada en el panel ya se lee cambiada en el formulario de la página, antes de guardar.

Cuidado con… los formularios escritos a mano. Si el formulario lo escribió alguien directamente en el código de tu web, el panel te lo dice («Escrito a mano en …»): la edición en vivo te enseña cómo quedaría, pero al guardar solo se actualiza la ficha y la página no se toca. Y el nombre técnico de una pregunta que ya está guardada no cambia aunque cambies su etiqueta: es la clave con la que llegan los mensajes.

5.10Plantillas: empezar con un formulario ya hecho

Para qué sirveNo partir de cero. Hay once formularios preparados —contacto, contacto completo, presupuesto, reserva de cita, inscripción por pasos, solicitud de información por centro, boletín, encuesta de satisfacción, candidatura con currículum, soporte y confirmación de asistencia— en el idioma de tu web.

Cómo llegarEn la lista de formularios, Crear formulario ofrece tres caminos: En blanco, Desde plantilla y Con IA. También desde el panel de insertar del modo Formularios, con Nuevo desde plantilla.

Qué hay en pantalla. Una galería con el nombre de cada plantilla, para qué sirve y cuántos pasos tiene. Al elegir una se abre en el editor sin guardar: cambia lo que quieras y pulsa Guardar.

La galería de plantillas. Cada tarjeta dice para qué sirve el formulario y si va por pasos.
Figura 5.14La galería de plantillas. Cada tarjeta dice para qué sirve el formulario y si va por pasos.

5.11Apariencia: el aspecto del formulario

Para qué sirveQue el formulario quede bonito sin tocar código. Los formularios que pone la plataforma salen con un diseño cuidado (tarjeta blanca, campos redondeados, opciones en forma de chips, botón con el color de acento de tu web) y aquí lo ajustas.

Cómo llegarEn la ficha del formulario, la pestaña Apariencia.

Qué hay en pantalla

  • Tema: Tarjeta (fondo blanco y sombra), Plano (sin tarjeta, hereda el fondo) o Mínimo (solo la línea inferior de cada campo).
  • Radio de las esquinas, tamaño de los campos, chips para las preguntas de opciones, si el botón va a todo el ancho y si lleva icono.
  • Color de acento: por defecto usa el de tu web; puedes fijar otro.

También hay ajustes nuevos en cada pregunta: un texto de ayuda debajo del campo, un valor inicial, las filas de un área de texto y, en los archivos, qué tipos se admiten y si se puede adjuntar más de uno. Y en la ficha, un título y una descripción que se muestran encima de las preguntas.

La pestaña Apariencia: tema, radio, tamaño, chips, botón y color de acento.
Figura 5.15La pestaña Apariencia: tema, radio, tamaño, chips, botón y color de acento.

5.12Formularios por pasos, preguntas que dependen de otras y columnas

Para qué sirveUn formulario largo cansa; uno por pasos pide poco a poco. Y hay preguntas que solo tienen sentido según una respuesta anterior.

Cómo llegarEn la ficha, el bloque Pasos («Dividir en pasos») y, en cada pregunta, Enseñar solo si… y el ancho (1/1, 1/2 y 1/3).

Qué hay en pantalla

  • Pasos. Al dividir, cada pregunta se asigna a un paso, cada paso puede llevar título y descripción, y el visitante ve una barra de progreso con botones Atrás y Siguiente. Consejo de la casa: pide el consentimiento y los datos de contacto en los primeros pasos; así un formulario abandonado a medias sigue siendo un contacto.
  • Enseñar solo si… Una pregunta puede mostrarse solo cuando otra anterior tiene cierto valor (o cualquiera, o ninguno). Lo que está oculto no se exige ni se envía.
  • Ancho. Con 1/2 o 1/3, dos o tres preguntas comparten fila; en el móvil vuelven a ir una debajo de otra.
Un formulario dividido en pasos: cada paso con sus preguntas y, arriba, el contador de preguntas por paso.
Figura 5.16Un formulario dividido en pasos: cada paso con sus preguntas y, arriba, el contador de preguntas por paso.

5.13Código para pegar el formulario fuera de tu web

Para qué sirveSi quieres el formulario en otro sitio — una web que no está hecha con Speaksite, una landing de una campaña —, aquí tienes el código listo para pegar.

Cómo llegarEn la tarjeta del formulario, el icono <>.

Qué hay en pantalla. El código HTML del formulario y el botón Copiar código. Se pega tal cual en la otra web. Los mensajes te seguirán llegando a la pestaña Leads de este mismo panel.

El código de inserción, listo para copiar y pegar en cualquier web. Los mensajes siguen llegando a tu panel de Speaksite.
Figura 5.17El código de inserción, listo para copiar y pegar en cualquier web. Los mensajes siguen llegando a tu panel de Speaksite.

Cuidado con… editar ese código a mano después de pegarlo. Si le cambias los nombres de los campos, dejarán de cuadrar con la ficha del formulario y los datos llegarán incompletos (más abajo, en «Si algo falla», está explicado).

5.14Formularios que ya estaban en tu web

Para qué sirveSi tu web ya tenía formularios escritos en el código —porque los generó la IA al crear el sitio o porque venían de antes—, Speaksite puede encontrarlos y adoptarlos, para que sus mensajes te lleguen al panel como los demás.

Cómo llegarEn la lista de formularios, el botón de la lupa («Detectar formularios»).

Qué hay en pantalla. Speaksite recorre los ficheros de tu proyecto y te lista lo que ha encontrado: el nombre del formulario, cuántas preguntas tiene, el fichero donde está y una puntuación Alta, Media o Baja que indica lo seguro que está de que eso es de verdad un formulario de contacto. Cada uno trae su botón Importar.

El detector ha encontrado cuatro formularios ya escritos en la web de ejemplo, con el fichero de cada uno y su puntuación (Alta, Media o Baja). El botón «Importar» los pasa al panel.
Figura 5.18El detector ha encontrado cuatro formularios ya escritos en la web de ejemplo, con el fichero de cada uno y su puntuación (Alta, Media o Baja). El botón «Importar» los pasa al panel.

Cuidado con… lo que viene justo aquí abajo. Los formularios adoptados de esta manera son los que más sorpresas dan, y merecen su propio apartado.

5.15Dos cosas que muerden en silencio

Añades una pregunta nueva y esa respuesta no aparece nunca

En una línea. Si tu formulario es antiguo y se registró solo, un campo nuevo que añadas puede no guardarse aunque el visitante vea el mensaje de gracias. Después de añadir un campo, reenvíate el formulario a ti mismo y comprueba que la respuesta llega: es la única manera de saberlo, porque nada te avisa.

El síntoma. Tienes un formulario que Speaksite registró solo (uno de los detectados, o uno que se auto-registró cuando se generó tu web). Le añades una pregunta nueva desde el panel — por ejemplo «¿Cómo nos has conocido?» —, guardas, y todo parece correcto. Un visitante rellena el formulario en tu web, le sale el «¡Gracias!» de siempre… y cuando vas a Leads, ese mensaje está ahí pero la respuesta a la pregunta nueva no aparece por ningún lado. Ni vacía: no está.

Por qué pasa, en dos frases. En estos formularios hay dos cosas separadas: la ficha del panel (donde tú añades preguntas) y el formulario de verdad que está escrito en la página. Al añadir la pregunta en el panel cambias la ficha, pero la casilla nueva no aparece sola en la página: el visitante nunca llega a verla, así que no puede rellenarla, y el envío se guarda igual — de ahí el «¡Gracias!».

Qué hacer. Después de añadir una pregunta a un formulario de estos, añádela también a la página: pídeselo a la IA en el cuadro del editor («añade al formulario de contacto una pregunta “¿Cómo nos has conocido?”»), o vuelve a insertarlo con el botón de Insertar con IA. Luego compruébalo tú: abre tu web, rellena el formulario y mira en Leads que llega la respuesta nueva.

Cómo reconocerlo a la primera: si en la tarjeta del formulario ves la marca Auto, es uno de estos. Los formularios que ha puesto la propia plataforma (con el modo Formularios o con Insertar) no tienen este problema: al guardar la ficha, la página se reescribe sola. Y funciona igual al revés: si la página tiene una casilla que la ficha no conoce, ese dato se descarta al llegar, sin avisar.

La página donde te dice que está el formulario sale de las rutas de tu web

El síntoma. La tarjeta del formulario dice «Sin insertar en ninguna página todavía» aunque tú sabes que está puesto y funcionando. O pulsas el enlace para ver el formulario en la página y te lleva a una página que no existe.

Por qué pasa. Para decirte en qué página está cada formulario, el panel mira la tabla de rutas de tu proyecto: la lista de qué dirección sirve cada fichero. Si el formulario vive en un fichero que no tiene una dirección propia — por ejemplo una plantilla compartida que se usa en varias páginas, como un pie de página —, el panel no puede darte una dirección concreta y prefiere no inventársela.

Qué hacer. No te asustes: es un aviso del panel, no un fallo de tu formulario. Los mensajes siguen llegando igual a Leads, que es lo que importa. Para comprobarlo de verdad, abre tu web en otra pestaña y mira la página con tus ojos. Cuando el formulario está insertado desde una plantilla compartida, el panel te lo matiza en la misma línea en vez de afirmar que no está en ninguna parte.

5.16Los mensajes que te han enviado

Para qué sirveLeer todo lo que te llega por cualquiera de tus formularios, en un solo sitio.

Cómo llegarEn el panel de Formularios, la pestaña Leads (arriba, la segunda). «Lead» es como el panel llama a cada mensaje recibido.

Qué hay en pantalla. Arriba, un desplegable para filtrar por formulario (Todos los formularios), el botón Exportar CSV y el total de mensajes. Debajo, la lista: por cada uno, quién escribe, su correo, de qué formulario viene, la fecha y una etiqueta de procedencia que te dice cómo llegó ese visitante a tu web — direct (escribió tu dirección), orgánico (te encontró en un buscador) o referral (venía de otra web). Es información de oro para saber qué te funciona.

A la derecha de cada fila puedes marcarlo como spam o eliminarlo.

La pestaña «Leads» con los mensajes recibidos. Cada fila indica de qué formulario viene y por dónde llegó el visitante (directo, buscador u otra web).
Figura 5.19La pestaña «Leads» con los mensajes recibidos. Cada fila indica de qué formulario viene y por dónde llegó el visitante (directo, buscador u otra web).

Exportar CSV te descarga toda la lista en un fichero que puedes abrir con Excel o subir a otra herramienta. Es la forma sencilla de llevarte tus contactos.

5.17El detalle de un mensaje

Cómo llegarEn Leads, pulsa sobre cualquier fila.

Qué hay en pantalla. Tres bloques:

  • Datos del formulario: cada pregunta con su respuesta, tal y como la escribió el visitante.
  • Datos de seguimiento: de dónde venía (la Fuente), en qué página estaba cuando te escribió, cuál fue la primera página que vio y cuántas visitas llevaba.
  • Información técnica: la fecha y hora exactas y desde qué tipo de dispositivo y navegador te escribió.

Si tu formulario tenía un campo de Archivo, los ficheros adjuntos aparecen aquí para descargarlos.

El detalle de un mensaje. Arriba las respuestas del visitante; debajo, de dónde vino y con qué dispositivo te escribió.
Figura 5.20El detalle de un mensaje. Arriba las respuestas del visitante; debajo, de dónde vino y con qué dispositivo te escribió.

Cuidado con… los datos personales que recoges. Todo esto son datos de una persona real: pide solo lo que necesites de verdad, y acuérdate de tener tu aviso de privacidad enlazado en el formulario.

5.18Avisos: a qué correo llegan tus formularios

Para qué sirveAntes, el correo de aviso vivía escondido dentro de cada formulario, en sus propios ajustes: si lo dejabas vacío, ese formulario no avisaba a nadie y no había ninguna pista de que pasara. Esta pestaña pone una sola lista de correos que vale para todo el sitio, y te deja probarla antes de que te llegue un mensaje de verdad.

Cómo llegarEn el panel de Formularios, pulsa la pestaña Avisos — la tercera, entre Leads y SMTP.

Qué hay en pantalla. Un cuadro Correos del sitio donde añades una o varias direcciones. Si lo dejas vacío, el aviso cae en el correo de tu cuenta — el panel te lo dice ahí mismo, con la dirección exacta a la que caería. Dos botones: Guardar y Enviar una prueba, que manda un aviso de mentira con la pinta exacta del de verdad y que no aparece entre tus Leads.

Debajo, Formulario por formulario: la lista de tus formularios con, para cada uno, a qué correo llega de verdad su aviso y una etiqueta que dice de dónde sale esa dirección: propios (el formulario tiene su correo de siempre, escrito a mano en sus ajustes), del sitio (usa los correos de esta pantalla), tu cuenta (no hay nada en ningún sitio y cae por defecto en tu correo) o silenciado (a propósito no avisa a nadie). Si un formulario tiene correos propios, verás un icono para usar los correos del sitio en su lugar — le borra los suyos y lo pasa a depender de esta pantalla—, y el icono de lápiz te lleva directo a editar ese formulario.

La pestaña Avisos con dos correos del sitio guardados. Debajo, formulario por formulario, a qué dirección llega cada uno y de dónde sale esa dirección.
Figura 5.21La pestaña Avisos con dos correos del sitio guardados. Debajo, formulario por formulario, a qué dirección llega cada uno y de dónde sale esa dirección.

Un ejemplo, paso a pasoQuieres que todos los avisos de tu web lleguen a pedidos@tupanaderia.com además de a tu correo personal. Abres Avisos, escribes las dos direcciones en Correos del sitio, pulsas Guardar y después Enviar una prueba para comprobar que llega. Si algún formulario concreto tenía su propio correo puesto a mano, seguirá usando el suyo — usa el icono de usar los correos del sitio en su fila si quieres que pase a compartir esta lista.

Cuidado con… confiar en que un formulario avisa a alguien solo porque existe. Si no hay correos ni en el formulario ni en esta pestaña, el aviso cae en el correo de tu cuenta — y si cambias esa cuenta, nadie se entera hasta que se da cuenta de que hace tiempo que no le llega nada. Enviar una prueba después de cualquier cambio es la única forma de estar seguro.

5.19El correo con el que se envían los avisos (SMTP)

Para qué sirveQue los avisos de «te han escrito» salgan desde tu dirección de correo, y no desde una genérica. Es lo que hace que el aviso llegue a tu bandeja de entrada y no a la carpeta de spam.

Cómo llegarPestaña SMTP.

Qué hay en pantalla. Los datos que te da tu proveedor de correo:

  • Servidor SMTP y Puerto (por ejemplo smtp.gmail.com y 587).
  • Usuario y Contraseña de esa cuenta.
  • Cifrado: normalmente TLS.
  • Email remitente y Nombre remitente: lo que verá quien reciba el aviso.

Abajo, Guardar y Enviar prueba.

La pestaña SMTP con los datos del correo saliente. El botón «Enviar prueba» te dice si funciona antes de que te haga falta de verdad.
Figura 5.22La pestaña SMTP con los datos del correo saliente. El botón «Enviar prueba» te dice si funciona antes de que te haga falta de verdad.

Un ejemplo concretoRellena los datos, pulsa Guardar y después Enviar prueba. Si te llega el correo de prueba, ya está. Si no llega, revisa antes que nada el usuario y la contraseña: es el fallo de nueve de cada diez veces.

Cuidado con… poner aquí la contraseña normal de tu correo. Gmail, Outlook y casi todos exigen una contraseña de aplicación, que se genera aparte desde los ajustes de seguridad de tu cuenta. Con la contraseña de siempre te dará error.

Si no configuras esto, los avisos salen igual, pero desde el remitente de Speaksite. Con tu SMTP salen desde tu dirección y llegan mejor a la bandeja de entrada. A qué correo llegan no se decide aquí, sino en la pestaña Avisos.

5.20Enviar los contactos a tu CRM

Para qué sirveQue cada persona que te escribe entre automáticamente en el programa donde llevas tus clientes, sin copiar y pegar.

Cómo llegarPestaña CRM.

Qué hay en pantalla. Dos bloques:

  • Credenciales CRM: eliges tu proveedor en el desplegable y metes las claves que te haya dado. Hay un botón Probar conexión para comprobar que las claves valen antes de seguir.
  • Configuración CRM por formulario: la lista de tus formularios, cada uno con su interruptor de envío al CRM y un botón IA.
La pestaña CRM. Arriba las claves de tu CRM; abajo, formulario por formulario, si sus contactos se envían y con qué emparejamiento de campos.
Figura 5.23La pestaña CRM. Arriba las claves de tu CRM; abajo, formulario por formulario, si sus contactos se envían y con qué emparejamiento de campos.

5.21Conectar el CRM y emparejar los campos

Para qué sirveDecirle al sistema que tu pregunta «Tu correo» es lo que tu CRM llama «email», y así con todas. Es la parte tediosa, y la IA la hace por ti.

Cómo llegarEn la pestaña CRM, el botón IA de la fila de un formulario.

Qué hay en pantalla. Un cuadro donde describes tu CRM con tus palabras («Usamos Clientify, las credenciales están en el .env como CLIENTIFY_API_KEY») y otro de instrucciones opcionales («mapear como lead de ventas, la empresa como campo obligatorio»). La IA analiza tu formulario y propone el emparejamiento completo.

El diálogo de conectar el CRM con IA. Describes tu CRM con tus palabras y él propone qué pregunta del formulario va a cada campo del CRM.
Figura 5.24El diálogo de conectar el CRM con IA. Describes tu CRM con tus palabras y él propone qué pregunta del formulario va a cada campo del CRM.

Cuando termina te enseña el emparejamiento propuesto, campo por campo, y si le faltan credenciales te dice exactamente qué claves añadir. Revísalo antes de darlo por bueno: puedes corregir a mano cualquier pareja que no te cuadre, y dejar Sin mapear las preguntas que no quieras enviar.

Después, usa Probar envío: manda un contacto de mentira a tu CRM y te enseña tanto lo que se ha enviado como lo que ha respondido el CRM. Es la forma de asegurarte antes de que entre un cliente de verdad.

Cuidado con… activar el envío al CRM sin haber probado. Si el emparejamiento está mal, los contactos entran en tu CRM incompletos o repetidos, y limpiarlo después cuesta más que revisarlo ahora.

5.22Cuidado con: lo que no se puede deshacer

De todo lo de este capítulo, esto es lo que conviene mirar dos veces antes de pulsar:

  • La papelera de un formulario. Se lleva por delante todos los mensajes que habías recibido por él. No hay papelera de reciclaje ni «deshacer». Si lo que quieres es dejar de recibir, usa Desactivar: eso sí se deshace.
  • Eliminar un mensaje de la pestaña Leads. Igual: se va y no vuelve. Antes de hacer limpieza, pulsa Exportar CSV y guárdate el fichero.
  • Cambiar el Nombre técnico de una pregunta que ya está recibiendo mensajes. Los mensajes viejos se quedan con el nombre viejo y no hay forma de juntarlos después. Cambia solo la Etiqueta salvo que tengas un motivo claro.
  • Salirte del formulario sin pulsar Guardar. Todo lo que hayas montado en esa pantalla se pierde: no se guarda solo.
  • Activar el envío al CRM sin haber pulsado antes «Probar envío». Los contactos mal emparejados entran igualmente en tu CRM, y limpiarlos allí cuesta más que revisar el emparejamiento aquí.

Y una que no rompe nada pero cuesta dinero: generar e insertar con IA consumen consultas de tu plan. Escribe bien la petición a la primera en vez de probar cinco veces.

5.23Si algo falla

«No encuentro el icono de Formularios.» Es el portapapeles de la barra de la izquierda, justo debajo de Blog, y está en los dos modos. En el móvil, ábrelo desde el botón redondo de Herramientas.

«He creado el formulario pero no lo veo en mi web.» Crearlo y ponerlo son dos pasos. Ponlo con el modo Formularios de la barra flotante (o con Insertar desde su tarjeta) y después Publica.

«Me llegan los mensajes pero no me avisa nadie por correo.» Mira la pestaña Avisos: el aviso va a los correos del formulario; si no tiene, a los del sitio; y si tampoco, al correo de tu cuenta. Solo un formulario con «No avisar de este formulario» marcado se calla, y a propósito. Enviar una prueba te dice adónde está llegando.

«He insertado un formulario en una página y sale en varias.» Esa página comparte fichero con otras (el panel te lo avisó al insertar). Quítalo desde el modo Formularios y pide un parcial con variable a quien programe tu web.

«Me llega el aviso a la carpeta de spam.» Configura el SMTP con tu propio dominio en vez de con una cuenta gratuita.

«Añadí una pregunta y no me llega esa respuesta.» Es el primer aviso del apartado «Dos cosas que muerden en silencio»: añádela también a la página y compruébalo enviándote el formulario a ti mismo.

«Me llega mucho spam.» Comprueba que la Protección anti-spam (honeypot) está activada en los ajustes del formulario, y marca como spam los que te lleguen: es además la manera de mantener limpia la lista de Leads.

«El panel dice que el formulario no está en ninguna página, pero sí que está.» Es el segundo aviso: el panel deduce la página de las rutas de tu proyecto y a veces no puede. Mientras los mensajes lleguen a Leads, tu formulario funciona.

¿Algo no cuadra con lo que ves en tu panel? Cuéntanoslo y lo corregimos.Escríbenos