▶ CLOUDFLARE PAGES TEST

Contact Form Test

Testing Cloudflare Pages + a Pages Function (Worker) to handle form submissions.
Unlike Netlify, Cloudflare has no built-in form handling — you write a small backend function.

Request flow

Browser form submit → POST /api/contact → functions/api/contact.js
(Cloudflare Worker) → Brevo API / email service

The file functions/api/contact.js is automatically deployed as a Cloudflare Worker when you push to Pages. It runs at the edge in 300+ cities. No server, no Docker, no Nginx.

In this test, it saves to KV storage (Cloudflare's key-value store) instead of sending a real email, so you can verify the plumbing without an email API key. To call Brevo for real, you'd replace the KV write with a fetch() to Brevo's API.

⚠ Developer effort required. Unlike Netlify, this form will NOT work just from drag-and-drop. You need to: (1) have a Cloudflare account, (2) connect a GitHub repo, (3) bind a KV namespace or add your email API key as an environment variable. See the setup checklist below. This is the DX tradeoff vs Netlify — more control, more steps.

Contact Form

✓ Worker received the submission
The Cloudflare Worker at /api/contact processed this form. Check the KV namespace in your Cloudflare dashboard to see the stored data, or add your Brevo API key to the Worker to send a real email.

Setup checklist to make this work

  1. Create a free account at dash.cloudflare.com
  2. Push this folder to a GitHub repository
  3. In Cloudflare: Workers & Pages → Create → Connect to Git → select your repo
  4. Create a KV namespace: Workers & Pages → KV → Create namespace → name it FORM_SUBMISSIONS
  5. Bind KV to your Pages project: Settings → Functions → KV namespace bindings → add FORM_KV
  6. Add environment variable: NOTIFICATION_EMAIL = your email address
  7. Redeploy → the form will now store submissions in KV
  8. To send real email: replace the KV write in functions/api/contact.js with a fetch() to Brevo API