DEV Community

Preet Suthar
Preet Suthar

Posted on • Originally published at preetsuthar.me

Prevent Spam Bot Attacks in Form Submissions

Spam bot attacks on forms can be a nuisance, leading to spam submissions and potential security risks. Here's a simple method to prevent spam bot attacks in form submissions using a hidden field.

Step 1: Add a Hidden Field

Add a hidden field to your form. This field should be invisible to users but visible to bots. For example:

const [honey, setHoney] = useState("");

<input
  type="text"
  value={honey}
  onChange={(e) => setHoney(e.target.value)}
  tabIndex="-1"
  area-hidden="true"
/>;
Enter fullscreen mode Exit fullscreen mode

Step 2: Validate the Hidden Field

When processing the form submission, check if the hidden field is empty. If it's not empty, it's likely a bot submission.

const handleSubmit = (e) => {
  e.preventDefault();

  if (honey) {
    // This is a bot submission
    console.log("Spam bot detected!");
    return;
  }

  // Process the form submission
  console.log("Form submitted successfully!");
};
Enter fullscreen mode Exit fullscreen mode

Complete Example 

import React, { useState } from "react";

const Form = () => {
  const [honey, setHoney] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    if (honey) {
      console.log("Spam bot detected!");
      return;
    }

    console.log("Form submitted successfully!");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={honey}
        onChange={(e) => setHoney(e.target.value)}
        tabIndex="-1"
        area-hidden="true"
      />
      <button type="submit">Submit</button>
    </form>
  );
};
Enter fullscreen mode Exit fullscreen mode

Actual users won't see the hidden field, but bots will fill it out, allowing you to filter out spam submissions easily. This method is simple and effective for preventing spam bot attacks in form submissions.

Actual Twitter thread: link

Top comments (0)