feat: improve Brevo form UX and add Turnstile captcha

Refactor Brevo form button to show loader icon only when loading, hiding
the text accordingly. Integrate Cloudflare Turnstile captcha and update
callback logic to handle token storage and event dispatch. Load Brevo
form script dynamically after DOM is ready and only if the form exists.
Update error messages for better clarity.

Signed-off-by: Dipankar Das <[email protected]>

Author: dipankardas011

src/components/AppFooter.astro

@@ -156,10 +156,10 @@ const isProduction = import.meta.env.PROD;
                   form="sib-form"
                   type="submit"
                 >
-                  <svg class="icon clickable__icon progress-indicator__icon sib-hide-loader-icon w-5 h-5 animate-spin" viewBox="0 0 512 512">
+                  <svg class="icon clickable__icon progress-indicator__icon sib-hide-loader-icon hidden w-5 h-5 animate-spin" viewBox="0 0 512 512">
                     <path d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z" />
                   </svg>
-                  SUBSCRIBE
+                  <span class="sib-form-block__button-text">SUBSCRIBE</span>
                 </button>
               </div>
               <input type="text" name="email_address_check" value="" class="input--hidden" style="display: none;">

src/layouts/Layout.astro

@@ -51,12 +51,18 @@ const { title = "ksctl - Strive towards Fast, Efficient and Sustainable Computin
         color: #9ca3af;
       }
 
-      .sib-hide-loader-icon {
+      .sib-form-block__button .sib-hide-loader-icon {
         display: none !important;
       }
-      .sib-show-loader-icon {
+      .sib-form-block__button .sib-show-loader-icon {
         display: inline-block !important;
       }
+      .sib-form-block__button[data-loading="true"] .sib-hide-loader-icon {
+        display: inline-block !important;
+      }
+      .sib-form-block__button[data-loading="true"] .sib-form-block__button-text {
+        display: none !important;
+      }
 
       /* Style error and success messages */
       .sib-form-message-panel {
@@ -170,22 +176,28 @@ const { title = "ksctl - Strive towards Fast, Efficient and Sustainable Computin
         });
       </script>
 
+      <!-- Cloudflare Turnstile -->
+      <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+
       <!-- Brevo Form Scripts -->
       <script is:inline>
-        // reCAPTCHA callback function
-        function handleCaptchaResponse() {
+        // Turnstile/reCAPTCHA callback function
+        window.handleCaptchaResponse = function(token) {
+          console.log('Captcha completed:', token);
           var event = new Event('captchaChange');
           var captchaElement = document.getElementById('sib-captcha');
           if (captchaElement) {
+            // Store the token for Brevo form validation
+            captchaElement.dataset.captchaToken = token;
             captchaElement.dispatchEvent(event);
           }
-        }
+        };
 
-        // Brevo form configuration
+        // Brevo form configuration (must be set before main.js loads)
         window.REQUIRED_CODE_ERROR_MESSAGE = 'Please choose a country code';
         window.LOCALE = 'en';
         window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again.";
-        window.REQUIRED_ERROR_MESSAGE = "This field cannot be left blank. ";
+        window.REQUIRED_ERROR_MESSAGE = "Please complete the captcha verification.";
         window.GENERIC_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again.";
         window.translation = {
           common: {
@@ -195,9 +207,24 @@ const { title = "ksctl - Strive towards Fast, Efficient and Sustainable Computin
             selectedOptions: '{quantity} selected',
           }
         };
-        var AUTOHIDE = Boolean(0);
+        window.AUTOHIDE = Boolean(0);
+
+        // Load Brevo script only after DOM is ready
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', loadBrevoScript);
+        } else {
+          loadBrevoScript();
+        }
+
+        function loadBrevoScript() {
+          // Check if the form exists before loading the script
+          if (document.getElementById('sib-form')) {
+            var script = document.createElement('script');
+            script.src = 'https://sibforms.com/forms/end-form/build/main.js';
+            script.defer = true;
+            document.body.appendChild(script);
+          }
+        }
       </script>
-      <script defer src="https://sibforms.com/forms/end-form/build/main.js"></script>
-      <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
     </body>
   </html>