Up
Prevent Email Spam on Forms - Tamberra
Here at Tamberra, we see ourselves as professional digital problem solvers. We love a good mystery and that is what your project might be at this stage… a mystery. Who, what, where, when, why – these are all questions that we can help you answer.
Tampa, Web Development, Web Developers, Web Applications, Tampa Bay, Programmers, Newspaper Web Developer
6039
post-template-default,single,single-post,postid-6039,single-format-standard,do-etfw,woocommerce-no-js,ajax_fade,page_not_loaded,,vertical_menu_enabled,side_area_uncovered_from_content,columns-4,qode-theme-ver-7.5,wpb-js-composer js-comp-ver-5.1,vc_responsive

Prevent Email Spam on Forms

prevent Spam

16 Apr Prevent Email Spam on Forms

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:
You can see my email address set up in the hidden To input field.

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:

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.

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).
Our final form looks like this:

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!

 

 

Kara Noreika

Kara Noreika

Kara is a full-stack programmer with over 15 years of experience. She has a background in both design and programming which helps her provide right-brained solutions to left-brained problems. Kara has spoken as a technical expert regarding website accessibility to the Florida Bar and the Florida Realtor's Association. Experienced in HTML, CSS, JS, ReactJS, KnockoutJS, AJAX, PHP, Java, C#, Newscycle Digital, Polopoly, WordPress, Drupal, and more!
Kara Noreika