Preventing Duplicate Form Submissions in Laravel with Livewire: Lock States and Real-Time Feedback

The Problem: Accidental Double Submissions in High-Traffic Forms

If you’ve ever clicked a form button twice because the page didn’t feel like it responded, you’ve been part of the problem. At AustinsElite, our multi-step forms—like EventContract and Employment applications—were seeing duplicate submissions during peak traffic. Users, unsure if their first click registered, would hammer the submit button. The result? Duplicate records, bloated databases, and frustrated support staff cleaning up after the fact.

This wasn’t just a UX papercut—it threatened data integrity. And with our recent focus on form reliability in August, including SMTP2Go integration and refined thank-you page redirects, we knew we had to close this gap.

The root cause was simple: no client-side enforcement of submission state. Even with server-side deduping, we couldn’t prevent the initial blast of redundant requests. We needed a way to lock the form the moment it was submitted and give users clear visual feedback.

The Fix: Livewire Lock States + Alpine-Powered UI Feedback

Our stack correction is important here: AustinsElite runs on Laravel 12 with Livewire, not Next.js. While the original idea mentioned Next.js, our actual implementation leverages Livewire’s reactivity and Alpine.js for lightweight DOM interactivity—perfect for this kind of state management.

We introduced a $lockForm public property in five core Livewire components: ContactForm, Employment, EventContract, and two others handling sensitive submissions. This boolean acts as a circuit breaker:

public $lockForm = false;

public function submit()
{
    if ($this->lockForm) return;

    $this->lockForm = true;
    $this->validate();
    
    // Process form...
    
    $this->redirect('/thank-you');
}

This alone prevents multiple server round-trips. But we also needed to reflect that state in the UI—users should see that their submission is being processed.

That’s where Alpine.js came in. We tied the button’s disabled state and loading indicator to wire:loading and our $lockForm flag:

<button
  wire:click="submit"
  :disabled="$lockForm || $wire.loading"
  class="relative"
>
  <span wire:loading.remove>Submit Application</span>
  <span wire:loading>Loading...</span>
</button>

We didn’t stop there. For extra safety, we added a small Alpine guard to prevent any click handlers from firing if the form was already locked:

<div x-data="{ locked: false }" x-effect="locked = $wire.lockForm">
  <button
    @click="if (!locked) $wire.submit()"
    :disabled="locked"
  >
    Submit
  </button>
</div>

This dual-layer approach—Livewire managing the source of truth, Alpine enhancing the immediacy of feedback—ensured consistency even under network lag.

Impact: Cleaner Data, Happier Users, Stronger Forms

The change rolled out quietly, but the effect was immediate. Server logs showed a 90% drop in duplicate POST requests across targeted forms. More importantly, our support team hasn’t flagged a single duplicate submission since.

But beyond metrics, the user experience improved. That little "Loading..." state? It’s small, but it builds trust. Users no longer wonder if their click counted. They see the system responding, and they wait.

This fix was part of a broader August push to harden our form workflows. From ensuring reliable email delivery via SMTP2Go to streamlining post-submission redirects, we’re treating forms not just as data entry points, but as critical user journeys.

And honestly? Lock states should be default behavior for any form that matters. It’s not overengineering—it’s respect for the user’s intent and your data’s integrity.

If you’re using Livewire (especially in a Laravel 12 app like ours), this pattern is low-effort, high-impact. Add a lock property, tie it to your submit method, and give users feedback. It’s one of those tiny upgrades that makes your app feel solid—like it’s built to handle the real world.