# Typeform-style questionnaires (Secret Santa and similar) Collect answers one question at a time in a **single HTML file**. This is not a scored quiz. Submit once at the end. Optional save uses the portal form endpoint only. Replace `FORM_ENDPOINT` with the portal submit URL from the HTML skill (`https://myformconnect.io/f/YOUR_FORM_UUID` or `https://myformcapture.com/f/YOUR_FORM_UUID`). ## Rules - One self-contained `index.html` (HTML + CSS + vanilla JS). No frameworks. No required CDNs. Google Fonts are optional. - Show **one question at a time** with progress: `Question 2 of 10`. - Keep every field in one `
` (hidden steps), like a multi-step form, so Back/Next still work. - Submit **once** on the last step. Do not POST per question. - Clothing size, collections, and similar fields stay optional unless the prompt says otherwise. - Allergies / skip lists should be required when they appear. - Workplace-safe copy. No stereotypes, slurs, or punching-down jokes. - Do not add extra personal questions (income, religion, relationship status, medical detail beyond what the prompt listed). ## Thank-you screen After submit (or after a local finish if the UUID is still a placeholder): - Short thank-you. No score. No confetti unless the prompt asks for a light festive animation on success. - **Download questionnaire (HTML)** — save the current page as one `.html` file (Blob + ``). No server. - If POST succeeded, say the answers were saved. If the UUID is still `YOUR_FORM_UUID`, skip the network request and still thank the person. ## Optional save (MyFormConnect / MyFormCapture) If `YOUR_FORM_UUID` is still the placeholder, skip the POST and still show thank-you. Otherwise POST with `FormData` (do not set `Content-Type`). Use stable `name` attributes from the prompt (`skip_list`, `hard_nos`, etc.). Include optional `participant_name` only if the prompt says the form is named. ```javascript const PLACEHOLDER = 'YOUR_FORM_UUID'; const endpoint = 'FORM_ENDPOINT'; async function saveAnswers(form) { if (endpoint.includes(PLACEHOLDER)) return { saved: false }; const res = await fetch(endpoint, { method: 'POST', body: new FormData(form) }); if (!res.ok) throw new Error('Save failed'); return { saved: true }; } ``` ## Download as a single HTML file ```javascript function downloadFormHtml() { const html = "\n" + document.documentElement.outerHTML; const blob = new Blob([html], { type: "text/html" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "secret-santa-questionnaire.html"; a.click(); URL.revokeObjectURL(url); } ``` ## Footer Small footer: **Powered by MyFormConnect** (or MyFormCapture on that portal). The brand name is a link to the portal home URL, including `?ref=secret-santa`. Do not use “Generated from a prompt.” ## Related - [Multi-step forms](./multi-step-forms.md) - [Field naming](./field-naming.md)