Cómo activar automatizaciones de ActiveCampaign desde formularios de Webflow con Webflow Cloud

Si tus secuencias de nutrición se ejecutan en ActiveCampaign, el punto débil es el traspaso. Un registro llega a una notificación de formulario, alguien copia el correo en una lista y la automatización comienza con horas de retraso. Una notificación es solo un registro. Un contacto suscrito a una lista es lo que activa tu automatización.

La aplicación de Webflow para ActiveCampaign asigna campos de formulario a listas y etiquetas sin necesidad de código, y es el punto de partida ideal para la mayoría de los equipos. Cuando necesites filtrado de spam o lógica personalizada en código que tú controles, un Route Handler de Next.js en Webflow Cloud convierte cada envío de formulario en un contacto suscrito bajo una ruta en tu propio dominio.

¿Qué necesitas para conectar ActiveCampaign a los formularios de Webflow en Webflow Cloud?

Necesitas estos cinco requisitos previos:

• Sitio de Webflow: Un formulario en una página publicada, además de una página de agradecimiento y una página de error publicadas para los registros fallidos.
• Cuenta de ActiveCampaign: Una lista para suscribir contactos y una automatización cuyo activador sea la suscripción a esa lista.
• Herramientas locales: Webflow Cloud admite Next.js 15 o superior y, en sus propias palabras, "solo el gestor de paquetes npm".
• Repositorio: Un repositorio de código desde el cual un proyecto de Webflow Cloud pueda desplegarse, con acceso de escritura para quien mantenga el sitio después del lanzamiento.
• Credenciales: La URL de la API y la clave de API que se encuentran en Configuración, bajo la pestaña Desarrollador en ActiveCampaign, además del ID numérico de la lista; guárdalos en un gestor de contraseñas y nunca en el repositorio.

Elige ahora la ruta de montaje para la aplicación; la acción del formulario debe incluirla, al igual que NEXT_PUBLIC_BASE_PATH si un script llama a la ruta con fetch.

5 pasos para conectar ActiveCampaign a los formularios de Webflow en Webflow Cloud

La compilación consiste en un único Route Handler más seis variables de entorno. El formulario sigue siendo un formulario nativo de Webflow; solo cambia su acción, por lo que un responsable de marketing puede seguir editando los campos en el Diseñador.

Las credenciales van primero y la prueba en vivo al final, para que leas el controlador antes de que nada apunte a él.

1. Recopila las credenciales de ActiveCampaign y el ID de la lista

Copia tres valores de ActiveCampaign antes de abrir una terminal. La URL y la clave de la API se encuentran en Configuración, en la pestaña Desarrollador; la URL se ve como https://youraccount.api-us1.com. El ID de la lista es el número que aparece en la URL de la lista cuando la abres.

Reviso el lado de la automatización al mismo tiempo. Abre la automatización que quieres activar y confirma que su activador sea "Se suscribe a una lista", seleccionando la lista cuyo ID copiaste. El controlador suscribe a un contacto a esa lista y permite que el propio activador de ActiveCampaign inicie la automatización, lo que mantiene la automatización editable por un responsable de marketing sin tocar código.

Ahora tienes la URL y la clave de la API, además de un ID de lista en un gestor de contraseñas, y una automatización cuyo activador apunta a esa lista.

2. Prepara la aplicación Next.js y crea el proyecto en Webflow Cloud

Usa Node.js 22 o superior con npm para crear una aplicación Next.js desde cero y mantén los valores predeterminados, incluido el App Router, ya que ahí es donde residen los Route Handlers.

Ejecuta esto desde la carpeta que contendrá el repositorio. La versión está fijada en 15 para que la estructura coincida con lo que admite Webflow Cloud:

npx create-next-app@15 activecampaign-bridge
cd activecampaign-bridge

Dejo la configuración tal cual. La documentación de configuración de Webflow Cloud indica que "No necesitas añadir un adaptador, una ruta base ni un modo de salida", y Webflow Cloud establece basePath en el momento de la compilación a partir de la ruta de montaje. No añadas export const runtime = 'edge' a nada.

Webflow Cloud funciona sobre Cloudflare Workers, una plataforma edge, mientras que el objetivo de tiempo de ejecución de Next.js es algo distinto que el adaptador OpenNext de Cloudflare no admite, por lo que la directiva genera una compilación defectuosa, aunque una página de la documentación todavía te diga que la añadas.edge

Envía el repositorio a un host desde el cual tu proyecto de Webflow Cloud pueda realizar el despliegue. Luego, crea el proyecto y establece una ruta de montaje como /subscribe, siguiendo el flujo de configuración en la documentación de "bring-your-own-app" enlazada en los requisitos previos.

Anota la ruta de montaje; la acción del formulario depende de ella. Webflow Cloud solo compila con npm, así que omite cualquier paso de o de otros tutoriales. Cuando finalice el primer despliegue, abre la ruta de montaje en tu dominio de pruebas; debería cargarse la página de inicio predeterminada de Next.js.pnpm addyarn add

3. Escribe el Route Handler que reenvía los envíos a ActiveCampaign

Añade un archivo en app/api/contact/route.ts. Utiliza dos endpoints de la API v3 de ActiveCampaign, ambos autenticados con un encabezado Api-Token: sincronización de contactos, que crea o actualiza un contacto por correo electrónico, y listas de contactos, que suscribe a ese contacto a tu lista.

El controlador analiza el cuerpo del formulario y descarta los envíos de bots mediante un honeypot. Luego valida el correo electrónico, sincroniza y suscribe al contacto, y responde con una redirección cuando un navegador envió el formulario de forma nativa o con JSON cuando lo hizo un script.

El controlador se autentica externamente con tu clave de API, que permanece en una variable de entorno del lado del servidor, pero no autentica al emisor. La comprobación de origen y el honeypot filtran el abuso casual, así que añade un límite de tasa o una comprobación CAPTCHA antes del lanzamiento si el formulario es público.

Código del controlador

Aquí tienes el controlador completo:

// app/api/contact/route.ts
import { NextResponse } from 'next/server';

type Contact = { email: string; firstName: string };
type AcConfig = { AC_BASE_URL: string; AC_API_KEY: string; AC_LIST_ID: string };

function getConfig() {
  return {
    AC_BASE_URL: process.env.ACTIVECAMPAIGN_API_URL,
    AC_API_KEY: process.env.ACTIVECAMPAIGN_API_KEY,
    AC_LIST_ID: process.env.ACTIVECAMPAIGN_LIST_ID,
    SITE_ORIGIN: process.env.SITE_ORIGIN,
    THANK_YOU_URL: process.env.THANK_YOU_URL,
    ERROR_URL: process.env.ERROR_URL,
  };
}

export async function POST(request: Request) {
  const { AC_BASE_URL, AC_API_KEY, AC_LIST_ID, SITE_ORIGIN, THANK_YOU_URL, ERROR_URL } =
    getConfig();

  if (!AC_BASE_URL || !AC_API_KEY || !AC_LIST_ID) {
    console.error('ActiveCampaign environment variables are missing');
    return fail(request, 500, 'Server misconfigured', ERROR_URL);
  }

  const origin = request.headers.get('origin');
  if (SITE_ORIGIN && origin && origin !== SITE_ORIGIN) {
    return fail(request, 403, 'Forbidden', ERROR_URL);
  }

  let form: FormData;
  try {
    form = await request.formData();
  } catch {
    return fail(request, 400, 'Invalid form', ERROR_URL);
  }
  const email = String(form.get('email') ?? '').trim().toLowerCase();
  const firstName = String(form.get('first-name') ?? '').trim();
  const honeypot = String(form.get('website') ?? '').trim();

  // Bots fill every field; humans never see this one.
  if (honeypot) return respond(request, THANK_YOU_URL);

  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    return fail(request, 400, 'Invalid email', ERROR_URL);
  }

  const ac: AcConfig = { AC_BASE_URL, AC_API_KEY, AC_LIST_ID };
  let synced: { ok: boolean; status: number };
  try {
    synced = await syncContact(ac, { email, firstName });
  } catch (error) {
    console.error('ActiveCampaign unreachable', error);
    return fail(request, 502, 'Upstream error', ERROR_URL);
  }
  if (!synced.ok) {
    console.error('ActiveCampaign rejected the contact', synced.status);
    return fail(request, 502, 'Upstream error', ERROR_URL);
  }

  return respond(request, THANK_YOU_URL);
}

function respond(request: Request, thankYouUrl?: string) {
  const wantsHtml = request.headers.get('accept')?.includes('text/html');
  if (wantsHtml && thankYouUrl) {
    return NextResponse.redirect(thankYouUrl, 303);
  }
  return NextResponse.json({ ok: true }, { status: 200 });
}

function fail(request: Request, status: number, error: string, errorUrl?: string) {
  const wantsHtml = request.headers.get('accept')?.includes('text/html');
  if (wantsHtml && errorUrl) {
    return NextResponse.redirect(errorUrl, 303);
  }
  return NextResponse.json({ error }, { status });
}

async function activeCampaign(ac: AcConfig, path: string, body: unknown) {
  return fetch(`${ac.AC_BASE_URL}${path}`, {
    method: 'POST',
    headers: {
      'Api-Token': ac.AC_API_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body),
    signal: AbortSignal.timeout(8000),
  });
}

async function syncContact(ac: AcConfig, contact: Contact) {
  const body = contact.firstName ? { contact } : { contact: { email: contact.email } };
  const sync = await activeCampaign(ac, '/api/3/contact/sync', body);
  if (!sync.ok) return { ok: false, status: sync.status };

  const data = (await sync.json()) as { contact?: { id?: string } };
  const contactId = data.contact?.id;
  if (!contactId) return { ok: false, status: 502 };

  const subscribe = await activeCampaign(ac, '/api/3/contactLists', {
    contactList: { list: ac.AC_LIST_ID, contact: contactId, status: '1' },
  });
  return { ok: subscribe.ok, status: subscribe.status };
}

Con ese archivo confirmado, la aplicación tiene un endpoint POST en /api/contact que se ubicará bajo tu ruta de montaje una vez desplegado.

Algunas decisiones ahí merecen una explicación. Devuelvo un 200 silencioso al honeypot a propósito; un 4xx le indica al autor del bot qué debe corregir.

El controlador suscribe al contacto después de cada sincronización en lugar de depender de la llamada de sincronización para la pertenencia a la lista, de modo que un contacto que regresa y vuelve a enviar el formulario termina en la lista de todos modos.

La referencia de estado de lista de ActiveCampaign advierte que esto vuelve a suscribir a un contacto que se había dado de baja de esa lista, lo cual es intencional aquí porque el visitante acaba de optar por volver a registrarse.

El cuerpo de sincronización omite un nombre vacío, por lo que un contacto que regresa y omite ese campo mantiene el nombre que ya figura en el archivo. La comprobación de origen solo bloquea las publicaciones de navegador entre sitios; trátalo como un mínimo.

Ejecuta npm run dev y publica en http://localhost:3000/api/contact con un campo de correo electrónico; sin variables de entorno configuradas, deberías obtener la respuesta 500 "Servidor mal configurado", lo que demuestra que la ruta está conectada.

4. Configura las variables de entorno en Webflow Cloud

Añade las seis variables al entorno del proyecto de Webflow Cloud en lugar de a un archivo confirmado. La documentación de variables de entorno indica que "tanto las variables de entorno secretas como las no secretas están disponibles para el proceso de compilación de tu aplicación y para la aplicación desplegada en tiempo de ejecución", y los secretos se ocultan en los registros de compilación, por lo que la clave de API puede ser un secreto sin romper la compilación.

Aquí tienes todas las variables que lee el controlador y de dónde proviene su valor:

Una fila faltante en ActiveCampaign devuelve una respuesta 500. Si falta SITE_ORIGIN se desactiva silenciosamente la comprobación de origen, y si falta THANK_YOU_URL o ERROR_URL se muestra al visitante el JSON sin procesar, así que configúralas todas.

Para el trabajo local, pongo los mismos nombres en .env.local con los valores de prueba. SITE_ORIGIN es el que cambia al lanzar: una vez que la aplicación se monta en un dominio personalizado (Premium o superior), actualízalo al origen de producción o cada envío real será rechazado con un 403 y enviado a la página de error. Vuelve a desplegar después de guardar para probar con una compilación que tenga los nuevos valores.

Después del nuevo despliegue, enviar un correo electrónico a la ruta montada desde una herramienta como curl con una cabecera Origin que coincida con SITE_ORIGIN devuelve { "ok": true }, y el contacto aparece en tu lista de ActiveCampaign.

5. Apunta el formulario de Webflow a la ruta y prueba la automatización

Cambio el destino del formulario en lugar de reconstruirlo. En el panel de Ajustes del formulario, bajo Enviar a, reemplaza los destinos de Webflow y notificaciones por correo electrónico con una acción personalizada.

Introduce la ruta montada completa como URL (para un montaje /subscribe que es /subscribe/api/contact) y elige POST. El segmento de montaje es la parte que es fácil olvidar: la ruta reside bajo la ruta de montaje en el dominio del sitio, no en la raíz del sitio.

Con la acción apuntando a tu ruta, la ruta controla el envío. La documentación de formularios de Webflow señala que una acción personalizada omite el manejo de formularios de Webflow, por lo que los envíos ya no se almacenan en Webflow; el visitante llega a tu página de agradecimiento o de error, y el registro vive en ActiveCampaign.

Luego alinea los nombres de los campos. El controlador lee email, first-name, y website, así que configura el nombre de cada entrada para que el atributo name renderizado coincida exactamente; revisa el HTML de la página publicada en lugar de confiar en la etiqueta.

Añade el campo website como honeypot y ocúltalo con una clase configurada en display: none. Un visitante real nunca lo verá, y un bot que lo rellene recibirá la respuesta de éxito silencioso.

Probando la integración

Publica en el dominio de pruebas y envía un correo electrónico real. Como el formulario se envía de forma nativa, el navegador sigue la redirección 303 a la página de agradecimiento; un correo electrónico rechazado o un error de ActiveCampaign redirigen a la página de error.

Luego, verifica que el contacto esté en la lista de ActiveCampaign y que el primer paso de la automatización esté en cola. Si la automatización envía un correo electrónico, este llegará según su propio horario; la suscripción a la lista es lo que estás probando aquí.

Una vez que la automatización se activa en el dominio de pruebas, tienes un flujo de trabajo funcional: envío del formulario, gestor de rutas (Route Handler), contacto en ActiveCampaign, suscripción a la lista y automatización.

¿Qué causa que los envíos de formularios de ActiveCampaign y Webflow Cloud fallen?

Los fallos se dividen en cuatro categorías: la directiva de tiempo de ejecución de Next.js, la ruta de montaje, las credenciales de ActiveCampaign en el proyecto desplegado y la configuración del propio activador de la automatización.

El primero aparece durante la compilación, mientras que los otros tres solo se manifiestan después de publicar y enviar el formulario.

La compilación de Webflow Cloud falla en el gestor de rutas

Causa: Una página de documentación de Webflow Cloud todavía indica añadir la directiva de tiempo de ejecución "edge" a las rutas de la API. Seguir esto al pie de la letra genera una compilación defectuosa, ya que Webflow Cloud despliega Next.js a través del adaptador OpenNext Cloudflare y dicho adaptador no es compatible con el objetivo de tiempo de ejecución "edge" de Next.js.

La documentación usa "edge" para dos cosas distintas en la misma página: la plataforma Cloudflare Workers donde se ejecuta tu aplicación y el objetivo de tiempo de ejecución de Next.js que selecciona la directiva. La frase sobre la plataforma hace que la directiva parezca obligatoria.

Solución: Empiezo eliminando la línea de y cualquier otro archivo que la contenga, y luego vuelvo a desplegar. El gestor ya se ejecuta en Workers sin ella. Interpreta cualquier mención futura en la documentación sobre el tiempo de ejecución "edge" como una descripción de dónde se ejecuta la aplicación.route.ts

Si más adelante añades un middleware, por ejemplo para mover la verificación de origen fuera de la ruta, te encontrarás con un límite relacionado: Next.js 16 renombra a , y se ejecuta en el tiempo de ejecución de Node.js sin posibilidad de optar por el tiempo de ejecución "edge".middleware.tsproxy.tsproxy

La página de personalización de frameworks de Webflow Cloud dice: "El middleware de tiempo de ejecución de Node.js no es compatible. Solo funciona el middleware de tiempo de ejecución Edge en el entorno de ejecución de Workers". Mantén el archivo con el nombre en Webflow Cloud, incluso en Next.js 16.middleware.ts

El formulario funciona con next dev pero devuelve un error 404 en el sitio publicado

Causa: Localmente, la ruta responde en ; en Webflow Cloud responde bajo la ruta de montaje, y una acción de formulario de solicita a la raíz del sitio una ruta que la aplicación no sirve allí. El se inyecta durante la compilación, pero nada reescribe lo que solicita el navegador./api/contact/api/contactbasePath

La documentación de "trae tu propia aplicación" lo explica claramente: "Las llamadas fetch del lado del cliente deben incluir manualmente la ruta base". Una acción de formulario nativa también es una solicitud del navegador, por lo que se aplica la misma lógica.

Solución: Configura la acción personalizada a la ruta montada ( para un montaje ) y vuelve a publicar. Si más adelante mueves el envío a un script que llama a , añade una variable configurada con la ruta de montaje, ya que Webflow Cloud no la crea, y construye la URL a partir de ella en lugar de escribirla directamente./subscribe/api/contact/subscribefetchNEXT_PUBLIC_BASE_PATH

Los envíos llegan a la página de error en el sitio desplegado pero funcionan localmente

Causa: Un error 502 significa que ActiveCampaign rechazó o nunca respondió a la solicitud, y la ruta registra el estado devuelto. Las causas habituales son una clave pegada con un espacio al final, o una URL de API guardada con o una barra diagonal al final, lo cual rompe todas las rutas de solicitud./api/3

Un error 429 significa que la cuenta alcanzó el límite de tasa de ActiveCampaign de 5 solicitudes por segundo, y cada registro utiliza dos. Si una prueba curl contra la ruta desplegada devuelve un error 500 "Servidor mal configurado", falta una variable de ActiveCampaign en el proyecto de Webflow Cloud, porque nunca sale de tu máquina..env.local

Solución: Elimina los espacios en blanco de la clave y guarda la URL de la API sin y sin barra diagonal al final. Luego, vuelve a añadir cualquier variable faltante en el proyecto de Webflow Cloud, configurando la clave como un secreto, y vuelve a desplegar; los secretos se ocultan en los registros de compilación, así que confirma el valor volviéndolo a pegar en lugar de leerlo en un registro./api/3

El contacto aparece en la lista de ActiveCampaign, pero la automatización nunca se inicia

Causa: La ruta cumplió su función una vez que el contacto está en la lista, por lo que el problema reside en la configuración de la automatización. Es posible que la automatización esté inactiva o que su activador haga referencia a una lista distinta al ID en .ACTIVECAMPAIGN_LIST_ID

Un contacto que ya estaba suscrito no genera una nueva suscripción, por lo que el activador no se dispara para él, y un activador configurado para ejecutarse una sola vez ignora a cualquiera que ya haya pasado por la secuencia.

Solución: Activa la automatización, abre su activador y asígnalo a la lista en la que tu controlador suscribe a los contactos. Realiza una prueba con una dirección de correo electrónico nueva que nunca haya estado en la lista.

Si deseas que los contactos que regresan vuelvan a entrar, abre las opciones del activador y cambia Ejecutar una vez por Ejecutar varias veces; solo volverán a entrar después de darse de baja y suscribirse de nuevo.

Qué puedes crear a continuación con ActiveCampaign y Webflow

La misma estructura de ruta funciona para un segundo formulario que etiqueta contactos por campaña, o para un formulario de registro que también verifica el número de teléfono del visitante, tal como lo hace la guía de validación de teléfono antes de que cualquier dato abandone el sitio.

Para obtener una visión más amplia de la integración desde el lado de ActiveCampaign, su sección de aplicaciones destacadas cubre lo que la aplicación nativa añade más allá de los formularios.

Para una personalización más allá de un único controlador de rutas, la documentación para desarrolladores de Webflow cubre la personalización del marco de trabajo de Webflow Cloud.