Envía un formulario a varias direcciones de email

Añade a cada persona como destinataria del formulario en el panel: a los miembros del espacio de trabajo marcándolos, y a cualquier otra persona mediante un enlace de confirmación, hasta 10 direcciones. Todos reciben su propia copia de cada envío. Para mandar las preguntas de ventas a una persona y las de soporte a otra, reparte según un campo con un webhook.

Qué cambia aquí

Los scripts PHP antiguos y algunos servicios de formularios dejan que el formulario indique sus propios destinatarios, con un campo oculto to o cc. Es cómodo, y también es la forma en que los formularios de contacto se convierten en relays de spam: un bot cambia el campo oculto y tu servidor envía correo a quien quiera, desde tu dominio. Ikiform no tiene campo de destinatario. Quién recibe los emails se configura en el panel, y cualquiera de fuera de tu espacio de trabajo tiene que confirmar primero.

Eso deja dos tareas distintas, que se resuelven en sitios distintos:

Envía cada envío a todo el equipo

1. Abre el formulario en el panel y luego Settings y Notifications. Asegúrate de que Email new submissions está activado.
2. Marca a cada miembro del espacio de trabajo que deba recibir emails. Solo aparecen los miembros con una dirección verificada.
3. Para cualquier persona de fuera del espacio de trabajo, escribe su dirección en Add someone outside the workspace y pulsa Send link. Puedes añadir 5 por formulario.
4. Pídeles que confirmen. Hasta que lo hagan, su fila dice Waiting for confirmation y no reciben nada.

Los destinatarios externos ven los campos del envío y un enlace para darse de baja; no reciben un enlace al panel, porque no tienen cuenta. Los miembros reciben un botón View submission. Si alguien se va, quita su fila; si se da de baja, su fila también desaparece.

Miembros y direcciones externas

Los dos tipos de destinatario se comportan de forma distinta, algo que importa al decidir a quién añades y dónde:

Dale un puesto en el espacio de trabajo a quien responde los mensajes, para que pueda ver los envíos anteriores y el spam. Usa direcciones externas para quien solo necesita estar al tanto, como un responsable o una bandeja compartida.

Dirige cada envío según el tema

Los destinatarios no pueden depender de lo que eligió el visitante. Para eso, añade un campo que indique el equipo y deja que un pequeño handler de webhook elija la dirección. Este es el formulario:

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label for="department">Who should read this?</label>
  <select id="department" name="department" required>
    <option value="sales">Sales</option>
    <option value="support">Support</option>
    <option value="billing">Billing</option>
  </select>

  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name" required />

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

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Send</button>
</form>

Define department como campo select en el panel, para que un envío solo pueda llevar sales, support o billing. Un bot que envía cualquier otra cosa recibe 422 validation_failed y nunca llega a tu handler.

Después, el handler. Verifica la firma, elige el equipo a partir de department y envía a través de tu propio proveedor de email, aquí Resend. Como el email lo envías tú, también eliges su asunto:

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

const resend = new Resend(process.env.RESEND_API_KEY);

const TEAMS: Record<string, string[]> = {
  sales: ["sales@example.com"],
  support: ["support@example.com", "oncall@example.com"],
  billing: ["accounts@example.com"],
};

export async function POST(request: Request) {
  const payload = await request.text();
  try {
    const event = await verifyWebhook({
      payload,
      headers: request.headers,
      secret: process.env.IKIFORM_WEBHOOK_SECRET!,
    });
    if (event.type !== "submission.created") return new Response(null, { status: 204 });

    const fields = event.data.fields;
    const department = String(fields.department ?? "support");
    const { error } = await resend.emails.send(
      {
        from: "Website <forms@example.com>",
        to: TEAMS[department] ?? TEAMS.support,
        replyTo: typeof fields.email === "string" ? fields.email : undefined,
        subject: `[${department}] ${String(fields.name ?? "New message")}`,
        text: Object.entries(fields)
          .map(([key, value]) => `${key}: ${String(value)}`)
          .join("\n"),
      },
      { idempotencyKey: event.id },
    );
    if (error) return new Response(error.message, { status: 502 });
    return new Response(null, { status: 204 });
  } catch (error) {
    if (error instanceof WebhookVerificationError) return new Response(error.reason, { status: 400 });
    throw error;
  }
}

• Las direcciones están en tu código, no en el formulario. El visitante elige el nombre de un equipo, nunca una dirección.
• replyTo hace que Reply siga apuntando al visitante, como hace el propio email de Ikiform.
• idempotencyKey: event.id hace que una entrega reintentada no envíe nada nuevo. Ikiform reintenta, con el mismo id, una entrega que no recibe un 2xx.
• Un 502 cuando falla el proveedor le dice a Ikiform que reintente más tarde, así una caída breve no pierde ningún mensaje.
• Los departamentos desconocidos o ausentes pasan a soporte en lugar de descartar el mensaje.

Añade la URL en Webhooks en el panel y copia su secreto whsec_ en IKIFORM_WEBHOOK_SECRET. La documentación de webhooks cubre los reintentos y el payload. ¿Prefieres no programar? Un flujo de Zapier o n8n con un filtro por departamento hace lo mismo.

Deja activado el email de Ikiform para una persona como respaldo, o desactiva Email new submissions para que nadie reciba el mensaje dos veces.

Comprueba que funciona

1. Revisa cada fila de destinatario en los ajustes de Notifications del formulario. Ninguna debe decir Waiting for confirmation.
2. Rellena el formulario en tu página y envíalo. Llegas a tu página de agradecimiento, o a la alojada de Ikiform.
3. Cada destinatario recibe su propio email. Pide a uno que mire la línea To: solo muestra su dirección.
4. Si repartes por webhook, envía una vez por departamento y revisa el registro de entregas en Webhooks. Cada una muestra succeeded.
5. Envía con el honeypot relleno, _gotcha=bot. Sigue recibiendo una respuesta de éxito, pero el envío se guarda como spam y no manda ningún email ni webhook.

Detalles a tener en cuenta

• Sin CC ni BCC. Cada destinatario recibe un mensaje aparte, así que no hay un hilo compartido. Acordad quién responde, o reparte por tema.
• El límite cuenta envíos, no destinatarios. A partir de 50 envíos por hora en un formulario, todos los destinatarios reciben el resumen en su lugar.
• Cambios en el equipo. Cuando alguien deja el espacio de trabajo, deja de recibir emails al instante. Revisa los destinatarios del formulario tras un cambio en el equipo, para que el formulario no se quede sin enviar emails a nadie.
• Una dirección que rebota se pausa. La fila muestra Emails bounced con una fecha, y los emails a esa dirección se reanudan después. Corrige la dirección o quítala.
• Nada va al visitante. Ikiform no envía emails a la persona que rellena el formulario. Los emails de notificación van solo a ti y a tu equipo, así que no hay respuesta automática, email de confirmación ni doble opt-in. Envíalos desde tu herramienta de email, activada por un webhook.

Preguntas