Capítulo 5 de 11

Formularios

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

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 modo Avanzado.

Dónde está el panel de formularios (y por qué a veces «no aparece»)

Para qué sirve. Es 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. Arriba, en el centro, verás dos botones: Fácil y Avanzado. Pulsa Avanzado.
3. En la columna de iconos de la izquierda aparece el icono del portapapeles. Pásale el ratón por encima: pone «Formularios». Púlsalo.

Esto es lo primero que hay que saber, y la duda número uno de todo el mundo: en modo Fácil el icono de Formularios NO existe. No está escondido ni desactivado: sencillamente no se pinta. Si has entrado a buscarlo y no lo ves, no es que se haya borrado tu formulario — es que estás en modo Fácil. Pulsa Avanzado y vuelve a mirar la barra de la izquierda: pasa de cinco iconos a dieciséis.

El interruptor se queda como lo dejes: es una preferencia de tu cuenta, no de la pantalla. Si lo pones en Avanzado hoy, mañana seguirá en Avanzado.

Tus formularios

Para qué sirve. Ver 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.

Crear un formulario a mano

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

Cómo llegar. En 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 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.

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.

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

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

Cómo llegar. Abre 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.
• 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.

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.

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.

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

Cómo llegar. Con 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».

• 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ó.

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.

Crear un formulario con la inteligencia artificial

Para qué sirve. Describir 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 llegar. En 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 concreto. En 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.»

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).

Poner el formulario en una página de tu web

Para qué sirve. Crear 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 llegar. En la tarjeta del formulario, el icono de la varita («Insertar con IA»).

Qué hay en pantalla. El formulario que vas a insertar, un desplegable Seleccionar página con las páginas de tu web, y un cuadro de Instrucciones adicionales por si quieres decirle dónde ponerlo («en la sección de contacto, debajo del mapa»).

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.

Cuidado con… dos cosas. Insertar 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.

Código para pegar el formulario fuera de tu web

Para qué sirve. Si 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 llegar. En 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.

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).

Formularios que ya estaban en tu web

Para qué sirve. Si 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 llegar. En 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.

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.

Dos 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. 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.

Los mensajes que te han enviado

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

Cómo llegar. En 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.

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.

El detalle de un mensaje

Cómo llegar. En 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.

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.

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

Para qué sirve. Que 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 llegar. Pestañ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.

Un ejemplo concreto. Rellena 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.

Y no te lo saltes pensando que no hace falta: si no configuras esto, seguirás recibiendo los mensajes en la pestaña Leads, pero nadie te avisará por correo de que han llegado. Los verás cuando entres a mirar.

Enviar los contactos a tu CRM

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

Cómo llegar. Pestañ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.

Conectar el CRM y emparejar los campos

Para qué sirve. Decirle 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 llegar. En 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.

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.

Cuidado 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.

Si algo falla

«No encuentro el icono de Formularios.» Estás en modo Fácil. Pulsa Avanzado en la cabecera del editor.

«He creado el formulario pero no lo veo en mi web.» Crearlo y ponerlo son dos pasos. Úsalo con Insertar con IA y después Publica.

«Me llegan los mensajes pero no me avisa nadie por correo.» Te falta configurar la pestaña SMTP, o los Emails de notificación del formulario están vacíos.

«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.