5 ms·
The easiest way to start would be introducing an invisible form field [0] and on submission, checking if it is not empty. Give this form field a random name so
by jmstfv 7y ago
The easiest way to start would be introducing an invisible form field [0] and on submission, checking if it is not empty. Give this form field a random name so that it wouldn't be populated by password managers.
You can take it one step further and check how fast the form was submitted. If it is below the predefined threshold, it is probably a bot.
[0] To hide the form field, you can use one of these snippets, interchangeably:
"display:none;"
"position:absolute!important;top:-9999px;left:-9999px;"
"position:absolute!important;height:1px;width:1px;overflow:hidden;"
- Master_Odin 7y agoIt should be stated that you should either use the first approach (display none) or give a 0 height/width, so that screen readers don't pick up these fake fields and ruin accessibility on your form.
- throwaway_bad 7y agoUnfortunately anything screen readers can recognize as invisible, a more sophisticated bot can too.
- shakna 7y agoThere's also aria-hidden to prevent screen readers from touching the honeypot field.