Paste either snippet into your page — a Custom HTML block on WordPress, Shopify, or Squarespace works too. Both snippets update live as you customize, so what you copy is exactly what you configured.
<!-- Free Survey Widget widget by haynes lab — https://hayneslab.dev/tools/widgets/survey-widget -->
<script data-hl-action="https://formspree.io/f/your-form-id" data-hl-config='[{"q":"How did you hear about us?","type":"choice","options":["Google search","Social media","Friend or colleague","Other"]},{"q":"How would you rate your experience so far?","type":"choice","options":["Excellent","Good","Fair","Poor"]},{"q":"Anything else you'd like to tell us?","type":"text"}]' data-hl-title="How are we doing?">
/*!
* haynes lab — Survey Widget widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/survey-widget
*/
(function () {
'use strict';
var PREFIX = 'hlw-survey-widget';
var STYLE_ID = 'hlw-survey-widget-styles';
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/survey-widget.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { position: relative; max-width: 560px; margin: 0 auto; padding: 28px 28px 36px;' +
' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
' font-size: 16px; line-height: 1.5; color: #1f2937; background: #ffffff;' +
' border: 1px solid #e5e7eb; border-radius: 12px; }' +
'.' + PREFIX + '__title { margin: 0 0 16px; font-size: 20px; font-weight: 700; color: #111827; }' +
'.' + PREFIX + '__progress { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }' +
'.' + PREFIX + '__bar { flex: 1; height: 6px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }' +
'.' + PREFIX + '__fill { display: block; height: 100%; border-radius: 999px;' +
' background: var(--hlw-accent); transition: width 0.3s ease; }' +
'.' + PREFIX + '__count { font-size: 12px; color: #6b7280; white-space: nowrap; }' +
'.' + PREFIX + '__question { margin: 0 0 16px; font-size: 17px; font-weight: 600; color: #111827; }' +
'.' + PREFIX + '__options { display: flex; flex-direction: column; gap: 10px; }' +
'.' + PREFIX + '__option { display: block; width: 100%; padding: 12px 16px; text-align: left; font-size: 15px;' +
' color: #1f2937; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; cursor: pointer; }' +
'.' + PREFIX + '__option:hover { border-color: var(--hlw-accent); color: var(--hlw-accent); }' +
'.' + PREFIX + '__option:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
'.' + PREFIX + '__textarea { width: 100%; min-height: 96px; padding: 10px 12px; font: inherit; font-size: 15px;' +
' color: #1f2937; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; resize: vertical; }' +
'.' + PREFIX + '__textarea:focus { outline: 2px solid var(--hlw-accent); outline-offset: 2px; border-color: var(--hlw-accent); }' +
'.' + PREFIX + '__next { display: inline-block; margin-top: 14px; padding: 10px 22px; font-size: 15px; font-weight: 600;' +
' color: #ffffff; background: var(--hlw-accent); border: 0; border-radius: 10px; cursor: pointer; }' +
'.' + PREFIX + '__next:hover { opacity: 0.9; }' +
'.' + PREFIX + '__next:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
'.' + PREFIX + '__error { margin: 8px 0 0; font-size: 13px; color: #b91c1c; }' +
'.' + PREFIX + '__thanks { text-align: center; padding: 20px 0 4px; }' +
'.' + PREFIX + '__thanks-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #111827; }' +
'.' + PREFIX + '__thanks-text { margin: 0; font-size: 15px; color: #6b7280; }' +
'.' + PREFIX + '__credit { position: absolute; right: 10px; bottom: 6px; font-size: 11px;' +
' display: inline-flex; align-items: center; gap: 4px; color: #9ca3af; text-decoration: none; }' +
'.' + PREFIX + '__credit svg { display: block; }' +
'.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }' +
'@media (max-width: 560px) { .' + PREFIX + ' { padding: 22px 18px 34px; } }';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
function parseQuestions(script) {
var raw = script.getAttribute('data-hl-config');
if (!raw) {
console.warn('[haynes lab survey-widget] Missing required data-hl-config attribute (JSON array of {q, type, options}). Nothing rendered.');
return null;
}
var items;
try {
items = JSON.parse(raw);
} catch (e) {
console.warn('[haynes lab survey-widget] data-hl-config is not valid JSON. Nothing rendered.', e);
return null;
}
if (!Array.isArray(items)) {
console.warn('[haynes lab survey-widget] data-hl-config must be a JSON array. Nothing rendered.');
return null;
}
var valid = items.filter(function (item) {
if (!item || typeof item.q !== 'string' || !item.q) return false;
if (item.type === 'text') return true;
if (item.type === 'choice') {
return Array.isArray(item.options) &&
item.options.some(function (o) { return typeof o === 'string' && o; });
}
return false;
});
if (!valid.length) {
console.warn('[haynes lab survey-widget] data-hl-config has no valid questions (each needs "q" and type "choice" with options or "text"). Nothing rendered.');
return null;
}
return valid;
}
function el(tag, className, text) {
var node = document.createElement(tag);
if (className) node.className = className;
if (text != null) node.textContent = text;
return node;
}
function logoSvg() {
var svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 32 32');
svg.setAttribute('width', '13');
svg.setAttribute('height', '13');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
function circle(cx, cy, r, attrs) {
var c = document.createElementNS(svgNS, 'circle');
c.setAttribute('cx', cx);
c.setAttribute('cy', cy);
c.setAttribute('r', r);
for (var key in attrs) c.setAttribute(key, attrs[key]);
svg.appendChild(c);
}
circle(16, 16, 16, { fill: '#0f0a0a' });
circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
circle(16, 16, 3, { fill: '#06b6d4' });
circle(24.5, 7.5, 2, { fill: '#f97316' });
circle(7, 16, 1.8, { fill: '#f97316' });
circle(20, 20, 1.5, { fill: '#f97316' });
return svg;
}
function build(script) {
var questions = parseQuestions(script);
if (!questions) return;
var action = script.getAttribute('data-hl-action');
if (!action) {
console.warn('[haynes lab survey-widget] Missing required data-hl-action attribute (URL answers are POSTed to). Nothing rendered.');
return;
}
var title = script.getAttribute('data-hl-title') || 'Quick survey';
var accent = script.getAttribute('data-hl-accent') || '#f97316';
injectStyles();
var root = el('div', PREFIX);
root.style.setProperty('--hlw-accent', accent);
root.appendChild(el('h2', PREFIX + '__title', title));
var progress = el('div', PREFIX + '__progress');
var bar = el('div', PREFIX + '__bar');
var fill = el('span', PREFIX + '__fill');
bar.appendChild(fill);
var count = el('span', PREFIX + '__count');
progress.appendChild(bar);
progress.appendChild(count);
root.appendChild(progress);
var body = el('div', PREFIX + '__body');
root.appendChild(body);
var answers = [];
var index = 0;
function setProgress() {
fill.style.width = Math.round((index / questions.length) * 100) + '%';
count.textContent = 'Question ' + Math.min(index + 1, questions.length) + ' of ' + questions.length;
}
function showThanks() {
fill.style.width = '100%';
count.textContent = 'Done';
while (body.firstChild) body.removeChild(body.firstChild);
var thanks = el('div', PREFIX + '__thanks');
thanks.setAttribute('role', 'status');
thanks.appendChild(el('p', PREFIX + '__thanks-title', 'Thank you!'));
thanks.appendChild(el('p', PREFIX + '__thanks-text', 'Your responses have been submitted.'));
body.appendChild(thanks);
}
function submit() {
var payload = { answers: answers };
try {
fetch(action, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
}).catch(function (err) {
console.warn('[haynes lab survey-widget] Failed to submit answers.', err);
});
} catch (e) {
console.warn('[haynes lab survey-widget] Failed to submit answers.', e);
}
showThanks();
}
function renderQuestion() {
while (body.firstChild) body.removeChild(body.firstChild);
setProgress();
var item = questions[index];
var question = el('p', PREFIX + '__question', item.q);
question.id = PREFIX + '-q-' + index;
body.appendChild(question);
if (item.type === 'choice') {
var options = el('div', PREFIX + '__options');
options.setAttribute('role', 'group');
options.setAttribute('aria-labelledby', question.id);
item.options.forEach(function (opt) {
if (typeof opt !== 'string' || !opt) return;
var btn = el('button', PREFIX + '__option', opt);
btn.type = 'button';
btn.addEventListener('click', function () {
answers.push({ q: item.q, answer: opt });
index += 1;
if (index < questions.length) renderQuestion(); else submit();
});
options.appendChild(btn);
});
body.appendChild(options);
} else {
var textarea = el('textarea', PREFIX + '__textarea');
textarea.setAttribute('aria-labelledby', question.id);
body.appendChild(textarea);
var error = el('p', PREFIX + '__error');
error.setAttribute('role', 'alert');
var next = el('button', PREFIX + '__next', index === questions.length - 1 ? 'Submit' : 'Next');
next.type = 'button';
next.addEventListener('click', function () {
var value = textarea.value.trim();
if (!value) {
error.textContent = 'Please enter an answer to continue.';
if (!error.parentNode) body.appendChild(error);
textarea.focus();
return;
}
if (error.parentNode) error.parentNode.removeChild(error);
answers.push({ q: item.q, answer: value });
index += 1;
if (index < questions.length) renderQuestion(); else submit();
});
body.appendChild(next);
textarea.focus();
}
}
renderQuestion();
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/survey-widget';
credit.target = '_blank';
credit.rel = 'noopener';
root.appendChild(credit);
if (script.parentNode && script.parentNode.nodeName !== 'HEAD') {
script.insertAdjacentElement('afterend', root);
} else {
document.body.appendChild(root);
}
}
function init() {
var script = findScript();
if (!script) {
console.warn('[haynes lab survey-widget] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>