Honeypot for Spam Prevention React & Tailwind CSS

Spam bots can be a nuisance, especially when dealing with forms on your website. One effective method to prevent spam submissions is by implementing a honeypot, a hidden field that should remain empty for legitimate users but may be filled out by spam bots. In this tutorial, we'll walk through the steps of adding a honeypot to a simple React form styled with Tailwind CSS.

Prerequisites

Make sure you have Node.js and npm installed on your machine. If not, you can download them from nodejs.org.

Step 1: Create a React App

npx create-react-app react-tailwind-honeypot
cd react-tailwind-honeypot

Step 2: Install Tailwind CSS

npm install tailwindcss

Initialize Tailwind CSS by creating a configuration file:

npx tailwindcss init -p

Step 3: Set Up Tailwind CSS with React

Create a tailwind.css file in the src directory:

/* src/tailwind.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Import this CSS file in your src/index.js:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './tailwind.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Step 4: Create a Simple Form

Replace the contents of src/App.js with a basic form:

// src/App.js
import React from 'react';

const App = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    // Add form submission logic here
  };

  return (
    <div className="min-h-screen flex items-center justify-center">
      <form className="bg-white p-8 rounded shadow-md w-96" onSubmit={handleSubmit}>
        <div className="mb-4">
          <label htmlFor="name" className="block text-gray-700 font-bold mb-2">
            Name
          </label>
          <input
            type="text"
            id="name"
            name="name"
            className="w-full border rounded p-2"
            required
          />
        </div>
        {/* Add more form fields as needed */}
        <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
          Submit
        </button>
      </form>
    </div>
  );
};

export default App;

Step 5: Add Honeypot Field

Add a hidden honeypot field to the form. This field will be ignored by users but might be filled by spam bots:

// src/App.js
// ... (previous code)

const App = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);

    // Check honeypot field for spam
    if (formData.get('honeypot') === '') {
      // Process the form submission
      console.log('Form submitted successfully!');
    } else {
      // Detected spam bot submission
      console.log('Spam bot detected!');
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center">
      <form className="bg-white p-8 rounded shadow-md w-96" onSubmit={handleSubmit}>
        {/* Honeypot field */}
        <div className="hidden">
          <label htmlFor="honeypot">Don't fill this out if you're human:</label>
          <input type="text" id="honeypot" name="honeypot" />
        </div>

        <div className="mb-4">
          <label htmlFor="name" className="block text-gray-700 font-bold mb-2">
            Name
          </label>
          <input
            type="text"
            id="name"
            name="name"
            className="w-full border rounded p-2"
            required
          />
        </div>
        {/* Add more form fields as needed */}
        <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
          Submit
        </button>
      </form>
    </div>
  );
};

// ... (export statement)

Step 6: Run the App

Start your React app and test the form:

npm start

Visit http://localhost:3000 in your browser and try submitting the form. The honeypot field should remain empty for legitimate users but may be filled by spam bots.

That's it! You've successfully added a honeypot to your React form for spam prevention. Feel free to customize the form and honeypot field as needed for your specific use case.