2005-06-08

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

26 comments:

Anonymous said...

testing your comments

Anonymous said...

Please test commenting at Testvulsel. You'll find the same comments form over there.

Anonymous said...

Awesome script, thanks =)

Anonymous said...

Looks awesome, but could you explain where in the template I should insert this code? Should this replace the default comments code or should it be added to it? Thanks.

Anonymous said...

Just put the form on the my blog. Thanks for the code!

Anonymous said...

Yes, where in the template should I insert the code? I'd really like to use it.

Anonymous said...

Insert it where you want the form to appear...
Underneath your comments for example.
Check the source of this page for an idea!

Anonymous said...

Thanks. I finally worked it out. I had to make some adaptions in the margins in the style sheet and I had to add another label to get the post-button in the right place. But that's no problem, I've learned something again.

Anonymous said...

I've installed the form, but now I have the problem that it can't handle ascii-codes. Whenever one of my visitors types a comment with an ascii-code (like é or ë) it shows as a questionmark when the comment is posted.

Anonymous said...

@Minoes: I've checked your blog and noticed that special characters looked fine. Did you add or change the content-type header recently?

Anonymous said...

@Jasper | Have a look at your commentsform in IE! A 'bug' I encountered implementing it at my blog came up. Just type 'test' for example in the comment field and you'll notice the enlarging field.. :-\

Anonymous said...

@Hinderik: One of the many CSS bugs in IE. Try using a fixed width for the textarea (you could use a IE selector hack for it: * html textarea { width: 300px; })

Anonymous said...

yup I know and I did the first

Anonymous said...

bugje wat alleen in FF optreedt:
als je geen naam invult maar wel comment en post wordt je wel gewaarschuwd je naam in te vullen, maar de post wordt toch gedaan!

Anonymous said...

Bovenstaande gebeurt alleen met het Comment veld.
Bij een leeg Comment veld (ongeacht de inhoud van Name) gaat het wel goed.

Anonymous said...

Het is niet elegant, maar beter dan ongecontroleerd posten: http://hinderik.blogspot.com/2005/07/reageren-maar.html#112135410892790533

Anonymous said...

the above brief in English
bug in FF
leaving the Name field empty, but entering Comment and then posting returns the desired alert box, but the post gets posted anyway

Anonymous said...

Changed the submit listener. addEventListener did't return the cFrmPost() return value.
Thanks Hinderik!

Anonymous said...

hi all,
sorry, i'm just a real newbie here. back to the old question, where exactly in the template should I insert the code? i've tried it several time, but no luck at all. :(
thanks for your help.

Anonymous said...

Awesome!
Loved it!

Anonymous said...

Neat code!

Anonymous said...

I am using this script and I like the results better than the Blogger default comment page. However, I am concerned about spam. Is there any way to use Blogger's comment spam protection with this?

Anonymous said...

I've seen spam getting on sites using Blogger's regular commenting system recently. You can think of tricks to make it harder for spammers (putting your blog or post ID in a set of radio buttons where you have to select whether you are a human or a bot) but that reduces the usability of your commenting system.
I myself don't have that much spam comments, so I'll leave it this way for now.

Anonymous said...

Hello, I would like to use this code but why im seeing this >>> http://img195.imageshack.us/img195/4080/error8xl.jpg
Is some strange text in the Name and Homepage fields...

Anonymous said...

I've seen this at the office as well. I think there is a problem when Firefox etensions are using cookies. Next week I'll give it a look.

Anonymous said...

@JayBee: I now see what you mean :$ I'll include spam protection in the next version.