Adding Basic Captcha Protection on your Shopify Blog

Highlighted
Shopify Staff
Shopify Staff
1 0 3

Hey all!

If you run a blog, you know that SpamBots can be the bane of any blog's existence. We have an awesome workaround you can implement in about 5 minutes that will add basic captcha protection to all of your blog posts!
 

1) Go to article.liquid under Themes > Template Editor

2) Add this code to the very top of the file, starting on line 1:

 

<script type="text/javascript">
     $(document).ready(function() {
   	   var n1 = Math.round(Math.random() * 10 + 1);
     	   var n2 = Math.round(Math.random() * 10 + 1);
   	   $("#question").val(n1 + " + " + n2);
  	   $(".comment-form").submit(function (e) {
          	   if (eval($("#question").val()) != $("#answer").val()) {
                     $("#answer").css('box-shadow', '0px 0px 7px red');
              	     e.preventDefault(); 
          	   } 
     	   });
    });
 </script>

It should look like this:

3) Add the following code in the form at the end, but before the submit button (default is line 88):

<div>
        <br/>How much is: <input type="text" disabled="disabled" id="question"/>
        <br/>Answer:* <input type="text" id="answer"/>
</div>

Make sure you save your changes, and the finished product will look like this:

 

Happy blogging, everyone! :)


Tim Anderson
Shopify | Guru Pod Lead

3 Likes
Highlighted
Shopify Expert
10007 116 1817

Any tip to reduce some spam is a good! Keep em coming.

The drawback to this method of course is that it assumes

  • that the spambot does not already know the post url,
  • that the spam-bot is filling in the data within the rendered page (rather than just posting to the url),
  • and that it's running JavaScript. 

You might get lucky on the first one, but the others will be hit and miss. This approach could be made a little (not a lot) stronger if you use JavaScript to add the entire form post load. At least if the bot was not running JavaScript they would not see the post url or form fields for harvesting.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
27 0 4

Jason, you are definitely right.

This solution was put together to stop some of the less intelligent bots while a smarter solution is built. 

This is something that is being looked into, and we hope that a solution that is up to Shopify's standards is able to be released.

 

Hang tight :)

Julian Nadeau

Cheers! Julian Nadeau Developer, Shopify Mobile http://shopify.ca
1 Like
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
27 0 4

Hey everyone!

We're proud to say that our spam filtering is now in a much better state!

Previously, we had been marking the comment as spam, but letting it stay in the comments list. This was creating the unwanted noise.

Now, when marked as spam, it is filtered from the list on the next refresh. These comments still exist, just in case a comment is marked as spam accidentally

To view the comments marked as spam, click "Filter blog comments" and change the comment status to spam. (like the image below).

Image showing how to mark comment status as spam

 

Julian Nadeau :)

Cheers! Julian Nadeau Developer, Shopify Mobile http://shopify.ca
0 Likes
Highlighted
New Member
11 0 0

Hi Julian,

Thats nice, but how do I delete these all at once?! 

And can it be prevented?

0 Likes
Highlighted
New Member
11 0 0

Also I tried the Captcha Protection, but the question cel doesn't work, so the visitor can't tell what the answer should be?!

Please help and get me a solution! The Spam is really annoying. 

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
27 0 4

Hi Frank,

With regards to your question about the question cell, I would have to see the code you are using to tell you why its not woking. The only issues I could see without looking is that you are not importing JQuery or you have not made the class of the form "comment-form" or made the id's the ones used in the code.

With regards to marking them all as spam, simply click the checkbox on each "spam" comment and then click bulk action > "Mark as Spam". 

Bulk Action > Mark As Spam

You are more than welcome to "Delete" them, but I would advise against that. We employ a complicated spam detection in the background that learns what spam is the more you mark comments as spam. Ideally, no spam should show up on your blogs as it should be automatically marked as spam (and hidden in the admin). 

Essentially what we do for spam protection is automatically mark spam comments as spam and hide them in a "spam folder" in the admin (just in case our automatic protection made a mistake). Sometimes a spam comment gets through, and its kinda sucks... but if you mark it as spam, then the service we employ will learn and mark future similar comments as spam automatically!

Unfortunately, spam is not something that can every be fully stopped. Even with advanced captcha systems spam will get through. After a bit of research, our team decided this "learning spam" firewall approach would be the best approach :)

 

Hope this helps!

Julian

 

Cheers! Julian Nadeau Developer, Shopify Mobile http://shopify.ca
0 Likes
Highlighted
New Member
45 0 0

Awesome, is there any way to implement this on the cart so that the answer must be entered before the checkout button will work? :)

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
27 0 4

Yes there would be. If you use the code below (assuming your cart form as an id that is "cartForm"), and the inputs above, you should be able to implement this in the cart.

<script type="text/javascript">
     $(document).ready(function() {
   	   var n1 = Math.round(Math.random() * 10 + 1);
     	   var n2 = Math.round(Math.random() * 10 + 1);
   	   $("#question").val(n1 + " + " + n2);
  	   $("#cartform").submit(function (e) {
          	   if (eval($("#question").val()) != $("#answer").val()) {
                     $("#answer").css('box-shadow', '0px 0px 7px red');
              	     e.preventDefault(); 
          	   } 
     	   });
    });
 </script>

Can I ask as to why this would need to be implemented in the cart? Adding something like this would only deter people from buying. Any extra steps in the purchase process will result in a decline in customers that purchase.

 

Julian Nadeau
 

Cheers! Julian Nadeau Developer, Shopify Mobile http://shopify.ca
0 Likes
Highlighted
New Member
45 0 0

You are right. I was not thinking it all the way through. There is a long story behind it but now that I rethink it, it is not really necessary. Thanks :)

0 Likes