Custom Blogger comments form (3)

Update 2005-09-18: Please see Custom Blogger comments form (4): spam protection. The article below is old.

This is the comments form I'm currently using. Like I wrote two days ago, this version doesn't show the Blogger screen after you post a comment. In this version I've added a 'remember me' function which uses cookies to store the data. When Javascript is disabled posting the form still works. You'll get the Blogger screen in that case though (duh!).

For those who like to copy and paste:

<form id="cFrm" action="http://www.blogger.com/login-comment.do" method="post">
<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>
  <dt><label for="comment-body">Comment</label></dt>
  <dd><textarea id="comment-body" name="postBody" cols="60" rows="10"></textarea></dd>
<script type="text/javascript">
//<![CDATA[
  document.write('<dd><input type="checkbox" id="remember"> <label for="remember">Remember me</label></dd>');
//]]>
</script>
</dl>
<script type="text/javascript">
//<![CDATA[
  var bgPosted = false;
  var cFrm = document.getElementById('cFrm');
  cFrm.target = 'bgpost';
  cFrm.onsubmit = function(){return cFrmPost()};
  if (document.cookie != '') {
    cFrm.anonName.value = unescape(document.cookie.replace(/^.*anonName=?([^;]*);?.*$/, '$1'));
    cFrm.anonURL.value = unescape(document.cookie.replace(/^.*anonURL=?([^;]*);?.*$/, '$1'));
  }
  cFrm.postBody.value = '';
  function cFrmPost() {
    with (cFrm) {
      anonName.value = anonName.value.replace(/^\s+|\s+$/g, '');
      anonURL.value = anonURL.value.replace(/^\s+|\s+$/g, '');
      postBody.value = postBody.value.replace(/^\s+|\s+$/g, '');
      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) {
        var expires = new Date();
        expires.setFullYear(expires.getFullYear()+1);
        document.cookie = "anonName=" + escape(cFrm.anonName.value) + "; expires=" + expires.toGMTString();
        document.cookie = "anonURL=" + escape(cFrm.anonURL.value) + "; expires=" + expires.toGMTString();
      }
      window.location.reload();
    }
  }
  document.write('<iframe style="position:absolute;left:-9999px;top:0" name="bgpost" onload="bgpostLoad()"></iframe>');
//]]>
</script>
<div class="buttons">
  <input type="submit" name="post" value="Post"/>
</div>
</form>

Update: You might want to have a link to the standard blogger.com form when you use this.

Update 2005-07-03: Changed a few things: unescaped the data read from cookie, stripped http:// from the URL (Blogger simply adds http:// to the URL regardless if there already was a protocol) and removed mailto: (because it did't work).

Update 2005-07-13: Changed the submit listener. addEventListener did't return the cFrmPost() return value.

Update 2005-07-16: 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>

Update 2005-07-19: how to embed it in Douglas Bowman's Minima template.

Update 2005-09-18: See Custom Blogger comments form (4): spam protection

Tags:

• Blogger
• Comment form
• Comments form