Free Contact Form Widget

<script src="https://hayneslab.dev/widgets/contact-form.js" data-hl-action="https://formspree.io/f/your-form-id" async></script>
<!-- Free Contact Form widget by haynes lab — https://hayneslab.dev/tools/widgets/contact-form -->

<!-- Free Contact Form widget by haynes lab — https://hayneslab.dev/tools/widgets/contact-form -->
<script data-hl-action="https://formspree.io/f/your-form-id">
/*!
 * haynes lab — Contact Form widget (free)
 * Docs & embed code: https://hayneslab.dev/tools/widgets/contact-form
 */
(function () {
  'use strict';

  var PREFIX = 'hlw-contact-form';
  var STYLE_ID = 'hlw-contact-form-styles';

  function findScript() {
    return document.currentScript ||
      document.querySelector('script[src*="widgets/contact-form.js"]');
  }

  function injectStyles() {
    if (document.getElementById(STYLE_ID)) return;
    var css =
      '.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
      '.' + PREFIX + ' { position: relative; max-width: 520px; 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: var(--hlw-bg, #ffffff);' +
      ' border: 1px solid #e5e7eb; border-radius: 12px; }' +
      '.' + PREFIX + '__title { margin: 0 0 18px; font-size: 22px; font-weight: 700; color: #111827; text-align: center; }' +
      '.' + PREFIX + '__form { display: flex; flex-direction: column; gap: 14px; }' +
      '.' + 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 + '__input[aria-invalid="true"] { border-color: #dc2626; }' +
      '.' + PREFIX + '__textarea { min-height: 110px; resize: vertical; }' +
      '.' + PREFIX + '__field-error { margin: 4px 0 0; font-size: 12px; color: #b91c1c; }' +
      '.' + 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: 12px 0 0; font-size: 13px; color: #b91c1c; text-align: center; }' +
      '.' + PREFIX + '__success { padding: 24px 8px 8px; text-align: center; }' +
      '.' + 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 build(script) {
    var action = script.getAttribute('data-hl-action');
    if (!action) {
      console.warn('[haynes lab contact-form] Missing required data-hl-action attribute (form POST endpoint). Nothing rendered.');
      return;
    }

    var title = script.getAttribute('data-hl-title') || 'Contact Us';
    var buttonText = script.getAttribute('data-hl-button-text') || 'Send Message';
    var successMessage = script.getAttribute('data-hl-success-message') ||
      'Thanks for reaching out! We\u2019ll get back to you soon.';
    var accent = script.getAttribute('data-hl-accent') || '#f97316';
    var bg = script.getAttribute('data-hl-bg') || '#ffffff';

    injectStyles();

    var root = el('div', PREFIX);
    root.style.setProperty('--hlw-accent', accent);
    root.style.setProperty('--hlw-bg', bg);

    root.appendChild(el('h3', PREFIX + '__title', title));

    var form = el('form', PREFIX + '__form');
    form.setAttribute('novalidate', 'novalidate');

    var uid = Math.random().toString(36).slice(2, 8);

    function makeField(labelText, input, extra) {
      var field = el('div', PREFIX + '__field');
      var label = el('label', PREFIX + '__label', labelText);
      var id = PREFIX + '-' + input.name + '-' + uid;
      input.id = id;
      input.className = PREFIX + '__input' + (extra ? ' ' + extra : '');
      label.setAttribute('for', id);
      var fieldError = el('p', PREFIX + '__field-error');
      fieldError.hidden = true;
      field.appendChild(label);
      field.appendChild(input);
      field.appendChild(fieldError);
      return { field: field, input: input, error: fieldError };
    }

    var nameInput = el('input');
    nameInput.type = 'text';
    nameInput.name = 'name';
    nameInput.required = true;
    nameInput.autocomplete = 'name';
    var name = makeField('Name', nameInput);
    form.appendChild(name.field);

    var emailInput = el('input');
    emailInput.type = 'email';
    emailInput.name = 'email';
    emailInput.required = true;
    emailInput.autocomplete = 'email';
    var email = makeField('Email', emailInput);
    form.appendChild(email.field);

    var messageInput = el('textarea');
    messageInput.name = 'message';
    messageInput.required = true;
    var message = makeField('Message', messageInput, PREFIX + '__textarea');
    form.appendChild(message.field);

    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 setFieldError(f, messageText) {
      if (messageText) {
        f.error.textContent = messageText;
        f.error.hidden = false;
        f.input.setAttribute('aria-invalid', 'true');
      } else {
        f.error.hidden = true;
        f.input.removeAttribute('aria-invalid');
      }
    }

    function showError(messageText) {
      error.textContent = messageText;
      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', 'Message sent'));
      box.appendChild(el('p', PREFIX + '__success-text', successMessage));
      root.appendChild(box);
    }

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      error.hidden = true;
      var firstBad = null;
      var nameValue = nameInput.value.trim();
      var emailValue = emailInput.value.trim();
      var messageValue = messageInput.value.trim();

      if (!nameValue) { setFieldError(name, 'Please enter your name.'); firstBad = firstBad || nameInput; }
      else setFieldError(name, null);

      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue)) {
        setFieldError(email, 'Please enter a valid email address.');
        firstBad = firstBad || emailInput;
      } else setFieldError(email, null);

      if (!messageValue) { setFieldError(message, 'Please enter a message.'); firstBad = firstBad || messageInput; }
      else setFieldError(message, null);

      if (firstBad) { firstBad.focus(); return; }

      button.disabled = true;
      button.textContent = 'Sending\u2026';

      var body = new FormData();
      body.append('name', nameValue);
      body.append('email', emailValue);
      body.append('message', messageValue);

      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/contact-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 contact-form] Could not locate its own script tag. Nothing rendered.');
      return;
    }
    build(script);
  }

  if (document.body) {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', init);
  }
})();

</script>