Cloudflare Pages Contact Form Tutorial: Add a Backendless Form Without Workers

Cloudflare Pages is one of the fastest and most reliable platforms for hosting static sites. It offers global edge deployment, instant cache invalidation, and a smooth Git‑based workflow. However, Cloudflare Pages does not include built‑in form handling, and Cloudflare Workers can be overkill for something as simple as a contact form.

A backendless form service like Fabform gives you a clean, reliable way to collect submissions without writing Workers, managing KV storage, or maintaining serverless code. With a single endpoint, you can add a fully functional contact form to any Cloudflare Pages site.

If you are exploring other static‑site form setups, these guides may also help:

Why Cloudflare Pages needs a backendless form solution

Cloudflare Pages is a pure static host. It does not provide:

  • server‑side processing
  • built‑in form handling
  • email sending
  • submission storage

You can build a form backend using Cloudflare Workers, but that requires:

  • writing JavaScript
  • handling validation
  • managing spam filtering
  • storing submissions
  • sending notifications
  • maintaining code over time

Fabform removes all of this complexity by providing:

  • a secure form endpoint
  • spam protection
  • email, Slack, and webhook notifications
  • a searchable dashboard
  • CSV export
  • GDPR‑friendly storage

Your Cloudflare Pages site stays static.
Your form becomes fully functional.

Step 1 — Create your Fabform endpoint

  1. Visit https://fabform.io
  2. Create a free account
  3. Select “Create New Form”
  4. Copy your unique form endpoint:
https://fabform.io/f/your-form-id

If you want to compare Fabform with other services, see:
Fabform vs Formspree

Step 2 — Add your form to your Cloudflare Pages site

Open your contact page and insert the following HTML:

<form action="https://fabform.io/f/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="Your Email" required />
  <textarea name="message" placeholder="Your Message" required></textarea>
  <button type="submit">Send Message</button>
</form>

This works with:

  • plain HTML
  • Astro
  • Hugo
  • Jekyll
  • Eleventy
  • SvelteKit (static export)
  • Next.js (static export)

If you are using Astro specifically, see:
Astro Contact Form Without Serverless Functions

Step 3 — Deploy to Cloudflare Pages

Push your site to GitHub.
In Cloudflare Pages:

  1. Create a new project
  2. Connect your repository
  3. Select your build command and output directory
  4. Deploy

Your form is now live.

Step 4 — Test your form

Visit your deployed site and submit a test message.
You will see the submission appear instantly in your Fabform dashboard.

Step 5 — Enable notifications

Fabform supports:

  • Email notifications
  • Slack notifications
  • Discord notifications
  • Webhooks for automation tools

If you want to explore alternatives to platform‑specific form systems, see:
Netlify Forms Alternative for Static Sites

Step 6 — Add spam protection

Fabform includes built‑in spam filtering, but you can add an optional honeypot field:

<input type="text" name="website" style="display:none" tabindex="-1" autocomplete="off" />

Bots fill this field.
Humans do not.
Fabform ignores submissions that include it.

Step 7 — Style your form

Cloudflare Pages supports any CSS approach.
Here is a simple example:

form {
  max-width: 500px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

input, textarea {
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}

button {
  padding: 0.75rem;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

Troubleshooting

Form not submitting

Verify your action attribute:

https://fabform.io/f/your-form-id

Not receiving notifications

Check your Fabform notification settings.

Using Cloudflare Workers

Workers are optional. Fabform replaces the need for them entirely.

Final Thoughts

Cloudflare Pages is one of the best platforms for deploying static sites at global scale. By pairing it with a backendless form service, you avoid the overhead of Workers while gaining a dependable way to collect submissions. If you want a consistent form workflow across Cloudflare Pages, Netlify, GitHub Pages, and other static hosts, Fabform provides a unified approach that works everywhere.