Fighting Spam with CSS

It can be very frustrating when you have a form on your site which has a good and useful purpose, but almost becomes obsolete because of relentless spamming. I had this problem a few months ago with my old site, and was thus forced to find a solution that was light-weight, easy to implement, and most importantly was effective. I decided to turn toward my friend CSS to help me out.

The idea here is setting up a form with a text field and via CSS making it invisible. Then, if a post is sent to a php script handling the request and that text box has information in it, that means a human didn’t fill it out, and the script is simply aborted.

Here is a simple example. You can view the actual page here.

THE FORM:

Here is the xhtml I am using for the form code:


<form action="process.php" method="post"> <fieldset>
<label>Name: </label>
<input name="name" type="text" />
<label>Email: </label>
<input name="email" type="text" />
<label>Comment: </label>
<input name="comments" type="text" /> <input class="special" name="info" type="text" /> <input type="submit" value="Send" /> </fieldset>
</form>

First, this is not a tutorial on making forms look nice, so don’t give me crap. Everything should be straightforward, however, you will notice after the comment text box, there is another text box with the name “info” and the class “special”. This is the spam fighter. I didn’t want to mess up the orientation of the form, so I didn’t put a break between the comments box and the spam box. I just put it at the end of the line. Real people won’t see it looking at the page, because I turned off the visibility in CSS:

THE STYLES:

[quickcode:noclick]
body {
line-height:35px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
font-size:14px;
}
.special {
display:none;
}
[/quickcode]

Really, the only class you need to look into is called “special”. Basically, I made it really small, again to avoid any design conflicts, and then I assigned the visibility property with the value “hidden”. This way, browsers don’t make it visible, and thus people can’t fill it in. However, when a spam scraper comes through the site, it’s going to read it and think it should be filled in — only to their surprise.

THE SCRIPT:

The php to handle this is very straightforward. Basically, you just look to see if that field has been filled in before it was posted, and if it was, you simply break the script so no email is sent, and tell the spammer to get lost. If it’s not filled in, then business as usual. To see this in action, fill out the top form and press “submit”. Then, fill out the bottom form including the spam box and press submit. Process.php returns different results based on what is typed in.

More Thoughts:

After doing this, my spam levels from form submission went down to zero. You could always add a function to search for html in the post as an extra caution as well. It just made me realize once more how important CSS is to making things work right. So in this case, CSS is my weapon of choice. I recently implemented this on my Orlando Florida Used Cars and Utah used cars website. It’s also working great for Doug Bennett Magic and Consumer Credit Repair Agency.

Another interesting article:
For those of you tired of gamma not showing correctly for images in PNG format, this awesome fix is for you.

This entry was posted in Design Strategies, Featured. Bookmark the permalink.

149 Responses to Fighting Spam with CSS

  1. Steve says:

    Absolutely superb, so simple and yet so brilliant! cheers for this and nice site

  2. Great idea, I like the way you are thinking here. The only thing that concerns me is that some users may view your site with the CSS off. Might not be the most accessible way to do it, but it looks like a very effective way to get the job done.

  3. eBooksBay says:

    Ver very good, as said nice site too.

  4. Jon B says:

    Excellent idea, well done mister. CSS is also a good buddy of mine!

  5. Scott says:

    Overall, I really like this. It’s creative and will work in the majority of cases.

    There are however some fringe cases where users have CSS disabled or they are browsing with a non-visual browser (screen reader). If they fill out your form, their message will not reach you. Perhaps there is a way to label the spam catching input as to inform non-spammers of its use?

    Thanks!

  6. Bill says:

    Great Idea! However where is the php file used to stop this? How do you make it work with just the css and form code?

  7. Pingback: VeronicasLore.com » Fighting Form Spam with CSS

  8. patrick says:

    Here is a snippet that may help: Click Here

  9. Dan says:

    Are there any ways for the spam bot to adapt which they seem to do very quickly? ex look for any fields tagged as invisible?

    Also, is there a validation in rails that could send a failed if a field was filled out?

  10. Flo says:

    what about doing something with the z-index of the “special” input-field. for example place it behind something else. would be more difficult for the spammer to find a workaround then with a visability: hidden;

    but it’s a great idea. thanks

  11. Bob says:

    Vision-impaired people’s screen readers will read this site improperly. Admittedly, it’s a small portion of most site’s readership, but it’s worth mentioning.

  12. Three things:

    (1) I’ve used

  13. Daysleepr says:

    > Process.php returns different results based on what is typed in.

    this is bad. the spammer should think his attack was succesful. otherwise they will investigate and adapt their attack to account for your trap!

  14. ObviousOcham says:

    Aren’t most spam bots human configured/tuned? I think so. Thusly, a hidden form field may not be “configured” or “tuned” in to begin with if they are targetting your site. I know a bot I would write would still work on your site. Since your page is fairly unique (i.e. not discernable from footprint scanning or such) I would tune a spam bot to use it if I really wanted to. If your page was not unique (i.e. fit a footprint of say common forum software or such), then this approach would still not work since the mass of others lead me to discount your hidden form field (if I even noticed it). Nice thinking though.

  15. patrick says:

    Daysleeper, good point. It would be better to maybe output “Thank your for your email” or something. Thanks.

  16. Toadward says:

    this is called a honeypot :)

  17. aj batac says:

    IMHO I still think the only *best* way to limit spammers is to use CAPTCHA. Bots learn and it’s only a matter of time before they learn that visibility: hidden or text-indent: -99999px in CSS.

  18. Pingback: Combat Form Spam with CSS « Interknox dot net

  19. Brian Turner says:

    It’s a nice tip for developers, but to stop spam you really need to help educate the greater number of webmasters out there who can only code so far – inclusion of a mailing script integrated with this would have been great. Otherwise, it’s just the better coders who get dibs on avoiding a problem that is simply getting worse.

    2c.

  20. Pingback: Water Under The Bridge

  21. Samer N. says:

    The issue is that most targeted spam bots know what fields they should fill. So this works only on generic forms and cannot be implemented in popular forum/blogging software.

  22. Forrest says:

    I have to agree with @ObviousOcham here.. as someone who for a day-job creates screenscrapers (non-spam related), I would never be fooled by this method. I would view the page the form is on and then compare the structure and determine the “info” INPUT is unused. Also, I would test it first, which would uncover any trickery like this.

    The only thing I worry about is captchas…

  23. patrick says:

    Forrest, as for testing, I could easily have it redirect back to the home page and say “Thanks for your submission”. Also, this is just a base for tougher and better techniques. Not everyone has the know-how to integrate captcha, or has the server requirements. This has worked for many of my smaller sites.

  24. Angel says:

    Great article, it’s simple, easy to read, and best of all – informative! Thanks.

  25. Pingback: Stop spam with CSS? Close, but no cigar. at mdibb

  26. Matt says:

    I am not convinced by this method – sure it will stop the opportunist “drive by” spam, but an intelligent spammer will be spamming within seconds.

    There is nothing to stop someone making a spam bot that is CSS-aware (and Javascript for that matter), simply by making use of the openly available Gecko and IE browser components…

    Captchas and/or filtering of some sort (bayesian, akismet etc) are your best bets for the moment really. They aren’t foolproof, but they offer superior protection in my opinion.

  27. Pingback: zephid.dk » Fighting Form Spam with CSS

  28. duo says:

    uh A hidden field set to a value would do the exact same job with less DOM cputime being taken up….

  29. Daego says:

    You need to have an associated LABEL element with it:

    Please leave this box empty:

    With the CSS:

    #special, #special-label { display: none; }

    display: none is better because it removes it from formatting altogether. visibility: hidden creates a hidden object box, which can subtly influence your layout and be very difficult to debug.

  30. This approach was mentioned before some months back by someone else more prominent on the web (can’t remember who). Also, this approach is not accessible and could invite lawsuits from the ADA if not implemented correctly.

  31. Andrew says:

    Solution to no css:

    html:

    Don’t type in the field below:

    css:
    #text {display: none;}

  32. Erick says:

    This has been widely used. on phpBB and punBB forums, the moderators always advise it. I protect everything with this (forums, bug software, blog, contact form, everything). Otherwise, the spam deluge resumes… :(

    Thanks anyway, it’s a good trick.

  33. Andrew says:

    edit:
    [div id="text"]
    Don’t type in the field below:
    [/div]

    css:
    #text {display: none;}

  34. Joe says:

    Very nice! Just curious why bots don’t pick up on CSS? Also do you think it will work with inline CSS?

  35. Pingback: Fight SPAM with CSS at Better Web Posse

  36. punb says:

    People have tried this before with type=”hidden” fields and bots get through since they soon learn what to send and not send, but the idea of display:none or visibility:hidden on a field might work for awhile. Until they write more code to adapt. People also do something similar with having an extra submit button or another hidden form or changing the action with JS and so if someone doenst have JS enabled it wont submit.

  37. Pingback: Emmertje en schepje

  38. patrick says:

    Ik spreek nederlands eigenlikj. Bendankt voor uw comment.

  39. Pingback: SearchRoads » x men girls wallpaper Fighting Form Spam with CSS

  40. warpdesign says:

    Just wanted to throw my 2 cents in. I think this is very clever but it seems like most spammers could easily write around it in their spam bot’s code to just check for hidden form fields and not fill them in. Still, I think that this IN Addition to other methods just adds another level of protection so thanks!

    And while I’m at it, has anyone found any good scripts or reg expressions that check for spam email injection and strips it out?

  41. Michael Ott says:

    It’s called a Honeypot, and we implemented it ages ago. Not had a single hit of comment spam since.

    Read all about it: http://www.rustylime.com/show_article.php?id=338

  42. Lee says:

    ever since I implemented this on http://www.ratemyrosetta.com/ months ago I haven’t received a single piece of spam. There is one trick you left out though, you may need to rename your fields if spam bots already know how to use your site!

  43. WebGyver says:

    You know, if it works for you, I’m certainly willing to give it a try. As far as bots figuring out what the CSS is doing, I could think of adding a few more layers of obscurity and CSS obfuscation to throw off the SPAMmers. This is not to say that such CSS tactics won’t eventually become obsolete, but, hey, if it works for some of us for now, all I can say is: THANK YOU!

  44. Anthony says:

    Is there are wordpress plugin for this (especially for the comment fields?). That would be awesome. Thanks!

  45. Pingback: ?? » Fighting Form Spam with CSS

  46. Mr. Magoo says:

    I love it when people pout and plug their own sites in comments. As they say, there is nothing new in the internet, and i’m sure somebody thought it up before you Michael Ott. That said, this article and this method are a cleaver idea.

  47. Pingback: Cartoons Fans Lounge

  48. Pingback: Fighting Form Spam with CSS « irrevocable stuff

  49. Pingback: links for 2007-06-27 | iSurflite

  50. Pingback: error is the mother of all inventions

  51. Pingback: Web 2.0 Announcer

  52. Pingback: Web 2.0 Announcer

  53. Andy Murdoch says:

    I wrote about a similar method for preventing bots from automatically signing up to the forum on my personal site. The article is here:

    http://www.andymurdoch.com/Stuff/yabbspam.shtml

    As it was a signup screen, I could easily accommodate those using screen readers by asking “Are you a Russian spambot?” where there was previously “Do you accept the terms and conditions?”.

    I’m happy to report that there have been no more bots or spam.

    As so many people are using this kind of solution nowadays, I think it won’t be very long before the bot-writers catch up. I’ll enjoy the peace and quiet in the meantime.

  54. Boom says:

    hey luv this post…tnx for sharing the idea on fighting spam. This is useful in my site and other site i made.

  55. Pingback: Jorge Yau » links for 2007-06-27 - Diseñador Web

  56. Pingback: Identificar spam em formulário

  57. Interesting approach. I like it! I may just have to test this out to see if the spam comments on my blog decrease.

  58. Pingback: New Spammer on board.. - Page 2 - CodeCall Programming Forum

  59. Pingback: links for 2007-06-27 | iSurflite

  60. thanks for the information

  61. David Kaspar says:

    Great tip! Improve on it by instead of letting the spammer know that something went wrong, reply with “thanks for the comment” but send the spam do /dev/null.

    The less the spammers know the better!

  62. Carlos B. says:

    Glad you figured out this solution, but it’s old news. I’m too lazy to find it now, but I came across this hack when searching for vbscript captchas. I recall the site linking to http://www.cs.sfu.ca/~mori/research/gimpy/.

    If this is getting more popular, then spammers will eventually find a way around it. Bummer. :)

  63. Pingback: A Good Idea to Limit Spams sent by Robot « Live2Study

  64. Pepino says:

    this hidden field is an very old and working “trick”… i’m using this since years!

  65. Pingback: links for 2007-06-27 « toonz

  66. Pingback: links for 2007-06-28 « Free Hogg

  67. Pingback: SeoGenetic Blogs » Fighting Form Spam with CSS

  68. Pingback: Smith Data Processing Services » Blog Archive » links for 2007-06-28

  69. Shane says:

    “The php to handle this is very straightforward. Basically, you just look to see if that field has been filled in before it was posted, and if it was, you simply break the script so no email is sent, and tell the spammer to get lost.”

    That doesn’t strike me as the best way to handle things. Instead of giving the spammer feedback that something didn’t work, I would give him no information whatsoever. As they say in law enforcement: “Anything you say can and will be used against you.” The less info you give the spammer the better.

  70. Coder says:

    Nice idea, i will try it out.

    Thank you.

  71. Fabio says:

    Da’s redelijk leesbaar Nederlands ;-) Prima stuk. Heeft erg geholpen. Graag gedaan.

  72. Pingback: Avoid Web Form SPAM « V Sivakumar’s weblog

  73. Pingback: Prevent Comment Spam | jon lee dot see eh

  74. Pingback: CSS ca arm? anti-spam | CNET.ro

  75. Pingback: Script out spam « 0ddn1x: tricks with *nix

  76. Some problems may arise, and there is no reason someone targeting you couldn’t simply drop the hidden value.

    The only surefire way I’ve seen are logic tests (ie: “What is 2+2?” — with enough variation, someone would likely give up before finding the answers to all the tests.

    CAPTCHAs used to be a good way to stop spammers as well, but are now easily broken, even for a non-popular CAPTCHA image. Not to mention they are inaccessible if images are disabled.

  77. Pingback: All in a days work…

  78. Pingback: » Mit CSS Spam bekämpfen — cne _LOG Archiv

  79. Pingback: links for 2007-07-04 | giancarlo.dimassa.net

  80. Nick says:

    Sensational. Superb idea to use CSS – and great site.

    I would like to use this method on my site but am not a PHP coder. For my (and other non coders) benefit, would you mind please confirming how the non spam mail gets actioned by a mailing script?

    EG. Say your mail program is: formmail.php. Once verified as OK, how do I then get the process.php script to send the mail via the formmail.php script?

    Thank you in Advance and keep up the great work.

  81. Pingback: Evitando el spam con CSS « Quest’s Blog

  82. Pingback: Oldstone Place » Useful Javascripts

  83. Pingback: .bootstrap » Fighting Form Spam with CSS

  84. Pingback: ??? ??????.NET » ?????? #314

  85. Pingback: A CSS trap for comment spambots

  86. Nick says:

    Ignore the post above re how to action the mail script. All working now. Thank you kindly.

  87. drugs says:

    this is a great idea! i was just about to program a captcha-like system for some of my sites, but this trap will be alot easier to implement, without requiring anything more out of the users or my server/bandwidth

  88. Pingback: More on CAPTCHA « Glengage

  89. Pingback: Links for the Weekend, 7-14-2007

  90. Pingback: somaninn.net - le weblogue » Blog Archive » Anti-spam en CSS

  91. Nice one, just implemented this myself. 3 things I’d recommend though: 1) Use display: none in the CSS instead of visibility: hidden. The latter leaves a gap there for the element, whereas display: none collapses everything around the element you want to hide. 2) I think another commenter mentioned this, but I think it’s a good idea to wrap the field and a descriptive paragraph in a div, then hide the whole div. This way, people with styles disabled will see the field but also the instruction to leave it blank. 3) As for robots recognizing what you’re doing via the class or id name, I think that’s unlikely. Probably safer tho if you don’t use inline CSS. Put the actual styling code in your master stylesheet.

    Thanks for this post, proved very helpful. Must go get my washing.

  92. bloid says:

    I remember Damien Katz talking about this back in January…

    http://damienkatz.net/2007/01/negative_captch.html

    Nice to see it catching on :)

  93. Stefan says:

    I use this since june 2006 in the guestbook on my website http://www.windoof.org

  94. tista says:

    GREAT trick! Definitely a lifesaver to go against spammers!!

  95. Pingback: Weekly Links << Vandelay Website Design

  96. Pingback: La Geek Attitude » Blog Archive » Un antispam en CSS : simple et efficace

  97. Simple yet extremely effective. Thanks for the great tip! I’m sick of putting CAPTCHA into everything I do.

  98. Pingback: Pligg captcha useless against spammers - Pligg Forum

  99. xmax says:

    Really asome, I’ll put this tutorial on my blog ( with credits, don’t worry :P ).

  100. Xavez says:

    Cool. appearently you had the same idea as I had a few months ago :) (article is in Dutch)!

  101. patrick says:

    Yeah, a few other people have mentioned they had the same idea. I guess it’s independent invention. Your article was interesting too, thanks for the link. Ik kan Nederlands lezen.

  102. Xavez says:

    Ah, great! I very much enjoyed your article as well :) . The only shortcoming it has to be future-proof IMO, is that a bot might be able to read the CSS-rules. Hiding it with negative margins is a better solution, I think. display: none; or visibility: hidden; are easy to detect. Should this become a more widespread technique, spammers wil surely implement a CSS-readout :) .

  103. J says:

    Have you noticed that Google Toolbar chokes on the hidden field? It seems to stick email addresses into it!

  104. hr says:

    a bit off-topic but, after reading so many comments from people who had the same idea, independently, makes me think of how terrible patents are.

  105. hiutopor says:

    Hello

    Very interesting information! Thanks!

    Bye

  106. webmaster says:

    useful information, thanks

  107. Tweak Blog says:

    That’s a great hack. I think considering all the possibilities, this would make it at least 90% successful. If I can suggest, instead of deleting those spam messages, it would be helpful to take them aside to evaluate.
    Thanks for sharing with us.

  108. Pingback: Fighting Form Spam with CSS « Programming News

  109. Jonathan says:

    Looks like you need to implement this strategy or some other on this very page since many of the comments are quite obviously spam.

    On a PHP mailing list I am on, one person also suggested creating a checkbox that is named “cancel” with a value of “cancel” and then giving it a label such as, “I agree to abide by the commenting guidelines”. Require users to check it and bots won’t like it because to them is says “cancel”. The developer who suggested it said it worked great on his site.

  110. patrick says:

    Jonathon, actually those are called “track-backs” which show sites that are linking to this article, not spam.

    I think the cancel button is another great idea. I may have to give that a try some time.

  111. dave says:

    Tried this and it works like a charm. Thanks.

  112. PHSDL says:

    I been fighting forum Spam for years and have done a number of things to prevent automated and human Spam.

    1. Enabling captcha for regestration.
    2. Checking domain referer for posts.
    3. Developing a customized redirect script preveting a post if it contains a Spam domain that has been caught and cataloged in PHSDL Spam Domains Database.
    Here is a hot list that you may refer to Spam domains that do redirect to porn, trojans, and other junk.
    http://www.phsdl.net/project_honeypot.php

    I have caught about 20,000 Spam domains over a few years.

    Next will probably add a captcha for loging in, do not really want to add one for submiting a new post.
    Will take a look how the CSS Spam prevention can help stop automated Spam, but I think now dealing more with human Zombies..:)

  113. Art says:

    Excellent work. Hopefully my posts will be protected from now on… :)

  114. dead sea says:

    I’m going to implement this now!!! great idea.

  115. rv sales says:

    this is so cool I added it to my site yesterday and since then I got no spam this is a 2 thumbs up idea.

  116. Great idea,

    More people should implement stuff like this to secure their scripts.

    - Dwayne Charrington.
    http://www.dwaynecharrington.com

  117. Dito says:

    great idea, thanks!

  118. Greg Hartwig says:

    This is a cool technique. I just finished implementing it on all my forms.

    Another good trick to mention: As tempting as it is to rub your spammer’s face in the fact that you caught them, it’s MUCH better to simply act like they tricked you and NOT output any special message when you catch them. Just act like you sent the form when you didn’t. If you tell them it didn’t work, they’ll just try harder to get through. Let them think they’re done.

  119. j says:

    I am currently using a perl formail script called formail.pl and I have no idea how to integrate the php code. Can some one help with that. Do you have the form action call both scripts on submit? Not sure how to implement this.

  120. Very clever, he he love it thanks for the great tip!

  121. Spam has killed my time……. i hope your article will stem the flow of spams ….

  122. Code It Red says:

    I love it! You really did think outside the box here and came up with an innovative solution!

  123. Totonet says:

    Great tip!!! Thanks for sharing.

  124. This works until any spammer decides to write some simple code to detect which is the honeypot field. The only way around this is to randomize the honeypot field and use some javascript to calculate which field it actually is and then hide that, but this incurs an additional dependence on javascript while also staying theoretically defeatable given enough effort to defeat it and widespread adoption of it to make the effort worthwhile.

    I would just use a reCaptcha, they make it pretty easy.

  125. Is there javascript validation code that would void a form if text is entered in the hidden text box?

    Thanks and great advice!

  126. patrick says:

    @peter: the only thing to remember with your solution, is spammer spiders don’t read javascript… so doing it with javascript wouldn’t make a difference.

    Obviously if someone really wanted to, they could write a custom script for your site… but it’s rare. If you are a larger site, I would recommend using reCaptcha or something similar in addition to this.

  127. patrick says:

    @stan: as I mentioned to Peter as well, using javascript won’t do anything if a spider is filling out the form. That’s why using your server-side script is the only way to go.

  128. CSS says:

    Got a nice blog site. keep blogging.

  129. Missu says:

    Very clever. Thanks for the tip.

  130. simon says:

    thanks for the post.

  131. Abdu says:

    To all these people trying to debunk the method, it’s a DETERRENT. It’s not a 100% complete solution. You can always use a captcha as well plus anything else. Together, these methods become very effecive.

    This css solution is very simple and has no cost to the commenter.

    “uh A hidden field set to a value would do the exact same job with less DOM cputime being taken up…”

    cpu time is very very negligible. It’s the last thing you worry about. A script can easily detect if an input field is hidden by the HIDDEN attribute but a lot more difficult by a css method since with css your limit is your imagination. There are tons of ways to make an element not display.

    As for the idea that a spammer would manually tweak his script for YOUR form, only worry about it if your site is very popular. No spammer is going to spend time for a form which gets very few hits.

    cheers

  132. Renee says:

    I am new to php, so could you show me the script you were speaking of for process.php? And also, when I clicked on the link above to “view the actual page”, I got a 404 Not Found error.
    This is great, I love learning these tricks. Thank you for sharing.
    Renee

  133. Thanks a lot buddy !

    I have bookmarked this blog post ……

    Spam is a “BIG HEADACHE”……….

  134. Stef says:

    thanks for the great tip – I’ll def give it a try – anything to help reduce spam is worth the effort

  135. Abramovicl says:

    Hi , i have some questions about you desing
    maybe you can give designer contacts?

  136. Pingback: Stop form spam with CSS | breakthrough design

  137. Pingback: Combat Form Spam with CSS | breakthrough design

  138. I am not sold on this idea, it is quite easy to break, not accessible but it is simple. I share the enthusiasm about stopping the spammers thou!

  139. Ali says:

    Thank you for sharing this info..

  140. Bruno says:

    I was so frustrated beacuse I couldn`t resolve this issue. Then I found your site in google and problem is solved. Thanks!

  141. Pingback: Fighting spam with css | You belong with us

  142. Paul j. says:

    Love this. Will give it a try. :)

  143. Helen says:

    Very nice!
    Thanks for the tip.

  144. JustinC says:

    I’ve been using this method for a while now. However, today I ran into a problem with it. I had a valid customer that was using IE8 and Google Toolbar with AutoFill turned on. He would get booted unless he turned AutoFill off. Anyone have this issue before or know how to remedy it?

  145. Bill A. says:

    Can’t thank you enough for this simple but brilliant solution!

  146. Derek says:

    This trick can be used to post a straight email address as well, using the same styles as above, like this: name[div class='special']sp@m[/div]@web[div class='special']sp@m[/div]site.com

  147. Great Solution, I’d love to use it only I can’t download the process.php snippet, the link no longer works..

    :(

  148. Pingback: I get no spam. :) « The Meanderings of Tony Shadwick

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>