DEV Community

Cover image for How to Prevent Bots From Submitting Forms
Code of Relevancy
Code of Relevancy

Posted on • Updated on

How to Prevent Bots From Submitting Forms

To prevent spam form submissions in Next.js, you can use a honeypot field. A honeypot field is an invisible field that is hidden from the user but visible to bots. When a bot fills out the form, it will also fill out the honeypot field, indicating that it is a spam submission.

You can follow these steps:

  1. Create a new form element in your Next.js page or component.
  2. Add a hidden input field to the form. This will be your honeypot.
  3. Give the honeypot input field a name that is not related to your form. For example, you can name it "favorite_color" or "email2".
  4. Set the value of the honeypot input field to an empty string.
  5. Add a validation function to your form that checks if the honeypot field has a value. If it does, the form submission is considered spam and can be discarded.
  6. If the honeypot field is empty, you can proceed with your form submission as normal.

Here's an example of how your form element might look with a honeypot input field:

<form onSubmit={handleSubmit}>
  <input type="text" name="name" placeholder="Name" />
  <input type="email" name="email" placeholder="Email" />
  <textarea name="message" placeholder="Message" />
  <input type="hidden" name="favorite_color" value="" />
  <button type="submit">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

In your form submission function, you can check the value of the honeypot field like this:

const handleSubmit = e => {
  e.preventDefault();
  const formData = new FormData(e.target);
  if (formData.get("favorite_color") !== "") {
    // Form submission is spam
    return;
  }
  // Form submission is valid, proceed with processing
}
Enter fullscreen mode Exit fullscreen mode

This is a simple way to create a honeypot in Next.js to protect your form from spam submissions. You can also consider using other spam prevention techniques such as CAPTCHAs or reCAPTCHAs.


Please consider following and supporting me by subscribing to my channel. Your support is greatly appreciated and will help me continue creating content for you to enjoy. Thank you in advance for your support!

YouTube
Discord
GitHub

Top comments (9)

Collapse
 
jankapunkt profile image
Jan Küster

Remember to secure and validate your endpoints as well. The client side validation can always be circumvented. 🤓

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Thank you for the reminder to secure and validate our endpoints. You are correct that client-side validation can be circumvented, so it is important to also implement server-side validation to ensure the integrity and security of our system. By performing validation on the server, we can prevent malicious users from attempting to bypass the client-side checks and potentially causing harm to our system. It is also a good practice to regularly test and audit our endpoints to ensure that they are secure and functioning as intended.

Collapse
 
bengan profile image
bengan

This doesn't work. Nowadays, bots only fill the form 3-4 times and leave suspicious fields, sometimes empty and sometimes filled. A couple of spams go through. I have implemented the solution with an empty field and about 3/4 of all bots manage to spam anyway.

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Yeah happens, but still we should implement the basic mechanisms to prevent it a bit..

Collapse
 
plabankr profile image
Plaban Kumar Mondal

Nice 👍

Can you also show us how to implement CAPTCHAs or reCAPTCHAs?

Collapse
 
codeofrelevancy profile image
Code of Relevancy
Collapse
 
dawosch profile image
Dawosch • Edited

What type of bots we are talking about?
I‘m very sure i can create a bot that fills out the form without submitting the hidden field 🤔

Collapse
 
codeofrelevancy profile image
Code of Relevancy

However, you are correct that it is possible for a bot to be programmed to not fill out the hidden field. This technique is just one way to try and mitigate the risk of bots submitting forms on a website, but it is not foolproof. Other methods, such as CAPTCHAs or requiring users to solve a puzzle before submitting a form, can also be used in conjunction with the honeypot technique to increase its effectiveness.

Collapse
 
codeofrelevancy profile image
Code of Relevancy

By bots, we are generally referring to automated software programs that are designed to perform certain tasks on the internet. These tasks can include filling out and submitting forms on websites.