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 Giveaway Entry Form widget by haynes lab — https://hayneslab.dev/tools/widgets/giveaway-entry-form -->
<script data-hl-action="https://formspree.io/f/your-form-id" data-hl-prize="Win a $100 Gift Card" data-hl-deadline="2026-09-30" data-hl-title="Summer Giveaway">
/*!
* haynes lab — Giveaway Entry Form widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/giveaway-entry-form
*/
(function () {
'use strict';
var PREFIX = 'hlw-giveaway-entry-form';
var STYLE_ID = 'hlw-giveaway-entry-form-styles';
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/giveaway-entry-form.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { position: relative; max-width: 460px; 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; text-align: center; }' +
'.' + PREFIX + '__prize { display: inline-block; padding: 4px 12px; margin-bottom: 12px;' +
' font-size: 13px; font-weight: 600; color: var(--hlw-accent);' +
' border: 1px solid var(--hlw-accent); border-radius: 999px; }' +
'.' + PREFIX + '__title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #111827; }' +
'.' + PREFIX + '__deadline { margin: 0 0 18px; font-size: 13px; color: #6b7280; }' +
'.' + PREFIX + '__form { display: flex; flex-direction: column; gap: 10px; }' +
'.' + PREFIX + '__field { text-align: left; }' +
'.' + PREFIX + '__label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: #374151; }' +
'.' + PREFIX + '__input { width: 100%; padding: 10px 12px; font: inherit; color: #1f2937;' +
' background: #ffffff; border: 1px solid #d1d5db; border-radius: 8px; }' +
'.' + PREFIX + '__input:focus { outline: 2px solid var(--hlw-accent); outline-offset: 1px; border-color: var(--hlw-accent); }' +
'.' + PREFIX + '__button { margin-top: 4px; width: 100%; padding: 11px 16px; font: inherit; font-weight: 600;' +
' color: #ffffff; background: var(--hlw-accent); border: 0; border-radius: 8px; cursor: pointer; }' +
'.' + PREFIX + '__button:hover { filter: brightness(0.92); }' +
'.' + PREFIX + '__button:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
'.' + PREFIX + '__button[disabled] { opacity: 0.6; cursor: default; }' +
'.' + PREFIX + '__error { margin: 10px 0 0; font-size: 13px; color: #b91c1c; }' +
'.' + PREFIX + '__success { padding: 24px 8px 8px; }' +
'.' + PREFIX + '__success-icon { display: inline-flex; align-items: center; justify-content: center;' +
' width: 48px; height: 48px; margin-bottom: 12px; border-radius: 50%;' +
' color: #ffffff; background: var(--hlw-accent); font-size: 24px; line-height: 1; }' +
'.' + PREFIX + '__success-title { margin: 0 0 6px; font-size: 19px; 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; } }';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
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 formatDeadline(raw) {
var date = new Date(raw);
if (isNaN(date.getTime())) return 'Ends ' + raw;
return 'Ends ' + date.toLocaleDateString(undefined, {
year: 'numeric', month: 'long', day: 'numeric'
});
}
function build(script) {
var action = script.getAttribute('data-hl-action');
if (!action) {
console.warn('[haynes lab giveaway-entry-form] Missing required data-hl-action attribute (form POST endpoint). Nothing rendered.');
return;
}
var title = script.getAttribute('data-hl-title') || 'Enter the Giveaway';
var prize = script.getAttribute('data-hl-prize');
var deadline = script.getAttribute('data-hl-deadline');
var buttonText = script.getAttribute('data-hl-button-text') || 'Enter to Win';
var accent = script.getAttribute('data-hl-accent') || '#f97316';
injectStyles();
var root = el('div', PREFIX);
root.style.setProperty('--hlw-accent', accent);
if (prize) root.appendChild(el('div', PREFIX + '__prize', prize));
root.appendChild(el('h3', PREFIX + '__title', title));
if (deadline) root.appendChild(el('p', PREFIX + '__deadline', formatDeadline(deadline)));
var form = el('form', PREFIX + '__form');
form.setAttribute('novalidate', 'novalidate');
var nameField = el('div', PREFIX + '__field');
var nameLabel = el('label', PREFIX + '__label', 'Name');
var nameInput = el('input', PREFIX + '__input');
nameInput.type = 'text';
nameInput.name = 'name';
nameInput.required = true;
nameInput.autocomplete = 'name';
var nameId = PREFIX + '-name-' + Math.random().toString(36).slice(2, 8);
nameInput.id = nameId;
nameLabel.setAttribute('for', nameId);
nameField.appendChild(nameLabel);
nameField.appendChild(nameInput);
form.appendChild(nameField);
var emailField = el('div', PREFIX + '__field');
var emailLabel = el('label', PREFIX + '__label', 'Email');
var emailInput = el('input', PREFIX + '__input');
emailInput.type = 'email';
emailInput.name = 'email';
emailInput.required = true;
emailInput.autocomplete = 'email';
var emailId = PREFIX + '-email-' + Math.random().toString(36).slice(2, 8);
emailInput.id = emailId;
emailLabel.setAttribute('for', emailId);
emailField.appendChild(emailLabel);
emailField.appendChild(emailInput);
form.appendChild(emailField);
var button = el('button', PREFIX + '__button', buttonText);
button.type = 'submit';
form.appendChild(button);
var error = el('p', PREFIX + '__error');
error.setAttribute('role', 'alert');
error.hidden = true;
root.appendChild(form);
root.appendChild(error);
function showError(message) {
error.textContent = message;
error.hidden = false;
}
function showSuccess() {
form.remove();
error.remove();
var box = el('div', PREFIX + '__success');
box.setAttribute('role', 'status');
box.appendChild(el('span', PREFIX + '__success-icon', '✓'));
box.appendChild(el('p', PREFIX + '__success-title', 'You’re in!'));
box.appendChild(el('p', PREFIX + '__success-text', 'Your entry has been received. Good luck!'));
root.appendChild(box);
}
form.addEventListener('submit', function (e) {
e.preventDefault();
error.hidden = true;
var name = nameInput.value.trim();
var email = emailInput.value.trim();
if (!name) { showError('Please enter your name.'); nameInput.focus(); return; }
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { showError('Please enter a valid email address.'); emailInput.focus(); return; }
button.disabled = true;
button.textContent = 'Submitting…';
var body = new FormData();
body.append('name', name);
body.append('email', email);
fetch(action, { method: 'POST', body: body, headers: { 'Accept': 'application/json' } })
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
showSuccess();
})
.catch(function () {
button.disabled = false;
button.textContent = buttonText;
showError('Something went wrong. Please try again.');
});
});
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/giveaway-entry-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 giveaway-entry-form] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>