Integrar un formulario en tu web (sin iframe)

Además de la URL pública y del embebido por iframe, podés maquetar el formulario en tu propia web y enviarlo directamente a Floogos con un POST desde el navegador (integración cross-domain, sin iframe), gestionando vos la respuesta.

1. Requisito: habilitar tu dominio (CORS)

Como el envío se hace desde tu dominio hacia el servidor de Floogos, hay que autorizar ese origen. En la instalación se define la variable de entorno:

EXTRA_CORS_ORIGINS="https://intranet.tuempresa.com,*.tuempresa.com"

Acepta varios dominios separados por coma.
Admite origen exacto (https://intranet.tuempresa.com) y comodín de subdominio (*.tuempresa.com).
Tras definirla, se reinicia el servicio.

2. El endpoint de envío

POST  https://<tu-instalación-floogos>/f/{HASH}/submit
Content-Type: application/json

{HASH} es el identificador público del formulario (el mismo de su URL pública .../f/{HASH}).
El cuerpo es un JSON con una clave por cada campo, usando el nombre técnico del campo (name), no la etiqueta visible.

¿De dónde saco los nombres de los campos?

En el editor de formularios, cada campo tiene su nombre (identificador).
O consultando la definición del formulario: GET https://<host>/f/{HASH}/data → devuelve los campos con su name, type, required y validaciones (útil para maquetar y validar en tu web).

3. Ejemplo completo (fetch)

<form id="miForm">
  <input name="nombre" required />
  <input name="email" type="email" required />
  <textarea name="mensaje" maxlength="500"></textarea>
  <button type="submit">Enviar</button>
</form>

<script>
const HASH = "abc123def456";                  // hash público del formulario
const BASE = "https://floogos.tuempresa.com";  // tu instalación de Floogos

document.getElementById("miForm").addEventListener("submit", async (e) => {
  e.preventDefault();
  const form = e.target;

  const payload = {
    nombre:  form.nombre.value,
    email:   form.email.value,
    mensaje: form.mensaje.value,
  };

  try {
    const resp = await fetch(`${BASE}/f/${HASH}/submit`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
      // credentials: "include"  // solo si el form usa grupo de seguridad por cookie
    });
    const result = await resp.json();

    if (resp.ok && result.success) {
      if (result.redirect) {
        window.location.href = result.redirect;
      } else {
        alert(result.message || "Formulario enviado correctamente");
        // result.submissionId → id del envío; result.data → respuesta del workflow
      }
    } else {
      alert(result.error || "No se pudo enviar el formulario");
    }
  } catch (err) {
    alert("Error de red al enviar el formulario");
  }
});
</script>

4. Respuesta del servidor

Éxito (HTTP 200):

{
  "success": true,
  "message": "Formulario enviado correctamente",
  "submissionId": 12345,
  "redirect": "https://…",
  "data": { }
}

redirect aparece solo si el formulario está configurado para redirigir; data solo si el formulario dispara un workflow con respuesta estructurada.

Errores habituales:

HTTP	Respuesta	Significado
404	`{ "error": "Formulario no encontrado o no disponible" }`	Hash incorrecto o formulario no publicado.
401	`{ "error": "Autenticación de grupo requerida.", "requires_group_auth": true }`	El formulario tiene grupo de seguridad.
401	`{ "error": "Autenticación requerida…" }`	El formulario requiere login.
400	`{ "error": "…" }`	Validación de datos.

5. Formularios con seguridad

Si el formulario no tiene restricciones, con lo anterior alcanza. Si tiene seguridad:

Grupo de seguridad: se obtiene un token de realm con el flujo de autenticación del grupo y se envía en la cabecera x-form-realm-token: <token> (o con credentials: "include" si se usa la sesión por cookie).
Formulario con login: se incluye el token en el cuerpo como __auth_token.

6. Notas

Adjuntos: los campos de archivo se envían como objeto con el contenido en base64 ({ filename, mime, content_base64 }).
Validación: conviene replicar en tu web las validaciones del formulario (obligatorios, longitud máxima, patrón) usando GET /f/{HASH}/data. El servidor valida igualmente al recibir.
HTTPS: el envío cross-domain con navegador requiere HTTPS en ambos lados.