Building a Static Site Contact Form with Cloudflare Workers and reCAPTCHA v3

Introduction to Serverless Contact Forms

The article details the creation of a contact form for static websites, specifically those built with Eleventy (11ty) and hosted on Cloudflare Pages. This approach addresses the inherent limitation of static sites, which lack a traditional backend to handle form submissions and email sending.

The solution leverages Cloudflare Workers to provide a serverless endpoint, enabling the processing of form data and the dispatch of emails. This method allows static site owners to implement interactive features without needing a dedicated server infrastructure.

Spam Prevention and Email Delivery

To combat spam, the contact form integrates reCAPTCHA v3, with Cloudflare Turnstile offered as an alternative. These services help distinguish legitimate user submissions from automated bot activity, enhancing the security and reliability of the form.

Email delivery is handled by Resend, which takes the information collected from the form (full name, email address, and message) and sends it to a specified custom email address. This allows for easy filtering and management of messages originating from the website.

Alternative Solutions for Form Handling

The author notes previous methods used for contact forms on their blog, acknowledging that various solutions exist for different hosting environments. One alternative mentioned is Netlify Forms, a built-in service for sites hosted on Netlify.

Netlify Forms provides a way to collect and manage form submissions without requiring a custom backend, offering features like viewing submissions in the Netlify dashboard or forwarding them via email or webhook. This highlights that while Cloudflare Workers are a viable option, other platforms offer their own integrated solutions.