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 Quote Request Form widget by haynes lab — https://hayneslab.dev/tools/widgets/quote-request-form -->
<script data-hl-action="https://formspree.io/f/your-form-id" data-hl-config='["Web Design","SEO & Marketing","Website Maintenance","Custom Development"]' data-hl-title="Request a free quote">
/*!
* haynes lab — Quote Request Form widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/quote-request-form
*/
(function () {
'use strict';
var PREFIX = 'hlw-quote-request-form';
var STYLE_ID = 'hlw-quote-request-form-styles';
var BUDGET_OPTIONS = [
'Under $1,000',
'$1,000 – $5,000',
'$5,000 – $10,000',
'$10,000 – $25,000',
'$25,000+',
'Not sure yet'
];
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/quote-request-form.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 34px;' +
' 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 4px; font-size: 20px; font-weight: 700; color: #111827; }' +
'.' + PREFIX + '__subtitle { margin: 0 0 20px; font-size: 14px; color: #6b7280; }' +
'.' + PREFIX + '__row { display: flex; gap: 12px; }' +
'.' + PREFIX + '__field { margin-bottom: 14px; flex: 1; min-width: 0; }' +
'.' + PREFIX + '__label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: #374151; }' +
'.' + PREFIX + '__input, .' + PREFIX + '__select, .' + PREFIX + '__textarea { display: block; width: 100%;' +
' padding: 10px 12px; font: inherit; font-size: 15px; color: #1f2937; background: #ffffff;' +
' border: 1px solid #d1d5db; border-radius: 8px; }' +
'.' + PREFIX + '__input:focus, .' + PREFIX + '__select:focus, .' + PREFIX + '__textarea:focus {' +
' outline: 2px solid var(--hlw-accent); outline-offset: 0; border-color: var(--hlw-accent); }' +
'.' + PREFIX + '__textarea { min-height: 110px; resize: vertical; }' +
'.' + PREFIX + '__submit { display: block; width: 100%; margin-top: 4px; padding: 12px 16px;' +
' font: inherit; font-size: 15px; font-weight: 600; color: #ffffff; background: var(--hlw-accent);' +
' border: 0; border-radius: 8px; cursor: pointer; }' +
'.' + PREFIX + '__submit:hover { filter: brightness(0.92); }' +
'.' + PREFIX + '__submit:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
'.' + PREFIX + '__submit[disabled] { opacity: 0.6; cursor: default; }' +
'.' + PREFIX + '__status { margin-top: 12px; font-size: 14px; }' +
'.' + PREFIX + '__status--error { color: #b91c1c; }' +
'.' + PREFIX + '__success { padding: 24px 8px; text-align: center; }' +
'.' + PREFIX + '__success-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #111827; }' +
'.' + PREFIX + '__success-text { margin: 0; font-size: 14px; 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 32px; } .' + PREFIX + '__row { flex-direction: column; gap: 0; } }';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
function parseServices(script) {
var raw = script.getAttribute('data-hl-config');
if (!raw) {
console.warn('[haynes lab quote-request-form] No data-hl-config attribute. Falling back to a single "General inquiry" service.');
return ['General inquiry'];
}
var items;
try {
items = JSON.parse(raw);
} catch (e) {
console.warn('[haynes lab quote-request-form] data-hl-config is not valid JSON. Falling back to a single "General inquiry" service.', e);
return ['General inquiry'];
}
if (!Array.isArray(items)) {
console.warn('[haynes lab quote-request-form] data-hl-config must be a JSON array of service names. Falling back to a single "General inquiry" service.');
return ['General inquiry'];
}
var valid = items.filter(function (s) { return typeof s === 'string' && s; });
if (!valid.length) {
console.warn('[haynes lab quote-request-form] data-hl-config has no valid service names. Falling back to a single "General inquiry" service.');
return ['General inquiry'];
}
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 action = script.getAttribute('data-hl-action');
if (!action) {
console.warn('[haynes lab quote-request-form] Missing required data-hl-action attribute (the URL the form POSTs to). Nothing rendered.');
return;
}
var services = parseServices(script);
var title = script.getAttribute('data-hl-title') || 'Request a quote';
var accent = script.getAttribute('data-hl-accent') || '#f97316';
injectStyles();
var root = el('div', PREFIX);
root.style.setProperty('--hlw-accent', accent);
var form = el('form', PREFIX + '__form');
form.setAttribute('novalidate', 'novalidate');
form.appendChild(el('h3', PREFIX + '__title', title));
form.appendChild(el('p', PREFIX + '__subtitle', 'Tell us what you need and we will get back to you with a quote.'));
function field(labelText, input) {
var wrap = el('div', PREFIX + '__field');
var label = el('label', PREFIX + '__label', labelText);
var id = PREFIX + '-' + Math.random().toString(36).slice(2, 9);
input.id = id;
label.setAttribute('for', id);
wrap.appendChild(label);
wrap.appendChild(input);
return wrap;
}
var nameInput = el('input', PREFIX + '__input');
nameInput.type = 'text';
nameInput.name = 'name';
nameInput.autocomplete = 'name';
nameInput.required = true;
var emailInput = el('input', PREFIX + '__input');
emailInput.type = 'email';
emailInput.name = 'email';
emailInput.autocomplete = 'email';
emailInput.required = true;
var row = el('div', PREFIX + '__row');
row.appendChild(field('Name', nameInput));
row.appendChild(field('Email', emailInput));
form.appendChild(row);
var serviceSelect = el('select', PREFIX + '__select');
serviceSelect.name = 'service';
services.forEach(function (s) {
var opt = el('option', null, s);
opt.value = s;
serviceSelect.appendChild(opt);
});
form.appendChild(field('Service', serviceSelect));
var budgetSelect = el('select', PREFIX + '__select');
budgetSelect.name = 'budget';
BUDGET_OPTIONS.forEach(function (b) {
var opt = el('option', null, b);
opt.value = b;
budgetSelect.appendChild(opt);
});
form.appendChild(field('Budget', budgetSelect));
var messageInput = el('textarea', PREFIX + '__textarea');
messageInput.name = 'message';
messageInput.required = true;
form.appendChild(field('Project details', messageInput));
var submit = el('button', PREFIX + '__submit', 'Request quote');
submit.type = 'submit';
form.appendChild(submit);
var status = el('p', PREFIX + '__status');
status.setAttribute('role', 'status');
status.setAttribute('aria-live', 'polite');
form.appendChild(status);
form.addEventListener('submit', function (e) {
e.preventDefault();
if (!nameInput.value.trim() || !emailInput.value.trim() || !messageInput.value.trim()) {
status.className = PREFIX + '__status ' + PREFIX + '__status--error';
status.textContent = 'Please fill in your name, email, and project details.';
return;
}
submit.disabled = true;
status.className = PREFIX + '__status';
status.textContent = 'Sending…';
fetch(action, {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
body: JSON.stringify({
name: nameInput.value.trim(),
email: emailInput.value.trim(),
service: serviceSelect.value,
budget: budgetSelect.value,
message: messageInput.value.trim()
})
}).then(function (res) {
if (!res.ok) throw new Error('Request failed with status ' + res.status);
root.removeChild(form);
var done = el('div', PREFIX + '__success');
done.appendChild(el('p', PREFIX + '__success-title', 'Thanks, ' + nameInput.value.trim().split(' ')[0] + '!'));
done.appendChild(el('p', PREFIX + '__success-text', 'Your quote request has been sent. We will be in touch shortly.'));
root.insertBefore(done, root.firstChild);
}).catch(function (err) {
console.warn('[haynes lab quote-request-form] Submission failed.', err);
submit.disabled = false;
status.className = PREFIX + '__status ' + PREFIX + '__status--error';
status.textContent = 'Something went wrong sending your request. Please try again.';
});
});
root.appendChild(form);
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/quote-request-form';
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 quote-request-form] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>