How to implement Recaptcha on my blog (and avoid receive 100 spam comment a day)

At the moment, it's not possible to implement Recaptcha with the blog comment form. The alternative is to enable the more difficult captcha (as you have mentioned) via Site Settings > Captcha. Otherwise, if spam is still being submitted through the comments form or you wish to revert to the previous captcha, I recommend you enable 'Automatic Spam Detection' as well as 'Delete comments that are automatically or manually marked as spam after 24 hours.' via Modules > Comments > More Actions.

Cheers.

I am having the same issue. Clients are saying that they are repeatably unable to read the more difficult captcha and cannot therefore get comments posted. If I revert to the easier version (fine for genuine comments) I end up with hundreds of spam comments a week. With automatic deletion enabled this isn't too much of an issue but my biggest problem is that these spam comments originators DO get added into my CRM database.

Can you change things so that if a comment is marker as spam (either automatically or manually) that the originator is either not added (ideal) or deleted (if already added) to the CRM database.

As things stand I either have to stick with the more difficult captcha (and have almost no one able to comment), or move to the easier version but then spend hours every week cleaning out all the rubbish from my CRM database.

This issue has been going on for so long now it's time it got sorted! Other blog platforms have verification systems that work and are readable. ReCaptha woudl seem to be the answer so why isn't it available for blog comments??

As an alternative to captcha look at the thread and my post here: http://forums.adobe.com/message/6034398#6006649

Liam suggested using a JS alternative which has taken my blog spam comments to zero! It does take a little JS knowledge to do it isn't difficult.

Lynda

Thanks for th erply Lynda. Sounds like your solution would work but I had a crack at the coding and failed. I have no JS experience, gave iot my best shot but obviously screwed up somewhere. Thanks anyway.

Hi Pete,

If you post your blog comment code here (before you edited it) I will see if I can help you get it corrected and working.

Lynda

Lynda,

That's incredibly nice of you! Below is the code for the "Blog Post Layout" template...which I assume is what's needed. I was smart enough to copy the original code before I mucked around changing it, so this is the original.

Thanks for any help you can provide...this thing is doing my head in!

Cheers

Pete

<div class="blog-post">

<h2 class="post-title"> {tag_blogposttitle_nolink}  {module_twittertweet, url="{tag_itemurl_withhost}", count="none", text="RT @ConusBusiness"}</h2>

<div class="post-details"> {tag_blogpostauthor} - {tag_blogpostdate} </div>

<div class="post-body"> {tag_blogpostbody}

<div class="links"> <a href="#comments">Comments ({tag_commentcount})</a> | <a href="#trackbacks">Trackbacks ({tag_trackbackcount})</a> | {tag_permalink}</div>

</div>

<!-- BEGIN #comments -->

<a name="comments"></a>

<div class="comment-list">

<h5> Comments</h5>

{tag_commentspaged}

<hr />

<form method="post" action="/RatingProcess.aspx?OID={tag_blogpostid}&amp;OTYPE={tag_blogposttype}" onsubmit="return checkWholeForm(this)">

    <h5> Post a Comment</h5>

    <div class="form">

    <div class="item">

    <label> Name (optional)</label>

    <br />

    <input class="cat_textbox_small" name="fullname" maxlength="255" />

    </div>

    <div class="item">

    <label> Website (optional)</label>

    <br />

    <input class="cat_textbox_small" name="website" maxlength="255" />

    </div>

    <div class="item">

    <label> Email Address (optional)</label>

    <br />

    <input class="cat_textbox_small" name="emailaddress" maxlength="255" />

    </div>

    <div class="item">

    <label> Enter Word Verification in box below</label>

    <br />

    {module_captchav2}

    </div>

    <div class="item">

    <label> Your comment</label>

    <br />

    <textarea class="cat_listbox_small" name="Feedback"></textarea>

    </div>

    <div class="item">

    <input type="submit" value="Submit" />

    </div>

    </div>

    <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>

    <script type="text/javascript">

      //<![CDATA[

      function checkWholeForm(theForm) {

        var why = "";

        if (theForm.EmailAddress) if (theForm.EmailAddress.value.length > 0) why += checkEmail(theForm.EmailAddress.value);

        if (theForm.CaptchaV2) why += isEmpty(theForm.CaptchaV2.value, "Enter Word Verification in box below");

        if (why != "") { alert(why); return false; }

        return true;

      }

      //]]>

      </script>

</form>

</div>

<!-- END #comments -->

<!-- BEGIN #trackbacks -->

<a name="trackbacks"></a>

<div class="trackbacks">

<dl>

    <dt>Trackback Link</dt>

    <dd> {tag_trackbacklink}</dd>

    <dt>Trackbacks</dt>

    <dd> {tag_trackbacklist}</dd>

</dl>

</div>

<!-- END #trackbacks -->

</div>

<!-- END .blog-post -->

I am where I am because people helped me along the way and I like to give back when I am able to. I am no javascript wiz but I have been able to learn a bit along the way and when I knew nothing people helped me figure it out. =>

To explain what we are doing:

We add a class to the form:

class="data-submit"

Then we change the action of the form to data-action and add an empty action:

action="" data-action="/RatingProcess.aspx?OID={tag_blogpostid}&amp;OTYPE={tag_blogposttype}"

The completed form action:

<form method="post" class="data-submit" action="" data-action="/RatingProcess.aspx?OID={tag_blogpostid}&amp;OTYPE={tag_blogposttype}" onsubmit="return checkWholeForm(this)">

Then we add the JS which will swap the data-action for action so the form subits correctly:

function SwapAction() {

            var dataAttr = $('.data-submit').data();

            $('.data-submit')[0].action = dataAttr.action;

        }

Then we call the javascript function when the form submits:

SwapAction();

Below is all of the code put together in one email. You did have a type in your action. part way through it had: {tag_blogp osttype}  when it should be: {tag_blogposttype}.

If the code below doesn't work let me know.

 

<div class="blog-post">

 

<h2 class="post-title"> {tag_blogposttitle_nolink}  {module_twittertweet, url="{tag_itemurl_withhost}", count="none", text="RT @ConusBusiness"}</h2>

 

<div class="post-details"> {tag_blogpostauthor} - {tag_blogpostdate} </div>

 

<div class="post-body"> {tag_blogpostbody}

 

<div class="links"> <a href="#comments">Comments ({tag_commentcount})</a> | <a href="#trackbacks">Trackbacks ({tag_trackbackcount})</a> | {tag_permalink}</div>

 

</div>

 

<!-- BEGIN #comments -->

 

<a name="comments"></a>

 

<div class="comment-list">

 

<h5> Comments</h5>

 

{tag_commentspaged}

 

<hr />

 

<form method="post" class="data-submit" action="" data-action="/RatingProcess.aspx?OID={tag_blogpostid}&amp;OTYPE={tag_blogposttype}" onsubmit="return checkWholeForm(this)">

 

    <h5> Post a Comment</h5>

 

    <div class="form">

 

    <div class="item">

 

    <label> Name (optional)</label>

 

    <br />

 

    <input class="cat_textbox_small" name="fullname" maxlength="255" />

 

    </div>

 

    <div class="item">

 

    <label> Website (optional)</label>

 

    <br />

 

    <input class="cat_textbox_small" name="website" maxlength="255" />

 

    </div>

 

    <div class="item">

 

    <label> Email Address (optional)</label>

 

    <br />

 

    <input class="cat_textbox_small" name="emailaddress" maxlength="255" />

 

    </div>

 

    <div class="item">

 

    <label> Enter Word Verification in box below</label>

 

    <br />

 

    {module_captchav2}

 

    </div>

 

    <div class="item">

 

    <label> Your comment</label>

 

    <br />

 

    <textarea class="cat_listbox_small" name="Feedback"></textarea>

 

    </div>

 

    <div class="item">

 

    <input type="submit" value="Submit" />

 

    </div>

 

    </div>

 

    <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>

    <script type="text/javascript">

        function SwapAction() {

            var dataAttr = $('.data-submit').data();

            $('.data-submit')[0].action = dataAttr.action;

        }

    </script>

    <script type="text/javascript">

 

      //<![CDATA[

 

      function checkWholeForm(theForm) {

 

        var why = "";

 

        if (theForm.EmailAddress) if (theForm.EmailAddress.value.length > 0) why += checkEmail(theForm.EmailAddress.value);

 

        if (theForm.CaptchaV2) why += isEmpty(theForm.CaptchaV2.value, "Enter Word Verification in box below");

 

        if (why != "") { alert(why); return false; }

 

        SwapAction();

        return true;

 

      }

 

      //]]>

 

      </script>

 

</form>

 

</div>

 

<!-- END #comments -->

 

<!-- BEGIN #trackbacks -->

 

<a name="trackbacks"></a>

 

<div class="trackbacks">

 

<dl>

 

    <dt>Trackback Link</dt>

 

    <dd> {tag_trackbacklink}</dd>

 

    <dt>Trackbacks</dt>

 

    <dd> {tag_trackbacklist}</dd>

 

</dl>

 

</div>

 

<!-- END #trackbacks -->

 

</div>

 

<!-- END .blog-post -->

Lynda,

I won't even pretend to understand what you've done, but thanks! I copied this code into my Blog Post template and although the page looks OK it doesn't seem to be working properly.

If a comment is made and the Captcha input is incorrect there is no message to say so.

If a comment is made and the Captcha input is correct there is no message confirming the submission.

I was under the impression that this method somehow required email addresses in 2 parts rather than the "hard" captche? I can't see anywhere that being requested. At the moment it seems to be the same as it was except that now there is no message letting people know what has happened with their comment (either rejected, wrong Captcha; or accepted and comment submitted).

I really appreciate your help and know that it's my fault that it's not working but without knowing what I'm actually looking for the form to "do" I'm stumped as to how to address it.

Cheers

Pete

Hi Pete,

I am unsure what is wrong. I am a bit swamped but when I have more time I will look at a solution and post it if I find one.

Lynda

Lynda

Appreciate your help but I think you've gone above and beyond already!

Mnay thanks.

Pete

Had a moment and had to try to fix it.

You said:

I was under the impression that this method somehow required email addresses in 2 parts rather than the "hard" captche?

The original method recommended by Simon had the email in two parts, however, this method could have problems. (See Liam's post on that thread.) This idea was Liam's and I tried it and it worked.

I realized the form had a few errors. I also modified the javascript from what you had originally to what I am using on other sites. This code I tested and it worked.

Important note! When you replace the code do not use the BC Editor to upload the code. Upload the code using an FTP program or the program you use to upload your files to BC. The BC editor will remove the data attribute I believe and is why I say not to use it. You can use the Develop Tab at the top of the BC Admin if you have access to it.

Now try replacing your form code on the site with the form code below:

<form class="data-submit" action="" data-action="/RatingProcess.aspx?OID={tag_blogpostid}&amp;OTYPE={tag_blogposttype}" onsubmit="return checkWholeForm(this)" method="post">

 

 

 

    <h5> Post a Comment</h5>

 

 

 

    <div class="form">

 

 

 

    <div class="item">

 

 

 

    <label> Name (optional)</label>

 

 

 

    <br />

 

 

 

    <input class="cat_textbox_small" name="fullname" maxlength="255" />

 

 

 

    </div>

 

 

 

    <div class="item">

 

 

 

    <label> Website (optional)</label>

 

 

 

    <br />

 

 

 

    <input class="cat_textbox_small" name="website" maxlength="255" />

 

 

 

    </div>

 

 

 

    <div class="item">

 

 

 

    <label> Email Address (optional)</label>

 

 

 

    <br />

 

 

 

    <input class="cat_textbox_small" name="emailaddress" maxlength="255" />

 

 

 

    </div>

 

 

 

    <div class="item">

 

 

 

    <label> Enter Word Verification in box below</label>

 

 

 

    <br />

 

 

 

    {module_captchav2}

 

 

 

    </div>

 

 

 

    <div class="item">

 

 

 

    <label> Your comment</label>

 

 

 

    <br />

 

 

 

    <textarea class="cat_listbox_small" name="Feedback"></textarea>

 

 

 

    </div>

 

 

 

    <div class="item">

 

 

 

    <input type="submit" value="Submit" />

 

 

 

    </div>

 

 

 

    </div>

 

 

 

    <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>

    <script type="text/javascript">

        function SwapAction() {

            var dataAttr = $('.data-submit').data();

            $('.data-submit')[0].action = dataAttr.action;

        }

    </script>

    <script type="text/javascript">

//<![CDATA[

function checkWholeForm(theForm){var why = "";if (theForm.EmailAddress) if (theForm.EmailAddress.value.length > 0) why += checkEmail(theForm.EmailAddress.value);if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image"); if (why != ""){alert(why);return false;}SwapAction();theForm.submit();return false;}

//]]>

</script>

</form>

If this doesn't work for some reason please let me know and I will take a look at your site (if you post the URL.)

Lynda

Lynda,

OK...now we've really gone way beyond me! I have no idea what you mean by FTP program. I don't "upload files" to BC and do not have a Developer tab available. I had simply been copy/pasting your code in and it seems to make no difference. I still have no idea what difference I am looking for though if it isn't an email in 2 parts.

Please don't waste any more time on me. This clearly something that is well beyond my capability to solve. Thank you so much for your help and patience.

Cheers

Pete

That could be the problem. The BC editor strips out the data attribute because it isn't XHTML. I really wish BC would update the editor to allow HTML 5 code. Normally this editor is for minor tweaks and you use an external program to upload or edit the main site files.

Since you don't have the develop tab I assume you are not the BC Partner. Could your partner upload the file for you? Just a thought.

Also, it is never a waste. I have felt the same way before and people persisted and helped me through my issues I was having and I try to give back when possible.