Slider Captcha

Slider Captcha Overview

This is Framer’s first truly simple and powerful slider captcha - designed to secure your forms in seconds, not hours. Just copy the component, paste it into your form, and that’s it. Your form is instantly protected with a modern swipe captcha that feels intuitive for users and hostile to bots. No complex setup, no external scripts, and no friction for real humans.

The Slider Captcha is built around a familiar swipe to verify and slide to verify interaction. Users simply drag the verification slider to confirm they are human, while behind the scenes advanced bot detection, automated bot detection, and fraud prevention techniques ensure your form stays clean and secure. It works as a spam blocker, anti-spam layer, and full form protection solution in one lightweight component.

For even stronger security, this slider captcha includes optional Cloudflare Turnstile integration. Cloudflare Turnstile acts as an invisible captcha that runs in the background and enhances bot detection without interrupting the user experience. This integration is completely optional, but highly recommended if you want enterprise-grade spam protection and secure forms. The best part is that Cloudflare Turnstile is totally free to use - you only need to create a Cloudflare Turnstile account, generate a site key, and enable it inside the component.

Getting Started:

1. Add the Slider Captcha to Your Project:

   • Simply copy and paste the Slider Captcha component into your Framer project.

   • Place it inside a Form component before the form submit button.

2. Customization:

   • Customize text, animation behavior, and appearance directly via the properties panel.

3. Test & Preview:

   • Test the component in preview/live mode to see live behavior.

   • The component only shows real-time interactions outside the editor.

Cloudflare Turnstile Setup (Optional)

1. Create an Invisible captcha widget in your Cloudflare Turnstile dashboard.

2. Enable the Cloudflare toggle in the component.

3. Copy the site key and paste it into the component’s Cloudflare Site Key field.

4. The invisible captcha verifies users automatically in the background.

Note: This optional setup combines a visible swipe captcha with invisible captcha validation, giving you layered spam protection and automated bot detection without adding friction.

How It Works

The Slider Captcha offers over 70+ customization options neatly organized into various sections:

• Text Display (5 controls): Adjust visibility, text content, color, margin, and font styles.

• Track Styling (6 controls): Control background colors, padding, border radius, shadows, and borders for idle and drag states.

• Icon Customization (2 controls): Use default arrows or upload custom SVGs for the slider handle.

• Handle Styling (7 controls): Customize the handle’s background, padding, icon size/color, border radius, shadow, and border settings.

• Spinner Settings (2 controls): Customize the processing time duration and spinner color for verification.

• Success Styling (8 controls): Configure custom success text, icon placement (left or right), success icon, text color, font styling, background, and border radius.

• Animation Settings (4 controls): Enable animations such as handle nudging or track text shimmer.

• Security & Validation (5 controls): Set the minimum swipe time for bot detection, create custom error messages, and integrate with Cloudflare Turnstile for enhanced security.

• Haptic Feedback (2 controls): Enable vibration on mobile with adjustable intensity.

Main Features

• Ready-to-Use & Responsive:Fully responsive design works seamlessly on all devices. Adjusts automatically to fit container size.

• Intuitive Interactions:Features smooth drag gestures with spring physics. Also supports touch interactions for mobile.

• Advanced Security:Optional Cloudflare Turnstile integration (Invisible mode) and bot detection mechanisms like honeypot traps and swipe time validation.

• Accessibility First:Supports ARIA labels, screen readers, keyboard navigation, and semantic HTML for proper form validation.

• Highly Customizable:70+ properties for complete visual customization, including icon options, flexible color schemes, and typography.

• Enhanced User Experience:Features such as haptic feedback on mobile, smooth animations, shimmer text effects, and a celebratory success state.

• Form Integration:Works with native HTML5 form validation, includes custom validation messages, and integrates easily with backend systems like Cloudflare tokens.

• Performance Optimized:Canvas-aware rendering and optimized event handling ensure smooth performance, even with complex interactions.

Use Cases

• Contact & Lead Forms:Stop spam submissions and validate genuine leads.

• Event Registration:Prevent ticket bots, scalpers, and ensure fair access to events.

• Survey & Feedback Forms:Ensure quality responses, reduce manipulation, and collect authentic feedback.

• Giveaway & Contest Entries:Stop bulk automated entries and ensure fair participation.

• Comment & Review Systems:Block spam comments and fake reviews, ensuring authentic content.

Made with ❤️ by Soyeb

Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.

Have questions or need a custom Framer component? Reach out at creator.nitso@gmail.com