Creating a static website form using Fabform.io is an efficient way to collect user input without needing a backend server. Fabform.io handles the form submission and provides you with the collected data. Below is a step-by-step guide on how to create and integrate a form into your static website.

Step 1: Create a Basic HTML File

Start by creating an HTML file for your static website. You can name it index.html or any other name you prefer. Below is a basic HTML template to get you started:

<!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>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .form-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            width: 100%;
        }
        .form-container h2 {
            margin-bottom: 20px;
            font-size: 24px;
        }
        .form-container input,
        .form-container textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .form-container button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        .form-container button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>Contact Us</h2>
        <form id="contactForm" method="POST" action="">
            <input type="text" name="name" placeholder="Your Name" required>
            <input type="email" name="email" placeholder="Your Email" required>
            <textarea name="message" placeholder="Your Message" rows="4" required></textarea>
            <button type="submit">Send Message</button>
        </form>
    </div>
</body>
</html>

Step 2: Sign Up on Fabform.io

  1. Go to Fabform.io and sign up for an account if you don’t have one.
  2. After signing in, you will be directed to your dashboard.

Step 3: Create a New Form on Fabform.io

  1. Create a New Form: Click on the "New Form" button in your Fabform.io dashboard.
  2. Configure the Form:
  3. Save the Form: After configuring the form, click on the "Save" or "Create" button. Fabform.io will generate a unique form submission URL for you.

Step 4: Integrate Fabform.io with Your HTML Form

  1. Copy the Form Action URL: In the Fabform.io dashboard, you’ll see the form submission URL (e.g., https://fabform.io/f/your-form-id).
  2. Paste the URL into Your HTML Form: Replace the action attribute in your form’s HTML code with this URL.
<form id="contactForm" method="POST" action="https://fabform.io/f/your-form-id">

Now your form is set up to submit data to Fabform.io.

Step 5: Customize Your Form (Optional)

You can further customize your form’s appearance by modifying the CSS within the <style> tags. Adjust colors, fonts, or layout as desired.

Step 6: Test Your Form

Before deploying your website, it’s important to test the form to ensure it works correctly:

  1. Open Your HTML File: Open your HTML file in a web browser.
  2. Submit the Form: Fill out the form and submit it. You should see a success message on Fabform.io if the submission is successful.
  3. Check the Submissions: Go back to your Fabform.io dashboard and verify that the submission data is recorded.

Step 7: Handle Form Responses (Optional)

By default, Fabform.io stores your form submissions in the dashboard, but you can also set up additional features like email notifications or redirects.

  1. Email Notifications: In the form settings on Fabform.io, you can configure email notifications to receive an email whenever someone submits the form.
  2. Redirect After Submission: You can set a redirect URL where users will be sent after submitting the form (e.g., a "Thank You" page).

Step 8: Deploy Your Website

Now that your form is fully functional, you can deploy your static website. Here are some common options for deployment:

  1. GitHub Pages: Host your website directly from your GitHub repository.
  2. Netlify: Deploy your static website for free with Netlify. It also supports custom domains.
  3. Vercel: Another popular platform for hosting static websites, with easy setup and deployment options.

Example Deployment (Netlify):

  1. Sign up for Netlify: If you don’t have an account, sign up at Netlify.
  2. Create a New Site: Drag and drop your project folder (containing the index.html file) onto the Netlify dashboard.
  3. Deploy: Netlify will automatically build and deploy your static site.

Step 9: Verify Your Deployment

Once your website is deployed, visit the live site and test the form again to ensure everything works as expected. You can also check the submissions in your Fabform.io dashboard.

Conclusion

You have successfully created a static website form using Fabform.io. This approach simplifies form handling for static sites by offloading the backend work to Fabform.io, allowing you to focus on building and styling your front-end form.

With the flexibility of HTML and CSS, you can further enhance your form to suit your design needs, while Fabform.io takes care of form submissions and data storage.

check the fabform form backend service