Cómo crear un formulario de solicitud de presupuesto en Webflow sin pasar por caja usando Webflow Cloud

Algunos productos no tienen un precio que puedas añadir a un carrito, como equipos configurables o servicios a medida. El comprador quiere describir lo que necesita y recibir una cifra, pero el proceso de pago exige una transacción cuando lo que debería empezar es una conversación.

En esta guía, crearemos una configuración que mantiene las páginas de producto en el Designer y añade un formulario de presupuesto como una pequeña aplicación Next.js en Webflow Cloud, montada en /quote dentro del mismo sitio.

Cada página de producto enlaza al formulario usando el slug del producto. Un Route Handler valida la solicitud en el servidor y la envía como JSON al sistema que ya utiliza tu equipo de ventas, proporcionando al comprador un número de referencia para futuras consultas.

¿Qué necesitas para crear un formulario de solicitud de presupuesto en Webflow?

Para esta configuración necesitas cuatro cosas: un sitio de Webflow, Next.js 15 o superior con npm, un endpoint HTTPS y acceso al Designer. El montaje en un dominio personalizado requiere un plan Premium o superior.

Confirma cada uno de estos puntos antes de estructurar el proyecto:

• Sitio de Webflow en plan Starter o superior: Webflow Cloud está incluido desde el plan gratuito Starter; el montaje en un dominio personalizado requiere el plan Premium o superior.
• Next.js 15 o superior con npm: El proyecto debe cumplir con el requisito de Next.js 15 e instalarse con npm, ya que Webflow Cloud no admite pnpm ni yarn.
• Un endpoint HTTPS que acepte JSON: Un webhook de entrada de CRM o una herramienta de automatización que tu equipo de ventas ya gestione, ya que el controlador reenvía cada presupuesto en lugar de almacenarlo.
• Acceso de edición al Designer: Lo necesitarás para añadir un botón de "Solicitar presupuesto" a cada página de producto y publicar el sitio una vez montada la aplicación.

Elige la ruta de montaje antes de escribir código. Esta implementación utiliza /quote, por lo que tanto el código cliente de la aplicación como los enlaces en el Designer deben coincidir con ella.

Cómo crear un formulario de solicitud de presupuesto en Webflow Cloud

He creado esto como una aplicación Next.js montada en /quote. Su Route Handler valida cada envío en Cloudflare Workers y lo reenvía a tu sistema de ventas, mientras que un botón en cada página de producto enlaza al formulario.

Los pasos van desde la estructura inicial hasta el enlace publicado, destacando las opciones específicas de Workers donde el código requiere cambios.

1. Estructura el proyecto Next.js con npm

Crea un proyecto Next.js 15 con npm y deja la configuración generada tal cual. Webflow Cloud despliega Next.js a través de su adaptador OpenNext Cloudflare e inyecta la ruta de montaje durante la compilación. No necesitas añadir una ruta base, un modo de salida ni un adaptador en next.config.

Webflow Cloud solo admite npm, así que confirma package-lock.json y ningún otro archivo de bloqueo. Incluyo el flag de npm explícitamente, incluso en máquinas donde pnpm es el predeterminado, porque Webflow Cloud solo admite npm y prefiero no descubrir después de un push que el proyecto se instaló con pnpm o yarn.

Ejecuta el generador desde el directorio de tu proyecto:

npx create-next-app@15 quote-form --typescript --app --use-npm --no-src-dir
cd quote-form

Ahora tienes un proyecto con en la raíz y un directorio, que es donde van la página del formulario y el Route Handler.package-lock.jsonapp

2. Crea la página del formulario y el componente cliente

Reemplaza el generado con una página que lea el identificador del producto de la URL y renderice el formulario. La página en sí es un componente de servidor que espera los searchParams (una promesa en Next.js 15) y pasa el slug del producto a un componente cliente, para que el formulario se rellene automáticamente sin necesidad de analizar la URL en el lado del cliente.app/page.tsx

El componente cliente envía JSON al Route Handler y añade como prefijo la ruta de la solicitud con . Webflow Cloud inyecta la ruta de montaje durante la compilación, pero la documentación indica que las llamadas fetch del lado del cliente deben incluir la ruta base por sí mismas.NEXT_PUBLIC_BASE_PATH

Una solicitud del navegador a /api/quote desde una página en /quote no encontraría el manejador a menos que la ruta incluya el montaje. Un campo trampa (honeypot) oculto completa el formulario; los bots lo rellenan, pero las personas nunca lo ven.

La página del componente de servidor

Empieza con el componente de servidor en :app/page.tsx

import QuoteForm from './quote-form';

type PageProps = {
  searchParams: Promise<{ product?: string }>;
};

export default async function QuotePage({ searchParams }: PageProps) {
  const { product } = await searchParams;

  return (
    <main>
      <h1>Request a quote</h1>
      <QuoteForm product={product ?? ''} />
    </main>
  );
}

Esto te da una página en la ruta de montaje que lee ?product=some-slug y lo transmite hacia abajo. El componente cliente se encarga de la lógica de envío.

El componente de formulario interactivo

Guarda el formulario como :app/quote-form.tsx

'use client';

import { useState, type FormEvent } from 'react';

const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? '';

type Status = 'idle' | 'sending' | 'sent' | 'error';

export default function QuoteForm({ product }: { product: string }) {
  const [status, setStatus] = useState<Status>('idle');
  const [reference, setReference] = useState('');

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setStatus('sending');

    const form = new FormData(event.currentTarget);
    const payload = {
      product: form.get('product'),
      quantity: Number(form.get('quantity')),
      name: form.get('name'),
      email: form.get('email'),
      notes: form.get('notes'),
      website: form.get('website'),
    };

    try {
      const response = await fetch(`${basePath}/api/quote`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        setStatus('error');
        return;
      }

      const data = (await response.json()) as { reference: string };
      setReference(data.reference);
      setStatus('sent');
    } catch {
      setStatus('error');
    }
  }

  if (status === 'sent') {
    return <p>Thanks. Your quote reference is {reference}. Expect a reply by email.</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Product
        <input name="product" defaultValue={product} readOnly />
      </label>
      <label>
        Quantity
        <input name="quantity" type="number" min="1" defaultValue="1" required />
      </label>
      <label>
        Name
        <input name="name" required />
      </label>
      <label>
        Email
        <input name="email" type="email" required />
      </label>
      <label>
        Notes
        <textarea name="notes" rows={4} />
      </label>
      <div style={{ display: 'none' }} aria-hidden="true">
        <input name="website" tabIndex={-1} autoComplete="off" />
      </div>
      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending...' : 'Request quote'}
      </button>
      {status === 'error' && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}

Ejecutar npm run dev y abrir la URL de desarrollo local con ?product=steel-frame-200 debería mostrar el formulario con el campo del producto ya relleno. El envío fallará en este punto porque el Route Handler en aún no existe.app/api/quote/route.ts

3. Escribe el Route Handler que valida y reenvía

Crea el Route Handler añadiendo un manejador POST en que rechace las entradas incorrectas, descarte los envíos de bots (honeypot) y reenvíe la carga útil limpia al endpoint en .app/api/quote/route.tsQUOTE_WEBHOOK_URL

La validación se realiza aquí en lugar de en el navegador porque el navegador es el único lugar en el que no puedes confiar; un atributo de entrada obligatorio no detiene a nadie que envíe JSON directamente.

La rama del honeypot devuelve la misma estructura de respuesta que un envío real, con una referencia generada, sin reenviar nada. El manejador también limita la longitud de los campos y solo acepta productos con formato de slug, para que ningún texto arbitrario o excesivamente largo llegue a tu sistema de ventas.

El manejador reenvía en lugar de almacenar porque no está disponible en la fecha de compatibilidad que fija Webflow Cloud, y el destino correcto para una cotización es el sistema donde alguien responderá a ella.node:fs

Mantén el archivo libre de cualquier directiva de tiempo de ejecución; el manejador ya se ejecuta en el borde (edge) porque Webflow Cloud lo despliega en Cloudflare Workers.

El código del Route Handler

El manejador completo:

import { NextResponse } from 'next/server';

type QuotePayload = {
  product?: unknown;
  quantity?: unknown;
  name?: unknown;
  email?: unknown;
  notes?: unknown;
  website?: unknown;
};

function isNonEmptyString(value: unknown): value is string {
  return typeof value === 'string' && value.trim().length > 0;
}

// A short random suffix keeps two quotes in the same millisecond from sharing a reference.
function newReference(): string {
  return `Q-${Date.now().toString(36).toUpperCase()}-${crypto.randomUUID().slice(0, 4).toUpperCase()}`;
}

export async function POST(request: Request) {
  let body: QuotePayload;
  try {
    body = (await request.json()) as QuotePayload;
  } catch {
    return NextResponse.json({ error: 'Body must be JSON.' }, { status: 400 });
  }

  if (isNonEmptyString(body.website)) {
    // Same response shape as a real submission, so a bot learns nothing.
    return NextResponse.json({ reference: newReference() });
  }

  const quantity = Number(body.quantity);
  const errors: string[] = [];
  if (!isNonEmptyString(body.product) || !/^[a-z0-9-]{1,100}$/.test(body.product)) errors.push('product');
  if (!Number.isInteger(quantity) || quantity < 1) errors.push('quantity');
  if (!isNonEmptyString(body.name) || body.name.length > 200) errors.push('name');
  if (!isNonEmptyString(body.email) || !body.email.includes('@') || body.email.length > 254) errors.push('email');
  if (isNonEmptyString(body.notes) && body.notes.length > 2000) errors.push('notes');

  if (errors.length > 0) {
    return NextResponse.json({ error: 'Invalid fields.', fields: errors }, { status: 400 });
  }

  const webhookUrl = process.env.QUOTE_WEBHOOK_URL;
  if (!webhookUrl) {
    return NextResponse.json({ error: 'Quote destination not configured.' }, { status: 500 });
  }

  const reference = newReference();

  let forward: Response;
  try {
    forward = await fetch(webhookUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        reference,
        product: body.product,
        quantity,
        name: body.name,
        email: body.email,
        notes: isNonEmptyString(body.notes) ? body.notes : '',
        receivedAt: new Date().toISOString(),
      }),
    });
  } catch {
    return NextResponse.json({ error: 'Quote could not be delivered.' }, { status: 502 });
  }

  if (!forward.ok) {
    return NextResponse.json({ error: 'Quote could not be delivered.' }, { status: 502 });
  }

  return NextResponse.json({ reference });
}

El controlador ahora rechaza las entradas incorrectas, descarta los intentos de honeypot y reenvía la carga útil limpia al endpoint configurado.

Validación y controles de seguridad

Revisa los límites de seguridad del controlador:

• Antes de pasar a producción: El formulario es público y el honeypot filtra bots sencillos, pero no limita la tasa de peticiones, así que añade una. La solicitud saliente no está firmada; las preguntas frecuentes a continuación muestran cómo firmarla para que tu sistema de ventas pueda rechazar cualquier cosa que no provenga de este controlador.
• NEXT_PUBLIC_BASE_PATHExposición de secretos: es visible intencionadamente para el navegador y solo contiene /quote; no tiene el prefijo y permanece en el lado del servidor.QUOTE_WEBHOOK_URLNEXT_PUBLIC_

Un envío válido devuelve una referencia y reenvía un JSON con una marca de tiempo receivedAt a tu endpoint de webhook. Si falta un campo, se devuelve un error 400 con los nombres de los campos listados, y si la solicitud al webhook falla, se devuelve un 502 para que el navegador muestre el mensaje de reintento en lugar de un falso éxito.

4. Crea el entorno de Webflow Cloud y configura las variables de entorno

Creo un entorno de Webflow Cloud para el sitio desde el repositorio y establezco /quote como la ruta de montaje del entorno; la guía de "trae tu propia aplicación" documenta el flujo de configuración actual.

Uso el mismo valor para a continuación. Si ambos difieren, es probable que la petición del cliente no encuentre el controlador y devuelva un 404. La configuración del entorno debería mostrar /quote como la ruta de montaje.NEXT_PUBLIC_BASE_PATH

Cuando configuro las variables de entorno, añado como secreto y como valor simple de /quote.QUOTE_WEBHOOK_URLNEXT_PUBLIC_BASE_PATH

Webflow Cloud expone ambos tipos a la compilación y a la aplicación desplegada; como dicen los documentos: "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".

Esa disponibilidad en tiempo de compilación es lo que hace que la variable pública funcione, ya que Next.js integra los valores NEXT_PUBLIC_ en el paquete del cliente cuando compila.

Los secretos se ocultan de los registros de compilación, por lo que la URL del webhook pertenece a esa categoría; una agencia que entrega el sitio no debería dejar el endpoint del CRM de un cliente en texto plano en un registro. Localmente, ejecutas next dev sin una ruta de montaje, así que deja el valor vacío en ..env.local

Variables de entorno locales

Crea con estas dos líneas:.env.local

QUOTE_WEBHOOK_URL=https://example.com/your-inbound-webhook
NEXT_PUBLIC_BASE_PATH=

Reemplaza la URL de webhook de ejemplo con tu endpoint de prueba, reinicia next dev y un envío llegará a ese endpoint; en el sitio en vivo, la petición del navegador se resuelve en /quote/api/quote una vez que despliegues en el siguiente paso.

5. Despliega y enlaza desde el Diseñador

Despliega la aplicación desde el entorno de Webflow Cloud donde configuraste la ruta de montaje /quote, luego apunta un botón de "Solicitar presupuesto" en cada página de producto a /quote. Una ruta de montaje con dominio personalizado requiere un plan Premium o superior, tal como se indica en los requisitos previos.

Una vez que el despliegue sea exitoso, abre el sitio en el Diseñador y selecciona el botón en una página de producto. Configura el enlace del botón a la URL /quote?product= seguida del slug del producto.

Para las páginas de productos gestionadas en una Colección CMS, mantén la URL de presupuesto de cada artículo con su contenido CMS y usa ese valor para el enlace del botón. Cada URL debe incluir tu dominio y terminar en /quote?product= seguido del slug del artículo. Publica el sitio.

La contrapartida es el mantenimiento: cada elemento nuevo necesita que se añada su URL de presupuesto, y el dominio almacenado debe cambiarse si cambia el dominio del sitio.

En una página de Colección, el botón utiliza la URL de presupuesto almacenada.

Al hacer clic en "Solicitar presupuesto" en una página de producto publicada, ahora se accede al formulario con el producto ya completado, y al enviar la solicitud se genera una referencia en pantalla y un registro JSON en su endpoint dentro de la misma petición.

¿Qué hace que un formulario de solicitud de presupuesto falle en Webflow Cloud?

Hago que la mayoría de los formularios de presupuesto vuelvan a funcionar rápidamente comprobando cuatro causas específicas de la plataforma: una directiva de tiempo de ejecución edge, un prefijo /quote que falta, el uso de pnpm o yarn, o una importación de <aux translate="no">next/dynamic</aux>.node:fs

Cada entrada comienza con lo que ves, seguido de la causa específica de la plataforma y el cambio que lo soluciona.

La compilación de Webflow Cloud falla tras añadir una directiva de tiempo de ejecución edge

Causa: La compilación tiene éxito cuando el Route Handler omite el objetivo de tiempo de ejecución edge de Next.js, ya que Webflow Cloud despliega Next.js a través del adaptador OpenNext Cloudflare, que no admite ese objetivo.

Un Route Handler que contiene <aux translate="no">export const runtime = 'edge'</aux> genera una compilación rota. La confusión es comprensible porque "edge" significa dos cosas distintas en la misma página de documentación.export const runtime = 'edge'

La página de "bring-your-own-app" describe la plataforma: "Webflow Cloud despliega tu aplicación utilizando el tiempo de ejecución Edge, lo que permite un alojamiento rápido y distribuido globalmente". Esa afirmación describe Cloudflare Workers, una plataforma edge en la que tu código se ejecuta de todos modos. OpenNext no admite el objetivo de tiempo de ejecución de Next.js por separado, y omitirlo resuelve este fallo.

Solución: Elimina la directiva de <aux translate="no">route.ts</aux> y de cualquier otra ruta o página donde aparezca, y vuelve a desplegar. Tu manejador ya se ejecuta en el edge porque la plataforma lo coloca allí; no es necesario configurar nada en el código.app/api/quote/route.ts

Si más adelante añades middleware, mantenlo en <aux translate="no">middleware.ts</aux>. El <aux translate="no">middleware.ts</aux> de Next.js 16 se ejecuta en el tiempo de ejecución de Node y no puede optar por Edge, mientras que Webflow Cloud solo admite middleware de tiempo de ejecución Edge en el tiempo de ejecución de Workers.middleware.tsproxy.ts

El envío del formulario devuelve un 404 desde /api/quote en el sitio en vivo, pero funciona en next dev

Causa: La petición llega al manejador cuando el navegador hace un POST a /quote/api/quote. En este caso, el navegador está enviando el POST a /api/quote en la raíz del sitio, aunque el manejador resida en /quote/api/quote.

Webflow Cloud inyecta la ruta de montaje en el momento de la compilación, pero la página de "bring-your-own-app" es explícita sobre el navegador: "Las llamadas fetch del lado del cliente deben incluir manualmente la ruta base para llegar correctamente a tus endpoints".

Localmente, la ruta de montaje está vacía, por lo que el mismo código funciona en next dev y solo falla después del despliegue, lo que hace que esto parezca un error de la plataforma en lugar de una discrepancia de ruta.

Leer basePath desde next.config era la solución alternativa antigua, y ese patrón ya no se aplica ahora que la documentación dice que no necesitas añadir una ruta base allí.

Solución: Establece <aux translate="no">NEXT_PUBLIC_BASE_PATH</aux> en /quote en el entorno de Webflow Cloud y mantén la llamada fetch con el prefijo, como en el componente cliente. Confirma que el valor coincide carácter por carácter con la ruta de montaje, incluyendo la barra inclinada inicial y sin barra inclinada final. Vuelve a desplegar, abre el panel de red del navegador y comprueba que el POST va a /quote/api/quote y devuelve la referencia JSON.NEXT_PUBLIC_BASE_PATH

La compilación de Webflow Cloud falla antes de compilar después de que el proyecto se instalara con pnpm o yarn

Causa: Webflow Cloud se instala solo con npm, y la documentación lo indica directamente: "Actualmente, Webflow Cloud solo admite el gestor de paquetes npm". Un repositorio creado o instalado posteriormente con pnpm o yarn contiene <aux translate="no">pnpm-lock.yaml</aux> o <aux translate="no">yarn.lock</aux>, que pertenecen a un gestor de paquetes que la plataforma no ejecuta.pnpm-lock.yamlyarn.lock

Esto puede ocurrir cuando un segundo desarrollador con un gestor de paquetes predeterminado diferente instala dependencias y confirma un archivo de bloqueo (lockfile). La compilación puede detenerse antes de llegar a tu código, por lo que el controlador y la página parecen estar bien y el fallo parece surgir de la nada.

Solución: Elimina o , elimina , ejecuta npm install y confirma el resultante. Reemplaza cualquier instrucción pnpm add o yarn add en el archivo README de tu proyecto por npm install para que la siguiente persona no vuelva a introducir el problema. Envía los cambios y vuelve a desplegar; la compilación debería continuar con la compilación de la aplicación.pnpm-lock.yamlyarn.locknode_modulespackage-lock.json

El controlador desplegado da error en un importnode:fs

Causa: Webflow Cloud ejecuta tu controlador en Cloudflare Workers, no en un servidor Node, y no está disponible en la fecha de compatibilidad que fija Webflow Cloud. El módulo requiere una fecha de compatibilidad más reciente de la que establece la plataforma actualmente, por lo que una importación de en un controlador de ruta puede fallar una vez desplegada.node:fsnode:fs

Los desarrolladores que vienen de un entorno Node recurren a appendFile como una forma rápida de registrar presupuestos en el disco, y como el Node local tiene un sistema de archivos, el código puede parecer funcionar bajo next dev.

Nada sintáctico señala el problema; el código es TypeScript válido que apunta a un entorno de ejecución que la aplicación desplegada no tiene. El módulo faltante es también la razón por la que el controlador en esta compilación reenvía cada presupuesto en lugar de persistirlo en cualquier parte de la plataforma.

Solución: Elimina la importación de y envía cada envío a través de fetch al punto final en , donde tu CRM o herramienta de automatización lo almacena. Si solo necesitabas ayudantes de ruta, está disponible en el entorno de ejecución y puede quedarse.node:fsQUOTE_WEBHOOK_URLnode:path

Para obtener un registro duradero por tu parte, elige un almacén externo con una API HTTP y reenvía los datos desde el mismo controlador, ya que cualquier persistencia debe residir fuera del Worker.

Qué puedes construir a continuación con formularios de solicitud de presupuesto y Webflow

El equipo de marketing sigue editando las páginas de productos en el Designer, y la única persona técnica del equipo gestiona un controlador lo suficientemente pequeño como para leerlo de una sentada. Para un registro duradero, dirige cada presupuesto a tu CRM, como en HubSpot sin Zapier, o a un almacén externo con una API HTTP desde el mismo controlador.

Para una personalización más profunda más allá de un único controlador de ruta, la documentación para desarrolladores de Webflow cubre las variables de entorno y las restricciones del marco de trabajo en el entorno de ejecución de Workers.