Webflow - SpamBlock Pixel and Forms Integration

Learn how to integrate SpamBlock Pixel and Forms solution with Webflow CMS forms. Complete example with custom code injection and form handling.

Overview

This example shows how to integrate both the SpamBlock Pixel and SpamBlock Forms solution with Webflow, a visual web design platform and CMS. 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 Site Settings

  1. In your Webflow project, go to Project Settings
  2. Navigate to Custom Code
  3. In the Head Code section, add:
<script src="https://pixel.spamblock.io/latest.js" defer></script>

This will add the SpamBlock Pixel to all pages in your site.

Step 2: Add Form Submission Handler

  1. Go to your page with the form
  2. Add an Embed element (or use Custom Code in page settings)
  3. Add this code in the Before tag section:
<script>
  window.addEventListener("DOMContentLoaded", function() {
    // Find all Webflow forms on the page
    const webflowForms = document.querySelectorAll("form[data-name]");
    
    webflowForms.forEach(function(form) {
      // Listen for allowed submissions from SpamBlock
      form.addEventListener("spamblock:allowed", async function(event) {
        event.preventDefault();

        const formData = new FormData(event.target);
        
        // Get form field values
        const formFields = {};
        formData.forEach((value, key) => {
          formFields[key] = value;
        });

        try {
          const response = await fetch("https://api.spamblock.io/f/{form_id}", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(formFields)
          });

          if (response.ok) {
            // Show success message (customize based on your Webflow setup)
            const successMessage = form.querySelector(".w-form-done");
            if (successMessage) {
              successMessage.style.display = "block";
            }
            
            // Hide form
            const formWrapper = form.closest(".w-form");
            if (formWrapper) {
              formWrapper.style.display = "none";
            }
            
            form.reset();
          } else {
            // Show error message
            const errorMessage = form.querySelector(".w-form-fail");
            if (errorMessage) {
              errorMessage.style.display = "block";
            }
          }
        } catch (error) {
          console.error("Error:", error);
          const errorMessage = form.querySelector(".w-form-fail");
          if (errorMessage) {
            errorMessage.style.display = "block";
          }
        }
      });
    });
  });
</script>

Alternative: Using Webflow's Native Form Handler

If you prefer to use Webflow's native form submission with custom backend:

<script>
  window.addEventListener("DOMContentLoaded", function() {
    const webflowForms = document.querySelectorAll("form[data-name]");
    
    webflowForms.forEach(function(form) {
      form.addEventListener("spamblock:allowed", function(event) {
        // Let Webflow handle the form submission normally
        // SpamBlock has already validated the submission
        // You can add custom logic here if needed
      });
    });
  });
</script>

What This Example Shows

  • How to add SpamBlock Pixel to Webflow sites via Custom Code
  • Form handling with Webflow's form structure
  • Integration with Webflow's form success/error messages
  • Custom code injection in Webflow

When to Use It

Use this approach when:

  • You're building a website with Webflow
  • You want to protect Webflow forms from spam
  • You're using Webflow's visual form builder
  • You need to integrate with Webflow's form submission system

How it Works

  1. User submits form in Webflow
  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. Custom handler processes the allowed submission

Common Mistakes

  1. Wrong code location - Add pixel script in Site Settings > Custom Code > Head Code
  2. Form selector - Use form[data-name] to target Webflow forms specifically
  3. Not preventing default - Always call event.preventDefault() to prevent default Webflow submission
  4. Missing form messages - Ensure your Webflow form has success/error message elements
  5. Publishing required - Custom code changes require publishing the site to take effect
  6. Multiple forms - The code handles all forms on the page automatically
  7. Form field names - Ensure your backend expects the same field names as your Webflow form

Webflow-Specific Considerations

  • Custom Code: Available in paid Webflow plans
  • Form Settings: Configure form settings in Webflow Designer
  • Publishing: Always publish your site after adding custom code
  • Testing: Test forms in both Designer preview and published site
  • Form Actions: You can still use Webflow's form actions alongside SpamBlock

Learn More