Culture, Ethics, Logistics, & Technology (The "SEC" Way)

⌘K
  2. Home
  4. Culture, Ethics, Logistic...
  6. Client & Project Man...
  8. Form Spam Submissions

Form Spam Submissions

Spam submissions can skew marketing data and clutter sales workflows. While third-party plugins exist, the Elementor Form Widget includes native tools to significantly reduce bot interference without compromising user experience. This guide focuses on implementing and “supercharging” the Honeypot method.

What is a Honeypot?

A Honeypot is a hidden form field that is invisible to human users but visible to spam bots. Because bots are programmed to fill out every field they find in the code to ensure a “successful” submission, their interaction with this hidden field acts as a “silent alarm,” allowing Elementor to automatically reject the entry.

Step 1: Basic Honeypot Implementation

  1. Open the page containing your form in the Elementor Editor.
  2. Select the Form Widget.
  3. Navigate to Content > Form Fields and click Add Item.
  4. Set the Type to Honeypot.
  5. Placement: Move the Honeypot field so it sits between legitimate fields (e.g., after the “Name” field) rather than at the very end. Bots are more likely to fill it out during their top-to-bottom crawl.

Step 2: Psychological Labeling (Tricking the Bot)

Default labels like “Honeypot” can sometimes be detected by sophisticated bots. To increase effectiveness, use labels and IDs that mimic high-value data.

Best Practice Labels:

  • Last Name (If your real field is “Full Name”)
  • Secondary Phone
  • Service Location
  • Company Website
  • City
  • Detailed Message

How to configure:

  • In the Honeypot field settings, set the Label to one of the options above.
  • Go to the Advanced tab and update the ID to match (e.g., secondary_phone).

Step 3: Advanced “Stealth” Configuration

By default, Elementor uses display: none to hide honeypots. Advanced bots can detect this CSS rule and skip the field. To bypass this, we can use “Off-Screen Positioning.”

  1. In the Honeypot field settings, go to the Advanced tab.
  2. In the CSS Classes field, enter: stealth-foo.
  3. Add the following snippet to your site’s Global CSS (Appearance > Customize > Additional CSS):

CSS

/* Enhanced Honeypot Stealth */
.stealth-foo {
    display: block !important; /* Makes the field 'visible' to bot code */
    opacity: 0 !important;      /* Invisible to the human eye */
    position: absolute !important;
    left: -9999px !important;   /* Pushes the field off the visible screen */
    height: 0;
    width: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;      /* Prevents human accidental clicks */
}

/* For reCAPTCHA v3 badge */
.elementor-g-recaptcha {
    display: none;
}

Best Practices & Tips

  • Use Multiple Traps: On high-traffic forms, use two honeypots with different labels (e.g., one for “Last Name” and one for “Confirm Email”).
  • Consistency: Avoid naming honeypots anything that sounds like a security measure (e.g., “bot-trap”). Keep them sounding like “boring” administrative fields.
  • Review Submissions: Periodically check Elementor > Submissions. Elementor automatically filters honeypot-triggered spam, but checking ensures your labels aren’t accidentally confusing human users (though the CSS above prevents this).
  • Check Accessibility: Using the position: absolute; left: -9999px; method is generally better for screen readers than display: none, as it ensures the form remains technically valid without interrupting the user flow.

The Honeypot method is the “Goldilocks” of spam prevention: it provides strong protection without the friction of puzzles or checkboxes. By disguising the fields as legitimate data points and using CSS to move them off-screen, you create a trap that catches the vast majority of automated spam.

Implementing reCAPTCHA v3

While honeypots catch “low-hanging fruit” bots, sophisticated “headless browser” bots can sometimes bypass CSS-hidden fields. reCAPTCHA v3 provides a second layer of defense by analyzing user behavior to identify automation that mimics human interaction.

1. Registration & Key Generation

Before integrating with Elementor, you must register the site with Google to obtain your unique API credentials.

  1. Visit the Google reCAPTCHA Admin Console.
  2. Label: Use a clear identifier (e.g., ClientName_AntiSpamTool).
  3. reCAPTCHA Type: Select reCAPTCHA v3. (Note: v3 keys will not work if v2 is selected).
  4. Domains: Add the root domain (e.g., clientwebsite.com). You should also add any staging domains (e.g., staging.agency.com) so the form works during testing.
  5. Copy Keys: Save the Site Key and Secret Key provided.

2. Global Elementor Integration

Once you have the keys, you must connect the entire WordPress installation to the reCAPTCHA service.

  1. Navigate to Elementor > Settings > Integrations.
  2. Scroll to the reCAPTCHA v3 section.
  3. Paste your Site Key and Secret Key into the corresponding fields.
  4. Scroll to the bottom and click Save Changes.

3. Activating reCAPTCHA on Specific Forms

After the global connection is established, you must manually add the protection to your individual Form widgets.

  1. Edit your page with Elementor and select the Form Widget.
  2. Under Form Fields, click Add Item.
  3. Set the Type to reCAPTCHA v3.
  4. Badge Location: Choose where the reCAPTCHA logo appears (Bottom Right is the industry standard).
    • Note: Google requires the badge to be visible to comply with their Terms of Service, as it informs users they are being monitored for security.

Why the “Honeypot + v3” Combination?

Using both methods creates a Multi-Layered Security Perimeter:

  • Layer 1 (Honeypot): Acts as a “static trap.” It catches simple scripts that blindly fill every field in the HTML code. It is processed locally on your server, saving resources.
  • Layer 2 (reCAPTCHA v3): Acts as a “behavioral monitor.” If a bot is smart enough to ignore hidden honeypot fields, v3 will still catch it by noticing the lack of human-like “noise” (mouse jitter, variable typing speeds, or page navigation patterns).

Version 3 vs. Version 2: Why we use v3

For agency clients, reCAPTCHA v3 is the preferred choice over v2 (the “I am not a robot” checkbox) for three primary reasons:

  1. Zero Friction: v2 forces users to stop, click a box, or worse, identify traffic lights in a grid. This is a “conversion killer.” v3 is invisible and requires no user action.
  2. Score-Based Logic: Instead of a simple “Pass/Fail” test, v3 returns a score (from $0.0$ to $1.0$). This allows the system to be more “forgiving” to humans while silently throttling suspicious traffic.
  3. Modern Bot Defense: v2 is increasingly easy for AI-driven bots to solve via image recognition. v3 focuses on how the user interacts with the entire site, which is significantly harder for bots to fake.

Documentation Note: Always ensure the Site Key and Secret Key are stored in the agency’s secure password manager, as losing access to the Google Admin account can make managing the keys difficult in the future.

How can we help?