How to Create a Form on Cloudflare Pages Using FabForm.io

Overview

This tutorial will guide you through creating a simple HTML form hosted on Cloudflare Pages and using FabForm.io to handle form submissions.

Prerequisites

Step 1: Create a FabForm.io Form Endpoint

  1. Go to FabForm.io and sign in.
  2. Click "Create Form" and give it a name (e.g., "Contact Form").
  3. Copy the form endpoint URL (e.g., https://fabform.io/f/{your-form-id}).

Step 2: Create an HTML Form

Now, let's create a simple form that will submit data to FabForm.io.

1. Create a GitHub Repository

2. Add the HTML Form

Inside the repository, create an index.html file and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        input, textarea, button {
            display: block;
            width: 100%;
            margin-top: 10px;
            padding: 8px;
        }
    </style>
</head>
<body>

    <h2>Contact Us</h2>
    <form action="https://fabform.io/f/{your-form-id}" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea>

        <button type="submit">Send</button>
    </form>

</body>
</html>

✅ Replace {your-form-id} with the actual FabForm.io form ID you copied earlier.

Step 3: Deploy to Cloudflare Pages

1. Push the Code to GitHub

git add .
git commit -m "Initial commit"
git push origin main

2. Deploy with Cloudflare Pages

  1. Go to Cloudflare Pages: https://dash.cloudflare.com
  2. Click "Create a Project" → "Connect to Git"
  3. Select your GitHub repository (cloudflare-form)
  4. Set the following build settings:
    • Framework Preset: None
    • Build Command: (Leave empty)
    • Output Directory: /
  5. Click "Deploy"

After a few seconds, your form will be live on a Cloudflare Pages URL like:
👉 https://your-project.pages.dev

Step 4: Test the Form

Bonus: Add Form Validation & Success Message

If you want to add a success message, modify the form like this:

<form action="https://fabform.io/f/{your-form-id}" method="POST">
    <input type="hidden" name="_redirect" value="thank-you.html">
    <!-- Form fields -->
</form>

Then, create a thank-you.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thank You</title>
</head>
<body>
    <h2>Thank you for your message!</h2>
    <p>We will get back to you soon.</p>
</body>
</html>

FabForm: A Simple and Powerful Form Backend

FabForm is a modern and efficient form backend designed to handle form submissions without the need for server-side code. It enables developers to easily collect and manage form data, making it ideal for static sites, JAMstack applications, and dynamic web projects.

Why Use FabForm?

  • No Backend Setup – Just point your form to FabForm and start collecting submissions instantly.
  • Spam Protection – Built-in spam filtering ensures clean and legitimate form entries.
  • Email Notifications – Get notified whenever a new submission is received.
  • API & Webhooks – Easily integrate with other services for automated workflows.

Whether you're building a contact form, survey, or any other interactive form, FabForm simplifies the process by providing a reliable form backend solution.