How to avoid bots from filling up Online forms using Spry?

I’m sure every one some day or other were annoyed while filling out the painful CAPTCHA image in the form field. I have hated it all the time and its a pain for the users to read through the image and retype it again. Here is a simple solution that I found out while working @ESRI . I’m not sure who developed this solution but it has avoided a lot of bots from filling up online forms.

The solution is to load the form when the user clicks an buttons/link basically any event that an real human can do it. The form could be

• loaded using an AJAX call. Using ur own favorite Javascript library.
• Just hide the form and then show when the user clicks on the link.

After putting up the Yahoo online status image on my web site I have been getting a lot of spam IMs to my ID and to prevent this from happening I decided to implement this method. Since I’m a big time fan of Spry I did it using that and here is how I did it.

<script src=”/spry/SpryHTMLPanel.js” type=”text/javascript”></script>

<div id=”YahooStatus”>
<a onclick=”hpanel.loadContent(’/forms/dsp_Yahoo_status.html’,{async : true}); return false;” href=”javascriot:void();”>

<h2>Get my Yahoo online status</h2>

</a>
</div>

<div id=”rpanel”></div>

<script type=”text/javascript”><!–

var hpanel = new Spry.Widget.HTMLPanel(”rpanel”,{evalScripts : true});

// –></script>

1. Initially I load up the Spryhtmlpanel.js final.
   

   <script src=”/spry/SpryHTMLPanel.js” type=”text/javascript”></script>

2. Then set up an anchor region with onclick event that pulls the page called dsp_yahoo_status.html from forms directory in to the rpanel div region.
   

   <div id=”YahooStatus”>
   <a onclick=”hpanel.loadContent(’/forms/dsp_Yahoo_status.html’,{async : true}); return false;” href=”javascriot:void();”>

   <h2>Get my Yahoo online status</h2>

   </a>
   </div>

3. The rpanel div region is the region that gets loaded with the Yahoo status.
   

   <div id=”rpanel”></div><

4. Then initialize the spry html panel widget. The evalscripts tells spry to execute any javascript inside the loaded page. This feature would help us to run validation scripts when an form is loaded instead of a normal text.
   

   <script type=”text/javascript”><!–

   var hpanel = new Spry.Widget.HTMLPanel(”rpanel”,{evalScripts : true});

   // –></script>

This way only an human would be able to view my Yahoo status. The same concept can be used for loading up forms as well and all this in just 10 line of codes.

To find more info on how to use Spry HTML panel check out this page which has better examples.

Related posts:

1. I Vote for Spry 1.6
2. How to get Exclusive online Indicators
3. When Who how..a million life question
4. Yahoo Power User