An open API service indexing awesome lists of open source software.

https://github.com/fabforms/cloudfare-forms

cloudflare pages forms tutorial
https://github.com/fabforms/cloudfare-forms

cloudflare fabform forms static-site

Last synced: 6 months ago
JSON representation

cloudflare pages forms tutorial

Awesome Lists containing this project

README

          

# **Deploy a Static Website with a Contact Form Using Cloudflare Pages & FabForm**

## **Step 1: Create Your Website**

1. **Make a project folder:**
```sh
mkdir my-website && cd my-website
```

2. **Create an `index.html` file:**
```html





Contact Us




Contact Us





Send



```

3. Replace `YOUR_FORM_ID` with your **FabForm.io** form ID.

---

## **Step 2: Set Up FabForm (Your Form Backend)**

1. **Go to [FabForm.io](https://fabform.io/)**
2. **Sign up & create a new form**
3. **Copy the form URL** (e.g., `https://fabform.io/f/abcd1234`)
4. **Paste it into your form's `action` in `index.html`**

---

## **Step 3: Deploy to Cloudflare Pages**

1. **Push your code to GitHub:**
```sh
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
```

2. **Deploy on Cloudflare Pages:**
- Go to **[Cloudflare Pages](https://pages.cloudflare.com/)**
- Click **Create a Project**
- Connect your GitHub repo
- Select `main` branch & click **Deploy**

---

## **Step 4: Test Your Form**

- Visit your live website
- Submit a test form
- Check submissions on **[FabForm.io](https://fabform.io/)**

---