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:
- Create a new form element in your Next.js page or component.
- Add a hidden input field to the form. This will be your honeypot.
- Give the honeypot input field a name that is not related to your form. For example, you can name it "favorite_color" or "email2".
- Set the value of the honeypot input field to an empty string.
- 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.
- 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>
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
}
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!
Top comments (9)
Remember to secure and validate your endpoints as well. The client side validation can always be circumvented. 🤓
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.
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.
Yeah happens, but still we should implement the basic mechanisms to prevent it a bit..
Nice 👍
Can you also show us how to implement CAPTCHAs or reCAPTCHAs?
dev.to/codeofrelevancy/how-to-impl...
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 🤔
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.
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.