html5.1 KB
Feedback / NPS Form (HTML)
A downloadable feedback form with a 0–10 Net Promoter Score scale, what-you-liked checkboxes, and a comment box.
Preview — first 26 lineshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Feedback / NPS form — Novus Examples</title>
<meta name="description" content="A customer-feedback form with a 0–10 Net Promoter Score scale, what-you-liked checkboxes, and a comment box.">
<style>:root{--bg:#f6f7f9;--card:#fff;--fg:#1a1d23;--muted:#5b6472;--border:#d9dee6;--accent:#0f9d6b;--accent-d:#0c7f56;--err:#d33;--radius:10px}*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--fg);padding:2rem 1rem}.wrap{max-width:640px;margin:0 auto}.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.75rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}h1{margin:0 0 .25rem;font-size:1.55rem}.lead{margin:0 0 1.5rem;color:var(--muted)}form{display:grid;gap:1.1rem}.field{display:grid;gap:.35rem}label{font-weight:600;font-size:.92rem}.req{color:var(--err)}.hint{font-size:.8rem;color:var(--muted)}input,select,textarea{font:inherit;color:inherit;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .7rem;width:100%}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}textarea{resize:vertical;min-height:110px}input[type=range]{padding:0}input[type=color]{height:44px;padding:.25rem}input[type=file]{padding:.45rem}.group{display:grid;gap:.45rem}.opt{display:flex;align-items:center;gap:.55rem;font-weight:400}.opt input{width:auto}.inline{display:flex;flex-wrap:wrap;gap:1rem}fieldset{border:1px solid var(--border);border-radius:12px;padding:1rem;margin:0}legend{font-weight:600;padding:0 .4rem}.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}button{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:var(--radius);padding:.7rem 1.3rem}.btn{background:var(--accent);color:#fff}.btn:hover{background:var(--accent-d)}.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.3rem}.ok{display:none;background:#e7f7ef;border:1px solid #b6e6cf;color:#0c7f56;border-radius:var(--radius);padding:.7rem .9rem;font-size:.9rem}.foot{margin-top:1.25rem;font-size:.78rem;color:var(--muted);text-align:center}@media(max-width:480px){body{padding:1rem .5rem}.card{padding:1.25rem}}</style>
</head>
<body>
<main class="wrap"><div class="card">
<h1>How are we doing?</h1>
<p class="lead">A customer-feedback form with a 0–10 Net Promoter Score scale, what-you-liked checkboxes, and a comment box.</p>
<form method="post" action="#" novalidate>
<fieldset><legend>How likely are you to recommend us? (0–10) <span class="req">*</span></legend><div class="inline"><label class="opt"><input type="radio" name="nps" value="0" required> 0</label><label class="opt"><input type="radio" name="nps" value="1" required> 1</label><label class="opt"><input type="radio" name="nps" value="2" required> 2</label><label class="opt"><input type="radio" name="nps" value="3" required> 3</label><label class="opt"><input type="radio" name="nps" value="4" required> 4</label><label class="opt"><input type="radio" name="nps" value="5" required> 5</label><label class="opt"><input type="radio" name="nps" value="6" required> 6</label><label class="opt"><input type="radio" name="nps" value="7" required> 7</label><label class="opt"><input type="radio" name="nps" value="8" required> 8</label><label class="opt"><input type="radio" name="nps" value="9" required> 9</label><label class="opt"><input type="radio" name="nps" value="10" required> 10</label></div></fieldset>
<fieldset><legend>What did you like?</legend><div class="group"><label class="opt"><input type="checkbox" name="liked" value="quality"> Quality</label><label class="opt"><input type="checkbox" name="liked" value="price"> Price</label><label class="opt"><input type="checkbox" name="liked" value="support"> Support</label><label class="opt"><input type="checkbox" name="liked" value="speed"> Speed</label></div></fieldset>
<div class="field"><label for="comments">Anything else?</label><textarea id="comments" name="comments" placeholder="Your feedback…"></textarea></div><div class="field"><label for="email">Email (optional)</label><input id="email" name="email" type="email" autocomplete="email"></div><div class="hp" aria-hidden="true"><label>Leave this field empty<input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
<div class="ok" role="status">Thanks — your feedback is valid and would be recorded.</div>
<div class="actions"><button type="submit" class="btn">Send feedback</button></div>
</form>
<p class="foot">Free example form from Novus Examples · works offline, no data leaves your browser.</p>
</div></main>
<script>document.querySelectorAll('form').forEach(function(f){f.addEventListener('submit',function(e){e.preventDefault();var hp=f.querySelector('.hp input');if(hp&&hp.value){return;}if(!f.checkValidity()){f.reportValidity();return;}var ok=f.querySelector('.ok');if(ok){ok.style.display='block';ok.scrollIntoView({block:'nearest'});}f.reset();});});</script>
</body>
</html>
Specifications
- Fields
- 4
- Validation
- HTML5 native
- Honeypot
- true
- Standalone
- true
- Dependencies
- none
- Live Demo
What is a .html file?
HTML (HyperText Markup Language) is the structural markup language of the web, using nested tags to define document content, semantics, and links. It is typically paired with CSS for presentation and JavaScript for behavior. It is the foundational format rendered by browsers.
How to use this file
Use an example HTML file to test parsers, DOM construction, sanitization of untrusted markup, and rendering or scraping pipelines.
Embed this form
It's a single self-contained HTML file (inlined CSS, native validation, no external requests). Download it, host it on your own site, and drop it into any page with an iframe.
iframe embed
<!-- Download feedback.html, host it on your site, then embed the form anywhere: -->
<iframe
src="/path/to/feedback.html"
title="Feedback / NPS Form (HTML)"
width="100%"
height="640"
loading="lazy"
style="border:0">
</iframe>Generated by generation/forms_export.py. Free for any use, no attribution required — license.