Hosted Forms: inserta un formulario de contacto en tu sitio web
Crea formularios de contacto independientes e incrustables, insértalos en cualquier sitio web con una línea de código y recibe todos los envíos directamente en tu bandeja de entrada de Bugalou como conversaciones.
¿Qué son los Hosted Forms?
Los Formularios alojados te permiten crear formularios de contacto totalmente personalizables que se pueden incrustar directamente en cualquier sitio web. Cuando un visitante envía el formulario, se crea automáticamente una conversación nueva en tu bandeja de entrada de Bugalou, con número de ticket, los datos de contacto del visitante y todos los campos rellenados, para que tu equipo pueda responder de inmediato.
Primeros pasos
En tu panel de Bugalou, ve a Canales en la barra lateral izquierda y busca la tarjeta "Formularios alojados" en el Catálogo de canales. Haz clic en "Gestionar" para abrir la página de resumen de formularios.
Crear un formulario nuevo
- En la página de resumen de formularios, haz clic en "Nuevo formulario" (arriba a la derecha)
- Ponle un nombre al formulario: se usa internamente para identificarlo
- Haz clic en "Crear" para abrir el Constructor de formularios
El Constructor de formularios
El Constructor de formularios tiene dos paneles:
- Panel izquierdo: configura los ajustes y los campos del formulario
- Panel derecho: vista previa en directo de cómo se verá el formulario en tu sitio web
Configuración general
| Ajuste | Descripción |
|---|---|
| Nombre del formulario | Nombre interno que se muestra en la lista de formularios |
| Título | Encabezado que se muestra en el formulario (visible para los visitantes) |
| Descripción | Subtexto opcional debajo del título |
| Texto del botón de envío | Etiqueta del botón de envío (p. ej. "Enviar", "Mandar") |
| Mensaje de éxito | Texto de confirmación que se muestra tras un envío correcto |
| Activo | Interruptor para activar o desactivar el formulario: los formularios inactivos rechazan los envíos |
Campos del formulario
Cada formulario puede tener cualquier número de campos personalizados. Para cada campo defines:
- Etiqueta: texto que se muestra encima del campo (p. ej. "Nombre", "Dirección de email", "Mensaje")
- Tipo: texto, email, teléfono, área de texto, selección, casilla
- Obligatorio: si el campo debe rellenarse antes de enviar
- Marcador de posición: texto de ayuda dentro del campo (opcional)
Usa el botón "Añadir campo" para añadir campos nuevos y el icono de papelera para quitarlos. Los campos aparecen en la vista previa en directo a medida que construyes.
Asignar a un equipo (opcional)
Puedes asignar automáticamente todas las conversaciones de este formulario a un equipo concreto. Selecciona un equipo en el desplegable "Asignar a equipo". Déjalo vacío para dejar las conversaciones sin asignar.
Insertar el formulario en tu sitio web
Cuando hayas guardado tu formulario, haz clic en "Obtener código de inserción" (o abre los ajustes del formulario) para obtener el fragmento de inserción, que consta de dos partes:
Paso 1: Añade el div contenedor donde quieras que aparezca el formulario
<div data-bgl-form="FORM_ID"></div>Coloca este elemento exactamente donde quieras que se muestre el formulario en tu página: dentro de una sección, de una página de contacto o de un portal de soporte.
Paso 2: Añade la etiqueta script una vez por página (antes de </body>)
<script src="https://app.bugalou.com/api/forms/embed/FORM_ID"></script>El script encuentra automáticamente el div y muestra el formulario completo en línea, sin iframes ni configuración adicional.
Ejemplo completo
<!-- Coloca esto donde quieras el formulario -->
<div data-bgl-form="cuid123abc"></div>
<!-- Añade esto antes de </body> -->
<script src="https://app.bugalou.com/api/forms/embed/cuid123abc"></script>Qué ocurre al enviar el formulario
Cuando un visitante envía tu formulario:
- Se crea automáticamente un Contacto (o se asocia por email) en Bugalou
- Se crea una Conversación nueva con un número de ticket único
- Aparece un Mensaje con formato en tu bandeja de entrada que muestra todos los campos del formulario en una tabla limpia
- Si está configurado, la conversación se asigna a tu equipo
- Si tienes una automatización "Formulario enviado", se activa automáticamente, p. ej. para enviar un email de confirmación
Responder a los envíos del formulario
Abre la conversación en tu bandeja de entrada y escribe tu respuesta en el campo de redacción. Bugalou envía automáticamente la respuesta a la dirección de email que el visitante introdujo en el formulario. Si no hay ninguna cuenta de email vinculada de forma explícita, Bugalou usa tu primera cuenta de email conectada y activa.
Automatización: disparador "Formulario enviado"
Los Hosted Forms admiten el disparador de automatización "Formulario enviado". Úsalo para enviar automáticamente un email de confirmación en cuanto alguien envíe tu formulario. Consulta el artículo Todos los tipos de disparador para más detalles.
Ejemplo de automatización
- Disparador: Formulario enviado
- Acción: Enviar email: redacta un email de confirmación usando variables como
{{name}},{{email}}y{{formName}}
Usa la plantilla "Formulier Bevestiging" de las Plantillas de automatización para empezar rápidamente.
Gestionar tus formularios
En la página de resumen de formularios puedes:
- Editar cualquier formulario: haz clic en el nombre del formulario o en el icono de editar
- Activar / Desactivar un formulario: con el interruptor de la tarjeta del resumen
- Eliminar un formulario: haz clic en el icono de papelera (es permanente)
- Ver envíos: consulta un registro de todos los envíos por formulario
Consejos
- Incluye siempre un campo de Email para que Bugalou pueda asociar al visitante con un contacto y permitir las respuestas
- Usa el Mensaje de éxito para marcar expectativas, p. ej. "Te responderemos en 24 horas"
- Combínalo con el ajuste Asignar a equipo para que las personas adecuadas vean los envíos del formulario de inmediato
- Prueba tu formulario antes de publicarlo: envíalo y comprueba tu bandeja de entrada