feat: support recaptcha v3

assets/css/index.css

@@ -1671,6 +1671,10 @@ select {
   pointer-events: none;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
 .static {
   position: static;
 }

layouts/shortcodes/form.html

@@ -62,15 +62,13 @@
   
   <input type="text" name="honey_pot" style="display: none" class="hidden">
 
+  {{ with .Get "recaptcha_site_key" }}
+  <div class="g-recaptcha" data-sitekey="{{ . }}" data-callback="submitForm{{ $random }}" data-size="invisible"></div>
+  {{ end }}
+
   <div>
     <button
-      {{ if (.Get "recaptcha_site_key") }}
-      {{ with .Get "recaptcha_site_key" }}data-sitekey="{{ . }}"{{ end }}
-      data-callback="submitForm{{ $random }}"
-      data-action="submit"
-      {{ else }}
-      type="submit"
-      {{ end }}
+      id="formSubmit-{{ $random }}"
       class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800" >
       {{ .Get "submit_text" | default "Send" }}
     </button>
@@ -78,7 +76,22 @@
 </form>
 
 <script type="text/javascript">
-  function submitForm{{ $random }} (token) {
-    document.getElementById("form-{{ $random }}").submit();
+  const recaptchaSiteKey = '{{.Get "recaptcha_site_key" }}';
+  window["submitForm{{ $random }}"] = (token) => {
+    const form = document.getElementById("form-{{ $random }}");
+    console.log("form submitted");
+    form.submit();
   }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const form = document.getElementById("form-{{ $random }}");
+    const submit = document.getElementById("formSubmit-{{ $random }}");
+    submit.onclick = (e) => {
+      e.preventDefault();
+      if (form.reportValidity()) {
+        if (recaptchaSiteKey) grecaptcha.execute();
+        else window["submitForm{{ $random }}"]();
+      }
+    };
+  });
 </script>