Submit States

Control what users see while the form is being submitted. Show loading indicators, disable buttons, and provide feedback.

Directive Format

on-submit-show           → shows the element during submission
on-submit-hide           → hides the element during submission
on-submit-class="cls"    → adds classes during submission
on-submit-style="styles" → adds styles during submission
on-submit-text="text"    → replaces text during submission

---

Show/Hide Elements

Show a loading spinner during submission:

<div on-submit-show style="display:none">
    <span class="spinner"></span> Submitting...
</div>

Hide the form while submitting:

<form on-submit-hide>
    ...
</form>

---

Change Button Text

Replace button text during submission:

<button type="submit" on-submit-text="Sending...">
    Submit
</button>

---

Add Classes

Add classes during submission (e.g., to disable interaction):

<button type="submit" on-submit-class="opacity-50 cursor-not-allowed">
    Submit
</button>

<fieldset on-submit-class="pointer-events-none opacity-75">
    <input name="email" />
    <input name="name" />
</fieldset>

---

Add Styles

Apply inline styles during submission:

<button type="submit" on-submit-style="background: gray">
    Submit
</button>

---

Complete Example

<snip-form key="YOUR_KEY">
    <form>
        <fieldset on-submit-class="opacity-50 pointer-events-none">
            <div>
                <label>Email</label>
                <input name="email" sf-validate:required sf-validate:email />
            </div>

            <div>
                <label>Message</label>
                <textarea name="message" sf-validate:required></textarea>
            </div>
        </fieldset>

        <div class="flex items-center gap-4">
            <button type="submit"
                on-submit-text="Sending..."
                on-submit-class="bg-gray-400">
                Send Message
            </button>

            <span on-submit-show class="text-gray-500" style="display:none">
                Please wait...
            </span>
        </div>
    </form>

    <sf-success style="display:none">
        <h2>Message sent!</h2>
    </sf-success>
</snip-form>

---

Loading Overlay Pattern

Full-form loading overlay:

<snip-form key="YOUR_KEY">
    <div class="relative">
        <!-- Loading overlay -->
        <div on-submit-show
            class="absolute inset-0 bg-white/75 flex items-center justify-center z-10"
            style="display:none">
            <div class="animate-spin h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full"></div>
        </div>

        <form>
            <input name="email" sf-validate:required />
            <button type="submit">Subscribe</button>
        </form>
    </div>

    <sf-success style="display:none">
        <p>You're subscribed!</p>
    </sf-success>
</snip-form>