Adding Basic Captcha Protection on your Shopify Blog

Highlighted
New Member
11 0 0

Julian, the code is as follows. Can you let me know what is missing or what I am missing? Thanks!

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

<h1>{{ article.title }}</h1>
<div class="article">
	<p class="posted-by">{{ article.published_at | date: "%d %B, %Y" }}
       {% if blog.comments_enabled? %}
         <a class="comment-count" href="#comments">{{ article.comments_count }} comments</a>
         <a class="comment-leave" href="#comment-form">Leave a comment</a>
       {% endif %}</p>
    {{ article.content }}
</div>

    {% if blog.next_article or blog.previous_article %}
        <div id="article-nav">
        {% if blog.previous_article and blog.next_article %}
            {% assign separator = '&nbsp;&nbsp;|&nbsp;&nbsp;' %}
        {% else %}
            {% assign separator = '' %}
        {% endif %}
        {% if blog.previous_article %}
            <a id="article-prev" href="{{blog.previous_article}}">&laquo; vorige bericht</a>
        {% endif %}
        {{separator}}
        {% if blog.next_article %}
            <a id="article-next" href="{{blog.next_article}}">volgende bericht &raquo;</a>
        {% endif %}         
        </div>
    {% endif %}

<!-- Comments -->
{% if blog.comments_enabled? %}
<div id="comments">
	<h3>Comments</h3>
  
	<!-- List all comments -->
	<ol id="comment-list">
		{% for comment in article.comments %}
			<li{% cycle ' class="odd"', ' class="even"' %}>
			<div class="comment-title">
				<span class="comment-author">{{ comment.author }}</span>
				<span class="comment-date">{{ comment.created_at | date: "%B %d, %Y" }}</span>
			</div>
			{{ comment.content }}
			</li>
		{% endfor %}
	</ol>
  
	<!-- Comment Form -->
	<div id="comment-form">
	{% form article %}
		<h3>Leave a comment</h3>
    
		<!-- Check if a comment has been submitted in the last request, and if yes display an appropriate message -->
		{% if form.posted_successfully? %}
			{% if blog.moderated? %}
				<div class="notice">
					Thanks! We've received your comment.<br />
					It'll appear as soon as it's approved.
				</div>
			{% else %}
				<div class="notice">Successfully posted your comment.</div>
			{% endif %}
		{% endif %}

		{% if form.errors %}
			<div class="notice error">Not all the fields have been filled out correctly!</div>
		{% endif %}
    
		<dl>
			<dt class="{% if form.errors contains 'author' %}error{% endif %}"><label for="comment_author">Your name</label></dt>
			<dd><input type="text" id="comment_author" name="comment[author]" size="40" value="{{form.author}}" class="input{% if form.errors contains 'author' %} input-error{% endif %}" /></dd>

			<dt class="{% if form.errors contains 'email' %}error{% endif %}"><label for="comment_email">Your email</label></dt>
			<dd><input type="text" id="comment_email" name="comment[email]" size="40" value="{{form.email}}" class="input{% if form.errors contains 'email' %} input-error{% endif %}" /></dd>

			<dt class="{% if form.errors contains 'body' %}error{% endif %}"><label for="comment_body">Your comment</label></dt>
			<dd><textarea id="comment_body" name="comment[body]" cols="40" rows="5" class="input{% if form.errors contains 'body' %} input-error{% endif %}">{{form.body}}</textarea></dd>
		 <div>
        <br/>How much is: <input type="text" disabled="disabled" id="question"/>
        <br/>Answer:* <input type="text" id="answer"/>
</div>
      </dl>
     
    
		{% if blog.moderated? %}
			<p class="hint">Comments have to be approved before showing up</p>
		{% endif %}    
		
		<input type="submit" value="Post comment" id="comment-submit" class="button" />
	{% endform %}
	</div>
	<!-- END Comment Form -->
  </div>
{% endif %}
<!-- END Comments -->



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

Change this:

<div id="comment-form">

to this:

<div class="comment-form" id="comment-form"> 

 

The "." in this code:

  $(".comment-form").submit(function (e) {

denotes that it is looking for a "class" and not an "id". I do not know if you have CSS associated with that div, so I suggest just adding the class.

 

Hope that helps!

Julian Nadeau

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

Julian,

still it doesn't show. See below link with the contact form. 

Behind the text "How much is:" it doesn't show the question.

http://wehockey.nl/blogs/news/8305259-review#comment-form

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

Hi there Frank,

I took a look at the code and noticed a few issues.

1. When I typed the code in above, I accidentally put comment_form instead of comment-form. 

2. There was a JQuery mismatch, as your JQuery was in "no conflict" mode.

I fixed the class name and used this code instead:

<script type="text/javascript">
     jQuery(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>

Please note this line:

jQuery(document).ready(function ($) {

This will work if JQuery is in no conflict mode. 

 

I have looked on your page and the numbers now show up!

Hope that helped ;)

Julian Nadeau

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

Julian, Thx! It is fixed! :)

0 Likes
Highlighted
New Member
11 0 0

Julian,

Since the fix the blog comments exploded! All spam! 

What is happening and how can I stop this? I got like 1300 comments/spam messages which seemed to be al approved!? This is not what I like to show to my visitors! Please let me know how it can be fixed. 

Frank

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

Hi Frank,

I'm going to bring this directly to the team in charge of the blogs. We will investigate this, and get back to you shortly.

 

Sorry for the mix up, and thanks for your patience!

Julian Nadeau

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

Hi again Frank!

So I have taken a look into our back logs, and have come to a startling conclusion.Your store has had over 6300 comments in the past week. We have caught about 5000+ as spam, which means it is about an 80% catch rate.

This would be significantly better if you were not based in the Netherlands. In European countries, we are unable to fully spam check a comment due to privacy laws. There is no way around this.

We have looked into adding a captcha type service to the back end, instead of this easily avoidable method in the post, however, because all stores use the same code base, this creates a bit of a catch 22. 

At this time, I venture to suggest one of the following:

https://apps.shopify.com/disqus-integration-product-comments-reviews

http://docs.shopify.com/manual/configuration/store-customization/disqus

 

Julian

 

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

Not trying to de-rail this thread, but I am attempting to implement this same code onto a registration form in order to prevent spam registrants. I can't get the numbers to show up either. I've tried replacing the .comment-form with #create_customer which is the ID of the form, as well as tried #cusomter-register which is the ID of the containing div around the form. Would you mind taking a look and seeing if I'm doing something obviously wrong? http://www.americasboardreview.com/account/register

We're getting tons of spam registrants and I cannot find any solution to preventing this.

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

Your script in your header is failing with an error. When this happens, it will stop the rest of the scripts embedded in the page.

Specifically this part:

    <script>
        $(document).ready(function(){
          // validate the form
            $("#create_customer").validate();
          // validate the radio button options
            $('input[name="customer[note][ABOG / AOBOG]"]').rules("add", "required");
            $('input[name="customer[note][MD / DO]"]').rules("add", "required");
          
        });
    </script>

Cheers!

 

Julian Nadeau

Developer, Shopify Mobile

http://shopify.ca

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