Formulaire d'inscription des bénévoles avec créneaux, pour événements et festivals

Laissez les bénévoles cocher sur un seul formulaire tous les créneaux qu'ils peuvent assurer, avec un numéro de téléphone, une taille de T-shirt et un contact d'urgence, et envoyez-le à Ikiform. Ikiform stocke chaque inscription et prévient les coordinateurs par e-mail, mais ne remplit ni ne ferme les créneaux : lancez donc un petit script qui compte les bénévoles par créneau par rapport à vos besoins et écrit un planning. Comblez les créneaux en manque en sollicitant directement les bénévoles disponibles.

Ce qui change avec des bénévoles

Un RSVP pose une seule question : venez-vous ? Une inscription de bénévole demande quand, et la réponse n'a de sens que face aux besoins de chaque créneau. Le montage à 7 h demande six personnes et en obtient deux ; l'après-midi ensoleillé en demande dix et en obtient dix-neuf. Il ne s'agit pas de compter des têtes, mais de couvrir les créneaux.

• Des disponibilités, pas un choix unique. Les gens peuvent assurer plusieurs créneaux. Demandez tous ceux qu'ils pourraient faire et affectez à partir de là, au lieu de leur faire deviner où sont les besoins.
• Un contact pour le jour J. L'e-mail sert à l'organisation. Le jour même, il vous faut un numéro de portable, et un contact d'urgence pour chaque bénévole.
• Ce qu'il faut commander. T-shirts, tours de cou et déjeuners, par taille et par nombre.
• L'âge. Beaucoup d'événements exigent que chaque bénévole soit majeur, ou ait l'accord d'un responsable légal. Demandez à votre organisation ce qui s'applique ; une case à cocher enregistre la réponse mais n'est pas une vérification légale.

Les plateformes de bénévolat comme SignUpGenius gèrent des inscriptions par créneau qui ferment un créneau une fois plein. Si des limites strictes par créneau sont ce qu'il vous faut, utilisez-en une. Ikiform convient aux organisateurs qui veulent le formulaire sur leur propre site et sont prêts à affecter les créneaux à la main à partir d'une liste propre.

Le formulaire

Regroupez les créneaux par jour pour qu'on les parcoure facilement. Les cases à cocher s'appellent shifts[], donc même une seule case cochée est stockée comme une liste. Cela fonctionne en HTML simple sur n'importe quel site ou créateur de sites qui accepte une intégration :

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label>Name <input name="name" autocomplete="name" required></label>
  <label>Email <input name="email" type="email" autocomplete="email" required></label>
  <label>Mobile number for the day <input name="phone" type="tel" autocomplete="tel" placeholder="+44 7700 900123" required></label>

  <fieldset>
    <legend>Shifts you can do</legend>
    <p>Saturday</p>
    <label><input type="checkbox" name="shifts[]" value="sat_setup"> 7:00 to 10:00, setup</label>
    <label><input type="checkbox" name="shifts[]" value="sat_day"> 10:00 to 14:00</label>
    <label><input type="checkbox" name="shifts[]" value="sat_late"> 14:00 to 18:00</label>
    <p>Sunday</p>
    <label><input type="checkbox" name="shifts[]" value="sun_day"> 10:00 to 14:00</label>
    <label><input type="checkbox" name="shifts[]" value="sun_pack"> 14:00 to 17:00, pack-down</label>
  </fieldset>

  <label>Where you'd like to help
    <select name="role">
      <option value="anywhere">Anywhere</option>
      <option value="welcome">Welcome desk</option>
      <option value="food">Food stall</option>
      <option value="stewarding">Stewarding</option>
    </select>
  </label>
  <label>T-shirt size
    <select name="tshirt" required>
      <option value="s">S</option><option value="m" selected>M</option><option value="l">L</option>
      <option value="xl">XL</option><option value="xxl">XXL</option>
    </select>
  </label>
  <label>Emergency contact name and number <input name="emergency_contact" required maxlength="160"></label>
  <label><input type="checkbox" name="adult" required> I'm 18 or over, or a parent or guardian is filling this in with me</label>

  <input type="hidden" name="_redirect" value="https://fair.example/volunteers/thanks">
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">Sign me up</button>
</form>

Collez cette définition dans l'onglet Fields du formulaire. Le serveur refuse alors une inscription sans créneau, avec un numéro de téléphone invalide ou une case d'âge non cochée, quelle que soit la page d'origine :

Construire le planning et voir les manques

Lancez ceci avec Node et une clé d'API secrète dès que vous voulez une vue d'ensemble. Le script prend l'inscription la plus récente de chaque bénévole, affiche chaque créneau comme complet, en manque ou en surplus, et écrit rota.csv avec les noms et numéros de chaque créneau :

import { writeFileSync } from "node:fs";
import { createClient } from "@ikiform/sdk";

const NEEDED: Record<string, number> = { sat_setup: 6, sat_day: 10, sat_late: 10, sun_day: 8, sun_pack: 6 };
const ikiform = createClient({ apiKey: process.env.IKIFORM_SECRET_KEY! });
const people = new Map<string, Record<string, unknown>>();

for await (const submission of ikiform.submissions.iterate({ formId: "frm_xxxxxxxxxxxxxxxx", status: "received", limit: 100 })) {
  const email = String(submission.fields.email ?? "").trim().toLowerCase();
  if (email && !people.has(email)) people.set(email, submission.fields);
}

const cell = (value: unknown) => `"${String(value ?? "").replaceAll('"', '""')}"`;
const rows = [["shift", "name", "phone", "role", "tshirt"].join(",")];

for (const [shift, needed] of Object.entries(NEEDED)) {
  const team = [...people.values()].filter((fields) => (fields.shifts as string[] | undefined)?.includes(shift));
  const state = team.length < needed ? `SHORT ${needed - team.length}` : team.length > needed ? "spare" : "ok";
  console.log(`${shift.padEnd(10)} ${team.length}/${needed} ${state}`);
  for (const fields of team) {
    rows.push([shift, fields.name, fields.phone, fields.role, fields.tshirt].map(cell).join(","));
  }
}

writeFileSync("rota.csv", `${rows.join("\n")}\n`);

• Les listes arrivent de la plus récente à la plus ancienne : un bénévole qui se réinscrit avec d'autres disponibilités est donc compté selon sa dernière réponse.
• Une personne apparaît sous chaque créneau qu'elle a coché. Ce sont des disponibilités. Réduisez-les à des affectations dans le CSV, et annoncez à chacun ses créneaux définitifs.
• Les virgules et guillemets dans les noms sont échappés, le CSV s'ouvre donc proprement dans n'importe quel tableur.

Pour un coup d'œil rapide sans code, exportez le CSV depuis Submissions et filtrez la colonne shifts sur la valeur d'un créneau, comme sat_setup. Dans l'export, les valeurs à choix multiples sont regroupées dans une seule cellule.

Des disponibilités aux affectations

1. Deux semaines avant, lancez le planning et commandez les T-shirts d'après les totaux de tshirt.
2. Pour chaque créneau en manque, écrivez aux bénévoles disponibles qui ont aussi coché ce créneau. Ils ont déjà dit qu'ils pouvaient.
3. Envoyez à chaque bénévole ses créneaux définitifs depuis votre outil d'e-mail ou de messagerie. Le bouton Reply de l'e-mail de notification leur répond directement.
4. La veille, imprimez le planning pour les responsables de créneau, avec les numéros de téléphone.

Ikiform n'envoie pas d'e-mail à la personne qui remplit le formulaire. Les e-mails de notification vont uniquement à vous et à votre équipe : il n'y a donc ni réponse automatique, ni e-mail de confirmation, ni double opt-in. Envoyez-les depuis votre outil d'e-mailing, déclenché par un webhook. Les bénévoles oublient pour quoi ils se sont inscrits : envoyez donc le planning définitif personnellement une semaine avant, puis la veille au soir.

Pour être prévenu de chaque inscription là où votre équipe discute déjà, envoyez le webhook vers Slack ou Discord. Les coordinateurs voient alors un créneau en manque se remplir en temps réel.

Vérifiez avant de recruter

1. Dans Allowed domains du formulaire, ajoutez le domaine de votre site, plus localhost pendant le développement. Laissez vide pour accepter les envois de partout.
2. Inscrivez-vous en cochant un seul créneau. Dans le tableau de bord, shifts est une liste avec une seule valeur.
3. Essayez de vous inscrire sans créneau, ou sans cocher la case d'âge. Le navigateur vous en empêche, et un envoi forgé reçoit 422.
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. Lancez le script de planning. Votre test apparaît sous son créneau, et tous les autres créneaux apparaissent en manque.
6. Ouvrez rota.csv dans un tableur et vérifiez la colonne des numéros de téléphone.

Pièges

Questions