Formulario de RSVP para bodas en tu propia web de boda

Da a cada invitación su propio enlace de RSVP con un código de invitación y los nombres de los invitados, y deja que el formulario muestre un nombre y una elección de menú por invitado. Cada respuesta se envía a Ikiform, así que recibes un email por cada una y un CSV para el catering. Cruza las respuestas con tu lista de invitados en una hoja de cálculo para ver quién no ha contestado, y pausa el formulario después de la fecha límite.

Qué tiene de distinto una boda

Un meetup cuenta a desconocidos. Una boda cuenta una lista de invitados que ya tienes, invitación por invitación. De ahí salen cuatro cosas:

• Una respuesta por invitación, no por persona. Una pareja o una familia responde junta.
• Invitados con nombre, no un número de acompañantes. Invitaste a Ada y a Sam, no a 2. Los acompañantes extra están en la invitación o no lo están.
• Un menú por persona. El catering necesita los totales de pescado, carne y vegetariano, además de los platos infantiles.
• Una fecha límite estricta y una lista de pendientes. El local quiere los números para una fecha, y la lista útil es la de quién no ha respondido.

Los servicios de webs de boda como Zola, The Knot y Joy tienen herramientas de RSVP pensadas para una lista de invitados, con búsqueda por nombre. Si usas uno de ellos para tu web, usa su RSVP. Esta página es para una web de boda hecha por ti, en Squarespace, Carrd, Framer o HTML simple, donde quieres el RSVP en tu propia página.

Ikiform no tiene búsqueda en una lista de invitados ni grupos repetibles, así que el formulario no puede saber por sí solo quién está en una invitación. El truco es poner esa información en el enlace.

Crea un enlace para cada invitación

En tu hoja de la lista de invitados, pon un código corto en la columna A, como okafor o nguyen-family, el hogar en la B y los nombres de pila de los invitados en la C, separados por comas. Esta fórmula en la D crea el enlace:

="https://ada-and-sam.example/rsvp?party=" & A2 & "&names=" & ENCODEURL(C2)

Imprime cada enlace como código QR en la invitación, o pégalo en un mensaje. Escribe los códigos en minúsculas con guiones; el patrón del campo rechaza cualquier otra cosa, lo que detecta pronto un código mal escrito.

El formulario

Pega esto en la página de tu boda, o en un bloque de embed de un creador de sitios. Lee party y names del enlace, añade una fila de nombre y menú por invitado, hasta cuatro, y se oculta después de la fecha límite. Si el enlace no lleva nombres, muestra una sola fila para rellenar.

<form id="rsvp" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <input type="hidden" name="party" id="party">
  <div id="guests"></div>
  <label>Email for updates <input name="email" type="email" autocomplete="email" required></label>
  <label>A song that gets you dancing <input name="song" maxlength="120"></label>
  <label>Anything we should know? <textarea name="note" rows="3" maxlength="1000"></textarea></label>
  <input type="hidden" name="_redirect" value="https://ada-and-sam.example/thank-you">
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">Send our RSVP</button>
</form>
<p id="closed" hidden>RSVPs closed on 1 May. Message us if your plans have changed.</p>

<template id="guest-row">
  <fieldset>
    <legend></legend>
    <label>Name <input data-part="name" maxlength="80" autocomplete="off"></label>
    <label>Meal
      <select data-part="meal">
        <option value="beef">Beef</option>
        <option value="fish">Fish</option>
        <option value="vegetarian">Vegetarian</option>
        <option value="child">Child's menu</option>
        <option value="not_coming">Can't come</option>
      </select>
    </label>
  </fieldset>
</template>

<script>
  const DEADLINE = new Date("2027-05-01T23:59:00+01:00");
  const params = new URLSearchParams(location.search);
  const party = (params.get("party") ?? "").toLowerCase();
  const names = (params.get("names") ?? "").split(",").map((name) => name.trim()).filter(Boolean).slice(0, 4);
  const rsvp = document.getElementById("rsvp");

  if (Date.now() > DEADLINE.getTime()) {
    rsvp.hidden = true;
    document.getElementById("closed").hidden = false;
  } else {
    document.getElementById("party").value = party;
    const rows = names.length ? names : [""];
    rows.forEach((name, index) => {
      const n = index + 1;
      const row = document.getElementById("guest-row").content.cloneNode(true);
      row.querySelector("legend").textContent = name || "Your name";
      const input = row.querySelector('[data-part="name"]');
      input.name = `guest_${n}_name`;
      input.value = name;
      input.required = n === 1;
      row.querySelector('[data-part="meal"]').name = `guest_${n}_meal`;
      document.getElementById("guests").append(row);
    });
  }
</script>

• El menú de cada invitado incluye Can't come, así que un hogar en el que una persona no puede ir sigue enviando una sola respuesta.
• Los campos de nombre vienen rellenos pero se pueden editar, para que un invitado corrija una falta o ponga el nombre de un niño.
• El formulario envía de la forma clásica y llega a tu página de agradecimiento mediante _redirect. Pon ahí la fecha, el lugar y un enlace de calendario; Ikiform no envía emails a tus invitados.
• La fecha límite solo oculta el formulario en el navegador. Ese día, elige también Pause form en Ikiform, para que una pestaña guardada no pueda enviar. Los formularios en pausa responden 403 form_paused.

Pega esta definición en la pestaña Fields del formulario. Pruébalo: un código de invitación con una mayúscula o un espacio no cumple el patrón y muestra el mensaje que configuraste.

Quién no ha respondido y qué pedir

1. Exporta los RSVP como CSV desde Submissions e impórtalos en una pestaña llamada Replies en la hoja de la lista de invitados.
2. Si una invitación respondió dos veces, quédate con su fila más reciente: ordena por created_at, de la más reciente a la más antigua, y elimina duplicados en la columna party.
3. Lista las invitaciones sin respuesta, con los códigos en la columna A de la lista de invitados y party en la columna E de Replies:

=FILTER(A2:C, A2:A <> "", ISNA(MATCH(A2:A, Replies!E2:E, 0)))

Luego cuenta cada menú para el catering. Los nombres nunca coinciden con un valor de menú, así que funciona un único rango que abarque todas las columnas de invitados:

=COUNTIF(Replies!G2:N, "fish")

Antes de enviar las invitaciones

• Configura Allowed domains con el dominio de tu web de boda, y con el dominio de staging del creador de sitios mientras pruebas.
• Ikiform no fusiona ni rechaza envíos repetidos por email. Una repetición idéntica en menos de 24 horas solo suma a la puntuación de spam. Elimina duplicados donde guardes la lista, o al exportar. La respuesta más reciente por código es la que vale.
• Cualquiera con un enlace puede cambiar su código o sus nombres. Para una boda no pasa nada; tu hoja decide quién estaba invitado, y la lista de sin respuesta deja ver cualquier cosa rara.
• Puede que los familiares mayores no usen el formulario. Anota en tu hoja las respuestas por teléfono y en papel para que los recuentos estén completos.

Compruébalo antes de enviar las invitaciones

1. Abre tu propio enlace de invitación en un móvil. Aparecen los nombres, cada uno con una elección de menú.
2. Elige Can't come para un invitado, envíalo y llega a tu página de agradecimiento.
3. Abre Submissions en el panel. El nuevo envío está ahí con todos los campos que enviaste.
4. Revisa la bandeja de entrada de cada destinatario de las notificaciones. Cada uno recibe un email con los campos, y Reply va a quien envió el formulario cuando este tiene un campo email.
5. Importa el CSV y comprueba que la lista de sin respuesta ya no muestra tu código.
6. Pon la fecha límite en ayer en una copia de prueba y confirma que el formulario se oculta.

Errores comunes

Preguntas