Hugo - SpamBlock Pixel and Forms Integration

Learn how to integrate SpamBlock Pixel and Forms solution with Hugo static sites. Complete example with base template configuration and form handling.

Overview

This example shows how to integrate both the SpamBlock Pixel and SpamBlock Forms solution with Hugo, a fast static site generator. The Pixel intercepts form submissions and scores them at the edge, while the Forms solution provides a hosted endpoint for receiving submissions.

Note: While the SpamBlock Pixel works with any backend endpoint, this example specifically demonstrates using both the Pixel and SpamBlock Forms together. The SpamBlock Forms endpoint (https://api.spamblock.io/f/{form_id}) provides a complete hosted form solution. Learn more about Forms or use your own backend endpoint with the Pixel.

Step 1: Add Pixel Script to Base Template

Add the SpamBlock Pixel script to your base template (typically layouts/_default/baseof.html):

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
  <head>
    <!-- ... other head content ... -->
    <script src="https://pixel.spamblock.io/latest.js" defer></script>
  </head>
  <body>
    {{ block "main" . }}{{ end }}
  </body>
</html>

Step 2: Create Contact Form

Create a contact form page or partial:

{{ define "main" }}
<form id="contact-form" action="#" method="POST">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required />

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

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

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

<script>
  window.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById("contact-form");
    
    form.addEventListener("spamblock:allowed", async function(event) {
      event.preventDefault();

      const formData = new FormData(event.target);

      try {
        const response = await fetch("https://api.spamblock.io/f/{form_id}", {
          method: "POST",
          body: formData
        });

        if (response.ok) {
          alert("Submission successful!");
          form.reset();
        } else {
          alert("There was an error submitting the form.");
        }
      } catch (error) {
        alert("Network error. Please try again.");
        console.error("Error:", error);
      }
    });
  });
</script>
{{ end }}

What This Example Shows

  • How to add SpamBlock Pixel to Hugo sites via base template
  • Form handling with vanilla JavaScript
  • Static site generation with Hugo
  • Go template integration

When to Use It

Use this approach when:

  • You're building a Hugo static site
  • You want to protect forms on a statically generated site
  • You prefer adding scripts via base templates
  • You're using Hugo's Go templating

How it Works

  1. User submits form
  2. SpamBlock Pixel intercepts submission
  3. Submission scored at the edge
  4. If spam: submission blocked, event not fired
  5. If allowed: spamblock:allowed event fired
  6. JavaScript handles the allowed submission

Common Mistakes

  1. Wrong template file - Add script to the base template used by all pages
  2. Script placement - Place script in <head> or before closing </body> tag
  3. Not waiting for DOM - Use DOMContentLoaded to ensure form exists before attaching listeners
  4. Missing event prevention - Always call event.preventDefault() in the event handler
  5. Build process - Remember Hugo builds static HTML, pixel runs at runtime
  6. Template syntax - Use Hugo's Go template syntax correctly

Learn More