Spam emails from a form on a website can be so annoying and are a pretty common occurrence for clients using NewsCycle Digital. The reason being, that there really isn’t a straightforward easy way to add Google’s CAPTCHA to a form. NewsCycle Digital has a pbs:captcha tag in their documentation, but I was told that it is really outdated and I should try and implement the Google version. So, I did… try, that is, to implement Google Captcha. I don’t know if it was a Monday, or if I was lacking caffiene, but after several hours of trying this I wasn’t having any success. There had to be a better way. Not only that, why am I trying so hard to implement one of the most annoying features ever to a form submitter?! There had to be another way. I introduce to you the “I am Human Javascript Switcheroo” solution. Yes, that is a technical term. It is easy to set up, user-friendly, and so far, works great! Here is an example of a form we are starting with:

[%{comment=1}
<!--
// ================================================================================
//
// File: contactForm.pbo
// Desc: Contact Form Example
// Author: Kara Noreika
// Date: APR 6/2014
//
// Mods:
//
// ================================================================================
-->
%]
<div id="CommentsArea" >
<div id="CommentsContent" class="ui-widget ui-widget-content ui-corner-all PadAll SpaceBottom">
<form id="contactForm" name="contactForm" action="/apps/XSendMail.dll" method="post">
<input type="hidden" name="body" value="" />
<input type="hidden" name="fromname" value="<%sitename$k%> Letter to Editor Form" />
<input type="hidden" name="lang" value="ENG">
<input type="hidden" name="nohtml" value="0">
<input type="hidden" name="noreceipt" value="1">
<input type="hidden" name="msg" value="">
<input type="hidden" name="REDIRECT_URL" Value="/section/<%currmaincategory%>9909">
<input type="hidden" name="SUBJECT" value="Contact Form" />
<input type="hidden" name="To" value="kara@tamberra.com" />
<input type="hidden" name="objectclass" value="1">
<input type="hidden" name="validatekey" value="<pbs:!validatetag>">
<fieldset id="contact-info" class="align-fields">
<div class="field">
<label><span class="formcat FloatLeft">Name:</span></label>
<span id="errorMessageName"></span><br/>
<input id="Name" class="txtbox" type="text" value="" name="Name"/>
</div>
<div class="field">
<label><span class="formcat FloatLeft">Email Address:</span></label>
<span id="errorMessageEmail"></span><br/>
<input id="Email_Address" class="txtbox" type="text" value="" name="Email_Address"/>
</div>
<div class="">
<label><span class="formcat FloatLeft">Message:</span></label>
<span id="errorMessageBox"></span><br/>
<textarea id="Message" class="ReqBox" rows="12" name="Message" style="width:460px;"></textarea>
</div>
<div>
<label>&nbsp;</label>
<input name="Submit" type="submit" value="Submit" id="contactSubmitButton" class="SubmitBtn" />
</div>
</fieldset>
</form>
</div>
</div>
You can see my email address set up in the hidden To input field.
<input type="hidden" name="To" value="kara@tamberra.com" />

This is what causes the spam problem. Bots can easily target the To field and scrape the email address, which will then get bombarded by spam. The “I am Human Javascript Switcheroo” works, because we are going to put an email address that we setup for the sole purpose of gathering spam in the To field, then use a radio button question to determine if the user is human (or whichever type of question you would like to use to verify this) and add the real email address in javascript that gets switched out with the spam email address we set up on form submission.

email form



Step 1: Change To field to a spam email catching address

We will set up a dummy gmail address and then add it to the To input field. For example:

<input type="hidden" name="To" value="ourspamcatcher@gmail.com" />

Step 2: Create a radio button question

Add a question at the bottom of the form. For example, we usually put: Please help us prevent spam by answering this question: I am a spambot I am a human By default the I am a spambot radio button is selected, and the form won’t be submitted until the user selects I am a human. We use the JQuery Validate plugin for form validation and include this question as part of the validation. Form validation is a much larger topic than this, so for now we will stick the email issue.

<div>
<label>Please help us prevent spam by answering this question:</label><br/>
<input type="radio" name="sp_question" value="0" checked />I am a spambot.<br/>
<input type="radio" name="sp_question" value="1" />I am human. <span id="errorMessageSpam"></span>
</div>

Step 3: Add JS to switch email addresses on submit

At the bottom of the form, we add some javascript that checks that the I am human radio button is selected on form submission. If it is, the code proceeds to switch out the dummy spam email address (first value) with my real email address (second value).

<script type="text/javascript">
$("#contactSubmitButton").click(function() {
formSubmission("#contactForm");
});
function formSubmission(form){
val = $("input[name='sp_question']:checked").val();
if (val > 0){
//update the email this is submitted to
$("input[name='To']").val("ourspamcatcher@gmail.com,kara@tamberra.com");
}
form.submit();
}
</script>
Our final form looks like this:
[%{comment=1}
<!--
// ================================================================================
//
// File: contactForm.pbo
// Desc: Contact Form Example
// Author: Kara Noreika
// Date: APR 6/2014
//
// Mods:
//
// ================================================================================
-->
%]
<div id="CommentsArea" >
<div id="CommentsContent" class="ui-widget ui-widget-content ui-corner-all PadAll SpaceBottom">
<form id="contactForm" name="contactForm" action="/apps/XSendMail.dll" method="post">
<input type="hidden" name="body" value="" />
<input type="hidden" name="fromname" value="<%sitename$k%> Letter to Editor Form" />
<input type="hidden" name="lang" value="ENG">
<input type="hidden" name="nohtml" value="0">
<input type="hidden" name="noreceipt" value="1">
<input type="hidden" name="msg" value="">
<input type="hidden" name="REDIRECT_URL" Value="/section/<%currmaincategory%>9909">
<input type="hidden" name="SUBJECT" value="Contact Form" />
<input type="hidden" name="To" value="ourspamcatcher@gmail.com" />
<input type="hidden" name="objectclass" value="1">
<input type="hidden" name="validatekey" value="<pbs:!validatetag>">
<fieldset id="contact-info" class="align-fields">
<div class="field">
<label><span class="formcat FloatLeft">Name:</span></label>
<span id="errorMessageName"></span><br/>
<input id="Name" class="txtbox" type="text" value="" name="Name"/>
</div>
<div class="field">
<label><span class="formcat FloatLeft">Email Address:</span></label>
<span id="errorMessageEmail"></span><br/>
<input id="Email_Address" class="txtbox" type="text" value="" name="Email_Address"/>
</div>
<div class="">
<label><span class="formcat FloatLeft">Message:</span></label>
<span id="errorMessageBox"></span><br/>
<textarea id="Message" class="ReqBox" rows="12" name="Message" style="width:460px;"></textarea>
</div>
<div>
<label>Please help us prevent spam by answering this question:</label><br/>
<input type="radio" name="sp_question" value="0" checked />I am a spambot.<br/>
<input type="radio" name="sp_question" value="1" />I am human. <span id="errorMessageSpam"></span><br/><br/>
</div>
<div>
<label>&nbsp;</label>
<input name="Submit" type="submit" value="Submit" id="contactSubmitButton" class="SubmitBtn" />
</div>
</fieldset>
</form>
</div>
</div>
<script type="text/javascript">
$("#contactSubmitButton").click(function() {
formSubmission("#contactForm");
});
function formSubmission(form){
val = $("input[name='sp_question']:checked").val();
if (val > 0){
//update the email this is submitted to
$("input[name='To']").val("ourspamcatcher@gmail.com,kara@tamberra.com");
}
form.submit();
}
</script>

In Conclusion

This approach is fast, easy and gets the job done. On a sidenote, I completely get that the name “I am Human Javascript Switcheroo” is cumbersome and goofy. Leave your suggestions below of a better name and I will select a winner, change the name and credit you in this post!