Load Turnstile via head script

This commit is contained in:
Calum Muir 2025-12-28 12:54:53 +00:00
parent ec3d9698b5
commit 74c4acc8e6

View file

@ -12,6 +12,17 @@ const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY ?? "";
path="/contact"
description="Contact Highland Group RDA for sessions, volunteering, and support."
>
{
turnstileSiteKey && (
<Fragment slot="head">
<script
src="https://challenges.cloudflare.com/turnstile/v0/api.js"
async
defer
></script>
</Fragment>
)
}
<div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
<main class="w-full">
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
@ -148,18 +159,6 @@ const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY ?? "";
<script type="module">
const turnstileSiteKey = {JSON.stringify(turnstileSiteKey)};
if (turnstileSiteKey) {
const existingScript = document.querySelector("script[data-turnstile]");
if (!existingScript) {
const script = document.createElement("script");
script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
script.async = true;
script.defer = true;
script.dataset.turnstile = "true";
document.body.appendChild(script);
}
}
const form = document.querySelector("[data-contact-form]");
const message = document.querySelector("[data-form-message]");
const submitButton = document.querySelector("[data-form-submit]");