From ff51a7bfbf71aebfe692aad3651152837a410ef0 Mon Sep 17 00:00:00 2001
From: patrick <patrickjaroszewski@protonmail.com>
Date: Thu, 26 Mar 2026 11:47:42 -0400
Subject: [PATCH] refactor contact form

- Change positions of submit button and turnstile widget
- Turnstile widget only appears on interaction with contact form
---
 src/components/svelte/ContactForm.svelte | 45 ++++++++++++++----------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/components/svelte/ContactForm.svelte b/src/components/svelte/ContactForm.svelte
index ead2224..f1acd3a 100644
--- a/src/components/svelte/ContactForm.svelte
+++ b/src/components/svelte/ContactForm.svelte
@@ -15,10 +15,14 @@
   let errorMessage = $state('')
   let turnstileWidgetId: string | null = $state(null)
   let turnstileContainer: HTMLElement
+  let turnstileInitialized = false
 
   const TURNSTILE_SITEKEY = sitekey
 
-  onMount(() => {
+  function initTurnstile() {
+    if (turnstileInitialized) return
+    turnstileInitialized = true
+
     // Wait for Turnstile script to load
     const interval = setInterval(() => {
       if (typeof window.turnstile !== 'undefined') {
@@ -32,9 +36,10 @@
         })
       }
     }, 100)
+  }
 
+  onMount(() => {
     return () => {
-      clearInterval(interval)
       if (turnstileWidgetId !== null && typeof window.turnstile !== 'undefined') {
         window.turnstile.remove(turnstileWidgetId)
       }
@@ -111,7 +116,7 @@
   }
 </script>
 
-<form onsubmit={handleSubmit} class="flex flex-col gap-4">
+<form onsubmit={handleSubmit} onfocusin={initTurnstile} class="flex flex-col gap-4">
   <div class="flex flex-col gap-2">
     <label for="name" class="text-sm font-medium text-foreground">
       Name <span class="text-destructive">*</span>
@@ -157,8 +162,7 @@
     ></textarea>
   </div>
 
-  <!-- Turnstile Widget -->
-  <div bind:this={turnstileContainer} class="flex justify-center"></div>
+  
 
   {#if formState === 'success'}
     <div class="flex items-center gap-2 rounded-md bg-primary/10 border border-primary/20 px-4 py-3 text-sm text-primary">
@@ -174,17 +178,22 @@
     </div>
   {/if}
 
-  <button
-    type="submit"
-    disabled={formState === 'submitting'}
-    class="inline-flex items-center justify-center gap-2 rounded-md bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200"
-  >
-    {#if formState === 'submitting'}
-      <span class="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
-      Sending...
-    {:else}
-      <IconSend class="size-4" />
-      Send Message
-    {/if}
-  </button>
+  <div class="flex items-start justify-between gap-4 min-h-[65px]">
+    <!-- Turnstile Widget (300x65 for normal size) -->
+    <div bind:this={turnstileContainer} class="min-w-[300px]"></div>
+
+    <button
+      type="submit"
+      disabled={formState === 'submitting'}
+      class="inline-flex items-center justify-center gap-2 rounded-md bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200"
+    >
+      {#if formState === 'submitting'}
+        <span class="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
+        Sending...
+      {:else}
+        <IconSend class="size-4" />
+        Send Message
+      {/if}
+    </button>
+  </div>
 </form>