Forms and input
Donation Signup Conditional Survey

Complete a conditional survey in a donor signup scene: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Forms and inputConditional questionnaireHTMLCSSJavaScript
With JavaScript enabled, you can edit, run, and save this example. The fixed source is as follows:
<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Donation Signup Conditional Survey</title>
  <style>
    :root { --ink:#18314f; --paper:#f7f8f2; --accent:#ff6b5e; --secondary:#71c9b5; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
    * { box-sizing:border-box; }
    html { min-width:320px; background:var(--paper); }
    body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"Kaiti SC",STKaiti,"Songti SC",serif; background:radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--accent) 12%,transparent) 0 1px,transparent 2px),var(--paper);background-size:19px 19px; }
    button,input,select,textarea { color:inherit; font:inherit; }
    button,[role="button"],input,select,textarea { accent-color:var(--accent); }
    button { cursor:pointer; }
    button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
    [hidden] { display:none !important; }
    @media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
    .page{width:min(980px,calc(100% - 32px));margin:auto;padding:72px 0 92px}.mast{display:grid;grid-template-columns:1fr auto;transform:rotate(-.25deg);gap:32px;align-items:center;margin-bottom:46px}.mast h1{font-family:"Kaiti SC",STKaiti,serif;font-weight:700;font-size:clamp(40px,8vw,84px);letter-spacing:.02em;margin:0;line-height:1.12}.intro{max-width:650px;margin-top:18px;line-height:2}.scenario{padding:12px;border:2px solid var(--accent);color:var(--accent);transform:rotate(3deg)}.eyebrow{display:block;margin-bottom:9px;color:var(--accent);letter-spacing:.18em}.demo{border-radius:2px;transform:rotate(.12deg);box-shadow:0 30px 70px color-mix(in srgb,var(--ink) 18%,transparent);position:relative;min-height:430px;overflow:hidden;padding:clamp(28px,6vw,66px);background:color-mix(in srgb,var(--paper) 92%,#fff)}@media(max-width:700px){.page{width:calc(100% - 20px);padding:28px 0}.mast{grid-template-columns:1fr}.scenario{justify-self:start}.demo{padding:20px}}
    .panel{padding:20px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:18px;background:color-mix(in srgb,var(--paper) 88%,transparent);box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent) 7%,transparent)}.stack{display:grid;gap:16px}.row{display:flex;flex-wrap:wrap;gap:9px}.action{padding:11px 16px;border:1px solid var(--accent);border-radius:6px;color:var(--accent);background:transparent;box-shadow:0 0 14px color-mix(in srgb,var(--accent) 10%,transparent)}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{min-height:24px;color:var(--secondary);text-shadow:0 0 10px currentColor}.metric{font-size:clamp(30px,7vw,64px);font-weight:900;text-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent)}.muted{opacity:.7}.chip{padding:6px 9px;border:1px solid var(--secondary);border-radius:4px}.meter{height:7px;background:color-mix(in srgb,var(--accent) 15%,transparent)}.meter>i{display:block;height:100%;box-shadow:0 0 12px var(--accent);background:var(--accent)}
    .composition-deck{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}.deck-bar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 18px;color:var(--paper);background:var(--ink);font:700 12px/1 ui-monospace,monospace}.deck-lights{display:flex;gap:7px}.deck-lights i{width:10px;height:10px;border-radius:50%;background:var(--accent)}.deck-lights i:nth-child(2){background:var(--secondary)}.deck-lights i:nth-child(3){background:color-mix(in srgb,var(--paper) 55%,transparent)}.composition-deck .demo{border:0;border-radius:0;box-shadow:none}
    .conditional-studio{display:grid;gap:18px;max-width:920px;margin:auto}.conditional-studio header{display:flex;justify-content:space-between;gap:18px;align-items:end}.conditional-studio h2{margin:.3em 0}.conditional-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);gap:16px}.conditional-controls,.conditional-plan{display:grid;align-content:start;gap:14px;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--paper)}.conditional-mode{display:grid;gap:8px;border:1px solid var(--line);border-radius:14px}.conditional-mode legend{padding:0 8px;font-weight:900}.conditional-mode label,.conditional-controls label{display:grid;gap:8px;font-weight:800}.conditional-controls input:not([type="checkbox"]):not([type="radio"]),.conditional-controls textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}.conditional-flags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.conditional-flags label{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:12px;font-weight:700}.conditional-plan{color:var(--paper);background:var(--ink)}.conditional-plan strong{font-size:28px}.conditional-plan ul{display:grid;gap:8px;padding-left:18px;margin:0}@media(max-width:760px){.conditional-studio header{align-items:stretch;flex-direction:column}.conditional-grid,.conditional-flags{grid-template-columns:1fr}}.workflow-session{display:grid;gap:14px}.session-command{display:grid;grid-template-columns:1fr auto minmax(170px,.45fr) auto;gap:16px;align-items:end;padding:18px;border-block:4px double var(--ink)}.session-command h2{margin:.2em 0}.session-command output{font:900 clamp(28px,5vw,54px)/1 ui-monospace,monospace}.session-command label{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px}.session-command input{grid-column:1/-1;width:100%}#workflowSessionProgress{height:12px;overflow:hidden;border-radius:2px;background:var(--line)}#workflowSessionProgress i{display:block;width:0;height:100%;background:var(--accent)}.session-stage{min-width:0;transition:filter .25s,transform .25s}.session-stage[data-session-phase="running"]{transform:translateY(-3px)}.session-stage[data-session-phase="paused"]{filter:grayscale(.65)}.session-stage[data-session-phase="complete"]{filter:contrast(.78);opacity:.72}.session-log{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}.session-log ol{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none}.session-log li{padding:5px 8px;border:1px solid var(--line);font-size:12px}@media(max-width:900px){.session-stage{order:-1}.session-command{grid-template-columns:1fr auto}.session-command label{grid-column:1/-1}.session-log{grid-template-columns:1fr}}
  </style>
</head>
<body data-aesthetic="paper" data-composition="control-deck">
  <main class="page">
    <header class="mast"><div><span class="eyebrow">paper / conditional survey / BEGINNER</span><h1>Donation Signup Conditional Survey</h1><p class="intro">Complete a conditional survey in a donor signup scene: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.</p></div><span class="scenario">Donation Sign-up</span></header>
    <div class="composition-deck"><div class="deck-bar"><span>CONTROL DECK · 04</span><span>Conditional questionnaire</span><span class="deck-lights" aria-hidden="true"><i></i><i></i><i></i></span></div><section class="demo" aria-label="Donor Signup Conditional Survey Interaction Area"><div class="workflow-session"><header class="session-command"><div><span class="eyebrow">Donation Signup SESSION</span><h2>Donation Signup Timer Station</h2></div><output id="workflowSessionClock">00:45</output><label>Round Duration<input id="workflowSessionLength" type="range" min="15" max="90" step="15" value="45"><span>sec</span></label><button id="workflowSessionToggle" class="action primary" type="button">Start confirmation submission</button></header><div id="workflowSessionProgress" role="progressbar" aria-label="Donation signup progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div><section id="workflowCore" class="workflow-core session-stage" data-session-phase="ready" tabindex="-1"><!-- 11DZ_CORE_START:forms-input-conditional-survey --><section class="conditional-studio"><header><div><span class="eyebrow">CONDITIONAL SURVEY</span><h2>Donation Signup Support Path</h2><p>Select the participation method first, then decide which additional sections need to appear.</p></div><output id="conditionalState">Currently ready to complete on your own</output></header><form id="conditionalForm" class="conditional-grid"><section class="conditional-controls"><fieldset class="conditional-mode"><legend>Participation Method</legend><label><input type="radio" name="supportMode" value="Self-service completion" checked data-core-bridge="forms-input-conditional-survey"> Self-service completion</label><label><input type="radio" name="supportMode" value="On-site accompaniment"> On-site accompaniment</label><label><input type="radio" name="supportMode" value="Accessibility support"> Accessibility support</label></fieldset><div class="conditional-flags"><label><input type="checkbox" name="flags" value="Equipment ready" checked> Equipment ready</label><label><input type="checkbox" name="flags" value="Route reminder"> Route reminder</label><label><input type="checkbox" name="flags" value="Material notes"> Material notes</label></div><label>Expected Stay <input id="conditionalDuration" name="duration" type="range" min="20" max="120" step="10" value="40"><output id="conditionalDurationValue">40 minutes</output></label><label id="conditionalEscortField" hidden>Accompanying contact <input name="escort" type="text" placeholder="Enter contact"></label><label id="conditionalAccessibilityField" hidden>Accessibility note <textarea name="accessibility" rows="3" placeholder="Describe the details that need assistance"></textarea></label></section><aside class="conditional-plan"><strong>Local Arrangement Summary</strong><p id="conditionalSummary">Self-service completion · 40 minutes</p><ul id="conditionalChecklist"><li>Equipment ready</li></ul><button class="action primary" type="submit">Save current arrangement</button></aside></form></section><!-- 11DZ_CORE_END --></section><footer class="session-log"><strong id="workflowSessionScore">0 interaction checkpoints</strong><ol id="workflowSessionLaps" aria-label="Round Log"></ol></footer></div><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
  </main>
  <script>
    'use strict';
    const statusOutput = document.querySelector('#status');
    const announce = message => { statusOutput.textContent = message; };
    /* 11DZ_CORE_SCRIPT_START:forms-input-conditional-survey */
const conditionalForm=document.querySelector('#conditionalForm');const conditionalModeInputs=[...conditionalForm.querySelectorAll('[name="supportMode"]')];const conditionalFlags=[...conditionalForm.querySelectorAll('[name="flags"]')];const conditionalDuration=document.querySelector('#conditionalDuration');const conditionalEscortField=document.querySelector('#conditionalEscortField');const conditionalAccessibilityField=document.querySelector('#conditionalAccessibilityField');function renderConditionalStudio(){const mode=(conditionalModeInputs.find(input=>input.checked)||conditionalModeInputs[0]).value;const duration=conditionalDuration.value;const flags=conditionalFlags.filter(input=>input.checked).map(input=>input.value);conditionalEscortField.hidden=mode!=='On-site accompaniment';conditionalAccessibilityField.hidden=mode!=='Accessibility support';document.querySelector('#conditionalDurationValue').textContent=duration+' minutes';document.querySelector('#conditionalState').textContent='Current sort by'+mode+'Ready';document.querySelector('#conditionalSummary').textContent=mode+' · '+duration+' minutes';document.querySelector('#conditionalChecklist').replaceChildren(...(flags.length?flags:[mode]).map(label=>{const item=document.createElement('li');item.textContent=label;return item;}));announce('The support path has been updated to '+mode);}conditionalModeInputs.forEach(input=>input.addEventListener('change',renderConditionalStudio));conditionalForm.addEventListener('change',renderConditionalStudio);conditionalDuration.addEventListener('input',renderConditionalStudio);conditionalForm.addEventListener('submit',event=>{event.preventDefault();announce('The current support arrangement has been saved on this page');});renderConditionalStudio();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"forms-input-conditional-survey","selector":"[data-core-bridge=\"forms-input-conditional-survey\"]","mode":"radio","key":"ArrowRight"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Core Version '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("keydown",workflowBridgeScheduleCommit);workflowBridgeControl.addEventListener('input',workflowBridgeScheduleCommit);workflowBridgeControl.addEventListener('change',workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();const radios=[...workflowBridgeCore.querySelectorAll('input[type="radio"]')].filter(input=>input.name===workflowBridgeControl.name&&!input.disabled);const current=Math.max(0,radios.findIndex(input=>input.checked));radios[(current+1)%radios.length].click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowSessionCore=document.querySelector('#workflowCore');const workflowSessionToggle=document.querySelector('#workflowSessionToggle');const workflowSessionLength=document.querySelector('#workflowSessionLength');const workflowSessionState={phase:'ready',elapsed:0,limit:Number(workflowSessionLength.value),checkpoints:[],timer:null};function workflowSessionFormat(seconds){return String(Math.floor(seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0');}function workflowSessionDrive(){const percent=Math.min(100,Math.round(workflowSessionState.elapsed/workflowSessionState.limit*100));document.querySelector('#workflowSessionClock').textContent=workflowSessionFormat(Math.max(0,workflowSessionState.limit-workflowSessionState.elapsed));const progress=document.querySelector('#workflowSessionProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';workflowSessionCore.dataset.sessionPhase=workflowSessionState.phase;document.querySelector('#workflowSessionScore').textContent=workflowSessionState.checkpoints.length+' interactive checkpoints';}function workflowSessionLap(label){workflowSessionState.checkpoints.push({label,at:workflowSessionState.elapsed});const item=document.createElement('li');item.textContent=label+' · '+workflowSessionFormat(workflowSessionState.elapsed);document.querySelector('#workflowSessionLaps').append(item);workflowSessionDrive();}function workflowSessionStop(complete=false){clearInterval(workflowSessionState.timer);workflowSessionState.timer=null;workflowSessionState.phase=complete?'complete':'paused';workflowSessionToggle.textContent=complete?'Restart':'Continue round';workflowSessionToggle.setAttribute('aria-pressed','false');workflowSessionDrive();announce(complete?'Donor signup round completed':'Round paused');}function workflowSessionStart(){if(workflowSessionState.phase==='complete'){workflowSessionState.elapsed=0;workflowSessionState.checkpoints=[];document.querySelector('#workflowSessionLaps').replaceChildren();}workflowSessionState.phase='running';workflowSessionToggle.textContent='Pause round';workflowSessionToggle.setAttribute('aria-pressed','true');const bridge=workflowBridgeActivate();workflowSessionLap(bridge.summary);clearInterval(workflowSessionState.timer);workflowSessionState.timer=setInterval(()=>{workflowSessionState.elapsed+=1;if(workflowSessionState.elapsed>=workflowSessionState.limit){workflowSessionStop(true);return;}workflowSessionDrive();},1000);workflowSessionDrive();announce('The donation signup round has started · '+bridge.summary);}workflowSessionToggle.addEventListener('click',()=>workflowSessionState.phase==='running'?workflowSessionStop():workflowSessionStart());workflowSessionLength.addEventListener('input',()=>{workflowSessionState.limit=Number(workflowSessionLength.value);workflowSessionState.elapsed=Math.min(workflowSessionState.elapsed,workflowSessionState.limit);workflowSessionDrive();});workflowSessionCore.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){workflowSessionLap('Keyboard Interaction');}});workflowSessionCore.addEventListener('click',event=>{if(event.target.closest('[data-core-bridge]'))workflowSessionLap('Core action · '+workflowBridgeSummary());});document.addEventListener('visibilitychange',()=>{if(document.hidden&&workflowSessionState.phase==='running')workflowSessionStop();});workflowSessionDrive();
workflowBridgeReset();
  </script>
</body>
</html>