Form Spam Protection

Free Forms Component by Sajjadul Kibria

Show Preview
Form Spam Protection

About Form Spam Protection

Protect Your Forms from Spam & Bot Submissions

(The Source Code will not be given, only the component is the deliverable)

Form Spam Protection is a lightweight, math-based verification component that blocks automated spam and bot submissions on your Framer forms. Perfect for contact forms, lead generation, newsletter signups, and any form where you need human verification.

Key Features

Triple-Layer Protection

  • Math Challenge: Simple addition problems that humans solve easily but bots struggle with

  • Honeypot Field: Hidden trap that catches automated form fillers

  • Time Validation: Detects suspiciously fast submissions typical of bots

Fully Customizable Design

  • Control every visual aspect to match your brand

  • Customize fonts, colors, spacing, and typography

  • Separate styling for questions, inputs, buttons, and messages

  • Individual padding controls for perfect pixel alignment

  • Auto-layout behavior for responsive sizing

Seamless Form Integration

  • Works with any Framer form—just drop it in

  • Automatically disables submit buttons until verified

  • Highlights empty required fields on submit attempts

  • Shows clear warning messages for incomplete forms

  • Smooth scroll to verification when needed

Smart User Experience

  • Real-time validation feedback

  • Auto-hide warnings when requirements are met

  • Success confirmation with visual feedback

  • Keyboard support (Enter to verify)

  • Accessible with proper ARIA labels

How It Works

  1. Add to Your Form: Place the component anywhere in your Framer form

  2. Style to Match: Customize colors, fonts, and spacing to fit your design

  3. Configure Security: Enable/disable honeypot and time validation as needed

  4. Publish: Your form is now protected from spam and bots

Customization Options

Content Controls

  • Custom question text

  • Placeholder text

  • Button text

  • Error and success messages

Typography

  • Individual font controls for question, input, button, and messages

  • Font size, weight, letter spacing

  • Line height for questions

  • Color customization for all elements

Layout & Spacing

  • Border radius

  • Individual padding controls (top, bottom, left, right) for:

    • Component container

    • Input field

    • Verify button

  • Optional input border with color and width controls

Security Settings

  • Toggle honeypot protection

  • Toggle time-based validation

  • Set minimum completion time (1-30 seconds)

Perfect For

  • Contact forms

  • Lead generation forms

  • Newsletter signups

  • Registration forms

  • Feedback forms

  • Quote requests

  • Any form that needs spam protection

Technical Details

  • No external dependencies: Works entirely within Framer

  • Zero configuration required: Works out of the box with smart defaults

  • Form field validation: Automatically checks all required fields

  • Custom event dispatch: Triggers botProtectionVerified event when verified

  • Hidden field: Adds Human_Verification field to form data

  • Memory leak prevention: Proper cleanup of event listeners

Requirements

  • Works with standard Framer forms

  • Requires <form> element wrapper

  • Compatible with all Framer form inputs

Support

Need help or have questions? Feel free to reach out through the Framer community or reach me out!