-
Make a project folder:
mkdir my-website && cd my-website
-
Create an
index.htmlfile:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contact Us</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="flex items-center justify-center min-h-screen bg-gray-100"> <form action="https://fabform.io/f/YOUR_FORM_ID" method="POST" class="bg-white p-6 rounded-lg shadow-lg w-96"> <h1 class="text-2xl font-bold mb-4">Contact Us</h1> <input type="text" name="name" placeholder="Your Name" required class="w-full px-3 py-2 border rounded"> <input type="email" name="email" placeholder="Your Email" required class="w-full px-3 py-2 border rounded"> <textarea name="message" placeholder="Your Message" required class="w-full px-3 py-2 border rounded"></textarea> <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">Send</button> </form> </body> </html>
-
Replace
YOUR_FORM_IDwith your FabForm.io form ID.
- Go to FabForm.io
- Sign up & create a new form
- Copy the form URL (e.g.,
https://fabform.io/f/abcd1234) - Paste it into your form's
actioninindex.html
-
Push your code to GitHub:
git init git add . git commit -m "Initial commit" git branch -M main git remote add origin https://github.com/YOUR_USERNAME/my-website.git git push -u origin main
-
Deploy on Cloudflare Pages:
- Go to Cloudflare Pages
- Click Create a Project
- Connect your GitHub repo
- Select
mainbranch & click Deploy
- Visit your live website
- Submit a test form
- Check submissions on FabForm.io