create contact form for Firebase Hosting

Creating a contact form for Firebase Hosting using FabForm involves setting up your HTML form, configuring FabForm to handle the form submissions, and deploying your site using Firebase Hosting. Here’s a comprehensive 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>
</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>

        <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: Set Up Firebase Hosting

Install the Firebase CLI: If you don’t already have it installed, install the Firebase CLI globally using npm:
```
npm install -g firebase-tools
```
Login to Firebase: Run the following command and follow the prompts to log in to your Firebase account:
```
firebase login
```
Initialize Firebase in your project: In your project directory, run the following command to initialize Firebase Hosting:
```
firebase init
```
- Choose Hosting: Select Hosting from the list of Firebase features.
- Select an existing Firebase project or create a new one.
- Specify the public directory: This is where your static files are located. For this example, you can use public.
- Configure as a single-page app: Choose No (unless you are building a single-page application).
- Overwrite index.html: Choose No (you have already created index.html).
Move your index.html file to the public directory:
```
mkdir public
mv index.html public/
```

Step 5: Deploy to Firebase Hosting

Deploy your site:
```
firebase deploy
```

Step 6: Test Your Form

Navigate to your Firebase Hosting URL: After deployment, go to the URL provided by Firebase Hosting 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-firebase-app.web.app/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-firebase-app.web.app/thank-you">

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

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