Stop Spam(Bot) Form Submissions With Time-Based Spam Prevention

4 Min Read

As recently I published a post about stopping spam via Honeypot Field, following this another one of my Instagram connections reached out, he said that he is already using it(Honeypot Field) but it fails to stop bot submissions . He mentioned a different type of spam issue. He noticed that spam submissions on his website were happening at an unusually fast pace, far quicker than any human could reasonably fill out a form. This gave away that these submissions were likely coming from bots. He asked me if there was a way to prevent such fast, automated spam from coming through his contact form.

Spammers often use automated tools that can fill out and submit forms within seconds, bypassing most basic form validations. To combat this, a time-based submission check is an excellent solution. The idea is to track how long it takes for a user to complete a form. Since bots tend to submit forms almost instantly, you can reject submissions that happen too quickly.

Here’s what I suggested:

Time-Based Spam Prevention with JavaScript and PHP

To prevent bots from submitting forms too quickly, you can measure how long it takes for the user to fill out the form. If the form is submitted in less than a reasonable time (for example, under 5 seconds), it’s safe to assume it’s spam.

JavaScript Code for Time-Based Spam Prevention:

let formStartTime;

document.addEventListener('DOMContentLoaded', function() {
formStartTime = new Date().getTime();

document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
const formEndTime = new Date().getTime();
const formCompletionTime = (formEndTime - formStartTime) / 1000; // in seconds

// Add a hidden field to the form
const timeField = document.createElement('input');
timeField.type = 'hidden';
timeField.name = 'completion_time';
timeField.value = formCompletionTime;
this.appendChild(timeField);

// Submit the form
this.submit();
});
});

This JavaScript code tracks the time it takes to fill out the form. When the form is submitted, it calculates the completion time and sends that information to the server in a hidden field.

PHP Code for Server-Side Time Validation:

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$completionTime = $_POST['completion_time'] ?? 0;

if ($completionTime < 5) { // Adjust this threshold as needed
die("Form submitted too quickly. Please try again.");
}

// Continue with normal form processing...
}

The PHP script checks the value of completion_time and ensures that the form was not submitted too quickly. If the form is completed in under the set time threshold (in this case, 5 seconds), it will be rejected as spam.

Full Example HTML Form with Time-Based Prevention

Here’s how you can incorporate the time-based prevention into a simple contact form:

<form action="process-form.php" method="post">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" required>
</div>

<div class="form-group">
<label for="email">Your Email</label>
<input type="email" id="email" name="email" required>
</div>

<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
</div>

<button type="submit">Submit</button>
</form>

Summing Up

This time-based spam prevention technique works by ensuring that a real user spends a reasonable amount of time filling out the form. Bots that submit forms within a second or two will be blocked. By adding this method alongside a honeypot field, you can significantly reduce the amount of spam that your contact forms receive. This approach keeps your form easy to use for real visitors while protecting your website from automated spam attacks.

Share This Article
Follow:
I'm Kunal Khurana. I'm a top freelance talent and innovation expert. I help businesses achieve success and vision through my expertise in mobile app development, full stack web development, and UI/UX design. I've guided many startups to success and specialize in technologies like Flutter and React Native.
Leave a Comment