// Aanmeldformulieren (/meedoen). Twee ingangen: // tab "jongeren" — Meld je aan / Meld mijn kind aan // tab "beheerder" — Word groepsbeheerder // Versturen gaat via forms-config.js naar Google Sheets (Apps Script of Google Formulier). /* ---------------- validatie ---------------- */ const bbIsEmail = (v) => /^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i.test(String(v).trim()); const bbIsVoornaam = (v) => { const s = String(v).trim(); if (/[.]/.test(s)) return false; if (!/^[a-z\u00C0-\u024F]+(?:[ '\u2019-][a-z\u00C0-\u024F]+)*$/i.test(s)) return false; return s.replace(/[^a-z\u00C0-\u024F]/gi, "").length >= 3; }; const BB_VOORNAAM_FOUT = "Vul je volledige voornaam in, dus geen voorletters of afkortingen."; const BB_VOORNAAM_KIND_FOUT = "Vul de volledige voornaam van je kind in, dus geen voorletters of afkortingen."; // Nederlands telefoonnummer: 10 cijfers beginnend met 0 (06 voor mobiel, of een // netnummer), ook geschreven met +31, 0031, spaties, streepjes, punten of haakjes. const bbIsPhone = (v) => { let s = String(v).trim().replace(/[\s\-().]/g, ""); if (s.startsWith("+31")) s = "0" + s.slice(3); else if (s.startsWith("0031")) s = "0" + s.slice(4); return /^0[1-9][0-9]{8}$/.test(s); }; const bbIsPostcode = (v) => /^[1-9][0-9]{3}\s?[a-z]{2}$/i.test(String(v).trim()); /* Werkgebied van Buiten Buddies: Haarlem en directe omgeving. Alleen de vier cijfers van de postcode tellen mee, de letters doen niet ter zake. */ const BB_WERKGEBIED_PC = [ [2011, 2037], // Haarlem, alle wijken [2051, 2051], // Overveen [2061, 2061], // Bloemendaal [2063, 2063], // Spaarndam, gemeente Haarlem [2071, 2071], // Santpoort-Noord [2082, 2082], // Santpoort-Zuid [2100, 2106], // Heemstede [2111, 2111], // Aerdenhout ]; const bbInWerkgebied = (v) => { const n = parseInt(String(v).trim().slice(0, 4), 10); return BB_WERKGEBIED_PC.some(([van, tot]) => n >= van && n <= tot); }; /* Een geldige postcode buiten het werkgebied. Zolang de bezoeker de nieuwsbrief niet aanvinkt, blokkeert dit het verzenden. */ const bbBuitenWerkgebied = (v) => !!String(v || "").trim() && bbIsPostcode(v) && !bbInWerkgebied(v); const BB_BUITEN_WERKGEBIED = "Nog even geduld, we komen eraan! We zijn helaas nog niet actief in jouw buurt. Meld je hieronder aan voor de nieuwsbrief (zet het vinkje) en blijf op de hoogte van onze uitbreidingsplannen! Je kunt dan ook de postcode van jouw buurt laten staan en het formulier alsnog versturen."; const BB_BUITEN_WERKGEBIED_OK = "We zijn nog niet actief in jouw buurt, dus we kunnen de aanmelding zelf nog niet verwerken. We vragen daarom alleen je eigen naam en e‑mailadres. We noteren je postcode als nieuw interessegebied en laten het weten zodra we in jouw buurt starten."; const BB_BUITEN_WERKGEBIED_OK_BEHEERDER = "We zijn nog niet actief in jouw buurt, dus we kunnen je aanmelding zelf nog niet verwerken. We vragen daarom alleen je naam, je e‑mailadres en de keuze 'Ouder of andere vrijwilliger'. We noteren je postcode als nieuw interessegebied en laten het weten zodra we in jouw buurt starten."; function bbValidateJongeren(v) { const e = {}; /* Buiten het werkgebied met een vinkje voor de nieuwsbrief: dan slaan we alleen de gegevens van de ouder op, dus alleen die velden worden gecontroleerd. */ const alleenOuder = bbBuitenWerkgebied(v.postcode) && !!v.updates; const ov = v.ouderVoornaam.trim(); if (!ov) e.ouderVoornaam = "Vul je voornaam in."; else if (!bbIsVoornaam(ov)) e.ouderVoornaam = BB_VOORNAAM_FOUT; if (!v.ouderAchternaam.trim()) e.ouderAchternaam = "Vul je achternaam in."; if (!alleenOuder) { const kv = v.kindVoornaam.trim(); if (!kv) e.kindVoornaam = "Vul de voornaam van je kind in."; else if (!bbIsVoornaam(kv)) e.kindVoornaam = BB_VOORNAAM_KIND_FOUT; if (!v.kindAchternaam.trim()) e.kindAchternaam = "Vul de achternaam van je kind in."; if (!String(v.kindLeeftijd).trim()) e.kindLeeftijd = "Vul de leeftijd van je kind in."; else { const nl = parseInt(String(v.kindLeeftijd).replace(/[^0-9]/g, ""), 10); if (!isNaN(nl) && nl > BB_LEEFTIJD_MAX) e.kindLeeftijd = BB_LEEFTIJD_MAX_FOUT; } } if (!v.postcode.trim()) e.postcode = "Vul je postcode in, zo weten we in welke buurt je woont."; else if (!bbIsPostcode(v.postcode)) e.postcode = "Vul een geldige postcode in, bijvoorbeeld 2012 AB."; else if (!bbInWerkgebied(v.postcode) && !v.updates) e.postcode = BB_BUITEN_WERKGEBIED; if (!alleenOuder) { if (!v.kindWhatsapp) e.kindWhatsapp = "Geef aan of je kind eigen WhatsApp heeft."; if (v.kindWhatsapp === "Ja") { if (!v.kindTelefoon.trim()) e.kindTelefoon = "Vul het telefoonnummer van je kind in."; else if (!bbIsPhone(v.kindTelefoon)) e.kindTelefoon = "Vul een geldig Nederlands telefoonnummer in van 10 cijfers, bijvoorbeeld 06-12345678."; } } if (!alleenOuder) { if (!v.ouderTelefoon.trim()) e.ouderTelefoon = "Vul je eigen telefoonnummer in."; else if (!bbIsPhone(v.ouderTelefoon)) e.ouderTelefoon = "Vul een geldig Nederlands telefoonnummer in van 10 cijfers, bijvoorbeeld 06-12345678."; } else if (v.ouderTelefoon.trim() && !bbIsPhone(v.ouderTelefoon)) { e.ouderTelefoon = "Vul een geldig Nederlands telefoonnummer in van 10 cijfers, bijvoorbeeld 06-12345678."; } if (!v.email.trim()) e.email = "Vul je e‑mailadres in."; else if (!bbIsEmail(v.email)) e.email = "Vul een geldig e‑mailadres in, bijvoorbeeld naam@voorbeeld.nl."; if (!alleenOuder && !v.toestemming) e.toestemming = "Zonder toestemming kunnen we je kind niet aanmelden."; return e; } function bbValidateBeheerder(v) { const e = {}; const alleenOuder = bbBuitenWerkgebied(v.postcode) && !!v.updates; const bv = v.voornaam.trim(); if (!bv) e.voornaam = "Vul je voornaam in."; else if (!bbIsVoornaam(bv)) e.voornaam = BB_VOORNAAM_FOUT; if (!v.achternaam.trim()) e.achternaam = "Vul je achternaam in."; if (!v.postcode.trim()) e.postcode = "Vul je postcode in, zo weten we om welke buurt het gaat."; else if (!bbIsPostcode(v.postcode)) e.postcode = "Vul een geldige postcode in, bijvoorbeeld 2012 AB."; else if (!bbInWerkgebied(v.postcode) && !v.updates) e.postcode = BB_BUITEN_WERKGEBIED; if (!v.rol) e.rol = "Geef aan wat op jou van toepassing is."; if (!alleenOuder) { if (!v.telefoon.trim()) e.telefoon = "Vul je telefoonnummer in."; else if (!bbIsPhone(v.telefoon)) e.telefoon = "Vul een geldig Nederlands telefoonnummer in van 10 cijfers, bijvoorbeeld 06-12345678."; } else if (v.telefoon.trim() && !bbIsPhone(v.telefoon)) { e.telefoon = "Vul een geldig Nederlands telefoonnummer in van 10 cijfers, bijvoorbeeld 06-12345678."; } if (!v.email.trim()) e.email = "Vul je e‑mailadres in."; else if (!bbIsEmail(v.email)) e.email = "Vul een geldig e‑mailadres in, bijvoorbeeld naam@voorbeeld.nl."; return e; } /* ---------------- versturen ---------------- */ /* Kenmerk per inzending, om een eventuele dubbele regel te kunnen herkennen. */ function bbInzendingId() { return Date.now().toString(36) + Math.random().toString(36).slice(2, 8); } async function bbSubmitForm(formKey, values) { const cfg = window.BB_FORM_CONFIG || { mode: "demo" }; const payload = Object.assign({}, values, { formulier: formKey, verstuurd: new Date().toISOString(), pagina: location.href, // Uniek nummer per inzending. Het Sheet gebruikt dit niet, maar het staat wel in // het verzoek, zodat een dubbele regel altijd te herkennen is aan een gelijk // nummer en aan de tijd, mocht dat ooit nog gebeuren. inzendingId: bbInzendingId(), }); const klaar = await bbNaarSheets(cfg, payload); // De melding per e‑mail gaat na de opslag in Google Sheets en mag nooit een // geslaagde inzending laten mislukken. await bbMeldPerMail(cfg, formKey, values); await bbNieuwsbriefUitContact(cfg, formKey, values); if (formKey === "jongeren") await bbBeheerderUitAanmelding(cfg, values); return klaar; } /* Vinkt iemand op het contactformulier ook het hokje voor updates aan, dan komt die inschrijving hiermee als aparte regel in het tabblad Nieuwsbrief terecht. Alleen naar Google Sheets, dus zonder tweede e‑mail: het contactbericht meldt de inschrijving al op de regel 'Nieuwsbrief'. Staat het adres al in het tabblad, dan vult het script alleen 'Aanmelding via' aan en komt er geen dubbele regel. */ async function bbNieuwsbriefUitContact(cfg, formKey, values) { if (formKey !== "contact") return false; const aan = values.updates === true || values.updates === "true" || values.updates === "ja"; if (!aan || !values.email) return false; try { await bbNaarSheets(cfg, { formulier: "nieuwsbrief", voornaam: values.voornaam || "", tussenvoegsel: values.tussenvoegsel || "", achternaam: values.achternaam || "", email: values.email, optIn: true, bron: "contactformulier", verstuurd: new Date().toISOString(), pagina: location.href, }); return true; } catch (err) { return false; } } /* Woont iemand buiten het werkgebied en vinkt hij de nieuwsbrief aan, dan mag hij wel verzenden. We slaan dan uitsluitend de gegevens van de ouder op: een regel in het tabblad 'Nieuwe interesse gebieden' met de postcode en het soort aanmelding, en een regel in het tabblad Nieuwsbrief. Beide regels worden door één verzoek weggeschreven: twee verzoeken vlak na elkaar botsten op het slot dat het script op het Sheet zet, waardoor de tweede regel soms verloren ging. Gegevens van het kind gaan nooit mee. */ async function bbSubmitAlleenNieuwsbrief(formKey, values) { const cfg = window.BB_FORM_CONFIG || { mode: "demo" }; const soort = formKey === "beheerder" ? "Groepsbeheerder aanmelding" : "Kind aanmelding"; const gedeeld = { voornaam: values.ouderVoornaam || values.voornaam || "", tussenvoegsel: values.ouderTussenvoegsel || values.tussenvoegsel || "", achternaam: values.ouderAchternaam || values.achternaam || "", email: values.email || "", }; const postcode = String(values.postcode || "").trim(); const telefoon = values.ouderTelefoon || values.telefoon || ""; const rol = formKey === "beheerder" ? (values.rol || "") : ""; const klaar = await bbNaarSheets(cfg, Object.assign({}, gedeeld, { formulier: "interessegebied", postcode: postcode, soort: soort, rol: rol, telefoon: telefoon, // Het script schrijft hiermee ook meteen de regel in het tabblad Nieuwsbrief. optIn: true, bron: "nieuw interessegebied, postcode " + postcode, verstuurd: new Date().toISOString(), pagina: location.href, })); await bbMeldPerMail(cfg, "interessegebied", Object.assign({}, gedeeld, { postcode: postcode, soort: soort, rol: rol, telefoon: telefoon, })); return klaar; } /* Vinkt een ouder op het aanmeldformulier aan dat hij wil meedenken over een buurtapp, dan komt die persoon ook als aanmelding op het tabblad Groepsbeheerders te staan, los van de andere vinkjes. De melding per e‑mail gaat niet dubbel: de mail over de aanmelding van het kind vermeldt dit al op een eigen regel. */ async function bbBeheerderUitAanmelding(cfg, values) { if (!values.beheerderInteresse) return false; try { await bbNaarSheets(cfg, { formulier: "beheerder", voornaam: values.ouderVoornaam || "", tussenvoegsel: values.ouderTussenvoegsel || "", achternaam: values.ouderAchternaam || "", postcode: values.postcode || "", rol: "Ouder, via aanmelding kind", telefoon: values.ouderTelefoon || "", email: values.email || "", updates: !!values.updates, verstuurd: new Date().toISOString(), pagina: location.href, }); return true; } catch (err) { return false; } } /* Melding per e‑mail via de eigen serverfunctie op Vercel. De serverfunctie bepaalt zelf wie de mail krijgt en welke velden erin mogen: de website stuurt alleen de ingevulde waarden mee. Lukt het niet, dan merkt de bezoeker daar niets van, want de inzending staat al in Google Sheets. */ async function bbMeldPerMail(cfg, formKey, values) { const url = (cfg && cfg.mailEndpoint) || ""; if (!url) return false; if (location.protocol !== "http:" && location.protocol !== "https:") return false; try { const res = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ formulier: formKey, waarden: values }), }); return res.ok; } catch (err) { return false; } } async function bbNaarSheets(cfg, payload) { if (cfg.mode === "appsscript" && cfg.appsScriptUrl) { const body = new FormData(); Object.keys(payload).forEach((k) => body.append(k, payload[k])); /* Bewust met mode: no-cors, en dus zonder de respons te lezen. Waarom: een webapp van Apps Script antwoordt met een omleiding naar googleusercontent.com, en die omleiding stuurt geen CORS-kopregels mee. Een gewone fetch loopt daarop stuk met een foutmelding, terwijl het verzoek op de server al helemaal is verwerkt. Vingen wij die fout op en stuurden wij het verzoek opnieuw, dan kwam elke inzending twee keer in het Sheet: twee regels in het Logboek, en bij een aanmelding een tweede optelling bij 'Aantal kinderen'. Met no-cors gebeurt dat niet meer: er gaat precies één verzoek uit. De browser geeft ons geen inzicht in het antwoord, dus wij gaan uit van een geslaagde opslag. Dat kan hier, want de melding per e-mail loopt via onze eigen server en die meldt een storing wel. Gaat het verzoek helemaal niet weg, bijvoorbeeld zonder internet, dan gooit fetch alsnog een fout en proberen wij het één keer opnieuw. Dat is dan veilig, want het eerste verzoek is de deur niet uit. */ try { await fetch(cfg.appsScriptUrl, { method: "POST", mode: "no-cors", body }); } catch (err) { await fetch(cfg.appsScriptUrl, { method: "POST", mode: "no-cors", body }); } return true; } if (cfg.mode === "googleform") { const gf = (cfg.googleForm || {})[payload.formulier] || {}; if (!gf.formId) throw new Error("Geen Google Formulier ingesteld"); const body = new FormData(); Object.keys(gf.fields || {}).forEach((k) => { const entry = gf.fields[k]; if (entry && payload[k] !== undefined && payload[k] !== "") body.append(entry, payload[k]); }); await fetch("https://docs.google.com/forms/d/e/" + gf.formId + "/formResponse", { method: "POST", mode: "no-cors", body, }); return true; } // demo await new Promise((r) => setTimeout(r, 700)); console.log("[Buiten Buddies] demo-modus, niet verstuurd:", payload); return true; } /* ---------------- bouwstenen ---------------- */ /* De melding over het werkgebied begint met een opgewekte zin. Die staat vet, zodat meteen duidelijk is dat dit geen afwijzing is. */ function FoutTekst({ tekst }) { if (tekst === BB_BUITEN_WERKGEBIED) { const eind = tekst.indexOf("!") + 1; return <>{tekst.slice(0, eind)}{tekst.slice(eind)}; } return tekst; } function Field({ id, label, hint, error, required, hideOpt, children }) { return (
{children} {hint &&

{hint}

} {error && (

)}
); } /* De melding over het werkgebied is te lang voor een regel onder het invoerveld. Die verschijnt daarom als venster naast de postcode, over het formulier heen. Op desktop laat een klik ernaast, of Escape, de melding meteen verdwijnen. Op een aanraakscherm niet: daar tikt iemand snel per ongeluk naast het venster, en dan is de tekst weg voordat hij gelezen is. Op mobiel sluit alleen het kruisje, en Escape voor wie een toetsenbord heeft aangesloten. */ function PostcodeMelding({ id, onClose }) { const ref = useRef(null); useEffect(() => { const opAanraken = window.matchMedia("(hover: none), (max-width: 620px)").matches; const buiten = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); }; const toets = (e) => { if (e.key === "Escape") onClose(); }; if (!opAanraken) document.addEventListener("pointerdown", buiten, true); document.addEventListener("keydown", toets); return () => { document.removeEventListener("pointerdown", buiten, true); document.removeEventListener("keydown", toets); }; }, [onClose]); return ( ); } const BB_LEEFTIJD_MAX = 16; const BB_LEEFTIJD_MAX_FOUT = "Leuk dat je meedoet, maar onze buurtgroepen zijn voor 10 tot 16 jaar."; function TextInput({ id, value, onChange, onBlur, error, hint, type = "text", ...rest }) { return ( onChange(e.target.value)} onBlur={onBlur} className={"bb-input" + (error ? " has-error" : "")} aria-invalid={error ? "true" : undefined} aria-describedby={[hint ? id + "-hint" : null, error ? id + "-error" : null].filter(Boolean).join(" ") || undefined} {...rest} /> ); } function RadioGroup({ id, options, value, onChange, error, label, hint, required }) { return (
{label} {required && }
{options.map((o) => ( ))}
{error && (

{error}

)}
); } function CheckRow({ id, checked, onChange, error, hint, children }) { return (
{hint &&

{hint}

} {error && (

{error}

)}
); } /* Bij een fout springt de pagina naar de samenvatting bovenaan het formulier. Gaat het alleen om de postcodemelding, dan blijft de bezoeker staan waar hij was: die melding staat als venster naast het invoerveld al in beeld. */ function bbFocusSamenvatting(errs, ref) { const alleenPostcode = Object.keys(errs).every((k) => errs[k] === BB_BUITEN_WERKGEBIED); if (alleenPostcode) return; requestAnimationFrame(() => { if (ref.current) ref.current.focus(); }); } function ErrorSummary({ errors, summaryRef, order }) { /* De melding over het werkgebied verschijnt uitsluitend als venster naast het postcodeveld, nooit in de rode samenvatting bovenaan het formulier. */ const alles = order.filter((k) => errors[k] && errors[k] !== BB_BUITEN_WERKGEBIED); if (!alles.length) return null; const tekstVan = (k) => errors[k]; return (
Er ontbreekt nog iets. Controleer {alles.length === 1 ? "dit veld" : "deze velden"}:
); } function SendError({ onRetry }) { const mail = (window.BB_FORM_CONFIG && window.BB_FORM_CONFIG.fallbackEmail) || "info@buitenbuddies.org"; return (
Het versturen is niet gelukt.

Probeer het nog een keer, of stuur je aanmelding per e‑mail naar{" "} {mail}. Dan pakken we het handmatig op.

); } /* ---------------- confetti-regen bij een gelukte aanmelding ---------------- */ /* speed maakt de val trager of sneller, herhaal laat vallen deeltjes opnieuw bovenaan beginnen. Uit staat dat voor een korte eenmalige wolk. */ function ConfettiRain({ duration = 7000, count = 150, speed = 1, herhaal = true, start: startPos = "boven" }) { const ref = useRef(null); useEffect(() => { const canvas = ref.current; if (!canvas) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || document.documentElement.classList.contains("bb-rm-force")) return; const dpr = Math.min(window.devicePixelRatio || 1, 2); // Staat het canvas in een eigen kader (zoals in het doneervenster), dan rekenen // we met dat kader. Bij het schermvullende canvas is dit gelijk aan het venster. const kader = canvas.getBoundingClientRect(); const w = Math.round(kader.width) || window.innerWidth; const h = Math.round(kader.height) || window.innerHeight; canvas.width = w * dpr; canvas.height = h * dpr; const ctx = canvas.getContext("2d"); ctx.scale(dpr, dpr); const palette = ["#94B143", "#8DBB4E", "#6FB561", "#AFC600", "#135637", "#FDFDF5", "#FFFFFF"]; const accent = "#FAD728"; const rand = (a, b) => a + Math.random() * (b - a); const parts = []; for (let i = 0; i < count; i++) { const accentPart = Math.random() < 0.14; parts.push({ x: rand(-20, w + 20), // 'direct' zet alle deeltjes vlak boven de rand, zodat ze meteen in beeld // vallen in plaats van eerst een lange aanloop van bovenaf te maken. y: startPos === "direct" ? rand(-h * 0.35, -10) : rand(-h, -20), vy: rand(1.7, 4.4) * speed, sway: rand(0.6, 2.1), swaySpeed: rand(0.008, 0.022), phase: rand(0, Math.PI * 2), size: rand(5, 11), color: accentPart ? accent : palette[Math.floor(Math.random() * palette.length)], shape: Math.random() < 0.5 ? "rect" : Math.random() < 0.5 ? "circle" : "ribbon", rotation: rand(0, Math.PI * 2), spin: rand(-0.13, 0.13), tilt: rand(0, Math.PI * 2), tiltSpeed: rand(0.03, 0.09), }); } const start = performance.now(); const FADE = duration - 2200; let raf; const frame = (now) => { const t = now - start; ctx.clearRect(0, 0, w, h); let alpha = 1; if (t > FADE) alpha = Math.max(0, 1 - Math.pow((t - FADE) / (duration - FADE), 2)); for (const p of parts) { p.y += p.vy; p.phase += p.swaySpeed; p.x += Math.sin(p.phase) * p.sway; p.rotation += p.spin; p.tilt += p.tiltSpeed; if (p.y > h + 40) { if (herhaal) { p.y = rand(-160, -20); p.x = rand(-20, w + 20); } else p.y = h + 200; } ctx.save(); ctx.globalAlpha = alpha; ctx.translate(p.x, p.y); ctx.rotate(p.rotation); ctx.scale(Math.cos(p.tilt), 1); ctx.fillStyle = p.color; if (p.shape === "rect") ctx.fillRect(-p.size / 2, -p.size * 0.6, p.size, p.size * 1.35); else if (p.shape === "circle") { ctx.beginPath(); ctx.arc(0, 0, p.size * 0.45, 0, Math.PI * 2); ctx.fill(); } else ctx.fillRect(-p.size, -p.size * 0.18, p.size * 2, p.size * 0.36); ctx.restore(); } if (t < duration) raf = requestAnimationFrame(frame); else ctx.clearRect(0, 0, w, h); }; raf = requestAnimationFrame(frame); return () => cancelAnimationFrame(raf); }, [duration, count, speed, herhaal, startPos]); return