A React application with CleanTalk Bot Detector integration for spam protection. Built with Vite and React Router.
- ⚛️ React 18 with Vite
- 🛣️ React Router for navigation
- 🛡️ CleanTalk Bot Detector integration
- 📝 Contact form with validation
- 🎨 Modern, responsive UI
If you find this project useful, please consider starring ⭐ it on GitHub — it helps us grow and support development!
- Clone the repository:
git clone <repository-url>
cd react-antispam- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
The CleanTalk Bot Detector helps protect your forms from spam by automatically detecting and blocking bot submissions.
Add the CleanTalk Bot Detector script to the <head> section of your index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your Site Title</title>
<!-- Add CleanTalk Bot Detector script -->
<script src="https://fd.cleantalk.org/ct-bot-detector-wrapper.js"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>To collect the ct_bot_detector_event_token from the form, you need to:
import { useState, useRef } from 'react'const formRef = useRef(null)function getBotDetectorToken() {
if (!formRef.current) return ''
const tokenField = formRef.current.querySelector('input[name="ct_bot_detector_event_token"]')
return tokenField ? tokenField.value : ''
}In your handleSubmit function, get the token before submitting:
async function handleSubmit(e) {
e.preventDefault()
// Get the bot detector token from the hidden field
const botToken = getBotDetectorToken()
const formData = { ...values, ct_bot_detector_event_token: botToken }
// Continue with form submission...
const res = await fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
})
}return (
<form ref={formRef} onSubmit={handleSubmit}>
{/* Your form fields */}
</form>
)Add validation to ensure the token is present before form submission:
function validate(values) {
const errors = {}
// ... other validations
if (!values.ct_bot_detector_event_token) {
errors.ct_bot_detector_event_token = 'Bot detector event token is required'
}
return errors
}-
The CleanTalk script (
ct-bot-detector-wrapper.js) automatically injects a hidden input field withname="ct_bot_detector_event_token"into all forms on the page. -
When the form is submitted, the
getBotDetectorToken()function retrieves the token value from the hidden field. -
The token is included in the form data sent to your server.
-
Your backend can verify the token with CleanTalk's API to validate the submission and block spam.
See src/components/ContactForm.jsx for a complete implementation example.
Start the development server:
npm run devCreate a production build:
npm run buildPreview the production build:
npm run previewreact-antispam/
├── index.html # HTML entry point with bot detector script
├── package.json
├── vite.config.js
├── src/
│ ├── main.jsx # React entry point
│ ├── App.jsx # Main app component with routing
│ ├── styles.css # Global styles
│ ├── components/
│ │ ├── ContactForm.jsx # Form component with bot detector integration
│ │ └── NavBar.jsx # Navigation component
│ └── pages/
│ ├── Home.jsx
│ ├── About.jsx
│ ├── Contact.jsx # Contact page using ContactForm
│ └── NotFound.jsx
└── README.md
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build
- react ^18.3.1
- react-dom ^18.3.1
- react-router-dom ^6.26.2
- vite ^5.4.8 (dev)
When submitting forms, make sure your backend receives and validates the ct_bot_detector_event_token. You can verify the token using CleanTalk's API to ensure the submission is legitimate.
For more information about CleanTalk Bot Detector, visit: CleanTalk Documentation
Private project
