Illustration Friday: Racing Thoughts

Stopping Form Spam

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: Write the letter you see above

<label class="question" for="question">Anti Spam. Please answer the following</label>
<input type="text" name="antispam" size="30">

**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”

Javascript Code

<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.

TMIHEALTH : Nutrition Consultant

Before I went on vacation this past summer, I completed a corporate identity design project (logo, biz cards...website>) for Tracy Mastandrea, nutrition consultant who is completely passionate and dedicated to changing lives with a unique nutrition and detox approach. This was a project really close to my heart since my family has greatly benefited from her services and expertise.

HOME PAGE:

PROGRAMS PAGE:

LOGO & BUSINESS CARD:

Aldys Caballero : Visual Artist

I recently had the pleasure of working on a logo and a website for an emerging Contemporary Christian Visual Artist. Her work is so inspiring and touching. It is truly unique!

Below are some samples of the work I created. I encourage you to visit her work and to follow her blog and FaceBook fan page.

LOGO:

HOME PAGE:

GALLERY PAGE:

IF: SPOOKY

Here's an old 'spooky' Halloween image...

and here's a newer one that's not so spooky...

At the beach...

I know that summer is over, but I'm beginning to miss it.

IF: Transportation

**UPDATE**

The image above is the finished piece image. I had to add seat belts since that was a major oversight on my part (my husband and one of you pointed that out). Even though this is an illustration and it's an imaginary world, I want to send the right message to kids. I think everyone is safe.

Well, there's still the dog... I know dogs are supposed to be in a crate or a seatbelt, but I think I'll try to have some creative license here.

Do you think an AD would require the dog to wear a seat belt or be in a crate?

Lucky me! This week's topic matches what I was working on... transportation.

This is a work in progress... I hope to post the finished piece soon.

Thanks for stopping by!