Custom Blogger comments form (4): spam protection

After some problems with the regular expression I used to read cookies, I decided to do a little rewrite of the code. This cookie problem is fixed now. You'll find the new code below.

Spam protection was something I wanted to add. Too bad I didn't get it working on all my blogs in Internet Explorer (it worked fine in other browsers). I'll leave the code on this page and keep it embedded on my test blog for anyone who would like to test it. If anyone has ideas on how to get this working under Internet Explorer please let me now.

Note that you'll have to remove some lines if you want to use Blogger's spam protection and please read Blogger's help on spam protection first.

<form id="cFrm" action="http://www.blogger.com/login-comment.do" method="post">
<script type="text/javascript">
//<![CDATA[
  var expires = new Date();
  expires.setFullYear(expires.getFullYear()+1);
  function setCookie(name, value) {
    document.cookie = name +'='+ escape(value) +'; expires='+ expires.toGMTString();
  }
  function getCookie(name) {
    var key = name + '=';
    var c = document.cookie;
    var i = c.indexOf(key);
    if (i < 0) return '';
    var j = c.indexOf(';', i + key.length);
    if (j < 0) j = c.length;
    return unescape(c.substring(i + key.length, j));
  }
  function trim(text) {
    return text.replace(/^\s+|\s+$/g, '');
  }
  var bgPosted = false;
  function cFrmPost() {
    with (cFrm) {
      anonName.value = trim(anonName.value);
      anonURL.value  = trim(anonURL.value);
      postBody.value = trim(postBody.value);
      if (anonName.value == '') {
        alert('Please enter your name');
        anonName.focus();
        return false;
      }
      if (postBody.value == '') {
        alert('Please enter a comment');
        postBody.focus();
        return false;
      }
      anonURL.value = anonURL.value.replace(/^http:\/\//g, '');
    }
    bgPosted = true;
    return true;
  } 
  function bgpostLoad() {
    if (bgPosted == true) {
      if (cFrm.remember.checked) {
        setCookie('anonName', cFrm.anonName.value);
        setCookie('anonURL', cFrm.anonURL.value);
      }
      window.location.reload();
    }
  }
//]]>
</script>
<iframe style="position:absolute;left:-9999px;top:0" name="bgpost" onload="bgpostLoad()"></iframe>
<div>
  <input type="hidden" name="blogID" value="<$BlogID$>" />
  <input type="hidden" name="postID" value="<$BlogItemNumber$>" />
  <input type="hidden" name="isPopup" value="false" />
  <input type="hidden" name="iden" value="Other" />
</div>
<dl>
  <dt><label for="uname">Name</label></dt>
  <dd><input type="text" id="uname" name="anonName" maxlength="100" /></dd>
  <dt><label for="url">Homepage</label></dt>
  <dd><input type="text" id="url" name="anonURL" maxlength="100" /></dd>
<!-- START SPAM PROTECT remove comment to enable
  <dt><label for="captcha">Word verification</label></dt>
  <dd>
    <img src="http://www.blogger.com/captcha?postID=<$BlogItemNumber$>" height="70" width="200" alt="Verification image" />
    <br /><input type="text" id="captcha" name="captcha" /><br />
    This is <a href="http://help.blogger.com/bin/answer.py?answer=1203">spam protection</a>.
    Please enter the text in the image above to leave your comment.
  </dd>
END SPAM PROTECT remove comment to enable -->
  <dt><label for="comment-body">Comment</label></dt>
  <dd><textarea id="comment-body" name="postBody" cols="60" rows="10"></textarea>
<script type="text/javascript">
//<![CDATA[
  var cFrm = document.getElementById('cFrm');
  cFrm.target = 'bgpost';
  cFrm.onsubmit = function(){return cFrmPost()};
  if (document.cookie != '') {
    cFrm.anonName.value = getCookie('anonName');
    cFrm.anonURL.value = getCookie('anonURL');
  }
  cFrm.postBody.value = '';
  if (cFrm.captcha) cFrm.captcha.value = '';
  document.write(
    '</dd><dd><input type="checkbox" id="remember">'+
    ' <label for="remember">Remember me</label>'
  );
//]]>
</script>
  </dd>
</dl>
<p><input type="submit" name="post" value="Post" /></p>
</form>

How to use this code on your blog? It's simple. Search your template for </BlogItemComments>. After it you should paste the code. Now change the link to the comments. Your don't want it to point to the standard form.

<a href="<$BlogItemPermalinkUrl$>#comments">Comments (<$BlogItemCommentCount$>)</a>

You can also download an example of how to embed it in Douglas Bowman's Minima template.

Tags:

• Blogger
• Comment form
• Comments form
• Comments
• Spam
• Spam protection