Submitting Forms on Static Websites with Fabform

The Problem: Backend Dependency

As developers, we often build simple static sites or single-page applications (SPAs) that need a contact form. The core difficulty with standard HTML forms is that they are not self-sufficient. To handle submissions, validate data, and send an email, they require a dedicated server-side endpoint (PHP, Node.js, Python, etc.) running continuously.

This setup introduces unnecessary overhead for simple tasks:

• Infrastructure Costs: You have to maintain and scale a backend server, even for a simple contact page.

• Complexity: Dealing with server-side logic, API keys, and email configuration (SMTP) adds complexity to a static project.

• Maintenance: Server dependencies require security updates and monitoring.

Introducing Fabform: The Headless Form Backend

Fabform is a headless form backend designed to handle form submissions for static websites, JAMstack sites, and SPAs without requiring you to write or maintain server code.

It provides a unique, secure URL (the endpoint) for your HTML form's action attribute. When a user submits the form, the data is sent directly to Fabform's service, which then handles storage, notifications, and integrations.

Key Benefits

Quick Start: Deploying Your First Form

Fabform is designed to be set up in three simple steps.

Step 1: Create an Endpoint

1. Navigate to Fabform.io and Sign Up or log in to your dashboard.

2. On the dashboard, click 'Create Endpoint.'

3. Give your endpoint a unique, recognisable name (e.g., MyBlogContactForm). Click Save.

4. The system will generate a unique URL, which looks like https://fabform.io/f/{your-unique-id}. Copy this URL.

Step 2: Update Your HTML Form

Take your existing static HTML form and update its action property to use the unique Fabform endpoint you just copied.

Ensure every input field you want to capture has a unique name attribute.

<!-- ORIGINAL Form (or new form) -->
<form action="[https://fabform.io/f/](https://fabform.io/f/){your-unique-id}" method="POST">
  <!-- Use descriptive 'name' attributes for each field -->
  <label for="name">Your Name</label>
  <input name="name" type="text" required>

  <label for="email">Your Email</label>
  <input name="email" type="email" required>

  <label for="message">Message</label>
  <textarea name="message"></textarea>

  <button type="submit">Send Message</button>  
</form>

Step 3: Test and Verify

1. Upload your static HTML page to your hosting environment (GitHub Pages, Netlify, Vercel, etc.).

2. Fill out and submit the form.

3. Go back to your Fabform dashboard (Universal Inbox) or check your linked email address. You should immediately see the submission recorded.

Fabform vs. Zapier/Middleware

You might wonder how Fabform compares to broader automation tools like Zapier. The distinction is about focus and complexity:

• Fabform: Dedicated, specialised solution. It handles the single, complex task of receiving and securing raw form data, and then it pushes that data to one or more direct endpoints (like Google Sheets or Gmail) instantly and securely. It is zero-config for forms.

• Zapier (or IFTTT): General-purpose integration layer. While Zapier can technically process form data, it usually requires an intermediate step (like saving data to a third-party spreadsheet first) and adds latency, cost, and a complex trigger setup just to complete the simple task of sending an email.

If your core need is collecting, securing, and distributing form data, Fabform is the simpler, cheaper, and faster choice.

Advanced Features You Can Configure

Once your form is working, you can enhance it via the Fabform dashboard:

• Email Templates: Customize the email notification format and set up automated replies to the user.

• Integrations: Set up direct, native integrations to send every submission to platforms like:

  • Google Sheets

  • Airtable

  • Slack

• Analytics: View daily submission reports and export your data to CSV or JSON formats for analysis.