Formularios web

1. Crear el formulario en YAVE#

Un administrador lo crea en Configuración → Formularios: campos, colores, mensaje de éxito o redirección, embudo y proyecto al que llegan los leads, y etiquetas por defecto. Al guardarlo, el botón Compartir e Insertar entrega los tres códigos de abajo ya con el slug de la organización y del formulario.

2. Incrustarlo#

Opción A · Script (recomendada)

El formulario se dibuja dentro de tu página, hereda el ancho del contenedor y captura solo los UTM y los identificadores de clic de la URL.

<!-- Formulario de YAVE -->
<div id="yave-form-contacto-torre-2"></div>
<script
  src="https://api.yavehome.com/embed/form.js"
  data-form-org="mi-constructora"
  data-form-slug="contacto-torre-2"
  data-api-url="https://api.yavehome.com/api/v1"
  async
></script>

El formulario se monta en el elemento con id yave-form-<slug>. Si no existe, se crea justo antes del script.

Opción B · iframe

Útil en constructores de sitios que no permiten scripts (algunos planes de Wix, Squarespace o Google Sites).

<iframe
  src="https://api.yavehome.com/forms/mi-constructora/contacto-torre-2"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; max-width: 600px;"
></iframe>

Opción C · Enlace directo

La misma URL del iframe funciona como página independiente: sirve para el link de la bio de Instagram, un QR o un correo. El CRM también descarga el QR listo.

3. Tu propio formulario, enviado al API#

Si ya tienes un formulario diseñado y solo quieres que los datos entren a YAVE, envíalo al endpoint público del formulario. Se puede llamar directamente desde el navegador (CORS abierto) y no lleva API key: la configuración (campos obligatorios, embudo, proyecto) la pone el formulario creado en el CRM.

Leer la configuración

Devuelve el formulario con su lista fields. De cada campo te interesa name (la llave a enviar), type, required y options. Tipos: TEXT, EMAIL, PHONE, NUMBER, TEXTAREA, SELECT, RADIO, CHECKBOX, DATE, URL, HIDDEN.

Enviar

const params = new URLSearchParams(location.search);

const res = await fetch(
  "https://api.yavehome.com/api/v1/public/forms/mi-constructora/contacto-torre-2/submit",
  {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      data: {
        nombre: form.nombre.value,
        telefono: form.telefono.value,
        correo: form.correo.value,
        autorizacion_datos: form.autorizacion.checked,
      },
      utmSource: params.get("utm_source") ?? undefined,
      utmMedium: params.get("utm_medium") ?? undefined,
      utmCampaign: params.get("utm_campaign") ?? undefined,
      gclid: params.get("gclid") ?? undefined,
      fbclid: params.get("fbclid") ?? undefined,
      landingPage: location.href,
      referrer: document.referrer || undefined,
    }),
  },
);

const result = await res.json();
if (!res.ok) throw new Error(result.message);
if (result.submitAction === "REDIRECT" && result.redirectUrl) {
  location.href = result.redirectUrl;
}

Respuesta

{
  "success": true,
  "message": "¡Gracias! Un asesor te contactará pronto.",
  "submitAction": "MESSAGE",      // o "REDIRECT"
  "redirectUrl": null
}

Qué hace YAVE con cada envío#

• Los campos vinculados a nombre, correo, teléfono y presupuesto llenan el lead; el resto queda como respuestas del formulario visibles para el asesor y la IA.
• El embudo se elige por reglas de enrutamiento, luego el embudo del formulario, luego el de la organización. El proyecto del formulario se copia al lead.
• Duplicados: si el teléfono ya existe, no se crea otro lead; solo se completan los datos vacíos (correo, proyecto, UTM, identificadores de clic).
• Se guarda una copia del texto de cada consentimiento aceptado, con fecha, IP y navegador, como soporte de la autorización de datos.
• Con los identificadores de clic guardados, YAVE puede reportar las conversiones a Meta y Google Ads según lo que la organización tenga conectado.

Checklist de salida a producción#

1. El formulario está Activo en el CRM.
2. Hiciste un envío de prueba y el lead apareció en el embudo correcto.
3. Abriste la página con ?utm_source=prueba&utm_campaign=prueba y el lead quedó con esa campaña.
4. Borraste o marcaste como prueba los leads de prueba, para no ensuciar los informes.

¿Prefieres enviar desde tu servidor, con tus propios campos? Usa la API de leads.