Formulaire de RSVP de mariage sur votre propre site de mariage

Donnez à chaque invitation son propre lien de RSVP, qui porte un code d'invitation et les prénoms des invités, et laissez le formulaire afficher un nom et un choix de repas par invité. Chaque réponse est envoyée à Ikiform : vous recevez un e-mail pour chacune et un CSV à remettre au traiteur. Rapprochez les réponses de votre liste d'invités dans un tableur pour voir qui n'a pas répondu, et mettez le formulaire en pause après votre date limite.

Ce qui change pour un mariage

Un meetup compte des inconnus. Un mariage compte une liste d'invités que vous avez déjà, invitation par invitation. Quatre choses en découlent :

• Une réponse par invitation, pas par personne. Un couple ou une famille répond ensemble.
• Des invités nommés, pas un nombre d'invités. Vous avez invité Ada et Sam, pas 2. Un +1 figure sur l'invitation ou n'y figure pas.
• Un repas par personne. Le traiteur a besoin des totaux poisson, bœuf et végétarien, plus les assiettes enfants.
• Une date limite ferme et une liste de relances. Le lieu veut des chiffres à une date précise, et la liste utile est celle de qui n'a pas répondu.

Les services de sites de mariage comme Zola, The Knot et Joy ont des outils de RSVP construits autour d'une liste d'invités, avec recherche par nom. Si vous utilisez l'un d'eux pour votre site, utilisez son RSVP. Cette page s'adresse à un site de mariage que vous avez fait vous-même, sur Squarespace, Carrd, Framer ou en HTML simple, où vous voulez le RSVP sur votre propre page.

Ikiform n'a ni recherche dans une liste d'invités ni groupes répétables : le formulaire ne peut donc pas savoir seul qui figure sur une invitation. L'astuce consiste à mettre cette information dans le lien.

Créer un lien par invitation

Dans votre tableur d'invités, mettez un code court en colonne A, comme okafor ou nguyen-family, le foyer en B, et les prénoms des invités en C, séparés par des virgules. Cette formule en D construit le lien :

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

Imprimez chaque lien en QR code sur l'invitation, ou collez-le dans un message. Gardez des codes en minuscules avec des tirets ; le pattern du champ refuse tout le reste, ce qui détecte tôt un code mal saisi.

Le formulaire

Collez ceci dans votre page de mariage, ou dans un bloc d'intégration sur un créateur de sites. Il lit party et names dans le lien, ajoute une ligne nom et repas par invité, jusqu'à quatre, et se masque après la date limite. Sans prénoms dans le lien, il affiche une seule ligne à remplir.

<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>

• Le repas de chaque invité inclut Can't come, pour qu'un foyer dont une personne ne peut pas venir envoie quand même une seule réponse.
• Les champs de nom sont pré-remplis mais modifiables, pour qu'un invité puisse corriger une orthographe ou nommer un enfant.
• Le formulaire envoie de façon classique et arrive sur votre page de remerciement grâce à _redirect. Mettez-y la date, le lieu et un lien de calendrier ; Ikiform n'envoie pas d'e-mail à vos invités.
• La date limite ne fait que masquer le formulaire dans le navigateur. À la date limite, choisissez aussi Pause form dans Ikiform, pour qu'un onglet resté ouvert ne puisse pas envoyer. Les formulaires en pause répondent 403 form_paused.

Collez cette définition dans l'onglet Fields du formulaire. Essayez : un code d'invitation avec une majuscule ou un espace échoue au pattern, avec le message que vous avez défini.

Qui n'a pas répondu, et quoi commander

1. Exportez les RSVP en CSV depuis Submissions et importez-les dans un onglet nommé Replies du tableur de la liste d'invités.
2. Si une invitation a répondu deux fois, gardez sa ligne la plus récente : triez par created_at, du plus récent au plus ancien, et supprimez les doublons sur la colonne party.
3. Listez les invitations sans réponse, avec les codes en colonne A de la liste d'invités et party en colonne E de Replies :

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

Comptez ensuite chaque repas pour le traiteur. Un prénom n'est jamais égal à une valeur de repas, donc une seule plage couvrant toutes les colonnes d'invités suffit :

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

Avant d'envoyer les invitations

• Réglez Allowed domains sur le domaine de votre site de mariage, et sur le domaine de préproduction du créateur de sites pendant vos tests.
• Ikiform ne fusionne ni ne rejette les soumissions répétées par e-mail. Une répétition identique dans les 24 heures ne fait qu'augmenter le score de spam. Dédoublonnez là où vit la liste, ou au moment de l'export. La réponse la plus récente par code fait foi.
• Toute personne ayant un lien peut en changer le code ou les prénoms. Pour un mariage, ce n'est pas grave : votre tableur décide qui a été invité, et la liste des sans-réponse révèle toute bizarrerie.
• Les proches plus âgés n'utiliseront peut-être pas du tout le formulaire. Notez les réponses par téléphone et sur papier dans votre tableur pour que les totaux restent complets.

Vérifiez avant d'envoyer les invitations

1. Ouvrez votre propre lien d'invitation sur un téléphone. Les prénoms s'affichent, chacun avec un choix de repas.
2. Choisissez Can't come pour un invité, envoyez, et vous arrivez sur votre page de remerciement.
3. Ouvrez Submissions dans le tableau de bord. La nouvelle soumission y est, avec tous les champs envoyés.
4. Vérifiez la boîte de réception de chaque destinataire des notifications. Chacun reçoit un e-mail avec les champs, et Reply répond à l'expéditeur quand le formulaire a un champ email.
5. Importez le CSV, et vérifiez que la liste des sans-réponse n'affiche plus votre code.
6. Réglez la date limite sur hier dans une copie de test et vérifiez que le formulaire se masque.

Pièges

Questions