// Lead-magnet email verification hook
// Drop into a Code module on the lead-magnet page (Divi) or via a plugin like
// "Header Footer Code Manager" by DraftPress / "WPCode" / "Insert Headers and Footers".
// Works with the Selzy form shortcode [selzy-form id="..." title="..."] out of the box.
//
// Set the HFCM / WPCode placement to "Footer" (or wrap in DOMContentLoaded if header).
// Targets the form with class "lead-magnet-form" first, falling back to the only
// form on the page that has an email input. Auto-tags that form so subsequent
// loads match cleanly.
(function () {
const API_URL = "https://santisantiago.zo.space/api/verify-email";
const TIMEOUT_MS = 12000;
function findForm() {
let form = document.querySelector("form.lead-magnet-form");
if (form) return form;
const candidates = Array.from(document.querySelectorAll("form")).filter((f) =>
f.querySelector('input[type="email"], input[name*="email" i]')
);
if (candidates.length === 1) {
form = candidates[0];
form.classList.add("lead-magnet-form");
return form;
}
if (candidates.length > 1) {
console.warn(
"Lead-magnet hook: multiple email forms on page — add class 'lead-magnet-form' to the one you want to gate."
);
}
return null;
}
function arm() {
const form = findForm();
if (!form) {
console.warn("Lead-magnet hook: no suitable form found on this page.");
return;
}
const emailInput = form.querySelector('input[type="email"], input[name*="email" i]');
if (!emailInput) {
console.warn("Lead-magnet hook: email input not found inside form.");
return;
}
let errorEl = form.querySelector(".lead-magnet-error");
if (!errorEl) {
errorEl = document.createElement("div");
errorEl.className = "lead-magnet-error";
errorEl.setAttribute("role", "alert");
errorEl.setAttribute("aria-live", "polite");
errorEl.style.cssText =
"color:#b00020;margin-top:10px;font-size:14px;line-height:1.4;";
emailInput.insertAdjacentElement("afterend", errorEl);
}
const submitBtn = form.querySelector('button[type="submit"], input[type="submit"]');
const originalBtnText = submitBtn
? submitBtn.tagName === "INPUT"
? submitBtn.value
: submitBtn.textContent
: "";
if (form.__lmHandler) form.removeEventListener("submit", form.__lmHandler);
const handler = async function (e) {
if (form.__lmVerified === true) return;
e.preventDefault();
errorEl.textContent = "";
const email = (emailInput.value || "").trim();
if (!email) {
errorEl.textContent = "Please enter your email address.";
emailInput.focus();
return;
}
if (submitBtn) {
submitBtn.disabled = true;
if (submitBtn.tagName === "INPUT") submitBtn.value = "Verifying…";
else submitBtn.textContent = "Verifying…";
}
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_MS);
try {
const res = await fetch(API_URL, {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ email }),
signal: controller.signal,
});
clearTimeout(timeoutId);
const result = await res.json().catch(() => ({}));
if (result.ok === true) {
form.__lmVerified = true;
form.submit();
return;
}
errorEl.textContent =
result.message ||
result.error ||
"That email didn't look right — try a different one?";
emailInput.focus();
} catch (err) {
clearTimeout(timeoutId);
errorEl.textContent =
"Email verification is taking too long. Please try again in a moment.";
console.error("Lead-magnet verify error:", err);
} finally {
if (submitBtn) {
submitBtn.disabled = false;
if (submitBtn.tagName === "INPUT") submitBtn.value = originalBtnText;
else submitBtn.textContent = originalBtnText;
}
}
};
form.__lmHandler = handler;
form.addEventListener("submit", handler);
console.log("Lead-magnet hook: armed on", form);
}
// Run once the form is in the DOM. Works whether the script is in the head
// or footer, loaded synchronously or via a plugin in either position.
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", arm);
} else {
arm();
}
})();
