diff --git a/examples/simple-form/package.json b/examples/simple-form/package.json
index d7c5d92..5e068eb 100644
--- a/examples/simple-form/package.json
+++ b/examples/simple-form/package.json
@@ -21,6 +21,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "reactstrap": "^9.2.1",
+    "sleep-promise": "^9.1.0",
     "zod": "^3.22.4"
   }
 }
diff --git a/examples/simple-form/src/pages/counter.astro b/examples/simple-form/src/pages/counter.astro
index 87b3e9a..6fb1812 100644
--- a/examples/simple-form/src/pages/counter.astro
+++ b/examples/simple-form/src/pages/counter.astro
@@ -2,13 +2,17 @@
 import { BButton, Bind, BindForm } from "@astro-utils/forms/forms.js";
 import { Button } from 'reactstrap';
 import Layout from "../layouts/Layout.astro";
+import sleep from "sleep-promise";
 
 const { session } = Astro.locals;
 
-function increaseCounter() {
+async function increaseCounter() {
     session.counter ??= 0
-    session.counter++
+    session.counter++;
+    console.log(session.counter)
+    await sleep(1000 * 5);
 }
+
 ---
 <Layout title="counter">
     <BindForm key="page">
diff --git a/package-lock.json b/package-lock.json
index f5a7a0e..7d7ce01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
                 "react": "^18.3.1",
                 "react-dom": "^18.3.1",
                 "reactstrap": "^9.2.1",
+                "sleep-promise": "^9.1.0",
                 "zod": "^3.22.4"
             }
         },
@@ -12494,8 +12495,7 @@
         "node_modules/sleep-promise": {
             "version": "9.1.0",
             "resolved": "https://registry.npmjs.org/sleep-promise/-/sleep-promise-9.1.0.tgz",
-            "integrity": "sha512-UHYzVpz9Xn8b+jikYSD6bqvf754xL2uBUzDFwiU6NcdZeifPr6UfgU43xpkPu67VMS88+TI2PSI7Eohgqf2fKA==",
-            "dev": true
+            "integrity": "sha512-UHYzVpz9Xn8b+jikYSD6bqvf754xL2uBUzDFwiU6NcdZeifPr6UfgU43xpkPu67VMS88+TI2PSI7Eohgqf2fKA=="
         },
         "node_modules/snappy": {
             "version": "7.2.2",
diff --git a/packages/forms/src/components/WebForms.astro b/packages/forms/src/components/WebForms.astro
index 39341bc..68d247a 100644
--- a/packages/forms/src/components/WebForms.astro
+++ b/packages/forms/src/components/WebForms.astro
@@ -3,7 +3,9 @@ import { asyncContext } from '@astro-utils/context';
 import { createFormToken } from '../form-tools/csrf.js';
 import { getFormOptions } from '../settings.js';
 
-export interface Props extends astroHTML.JSX.FormHTMLAttributes {}
+export interface Props extends astroHTML.JSX.FormHTMLAttributes {
+    loadingClassName?: string;
+}
 
 const context = {
     ...Astro.props,
@@ -14,7 +16,7 @@ const context = {
 
 const htmlSolt = await asyncContext(() => Astro.slots.render('default'), Astro, { name: '@astro-utils/forms', context, lock: 'webForms' });
 
-const { webFormsSettings, tempValues, statesKey, ...props } = context;
+const { webFormsSettings, tempValues, statesKey, loadingClassName = 'loading', ...props } = context;
 if (webFormsSettings.haveFileUpload) {
     props.enctype = 'multipart/form-data';
 }
@@ -22,6 +24,8 @@ if (webFormsSettings.haveFileUpload) {
 const useSession = getFormOptions(Astro).session?.cookieOptions?.maxAge;
 const formRequestToken = useSession && (await createFormToken(Astro));
 const clientScript = Astro.locals.forms.scriptToRun;
+
+const clientWFS = { loadingClassName };
 ---
 
 <form method='post' {...props}>
@@ -29,11 +33,20 @@ const clientScript = Astro.locals.forms.scriptToRun;
     <Fragment set:html={htmlSolt} />
     {clientScript && <script set:html={clientScript} />}
 </form>
+
+<script define:vars={{ clientWFS }} is:inline>
+    window.clientWFS = clientWFS;
+</script>
+
 <script>
     declare global {
         interface Window {
             __enterToSubmit: (event: KeyboardEvent, id: string) => void;
             submitForm(value: HTMLElement | string): void;
+
+            clientWFS: {
+                loadingClassName: string;
+            };
         }
     }
 
@@ -41,7 +54,7 @@ const clientScript = Astro.locals.forms.scriptToRun;
         const target = event.target as HTMLElement;
         const isMultiLine = target instanceof HTMLTextAreaElement;
 
-        if ((isMultiLine && event.ctrlKey || !isMultiLine) && event.code === 'Enter') {
+        if (((isMultiLine && event.ctrlKey) || !isMultiLine) && event.code === 'Enter') {
             event.preventDefault();
             document.getElementById(target.getAttribute('data-submit')!)?.click();
         }
@@ -51,9 +64,25 @@ const clientScript = Astro.locals.forms.scriptToRun;
         if (typeof value !== 'string') {
             value = value.getAttribute('data-submit');
         }
-        if(value == null){
+        if (value == null) {
             return console.warn('submitForm: value is null, make sure you pass `this` to this method or an id of the button you want to submit.');
         }
         document.getElementById(value)?.click();
     };
+
+    const form = document.querySelector('form');
+    form?.querySelectorAll('button[type="submit"]').forEach(button => {
+        button.addEventListener('click', () => {
+            button.classList.add(window.clientWFS.loadingClassName);
+            document.dispatchEvent(new CustomEvent('WFSubmitting', { detail: { button } }));
+        });
+    });
+
+    form?.addEventListener('submit', () => {
+        setTimeout(() => {
+            form.querySelectorAll('button[type="submit"]').forEach(button => {
+                (button as HTMLButtonElement).disabled = true;
+            });
+        }, 0);
+    });
 </script>