2005-09-19

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.

2005-09-16

IE doctype prolog and strict mode

A week and a half ago I wondered what IE 7 would do if you would have comment before the doctype. IE 6 is thrown in quirks mode when you have got anything before the doctype. John A. Bilicki commented on the IEBlog that it would throw IE 7 in quirks as well.

There is a new post on IEBlog on the <?xml> prolog, strict mode, and XHTML in IE by Chris Wilson where he writes:

I realized as I read through the comments to my last blog post that I forgot to mention one important item that was in my presentation. We have fixed the DOCTYPE switch so it will skip an XML prolog, so that valid XHTML can be handled in strict compliance mode rather than quirks mode.

2005-09-15

‘Remember me’ disabled in comments

I've disabled the ‘Remember me’ option in the comments form for now. There is a problem with cookies either form Firefox extensions or Blogger. Thanks to Jhon for pointing this out. This Sunday I've got time to fix this problem. I might add some new features as well.

Update 2005-09-18: problem solved.

2005-09-08

Select element filter user script (2)

I addressed the usability issue of the select element filter user script for Greasemonkey. The list is no longer accidentally gets filtered on the text value of the selected option. I now always show the select control which is a much better way of showing the selected option.

Screenshot

There are still a few points that need attention (positioning for example). I'll post a new version later this month.

Introduction of this script can be found in a previous post.

Update 2005-10-04: improved version is available.

2005-09-07

Experimental select element filter user script

I got the idea for this Greasemonkey user script at work. We use a financial system with a HTML interface. The hour registration page has a fairly large project list. The items in the list are formatted this way: “Project code, client name abbreviation, project name”. I thought it would be a big help if I could select a project just by typing a part of the project name.

The select element filter user script was born. As the title of this post states, it is still experimental. It only converts select elements with more than 20 options, you're free to change that number if you like.

Try this script if you think it is useful to. I suggest not to use it on every page for now. There is still a small usability issue that needs to be addressed, but it works fine on select list of which you know the content. If you have any suggestions, questions or remarks, just let me know. I'll post an improved version later this week.

Update 2005-10-04: improved version is available.