Tell us what you’re planning. You can check your details before finishing.
This is a demo. Use made-up details; nothing is sent or stored.
This is a preview only. Finishing the example will not reserve a room.
You’ve reached the confirmation step. Nothing was sent and no room has been reserved.
A live service would show a reference number, response time, and contact details here.
Use this HTML with Curbcut’s stylesheet, script, and self-hosted fonts. The template layout CSS and example JavaScript provide the page layout and demo behavior. Replace example links and content before publishing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Application form — Riverbend example</title>
<link rel="stylesheet" href="/fonts/archivo.css">
<link rel="stylesheet" href="/assets/curbcut.css">
<link rel="stylesheet" href="/templates.css">
<script src="/assets/curbcut.js" defer></script>
<script src="/templates.js" defer></script>
</head>
<body>
<a class="cc-skip-link" href="#main">Skip to main content</a>
<header class="cc-site-header cc-site-header--contained">
<a class="cc-site-header__home" href="/templates/town-homepage/"><span class="cc-site-header__mark" aria-hidden="true">R</span>Town of Riverbend</a>
<nav class="cc-site-header__nav" aria-label="Primary">
<a href="/templates/town-homepage/" >Home</a>
<a href="/templates/service/" >Community rooms</a>
<a href="/templates/application/" aria-current="page">Apply</a>
<a href="#contact">Contact</a>
</nav>
<button class="cc-mobile-menu__toggle cc-site-header__menu" type="button" aria-haspopup="dialog" aria-controls="town-menu">Menu</button>
</header>
<dialog class="cc-mobile-menu" id="town-menu" aria-label="Town menu">
<div class="cc-mobile-menu__bar">Riverbend <button type="button" data-close>Close</button></div>
<nav aria-label="Primary"><ul>
<li><a href="/templates/town-homepage/">Home</a></li><li><a href="/templates/service/">Community rooms</a></li><li><a href="/templates/application/">Apply</a></li><li><a href="#contact">Contact</a></li>
</ul></nav>
</dialog>
<main id="main">
<div class="cc-page-head cc-page-head--plain">
<nav class="cc-breadcrumbs" aria-label="Breadcrumb"><ol><li><a href="/templates/town-homepage/">Home</a></li><li><a href="/templates/service/">Community rooms</a></li><li aria-current="page">Request a room</li></ol></nav>
<h1 class="cc-page-head__title">Request a room reservation</h1>
<p class="cc-page-head__lede">Tell us what you’re planning. You can check your details before finishing.</p>
</div>
<div class="cc-container tpl-form-layout" data-template-application>
<div>
<ol class="tpl-steps" aria-label="Application progress"><li aria-current="step">1. Your details</li><li>2. Review</li><li>3. Complete</li></ol>
<p class="cc-paragraph" id="demo-notice">This is a demo. Use made-up details; nothing is sent or stored.</p>
<form data-template-form aria-describedby="demo-notice">
<p class="cc-paragraph">All fields are required unless marked optional.</p>
<fieldset class="cc-fieldset"><legend>Your contact details</legend>
<div class="cc-field"><label class="cc-label" for="app-name">Full name</label><input class="cc-input" id="app-name" name="name" autocomplete="name" required maxlength="100"></div>
<div class="cc-field"><label class="cc-label" for="app-email">Email address</label><p class="cc-hint" id="email-hint">For example, alex@example.com.</p><input class="cc-input" id="app-email" name="email" type="email" autocomplete="email" aria-describedby="email-hint" required maxlength="200"></div>
</fieldset>
<fieldset class="cc-fieldset"><legend>Your event</legend>
<div class="cc-field"><label class="cc-label" for="app-room">Preferred room</label><select class="cc-select" id="app-room" name="room" required><option value="">Choose a room</option><option>Library meeting room</option><option>Town Hall community room</option></select></div>
<div class="tpl-field-pair"><div class="cc-field"><label class="cc-label" for="app-date">Preferred date</label><input class="cc-input" id="app-date" name="date" type="date" required></div><div class="cc-field"><label class="cc-label" for="app-time">Start time</label><select class="cc-select" id="app-time" name="time" required><option value="">Choose a time</option><option>9:00 am</option><option>12:00 pm</option><option>3:00 pm</option><option>6:00 pm</option></select></div></div>
<div class="cc-field"><label class="cc-label" for="app-event">What are you planning?</label><p class="cc-hint" id="event-hint">Describe the event and roughly how many people will attend.</p><textarea class="cc-textarea" id="app-event" name="event" aria-describedby="event-hint" required maxlength="1000"></textarea></div>
<div class="cc-field"><label class="cc-label" for="app-access">Access or setup requirements (optional)</label><textarea class="cc-textarea" id="app-access" name="access" maxlength="1000"></textarea></div>
</fieldset>
<button class="cc-button" type="submit" disabled data-template-review>Review your request <svg class="cc-icon" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#arrow-right"/></svg></button>
<noscript><p>This interactive demo needs JavaScript. No information can be submitted from this page.</p></noscript>
</form>
<section data-template-review-panel hidden aria-labelledby="review-title"><h2 class="cc-heading cc-heading--md" id="review-title" tabindex="-1">Check your details</h2><dl class="tpl-review"></dl><p class="cc-paragraph">This is a preview only. Finishing the example will not reserve a room.</p><div class="cc-actions"><button class="cc-button" type="button" data-template-confirm>Finish example</button><button class="cc-button cc-button--secondary" type="button" data-template-edit>Edit details</button></div></section>
<section data-template-complete hidden aria-labelledby="complete-title"><div class="cc-alert cc-alert--success"><div><h2 class="cc-heading cc-heading--sm" id="complete-title" tabindex="-1">Example complete</h2><p>You’ve reached the confirmation step. Nothing was sent and no room has been reserved.</p></div></div><p class="cc-paragraph">A live service would show a reference number, response time, and contact details here.</p><button class="cc-button cc-button--secondary" type="button" data-template-restart>Try the form again</button></section>
</div>
<aside class="cc-card tpl-form-help" aria-labelledby="next-title"><h2 class="cc-heading cc-heading--sm" id="next-title">What happens next</h2><ol class="cc-list"><li>The team checks room availability.</li><li>You receive a reply within three working days.</li><li>Any fees are confirmed before you book.</li></ol><h3 class="cc-heading cc-heading--sm">Before applying</h3><p class="cc-paragraph"><a href="/templates/service/">Read about rooms, fees, and access</a>, or visit Town Hall if you need help completing a request.</p></aside>
</div>
</main>
<footer class="cc-site-footer" id="contact">
<div class="cc-site-footer__cols">
<section><h2>Town of Riverbend</h2><p>Town Hall, 12 Main Street<br>Riverbend</p></section>
<section><h2>Visit Town Hall</h2><p>Monday–Thursday, 8:30 am–4:30 pm<br>Friday, 8:30 am–12:00 pm</p></section>
<section><h2>Community services</h2><ul><li><a href="/templates/service/">Room information</a></li><li><a href="/templates/application/">Request a reservation</a></li></ul></section>
</div>
<div class="cc-site-footer__meta">This is a Curbcut example website, not a live town service.</div>
</footer>
</body>
</html>