Cómo enviar imágenes de formularios de Webflow al CMS como borradores usando Zapier y Webflow Cloud

La mayoría de los sitios basados en fotos tenían el mismo paso manual ignorado. Los visitantes envían una imagen a través de un formulario (por ejemplo, una galería comunitaria), el archivo llega a los envíos del formulario del sitio, y un responsable de marketing lo descarga, abre el CMS, crea un elemento y vuelve a subir el mismo archivo. El formulario y el CMS funcionan, pero una persona debe gestionar el traspaso.

En esta configuración, un Zap se inicia con cada envío de formulario de Webflow y envía la URL del archivo a un Route Handler en una aplicación de Webflow Cloud. La ruta crea el elemento del CMS con estado de borrador. El sitio permanece en la plataforma Webflow existente; la única pieza nueva es un breve Route Handler desplegado junto a él.

¿Qué necesitas para subir imágenes de formularios al CMS con Zapier en Webflow?

Debes tener preparadas estas cuentas, herramientas y detalles del proyecto antes de empezar:

• Colección del CMS: Una colección con campos para nombre, pie de foto en texto plano e imagen, además del ID de la colección que requiere la URL para crear elementos.
• Formulario de carga de archivos: Un formulario en ese sitio con un campo de carga de archivos. El centro de ayuda de Webflow limita este campo al "Plan Premium Site (o plan heredado Business Site), plan Ecommerce Plus Site o plan Ecommerce Advanced Site".
• Token de API de Webflow: Un token secreto con acceso de escritura a los elementos del CMS de ese sitio, almacenado únicamente en las variables de entorno de Webflow Cloud y en tu .env.local local.
• Cuenta de Zapier: Un Zap que utilice el disparador de envío de formularios de Webflow y una acción POST de Webhooks by Zapier. Webhooks by Zapier está disponible en todos los planes, y como es un Zap de dos pasos, el plan gratuito es suficiente.
• Node.js y npm: Instala Node.js y npm en tu equipo. Webflow Cloud solo admite el gestor de paquetes npm, por lo que los comandos pnpm y yarn no funcionarán aquí.
• Repositorio de Git: Un repositorio para la aplicación Next.js que conectarás a Webflow Cloud, además de una ruta de montaje elegida (yo uso /tools para aplicaciones de utilidad como esta).

Con estos elementos listos, configura primero el formulario y luego crea la ruta que conecta Zapier con el CMS.

6 pasos para subir imágenes de formularios al CMS con Zapier en Webflow Cloud

Zapier reenvía la URL del archivo existente del envío a un Route Handler de Next.js en Webflow Cloud. El controlador verifica un secreto compartido antes de enviar la solicitud al CMS.

El proceso avanza desde la configuración del formulario hasta el despliegue de la ruta, el mapeo en Zapier y una prueba final de envío en vivo.

1. Añade un campo de carga de archivos al formulario de Webflow

Pon nombre a cada campo del formulario para reconocerlo fácilmente cuando Zapier exponga los datos del envío para el mapeo. En el Designer, añade un elemento File Upload dentro del bloque del formulario, selecciónalo y, en la configuración del elemento, establece el Name como photo.

Haz lo mismo para un campo de texto llamado name y un área de texto llamada caption, y establece el nombre del propio formulario como photo-submission. Publica el sitio.

Luego, cambia una configuración del sitio o nada de lo que sigue funcionará. El centro de ayuda de Webflow es explícito: "De forma predeterminada, solo los usuarios que han iniciado sesión en Webflow pueden acceder a los archivos cargados a través de un formulario", y la solución es desactivar Restringir acceso a archivos cargados en Configuración del sitio > Aplicaciones e integraciones.

El mismo artículo añade: "También deberás desactivar esta opción si quieres enviar los archivos de tus formularios a un proveedor de almacenamiento en la nube diferente mediante Zapier u otra integración de terceros".

Requisitos de accesibilidad de archivos

Un Zap que envía la URL del archivo al CMS es exactamente ese caso. Con la restricción activada, el CMS no puede obtener la imagen. Desactivarla hace que cualquier archivo cargado sea legible por cualquiera que tenga su enlace, así que no reutilices este formulario para nada confidencial, como documentos de identidad o currículums.

Aquí coinciden dos límites de tamaño y tipo. El formulario acepta archivos de hasta 10 MB y varios tipos de documentos, pero la API del CMS acepta imágenes de hasta 4 MB, así que informa a los visitantes sobre el límite de 4 MB en el texto de ayuda del formulario y ten en cuenta que los archivos PDF serán rechazados.

Aquí los nombres de los campos importan más que las etiquetas. Los nombres de los campos son lo que reconocerás al asignar datos en Zapier, y un formulario llamado "Formulario 3" con un campo llamado "Campo" es un dolor de cabeza cuando el cliente pregunta por qué dejaron de llegar los pies de foto. Primero renombro los campos para evitar ese problema de asignación.

Establece la entrada Nombre del elemento en photo. Envía el formulario una vez con una imagen de prueba. Revisa las entradas del formulario del sitio para esa entrada; el archivo cargado debería aparecer como un enlace, y ese enlace es lo que el Zap reenviará a tu ruta.

2. Crea la aplicación Next.js con npm

Crea la aplicación Next.js con la configuración predeterminada generada por Next.js 15. Los requisitos de "bring-your-own-app" de Webflow Cloud enumeran Next.js 15 o superior.

Ejecuta el andamiaje desde tu terminal:

npx create-next-app@15 form-images --typescript --app --no-tailwind --eslint
cd form-images

Ahora tienes un proyecto con App Router que no contiene nada a lo que Webflow Cloud se oponga. Resiste la tentación de configurarlo más: la página de "bring-your-own-app" de Webflow lo indica como "Sin adaptador, sin ruta base, sin wrangler.json". La ruta de montaje se inyecta en el momento de la compilación, y añadir la tuya propia basePath va en contra de eso.

Ejecuta npm run dev. Si la página predeterminada de Next.js se carga en localhost:3000, el proyecto está listo para la ruta.

3. Escribe el controlador de ruta que crea el elemento del CMS

Crea app/api/zapier-image/route.ts y haz que el controlador autentique la solicitud con un encabezado que Zapier enviará antes de validar la carga útil. Luego, pasa la URL de la imagen directamente desde el envío del formulario en una solicitud a la API de Webflow CMS.

Pega esto como el archivo completo:

// app/api/zapier-image/route.ts
import { NextResponse } from "next/server";

type ZapPayload = {
  name?: string;
  caption?: string;
  imageUrl?: string;
};

// Compare over the fixed expected-secret length without an input-dependent
// early return. This implementation works in the deployed Workers runtime
// and under local `next dev`.
function sameSecret(provided: string, expected: string): boolean {
  let diff = provided.length ^ expected.length;
  for (let i = 0; i < expected.length; i++) {
    diff |= (provided.charCodeAt(i) || 0) ^ expected.charCodeAt(i);
  }
  return diff === 0;
}

function slugify(value: string): string {
  return value
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "")
    .slice(0, 60);
}

export async function POST(request: Request) {
  const provided = request.headers.get("x-zapier-secret") ?? "";
  const expected = process.env.ZAPIER_SHARED_SECRET ?? "";
  if (!expected || !sameSecret(provided, expected)) {
    return NextResponse.json({ error: "unauthorized" }, { status: 401 });
  }

  let body: ZapPayload;
  try {
    body = (await request.json()) as ZapPayload;
  } catch {
    return NextResponse.json({ error: "body must be JSON" }, { status: 400 });
  }

  if (!body.name || !body.imageUrl) {
    return NextResponse.json(
      { error: "name and imageUrl are required" },
      { status: 400 }
    );
  }

  let imageUrl: URL;
  try {
    imageUrl = new URL(body.imageUrl);
  } catch {
    return NextResponse.json({ error: "imageUrl is not a URL" }, { status: 400 });
  }
  if (imageUrl.protocol !== "https:") {
    return NextResponse.json({ error: "imageUrl must use https" }, { status: 400 });
  }

  const itemsUrl = process.env.WEBFLOW_ITEMS_URL;
  const imageField = process.env.WEBFLOW_IMAGE_FIELD ?? "photo";
  if (!itemsUrl || !process.env.WEBFLOW_API_TOKEN) {
    return NextResponse.json({ error: "server not configured" }, { status: 500 });
  }

  // Without skipInvalidFiles=false, Webflow drops an image it cannot fetch and still returns 202.
  const createUrl = new URL(itemsUrl);
  createUrl.searchParams.set("skipInvalidFiles", "false");

  const webflowRes = await fetch(createUrl, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.WEBFLOW_API_TOKEN}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      isDraft: true,
      fieldData: {
        name: body.name,
        slug: `${slugify(body.name) || "submission"}-${Date.now()}`,
        caption: body.caption ?? "",
        [imageField]: { url: imageUrl.toString() },
      },
    }),
  });

  if (!webflowRes.ok) {
    const detail = await webflowRes.text();
    return NextResponse.json(
      { error: "webflow rejected the item", detail },
      { status: 502 }
    );
  }

  return NextResponse.json({ ok: true }, { status: 201 });
}

isDraft: true mantiene las imágenes enviadas por los usuarios en revisión hasta que un editor abre el borrador, lo comprueba y lo publica. El slug obtiene un sufijo de marca de tiempo para que dos visitantes con el mismo nombre sigan produciendo dos slugs diferentes.

La comparación del secreto se escribe a mano porque la implementación debe funcionar en el entorno de ejecución de Workers desplegado y bajo next dev. El bucle se ejecuta durante la longitud fija del secreto configurado y registra una discrepancia de longitud suministrada sin retornar antes de tiempo.

Consideraciones de seguridad y limitación de tasa

Tal como está escrita, la ruta autentica las solicitudes solo con el secreto compartido. No limita la tasa de solicitudes, no establece un tope al volumen de solicitudes ni al gasto, no verifica un cuerpo de webhook firmado, no comprueba una marca de tiempo ni rechaza cargas útiles repetidas.

El token de API y el secreto compartido permanecen solo en el servidor y no utilizan NEXT_PUBLIC_ variables, por lo que el fragmento no los expone intencionalmente al código del cliente.

Cualquiera que obtenga el valor del encabezado puede reutilizarlo para crear elementos del CMS hasta que cambies el secreto, así que añade límites de tasa, un tope de uso o gasto adecuado, y una verificación de solicitud firmada y con límite de tiempo antes de considerar que el endpoint público es resistente a abusos o ataques de repetición.

Configura WEBFLOW_ITEMS_URL a https://api.webflow.com/v2/collections/{collection_id}/items con tu ID de colección insertado.

La referencia de creación de elementos documenta esta estructura de elemento único y su respuesta 202; Webflow ahora dirige las nuevas integraciones al endpoint de /items/insert por lotes, pero este sigue siendo compatible y permite un envío por llamada, y el manejador utiliza webflowRes.ok en lugar de requerir un estado de éxito específico. Haz coincidir caption y photo con los slugs de campo de tu colección.

Para una comprobación local, crea .env.local con WEBFLOW_API_TOKEN, ZAPIER_SHARED_SECRET, WEBFLOW_ITEMS_URL, y WEBFLOW_IMAGE_FIELD. Además, ejecuta export ZAPIER_SHARED_SECRET=your-secret-value en la terminal desde la que enviarás la solicitud, ya que .env.local deja tu entorno de shell sin cambios.

El ejemplo de carga útil apunta a https://example.com/test.jpg; cámbialo por una imagen real alojada públicamente si quieres que la creación tenga éxito.

Prueba del endpoint de forma local

Envía la carga útil desde esa terminal:

curl -i -X POST http://localhost:3000/api/zapier-image \
  -H "Content-Type: application/json" \
  -H "x-zapier-secret: $ZAPIER_SHARED_SECRET" \
  -d '{"name":"Local test","caption":"from curl","imageUrl":"https://example.com/test.jpg"}'

Un encabezado omitido devuelve un 401. La ruta devuelve una respuesta 201 con ok: true cuando todas las comprobaciones previas pasan y Webflow ha recuperado la imagen.

Esa garantía proviene de skipInvalidFiles=false: por defecto, Webflow omite una imagen que no puede recuperar, o una que supera los 4 MB, y aun así informa de éxito, lo que dejaría un borrador con un campo de foto vacío y una marca de verificación verde en Zapier. Un 502 devuelve el texto de error propio de Webflow.

4. Configura las variables de entorno y despliega en Webflow Cloud

Crea un entorno de Webflow Cloud para el repositorio Git conectado y establece su ruta de montaje en /tools. En la configuración de ese entorno, añade WEBFLOW_API_TOKEN y ZAPIER_SHARED_SECRET como secretos y WEBFLOW_ITEMS_URL y WEBFLOW_IMAGE_FIELD como variables simples antes del primer despliegue.

Gestión de secretos del entorno

Genera el secreto compartido con algo largo y aleatorio (por ejemplo, el resultado de openssl rand -hex 32); es lo único que se interpone entre la internet pública y tu token de escritura del CMS.

La página de aplicaciones personalizadas de Webflow confirma el comportamiento deseado: "Tanto las variables de entorno secretas como las no secretas están disponibles para el proceso de compilación de tu aplicación... y permanecen disponibles para la aplicación desplegada en tiempo de ejecución". Los secretos se ocultan en los registros de compilación, pero Webflow describe esa ocultación como "un mecanismo de seguridad, no un flujo de trabajo recomendado para el manejo de secretos", así que nunca imprimas el entorno en un paso de compilación.

Una vez guardada, la lista de variables oculta ambos secretos. Con las variables listas, envía los cambios al repositorio conectado y deja que se ejecute la primera compilación.

Cuando finaliza el despliegue, la ruta está activa en el dominio de tu sitio más /tools/api/zapier-image (el dominio de Webflow del sitio, o un dominio personalizado en planes Premium o superiores).

Un POST básico a esa dirección desde tu terminal debería devolver un 401, tal como lo hizo localmente. Esa respuesta demuestra que la ruta es accesible en la ruta montada y que la comprobación del secreto está activa.

5. Crea el Zap que envía cada envío a la ruta

Crea un Zap de dos pasos a partir del envío de prueba: el disparador de envío de formularios de Webflow, seguido de Webhooks by Zapier con el evento POST. El webhook envía JSON a tu ruta. En el disparador, elige tu sitio de Webflow y el formulario photo-submission, luego pruébalo.

Zapier debería obtener el envío de prueba del formulario photo-submission; comprueba que el campo photo se reciba como un enlace de archivo, y que name y caption se reciban como texto.

En la acción Webhooks by Zapier, configura la URL con tu ruta montada y el tipo de carga útil en JSON. Añade una cabecera llamada x-zapier-secret cuyo valor sea la misma cadena que guardaste como ZAPIER_SHARED_SECRET.

Asigna los campos del cuerpo de la siguiente manera:

La ruta recibe cadenas y pasa la URL del archivo subido directamente al CMS. Por tanto, el controlador requiere HTTPS. Si el campo photo llega como algo distinto a una URL en tus datos de prueba, asigna una versión URL de ese campo cuando Zapier muestre una.

Prueba la acción desde el editor de Zap. Un código 201 con ok: true en la respuesta significa que la ruta aceptó la carga útil y Webflow confirmó la creación del elemento; un 401 significa que el valor de la cabecera y el secreto almacenado no coinciden (el culpable suele ser un espacio al final).

6. Envía una imagen real y comprueba el elemento borrador en el CMS

Activa el Zap y envía el formulario real con una foto auténtica y un nombre distintivo que sea fácil de localizar tanto en el historial de ejecución del Zap como en el CMS. Abre el historial de ejecución del Zap y verifica que el paso del webhook se haya realizado correctamente y devuelto la respuesta de la ruta. Luego, abre el panel del CMS en el Diseñador y selecciona la colección para encontrar el nuevo elemento.

Debería aparecer como un borrador con el nombre y el pie de foto que escribiste. El campo de imagen debería mostrar la foto enviada.

El nuevo elemento debería aparecer en la Colección con una etiqueta de Borrador.

Vigila también el slug. El tuyo se verá como distinctive-name-1726000000000. La marca de tiempo lo hace único, y un editor puede acortarlo antes de publicarlo. Envía una segunda imagen con el mismo nombre para confirmar que el sufijo de la marca de tiempo mantiene el segundo slug único.

Con dos elementos en borrador en la colección, el flujo automatizado se encarga de la resubida del responsable de marketing por ellos.

¿Qué hace que las subidas de imágenes de Zapier al CMS de Webflow fallen?

Failures usually come from runtime configuration, mounted-route URLs, CMS field or file validation, and unsupported Node modules in the Workers environment, with each category producing a recognizable error.

Los fallos suelen deberse a la configuración en tiempo de ejecución, a las URL de rutas montadas, a la validación de campos o archivos del CMS y a módulos de Node no compatibles en el entorno de Workers; cada categoría genera un error reconocible.

Identifica el síntoma visible, busca su causa y aplica la solución correspondiente.

La compilación de Webflow Cloud falla en la ruta de la API con un error de tiempo de ejecución edgeexport const runtime = 'edge'

Causa: La página de "bring-your-own-app" todavía indica que añadas la directiva de tiempo de ejecución edge a las rutas de la API. Webflow Cloud despliega Next.js a través del adaptador OpenNext de Cloudflare. OpenNext requiere la ruta de tiempo de ejecución estándar de Workers, mientras que apunta al tiempo de ejecución edge de Next.js y provoca una compilación fallida.

La documentación utiliza "edge" para dos cosas distintas: Cloudflare Workers como plataforma edge (donde ya se ejecuta tu aplicación) y la directiva de tiempo de ejecución de Next.js (una opción que OpenNext no puede satisfacer), por lo que seguir esa frase al pie de la letra es lo que provoca el fallo.route.ts

Solución: Elimina la línea de y de cualquier otra ruta o página donde la hayas añadido, y vuelve a desplegar. La ruta se ejecutará en Cloudflare Workers con la configuración de tiempo de ejecución estándar.next dev

La prueba de Zapier devuelve un 404 aunque la ruta responde en next dev/api/zapier-image/tools

Causa:fetch Localmente, sirve tu ruta en . La ruta desplegada utiliza en su lugar la URL montada. Una URL de webhook copiada desde tu terminal local omite el segmento , por lo que Zapier envía la petición a una ruta donde la función no está montada.

El mismo mecanismo afecta a cualquier código del lado del cliente en la aplicación: la documentación de Webflow señala que "las llamadas fetch del lado del cliente deben incluir manualmente la ruta base", porque el del navegador no se reescribe automáticamente.NEXT_PUBLIC_BASE_PATH/tools

Solución: Incluye la ruta de montaje en la URL del webhook de Zap y vuelve a probar la acción. Si más adelante añades un front-end a esta aplicación que llame a la ruta desde el navegador, añade una variable configurada con la ruta de montaje (Webflow Cloud no la crea por ti) y anteponla a cada fetch del cliente, en lugar de codificar en componentes que dejarán de funcionar el día que se vuelva a montar la aplicación.webflow rejected the item

El paso de webhook de Zapier devuelve un 502 con fieldDatacaptionWEBFLOW_IMAGE_FIELD

Causa:detail La solicitud superó las comprobaciones de la propia ruta, pero la API del CMS rechazó el que envió la ruta. Por lo general, la clave o el valor no coinciden con el slug del campo de la colección, por lo que Webflow recibe un campo que la colección no tiene.

Otras causas comunes incluyen un archivo que Webflow no acepta, como una imagen de más de 4 MB o un PDF, o un enlace de archivo que no es accesible públicamente porque la opción "Restringir acceso a archivos subidos" sigue activada. La ruta reenvía el cuerpo de la respuesta de Webflow como , por lo que el motivo real llega de vuelta a Zapier junto con el 502.detailcaptionWEBFLOW_IMAGE_FIELD

Solución: Abre el historial de ejecución del Zap y lee el texto en la respuesta del paso del webhook. Si menciona un campo, abre la configuración de la colección, copia los slugs exactos de los campos y actualiza en la ruta o en el entorno de Webflow Cloud, luego vuelve a desplegar.

Si señala la imagen, pega la URL de la foto en una ventana privada del navegador; si el archivo no se abre allí, Webflow tampoco podrá obtenerlo.node:fs

Tras añadir descargas de imágenes, el registro de compilación no puede resolver node:fsnode:path

Causa: Una extensión natural de esta compilación descarga la imagen para inspeccionarla o cambiarle el tamaño, y un primer intento suele escribirla en una ruta temporal. El tiempo de ejecución de Workers de Webflow Cloud establece una fecha de compatibilidad anterior a la que requiere fetch, por lo que la importación falla. ArrayBuffer está disponible, lo que hace que el fallo sea confuso porque el soporte en tiempo de ejecución varía entre los nombres de los módulos de Node.

Solución:crypto.subtle.digest Mantén el procesamiento en memoria. Para inspeccionar la imagen, next dev la URL y trabaja con la respuesta como un o un stream, luego pasa la URL original al CMS.

Para una suma de comprobación sin fines de seguridad para detectar subidas duplicadas, utiliza SHA-256 de , que funciona tanto en Workers como en ; la extensión MD5 de Cloudflare solo funciona en Workers y genera errores localmente. Mantén el hashing fuera de cualquier cosa que controle el acceso; la comprobación del secreto compartido se mantiene tal cual.

Una vez que una imagen enviada llega a un elemento borrador del CMS sin necesidad de que alguien la vuelva a subir, el mismo patrón se aplica a la mayoría del contenido generado por formularios, como las entradas de eventos que se convierten en listados y los testimonios que requieren aprobación antes de publicarse.

La integración de Zapier con Webflow proporciona el disparador, y una ruta de Webflow Cloud intermedia añade validación y garantiza que la imagen esté en el código que tú controlas. Esa misma estructura intermedia también envía datos de formularios a HubSpot sin necesidad de Zapier.