Comment Form Style with JQuery in WordPress

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:

<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:

.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:

<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 original article and demo.