All about static website forms

What Are Static Website Forms?

Static websites are typically simple, consisting of HTML, CSS, and JavaScript. These sites don’t have a back-end server to handle form submissions (like contact forms, newsletter signups, or feedback forms). However, you may still want to collect data from users, such as email addresses or messages, through these forms.

To handle form submissions, a form backend service can be used. These services allow you to manage form submissions by collecting and processing data, without requiring you to set up a server.

One such service is Fabform.io, which helps handle form submissions for static websites in a seamless way. Let’s walk through creating a form on a static site and connecting it to Fabform.io as your form backend service.

Creating a Simple Form for a Static Website

Let’s create a basic form that collects a name and email address and sends it using a form backend service like Fabform.io.

Step 1: Setting Up the HTML Form

First, create a new HTML file and add the following form code:

<!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>
    <h1>Contact Us</h1>
    <form action="https://fabform.io/f/your-form-id" method="POST">
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name" required><br><br>

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

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

Here’s what’s happening:

The form tag defines the form that users will interact with.
The action attribute specifies the URL where the form data will be sent. In this case, it points to Fabform.io's submission endpoint (which will be a unique URL for your form).
The method="POST" attribute ensures that the form data is sent securely.
Two fields are created: one for the name and one for the email, both marked as required.

Step 2: Setting Up Fabform.io

Go to Fabform.io and create an account (if you haven’t already).
Once logged in, create a new form by clicking on "Create Form."
After creating your form, Fabform.io will generate a unique form submission URL for you. Replace "https://fabform.io/f/your-form-id" in the HTML with the actual URL provided.

Step 3: Customizing Your Form

You can extend the form by adding more input fields like:

Text areas for larger inputs (e.g., messages):

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

Checkboxes, radio buttons, and dropdowns:

  <label for="subscribe">Subscribe to newsletter?</label>
  <input type="checkbox" id="subscribe" name="subscribe">

Hidden fields for additional data (e.g., tracking user information):
```
  <input type="hidden" name="referrer" value="homepage">
```

Step 4: Handling Form Submissions

Once the form is live on your static website, submissions will be sent directly to Fabform.io's servers. Fabform.io allows you to:

Receive email notifications for each submission.
View submissions in your dashboard.
Integrate with third-party tools like Slack, Google Sheets, or Zapier to automate workflows.

You can access these features via the Fabform.io dashboard, making it easy to handle user submissions without any back-end coding.

Advanced Features

Here are some additional advanced features you can leverage with Fabform.io:

Spam protection: Fabform.io includes built-in spam filtering to prevent malicious or unwanted submissions.

File uploads: You can allow users to upload files by adding a file input field to your form:

  <label for="file">Upload file:</label><br>
  <input type="file" id="file" name="file"><br><br>

Custom responses: You can configure Fabform.io to send custom confirmation messages or redirect users to a “Thank you” page after submission.

Final Notes

Form backend services like Fabform.io are incredibly useful for static websites, making it easy to collect and manage form data without the hassle of server-side code. You can extend the capabilities of your static website by adding more complex forms and integrating with various tools, all while relying on a secure, reliable form backend service.

Ready to try? Head over to Fabform.io to get started!