Skip to Content
GuidesSpam Protection Guide

Spam Protection Guide

Learn how kollect protects your forms from spam and bots.

Table of Contents

  1. Overview
  2. Honeypot Fields
  3. Bot Detection
  4. Best Practices
  5. Advanced Techniques

Overview

kollect includes built-in spam protection to keep your submissions clean:

✅ Honeypot Fields - Trap bots with hidden fields ✅ Bot Submission Tracking - Separate spam from real submissions ✅ Origin Whitelisting - Restrict submission sources ✅ Rate Limiting - Prevent abuse

Honeypot Fields

Honeypot fields are hidden form inputs that real users won’t see, but bots will fill out.

How It Works

  1. Add a hidden field to your form
  2. Real users can’t see it (CSS hides it)
  3. Bots fill it out automatically
  4. kollect detects the filled field and marks it as spam

Basic Implementation

<form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST">
  <!-- Real fields -->
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
 
  <!-- Honeypot field (default name: _gotcha) -->
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
 
  <button type="submit">Submit</button>
</form>

CSS Hiding Techniques

Multiple ways to hide the honeypot field:

<style>
  .honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
</style>
 
<input
  type="text"
  name="_gotcha"
  class="honeypot"
  tabindex="-1"
  autocomplete="off"
  aria-hidden="true"
>

Important:

  • Use display:none or absolute positioning
  • Add tabindex="-1" to prevent keyboard access
  • Add autocomplete="off" to prevent autofill
  • Add aria-hidden="true" for screen readers

Custom Honeypot Field Name

Change the honeypot field name in your form settings:

  1. Go to your form in the dashboard
  2. Click “Settings”
  3. Change “Honeypot Field Name”
  4. Update your HTML to match
<!-- Custom honeypot name -->
<input type="text" name="website_url" style="display:none">

React Example

export default function ContactForm() {
  return (
    <form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST">
      <input type="email" name="email" required />
      <textarea name="message" required />
 
      {/* Honeypot */}
      <input
        type="text"
        name="_gotcha"
        style={{
          position: 'absolute',
          left: '-9999px',
          width: '1px',
          height: '1px',
          opacity: 0,
        }}
        tabIndex={-1}
        autoComplete="off"
        aria-hidden="true"
      />
 
      <button type="submit">Submit</button>
    </form>
  );
}

Bot Detection

kollect automatically tracks bot submissions separately.

What Gets Tracked

Bot submissions are logged when:

  • Honeypot field is filled
  • Submission patterns match bot behavior
  • Headers indicate automated requests

Viewing Bot Submissions

  1. Navigate to your form in the dashboard
  2. Click “Bot Submissions” tab
  3. Review flagged submissions

Bot Submission Data

Bot submissions include:

  • All form data
  • Timestamp
  • User agent
  • Origin URL
  • Reason flagged (honeypot, etc.)

Origin Whitelisting

Restrict form submissions to specific domains.

Enable Whitelisting

  1. Go to form settings
  2. Add allowed origins: 
    https://yoursite.com
https://www.yoursite.com
  3. Save settings

How It Works

kollect checks the Origin or Referer header against your whitelist.

Allowed:

Origin: https://yoursite.com

Blocked:

Origin: https://spamsite.com

Development vs Production

For local development:

http://localhost:3000
http://localhost:8000

For production:

https://yoursite.com
https://www.yoursite.com

Wildcard Support

Coming soon:

https://*.yoursite.com  # Allow all subdomains

Best Practices

1. Multiple Protection Layers

Combine multiple techniques:

<form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST">
  <!-- Real fields -->
  <input type="email" name="email" required>
 
  <!-- Honeypot -->
  <input type="text" name="_gotcha" class="hidden">
 
  <!-- Time-based protection -->
  <input type="hidden" name="_start_time" id="start_time">
 
  <button type="submit">Submit</button>
</form>
 
<script>
  // Track how long form is open (bots submit instantly)
  document.getElementById('start_time').value = Date.now();
</script>

2. Natural Field Names

Use realistic field names for honeypots:

<!-- Good: Looks like a real field -->
<input type="text" name="website_url" class="hidden">
<input type="text" name="company" class="hidden">
 
<!-- Avoid: Obviously a trap -->
<input type="text" name="honeypot" class="hidden">
<input type="text" name="bot_trap" class="hidden">

3. Label the Honeypot

Some bots look for labels. Add one:

<div class="hidden">
  <label for="website">Website</label>
  <input type="text" id="website" name="_gotcha">
</div>

4. JavaScript Validation

Add client-side checks:

document.querySelector('form').addEventListener('submit', function(e) {
  const honeypot = document.querySelector('[name="_gotcha"]');
 
  if (honeypot.value !== '') {
    e.preventDefault();
    console.log('Bot detected');
    return false;
  }
});

5. reCAPTCHA Integration

For additional protection (coming soon), integrate reCAPTCHA:

<form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST">
  <input type="email" name="email" required>
 
  <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
 
  <button type="submit">Submit</button>
</form>

Advanced Techniques

Time-Based Detection

Track form submission speed:

<input type="hidden" name="_form_opened" id="form_opened">
 
<script>
  document.getElementById('form_opened').value = Date.now();
 
  document.querySelector('form').addEventListener('submit', function(e) {
    const opened = parseInt(document.getElementById('form_opened').value);
    const now = Date.now();
    const timeSpent = now - opened;
 
    // Bots submit very quickly (< 3 seconds)
    if (timeSpent < 3000) {
      e.preventDefault();
      alert('Please take your time filling out the form.');
      return false;
    }
  });
</script>

Mouse Movement Tracking

Track mouse interaction:

let mouseActivity = false;
 
document.addEventListener('mousemove', () => {
  mouseActivity = true;
}, { once: true });
 
document.querySelector('form').addEventListener('submit', function(e) {
  if (!mouseActivity) {
    // Possible bot - no mouse movement detected
    console.log('No mouse activity detected');
  }
});

Multiple Honeypots

Use several honeypot fields:

<input type="text" name="_gotcha" class="hidden">
<input type="email" name="confirm_email" class="hidden">
<input type="tel" name="phone_number" class="hidden">

Configure all honeypot field names in settings (comma-separated).

JavaScript Challenge

Require JavaScript to submit:

<form id="contact-form">
  <input type="email" name="email" required>
 
  <!-- This field is filled by JavaScript -->
  <input type="hidden" name="_js_enabled" id="js_enabled">
 
  <button type="submit">Submit</button>
</form>
 
<script>
  // Prove JavaScript is enabled
  document.getElementById('js_enabled').value = 'true';
 
  document.getElementById('contact-form').addEventListener('submit', async function(e) {
    e.preventDefault();
 
    const jsEnabled = document.getElementById('js_enabled').value;
 
    if (jsEnabled !== 'true') {
      alert('Please enable JavaScript');
      return;
    }
 
    // Submit to kollect
    const formData = new FormData(this);
    await fetch('https://kollect.app/f/YOUR_FORM_KEY', {
      method: 'POST',
      body: formData
    });
  });
</script>

Monitoring Spam

Dashboard Stats

View spam statistics in your dashboard:

  • Total submissions
  • Valid submissions
  • Bot submissions
  • Spam rate

Email Alerts

Get notified of spam patterns (coming soon):

  • Sudden spike in submissions
  • High spam rate
  • Unusual patterns

Export Bot Data

Export bot submissions for analysis:

  1. Go to “Bot Submissions”
  2. Click “Export”
  3. Analyze patterns

Troubleshooting

Legitimate Users Marked as Spam

Possible causes:

  1. Honeypot field is visible
  2. Browser autofill filled honeypot
  3. Accessibility tools interacting with hidden fields

Solutions:

  • Verify CSS is hiding the field properly
  • Add autocomplete="off" to honeypot
  • Test with screen readers

High Spam Rate

Actions to take:

  1. Enable origin whitelisting
  2. Add multiple honeypot fields
  3. Implement time-based detection
  4. Consider reCAPTCHA

Origin Whitelisting Not Working

Check:

  • Origins include protocol (https://)
  • Origins match exactly (no trailing slashes)
  • CORS headers are present
  • Testing from whitelisted domain

Next Steps

Last updated on
Next.js Integration GuideUser Guide