Form Spam is something almost every website owner encounters. The most popular form of protecting your website from form spam is by using a visual image that contain text in a strange font and is usually difficult to read (CAPTCHA) so that OCR algorithms by form spam attacks cannot decipher the images.
The problem with this solution is that many users find them difficult to use.
Another Approach
Distorted text can hinder the user's experience and it can prevent users from posting a comment or completing a form. Many people have difficulty understanding the characters and retyping blurred words can become frustrating.
An innovative idea is to use CSS to create a solution that seems like a Captcha by using an image without the <IMG> tag. Instead, it uses the background image property in the CSS file. It is not impossible, but unlikely for robots to scan the HTML file, find the CSS file, compare CSS selectors, find a CSS definition, locate the image and read it using OCR algorithm. The advantage is that you can design your image anyway you want without using complicated code. Keep the exercise simple; the idea is not to frustrate the user but to stop the spam bots from successfully submitting your form. A simple ‘1 2 3 A 5 6’ image where you ask ‘write the letter you see above’ would be quick and easy enough.
Before you go ahead and implement this on your website, there are a few things to consider…
This solution works best for lower traffic websites. Tools can be developed to connect all the dots and decode the image, which would be more probable for a high profile website.
This trick only works with CSS enabled browsers, and it is not very accessibility friendly, as it would leave out users that need built-in voice for browsing. Think audience first.
Another solution is to create an extra form field and set it to display:none. A spam bot always finds the hidden field and fills it in. On the back end, the script would not authenticate or process the form if the field is filled out.
Here’s a sample code.
HTML CODE
*Anti Spam. Please fill out the following:
**Notice the field name is generic enough that spam bots won’t recognize it as something obvious such as ‘name’ or ‘display:none. The field is mandatory. Javascript is used to validate the entry”
CSS code
label.question{
display:block;
background:url(../images/question.gif) no-repeat 0 0;
height:36px;
line-height:12px;
**Notice the CSS selector is also generic enough that spam bots won’t recognize it as something obvious such as ‘CAPTCHA or ‘hidden field”
<script type="text/javascript">
function validateFormOnSubmit(theForm) {
var reason = "";
reason += validateEmail(theForm.email);
reason += validatePhone(theForm.phone);
reason += validateEmpty(theForm.realname);
reason += validateAntispam(theForm.antispam);
if (reason != "") {
alert("Some fields need correction:\n" + reason);
return false;
}
return true;
}
function validateAntispam(fld) {
var error="";
var str = "red";
if (fld.value.length == 0) {
fld.style.background = '#baaca2';
error = "You did not answer the AntiSpam Question Correctly.\n";
}
else if (fld.value.toLowerCase() != "red") {
error = "You did not answer the AntiSpam Question Correctly.\n";
fld.style.background = '#baaca2';
} else {
fld.style.background = 'White';
}
return error;
}
</script>
I'm sure there are other methods. This one just seemed to be easy to implement, and works.
It’s been almost 3 months since my last IF post. A year ago, I couldn’t imagine not posting weekly but so things change and we have to adapt.
2010 It’s been an interesting year. Old doors have opened up. I once thought that my career as a designer/web designer was a thing of the past, simply because I could not balance deadlines and a family. I guess it is all about timing… my kids are a bit older and I have more time to dedicate to projects and clients, which works out quite well.
I still dream with illustrating a children’s book someday, but at the moment I’m listening to the universe and what it wants me to do…. And it is to design … design … design! And I love it!
I do miss my daily drawings and drawing with a kid’s perspective. So I am going back to the beginning and why I started this blog 2 years ago and it is just to draw for fun, just not posting as often perhaps…
This week’s post for IF was inspired by my son. Lately, when he gets upset he says he wants to run away, of course we talk it out and he realizes that home is where he wants to be. Anyway, I thought of this little bunny packing his most precious items and some bread in his pocket (like Hansel and Gretel)… and wondering down a trail.
I hope you enjoy the post and thanks for stopping by!
A while back I wrote about the sudden identity crisis I experienced when putting together my illustration mailer. I don’t mean personal identity, although in some ways it may be, but more on a business level.
I am a graphic designer and my studio is Tenengo Design. Everyone that has done business with me knows me that way. I thought the natural thing to do was to annex the children’s illustrations to that side of the business. Well, it was very confusing, (not to mention that ADs and Editors really want to find a website that only focuses on illustration).
I finally separated the two websites, thus providing me with dual identity. My illustrations reside over at www.thomidis.com and my graphic design over at www.tenengo.com. These are some of the screen shots of the newly designed Tenengo website.
I thought it would be helpful to many people hopeful illustrators to read about my experience at the SCBWI New York Winter Conference.
I had registered for the Friday illustrator’s intensive and portfolio showcase. I knew that the conference is mostly for writers, and thought that I would benefit mostly from the illustrator’s intensive. I was right! Although now that I think of it….if they had these panelists during the Sat and Sun sessions, I would have only gone to their sessions since that is what interests me. I would have also saved the extra money for the extra day + hotel, but that’s a different point!
In any case, the panelists were all seasoned illustrators that brought a great deal of experience and knowledge about their career and their own individual path to be where they are today. I won’t tell you what they talked about since you could read that over at the SCBWI blog. I can tell you that Paul Zelinsky, Lisa Desimini and Kevin Hawkes are all amazing! The one common element they all shared is that their style changes based on the project, which I thought was contradictory of what the Art Directors say, which is ‘have a consistent and recognizable style’. Then again, having a Caldecott and other awards helps to be able to break those rules.
This was my assignment for one of the workshops. We were to illustrate Snow white and the seven dwarfs party with a twist. We were to draw the first thing that came to mind which was this:
and then we were supposed to take this idea and stretch it by POV, line, character, twist, etc.
So this is what I came up with:
At 3:00 everyone dropped of their portfolio and then we went back to listen to Art Directors from 3 major publishing houses. They talked about having that ‘Aha!’ moment when they saw something that they considered special. Of course there wasn’t a specific formula for this. It’s more of I know it when I see it. Most of the examples that they showed were truly distinctive from everything else that’s out there. Mostly because they had some humor and they were weird, quirky, or strange. One great example is the work by Red Nose Studio. Really innovative work!
I was hesitant about writing this, but as a graphic designer, I’m really against spec work. I think it devalues and degrades the profession. So I have to tell you that I was shocked when one of the Art Directors from a very large and well know publishing house mentioned asking a hopeful illustrator for spec work! This Art Director asked for several rounds of character design and layout design before being sure if the illustrator was right for the job. I have to say that this really put me off! From what I can see many illustrators struggle to make a living since it is not the most lucrative career. Many illustrators have told me that you do this for the love of art. Then, you have an experienced Art Director speaking to over 150 hopeful illustrators setting the expectation that this behavior is okay in the industry. Really wrong! Everyone’s time is valuable! I just hope that this situation is not standard for other Art Directors. Yes this illustrator got the contract and he is now published. So a happy ending indeed.
We then had a break while the ADs and Editors walked through the portfolio room. Later that evening we had the chance to look through the portfolios ourselves. Over 150 (maybe closer to 200) of them! There was a lot of talent in the room for sure. I wasn’t happy with the placement of my portfolio since they were arranged alphabetically and the portfolios with last names starting with A,B,C were right in front of the door and received the most traffic. Those with last names starting with T,U,V,W,X,Y,Z were at the back of the room and did not get much traffic. Whoever arranged the postcards put mine face down. It was somewhat disappointing.
Friday was the most exciting day! All of the writers (over 800 of them!) joined the conference on Saturday and Sunday. Therefore the content of the workshops was geared to the writers (except the one with Art Director Lauren Linn).
On Sunday the speakers addressed the future of publishing and mentioned how the industry is in flux and everyone is playing the conservative card until they know what will happen. Not a surprise!
All in all it was a great experience, but seeing the large amounts of people trying to break in (and that was just a small fraction, I’m sure) It is difficult to feel empowered and hopeful. But I’ll close on a more positive note by saying that there is no success without failure!
Thanks for reading and feel free to share your comments!
