Back to Blog & Updates
Tutorials

Building Resilient Contact Forms with Next.js 15 Server Actions

Sarah ChenJuly 14, 20265 min read

A step-by-step guide to handling form state, Zod validation, optimistic UI updates, and Formtruck endpoint forwarding with React 19 Server Actions.

Why traditional CAPTCHAs are flawed

When building forms, developer teams often slap on Google reCAPTCHA v2 with puzzle grids. Study after study reveals that distorted text and traffic light selectors reduce completion rates significantly on mobile screens.

The multi-tier silent protection model

Instead of tormenting your legitimate visitors, Formtruck applies a 3-stage defense mechanism:

  • Honeypot Trap: An invisible CSS-hidden input (_gotcha) that humans ignore, but automated headless crawlers fill out.
  • Behavioral Timestamp Analysis: Real humans take 3–30 seconds to type. Bots submit in 20 milliseconds.
  • Adaptive Rate Limiting: IP-based and subnet-based token buckets that prevent brute force submissions.

Example Honeypot Implementation

contact-form.html
123456789101112131415
<form action="https://formtruck.com/s/your-form-id" method="POST">
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<!-- Hidden Honeypot Field -->
<input
type="text"
name="_gotcha"
style="display:none !important"
tabindex="-1"
autocomplete="off"
/>
<button type="submit">Send Message</button>
</form>

By switching to this model, web teams preserve high conversion rates while keeping spam completely out of their CRM and team chat channels.