create a contact form with Cloudflare Pages

Creating a contact form with Cloudflare Pages and FabForm involves setting up your HTML form, configuring FabForm to handle form submissions, and deploying your site using Cloudflare Pages. Here’s a detailed, step-by-step guide to help you through the process:

Step 1: Create an HTML Form

Create a new directory for your project:
```
mkdir contact-form
cd contact-form
```
Create an HTML file for your contact form:
```
touch index.html
```

Edit index.html to include your contact form:

<!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>
        /* Add your custom styles here */
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }
        form {
            max-width: 500px;
            margin: auto;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input, textarea, button {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br>

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

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

        <input type="hidden" name="redirect" value="https://your-cloudflare-pages-site/thank-you">

        <button type="submit">Submit</button>
    </form>
</body>
</html>

Step 2: Configure FabForm

Sign up for FabForm: Go to FabForm and create an account if you don’t have one.
Create a new form: After logging in, create a new form in your FabForm dashboard. This will generate a unique form ID.
Copy the form ID: Copy the unique form ID provided by FabForm.

Step 3: Integrate FabForm with Your HTML

Replace YOUR_FORM_ID in the action attribute of the form tag with the form ID you copied from FabForm. For example, if your form ID is abc123, your form tag should look like this:
```
<form action="https://fabform.io/f/abc123" method="POST">
```

Step 4: Prepare Your Project for Deployment

Initialize a Git repository in your project directory if you haven’t already:
```
git init
```

Add your files to Git:

git add .
git commit -m "Initial commit"

Create a repository on GitHub (or any other Git provider you prefer) and push your project to this repository:
```
git remote add origin YOUR_GIT_REPOSITORY_URL
git push -u origin master
```

Step 5: Set Up Cloudflare Pages

Create a Cloudflare account: If you don’t already have one, go to Cloudflare and sign up for an account.
Navigate to Cloudflare Pages: Once logged in, go to the Cloudflare Pages dashboard.
Create a new project: Click on the “Create a project” button.
Connect to Git provider: Select the Git provider where you pushed your project (e.g., GitHub).
Select the repository: Choose the repository you created earlier.
Configure build settings:
- Build command: Leave this blank for a simple static site.
- Output directory: Set this to the directory containing your static files, which is the root directory if your index.html is at the root.
Begin deployment: Click on “Save and Deploy” to start the deployment process.

Step 6: Test Your Form

Navigate to your Cloudflare Pages URL: After deployment, go to the URL provided by Cloudflare Pages to find your contact form.
Test the form to ensure submissions are being sent to FabForm correctly.

Optional: Customizing Form and Handling Submissions

Styling the form: Use CSS to style your form according to your website’s design.
Thank you page: You can redirect users to a thank you page after submission by adding a redirect input field in your form:
```
<input type="hidden" name="redirect" value="https://your-cloudflare-pages-site/thank-you">
```
Handling submissions: Check your FabForm dashboard to see the submissions. You can set up email notifications or webhook integrations as needed.

Example of the Final Form

Here’s how your final HTML form might look:

<!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>
        /* Add your custom styles here */
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }
        form {
            max-width: 500px;
            margin: auto;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input, textarea, button {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <form action="https://fabform.io/f/abc123" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br>

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

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

        <input type="hidden" name="redirect" value="https://your-cloudflare-pages-site/thank-you">

        <button type="submit">Submit</button>
    </form>
</body>
</html>

By following these steps, you should be able to create a contact form with Cloudflare Pages and FabForm successfully. This guide ensures your form is set up correctly, deployed, and tested to work with FabForm for handling submissions.