Comment Form Style with JQuery in WordPress

By: Alexandru Vornicescu | April 11, 2009 | Customization | 5 Comments

JQuery is very popular now in WordPress used for menus, lists, form validation and it is used for comment forms style modification too.

In this post I want to show you How you can change the style of your comment forms in WordPress making more great looking using JQuery.

When comment form is selected JQeury changes the style of the forms using some of the CSS classes,changing the text, background and border form color.

HTML code:

In the comments.php file of the theme be sure you have comment form tags used for posting comments: author, e-mail, url imputs, textarea for the message and the submit button, something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="row">
  <input id="author" name="author" type="text" />
  <label for="author">Name* </label></div>
<div class="row">
  <input id="email" name="email" type="text" />
  <label for="email">Email* </label></div>
<div class="row">
  <input id="url" name="url" type="text" />
  <label for="url">Website</label></div>
<div class="row">
  <label for="comment">Message</label>
  <textarea id="comment" cols="100" rows="10" name="comment"></textarea></div>
<div class="submit">
  <button id="submit">Post comment</button></div>

CSS code:

In the style.css file you need to add some CSS classes for JQuery:

1
2
3
4
5
6
7
8
9
10

.OnFocus{
    	background: white;
    	color:#000;
    	border:solid 2px #BA5B00;
    }
.OnIdle{
    	background:#D8D8C7;
    	color: #6F6F6F;
	border: solid 2px #89897C;
    }

These classes are for changing color of background, text and border that are used by JQuery, when the form is selected the “OnFocus” class is used but when the form is not selected the “OnIdle” class is used.

Be sure to remove background, color and border style of the forms before adding the new CSS codes.

JQuery code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('input[type="text"], textarea').addClass("OnIdle");
       	$('input[type="text"], textarea').focus(function() {
       		$(this).removeClass("OnIdle").addClass("OnFocus");
    		if (this.value == this.defaultValue){
    		       this.value = '';
		}
		if(this.value != this.defaultValue){
	    	this.select();
	    	}
    	});
    	$('input[type="text"], textarea').blur(function() {
    		$(this).removeClass("OnFocus").addClass("OnIdle");
    		if ($.trim(this.value) == ''){
			this.value = (this.defaultValue ? this.defaultValue : '');
		}
    	});
});
</script>

Add this code in the header.php file of the theme, below of the </title>.

View the demo.

5 Responses:

  1. zy 11 April 2009 at 8:27 am #

    Maybe it’s just me, but I would prefer to load jQuery using wp_enqueue_script function instead.

    I would probably replace the first line with this:

  2. zy 11 April 2009 at 3:10 pm #

    Oops, missing code, hope that it appears below.

    If it doesn’t show you can check out the function here:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

  3. WPDONE 12 April 2009 at 12:59 am #

    Nice tutorial, thanks. I’m looking to create my first WP theme and I’ll need this tut.

  4. Cedosan 28 May 2009 at 6:53 pm #

    Thanks for sharing !

    For your use, I would not recommend jQuery… As there is no major call to the database.
    You can style your comment forms simply with CSS.
    Further more, for the on-blur / on-idle check this out without jQuery :
    <input type=”text” name=”email” id=”email” value=”" onblur=”if (this.value == ”) {this.value = ‘Email (requis / pas publié)’;}” onfocus=”if (this.value == ‘Email (requis / pas publié)’) {this.value = ”;}” size=”30″ tabindex=”2″ />

  5. jade cloward 9 November 2009 at 7:10 pm #

    very helpful. i like this comment form. thanks. – jade cloward (http://clowarddesign.com)


Leave a Reply