This tutorial will guide you through creating a simple HTML form hosted on Cloudflare Pages and using FabForm.io to handle form submissions.
https://fabform.io/f/{your-form-id}
).Now, let's create a simple form that will submit data to FabForm.io.
cloudflare-form
).git clone https://github.com/your-username/cloudflare-form.git
cd cloudflare-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.
git add .
git commit -m "Initial commit"
git push origin main
cloudflare-form
)/
After a few seconds, your form will be live on a Cloudflare Pages URL like:
👉 https://your-project.pages.dev
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.
Whether you're building a contact form, survey, or any other interactive form, FabForm simplifies the process by providing a reliable form backend solution.