create a contact form with surge

Creating a contact form with Surge using FabForm involves setting up your HTML form, configuring your FabForm account, and deploying your site using Surge. Here’s a clear, 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>
</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: Deploy Your Site Using Surge

Install Surge: If you don’t already have Surge installed, you can install it globally using npm:
```
npm install --global surge
```
Deploy your site with Surge: In your project directory, run the following command to deploy your site:
```
surge ./ 
```
Follow the prompts: Surge will prompt you to enter your email and set up a domain name for your site. You can choose a custom domain or accept the default provided by Surge.

Step 5: Test Your Form

Navigate to your Surge URL: After deployment, go to the URL provided by Surge 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://yourdomain.surge.sh/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://yourdomain.surge.sh/thank-you">

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

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