Jekyll - SpamBlock Pixel and Forms Integration

Learn how to integrate SpamBlock Pixel and Forms solution with Jekyll static sites. Complete example with layout file configuration and form handling.

Overview

This example shows how to integrate both the SpamBlock Pixel and SpamBlock Forms solution with Jekyll, a popular 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 Layout

Add the SpamBlock Pixel script to your main layout file (typically _layouts/default.html):

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

Step 2: Create Contact Form

Create a contact form page or include:

---
layout: default
---

<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>

What This Example Shows

  • How to add SpamBlock Pixel to Jekyll sites via layout files
  • Form handling with vanilla JavaScript
  • Static site generation with Jekyll
  • Liquid template integration

When to Use It

Use this approach when:

  • You're building a Jekyll static site
  • You want to protect forms on a statically generated site
  • You prefer adding scripts via layout files
  • You're using Jekyll's Liquid 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 layout file - Add script to the layout file used by pages with forms
  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 Jekyll builds static HTML, pixel runs at runtime
  6. Multiple forms - Pixel automatically detects all forms, no additional configuration needed

Learn More