Crea un formulario de solicitud de presupuesto sin subida de archivos

Pide el brief como enlace a una carpeta compartida en un campo url, porque Ikiform rechaza la subida de archivos con 422 files_not_supported. Mantén el servicio y el presupuesto como opciones fijas para que todas las solicitudes lleguen con la misma forma, y promete un plazo de respuesta en el mensaje de éxito. Después envía cada solicitud al equipo con su fecha límite, para que la promesa se cumpla.

Qué tiene de distinto una solicitud de presupuesto

Una solicitud de presupuesto viene con material: un brief, un plano, una hoja de cálculo de piezas, el diseño del año pasado. La respuesta habitual es un input de archivo. Aquí eso no funciona, y vale la pena saber por qué antes de diseñar en torno a ello.

La subida de archivos todavía no está disponible. Un envío con un archivo recibe 422 files_not_supported. Se rechaza todo el envío, no solo el archivo, así que un visitante que adjunta un PDF pierde todo lo que escribió a menos que tu formulario muestre el error y conserve sus datos. Un enlace compartido evita el problema y tiene ventajas propias: el cliente puede añadir archivos después de enviar, no hay límite de tamaño y no se acumula nada pesado en tu bandeja de entrada.

Los campos

La plantilla de solicitud de presupuesto tiene el conjunto completo de campos con teléfono, empresa y plazos. La versión de abajo la recorta y añade el campo de enlace. Prueba un enlace http:, o un enlace drive.google.com sin protocolo, para ver cómo responde el campo url.

El formulario

HTML sin más. type="url" muestra el teclado adecuado en el móvil, y el texto de ayuda explica cómo compartir la carpeta, lo que ahorra un ida y vuelta cuando el primer enlace resulta ser privado.

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="POST">
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name" required />

  <label for="email">Work email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="service">What do you need?</label>
  <select id="service" name="service" required>
    <option value="design">Design</option>
    <option value="development">Development</option>
    <option value="both">Design and development</option>
  </select>

  <label for="budget">Budget</label>
  <select id="budget" name="budget">
    <option value="">Not sure yet</option>
    <option value="under_5k">Under $5,000</option>
    <option value="5k_20k">$5,000 to $20,000</option>
    <option value="over_20k">Over $20,000</option>
  </select>

  <label for="files_url">Link to your files</label>
  <input id="files_url" name="files_url" type="url" inputmode="url" placeholder="https://drive.google.com/..." aria-describedby="files-help" />
  <p id="files-help">A shared folder with the brief, mockups or specs. Set it so anyone with the link can view.</p>

  <label for="details">What should the quote cover?</label>
  <textarea id="details" name="details" rows="5" minlength="20" required></textarea>

  <input type="hidden" name="_redirect" value="https://example.com/quote/thanks" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Request a quote</button>
</form>

Los enlaces y la puntuación de spam

Un formulario de presupuesto es el único sitio donde los leads reales envían enlaces a propósito, y los enlaces son una señal de spam. Tres o más enlaces entre todos los campos suman 2 a la puntuación. Un campo url se guarda como un enlace https:// completo, así que cuenta.

La tercera fila es una persona real que pensó que el primer envío había fallado. Por eso el formulario debe tener un campo de enlace, no tres, y por eso el estado de éxito tiene que ser inconfundible. Revisa el filtro Spam cada semana; al marcar una solicitud como no spam se envían en ese momento su email y su webhook.

Pon una fecha límite a cada solicitud

El mensaje de éxito promete un presupuesto en dos días laborables. Este Cloudflare Worker convierte esa promesa en una fecha que el equipo puede ver. Verifica el webhook, calcula la fecha límite a partir de created_at y publica la solicitud en un canal de presupuestos con el enlace a los archivos:

import { verifyWebhook, WebhookVerificationError } from "@ikiform/sdk/webhooks";

function addWorkingDays(from: Date, days: number) {
  const date = new Date(from);
  while (days > 0) {
    date.setUTCDate(date.getUTCDate() + 1);
    const day = date.getUTCDay();
    if (day !== 0 && day !== 6) days -= 1;
  }
  return date.toISOString().slice(0, 10);
}

export default {
  async fetch(request: Request, env: { IKIFORM_WEBHOOK_SECRET: string; SLACK_QUOTES_WEBHOOK: string }) {
    const payload = await request.text();
    let event;
    try {
      event = await verifyWebhook({ payload, headers: request.headers, secret: env.IKIFORM_WEBHOOK_SECRET });
    } catch (error) {
      if (error instanceof WebhookVerificationError) return new Response(error.reason, { status: 400 });
      throw error;
    }
    if (event.type !== "submission.created") return new Response(null, { status: 204 });

    const quote = event.data.fields;
    const due = addWorkingDays(new Date(event.data.created_at), 2);
    const lines = [
      `Quote due *${due}*: ${quote.service} for ${quote.name} (${quote.budget ?? "budget not given"})`,
      quote.files_url ? `Files: ${quote.files_url}` : "No files linked. Ask for them in the first reply.",
      `Reply: mailto:${quote.email}`,
    ];

    const response = await fetch(env.SLACK_QUOTES_WEBHOOK, {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ text: lines.join("\n") }),
    });
    if (!response.ok) return new Response(`Slack answered ${response.status}`, { status: 502 });
    return new Response(null, { status: 204 });
  },
};

• Los días laborables se saltan el sábado y el domingo en UTC. Añade tus festivos si los tienes en cuenta al presupuestar.
• Si falta files_url, aparece un recordatorio para pedir los archivos en la primera respuesta, en lugar de una línea vacía.
• Responder 502 cuando Slack falla hace que Ikiform reintente la misma entrega, así que no se pierde ninguna solicitud.

Añade la URL del Worker en Webhooks, copia el secreto whsec_ en IKIFORM_WEBHOOK_SECRET y guarda la URL de Slack como secreto. La guía de Slack explica cómo crear el incoming webhook.

Comprueba que funciona

1. Envía el formulario con un enlace a una carpeta de Google Drive o Dropbox. Abre el enlace del email de notificación en una ventana privada para confirmar que se puede ver.
2. Envía el formulario con un enlace http:. El envío se rechaza con 422 y el mensaje nombra files_url.
3. Busca type="file" en tus plantillas y quita todas las coincidencias de los formularios de presupuesto que envían a Ikiform.
4. Revisa el canal de presupuestos. El mensaje muestra la fecha límite a dos días laborables y el enlace a los archivos.
5. Pulsa Reply en el email de notificación. Escribe a la dirección del formulario.

Errores comunes

• Enlaces privados. El fallo más común es un enlace que solo puede abrir su dueño. Explica en el texto de ayuda cómo compartirlo, y pide acceso en la primera respuesta en lugar de esperar.
• Clientes con archivos y sin carpeta. Diles que respondan a tu primer email con adjuntos. El reply-to pone sus archivos en un hilo de email normal con tu equipo.
• Alcances largos. Los emails de notificación muestran valores de hasta 500 caracteres. El texto completo de details está en el panel y en el webhook.
• Sin email de confirmación. Ikiform no envía email a la persona que rellena el formulario. El mensaje en la página es la confirmación, así que concreta el plazo de respuesta.

Preguntas