Sometimes, We Write Stuff...

Jazz Up Your Forms With MooTools Pt. 1

Posted in: CSS, Javascript, Mootools, Tutorials

I can't promise anything, but I plan on putting out at least one tutorial a month. For my very first one, we'll be dealing with MooTools and contact forms.  It's a bit lengthy, so I'm going to be breaking this up into two posts. There are four main things we'll tackle:

• Animated field highlighting
• Displaying/hiding instructions for each input field
• Live comment previewing
• Auto-resizing of both the comment preview and it's corresponding textarea input

This first tutorial will focus on the animated field highlighting and the display of the instructions messages.   Check out the demo here. Please note, this demo requires the latest beta version of MooTools.

First, the HTML form

<form action="#your_processor" method="post" name="comm_form" id="comm_form">
     
     <fieldset>
            
            <legend>Form Magic - Demo 1:</legend>
      
            <div class="fieldbox">
                  <label for="theName">Name:<span>*</span><br />
                  <input name="form_name" type="text" value="your name" size="44" id="theName" /></label>
                  <p class="field_desc">You guessed it... your name goes here.</p>
            </div>
            
            <div class="fieldbox">
                  <label for="theURL">Website: <br />
                  <input name="form_url" type="text" value="#" size="44" id="theURL" /></label>
                   <p class="field_desc">Have a website? Put it here.</p>
            </div>
            
             <div class="fieldbox">
                  <label for="email">Email:<span>*</span><br />
                  <input name="form_email" type="text" value="your email" size="44" id="email" /></label>
                  <p class="field_desc">We promise, we won't share your address with ANYONE.</p>
            </div>
      
            <div class="fieldbox">
                  <label for="message">Message:<span>*</span><br />
                  <textarea name="form_message" cols="38" rows="6" id="message">Your comment</textarea></label>
                  <p class="field_desc">Type your comment here... this box will auto expand!  <br /><br /><strong>Allowed tags:</strong> &lt;p&gt;, &lt;strong&gt;, &lt;em&gt;, &lt;pre&gt; </p>
            </div>
            
            <p><span>*</span> - denotes required fields  </p>
            
    </fieldset>
            
    <button class="buttons" type="submit">Send</button>
      
</form>

Yeah, it's just a basic form. The only difference is that I've wrapped each of  the labels in a div with a '.fieldbox' class.  (My apologies to all you extra markup haters...but it's really not a big addition, IMO.)

Next, let's examine the CSS

#comm_form {
	width: 519px;
	margin:12px auto;
	padding: 12px;
	font-family: "Lucida Grande", "Times New Roman", Times, serif;
	background-color: #405953;
	position: relative;
	color: #9CBD84;
}

#comm_form input, #comm_form textarea {
	background-color: #64796b;
	border: none;
	font-size: 13px;
	padding: 3px;
	width: 474px;
	color: #ffffff;
}

#comm_form input {
	width: 290px;
}

#comm_form span {
	color: #FF6600;
}

#comm_form legend {
	font-size: 18px;
	padding: 3px;
	margin-right: 4px;
}

#comm_form fieldset {
	padding: 10px;
	margin-bottom: 12px;
}

#comm_form label {
	display: block;
	padding: 4px;
	font-weight: bold;
	font-size: 14px;
}

#comm_form .field_desc {
	position: absolute;
	text-align: center;
	top: 42px;
	right: 22px;
	width: 150px;
	font-size: 13px;
	border: 1px dotted #64796b;
	visibility: hidden;
	padding: 10px;
	background-color: #384f49;
	font-family: Arial, Helvetica, sans-serif;
}	

/* button styling */
.buttons {
	background-color: #4f7068;
	border-width: 2px;
	border-color: #64796b;
	border-style: solid;
	text-decoration: none;
	text-align: center;
	padding: 3px 5px 2px;
	cursor: pointer;
	width: 90px;
	color: #C0BD57;
	position: relative; 
	left: 4px;
	margin-bottom: 12px;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 14px;
}

As you can see, most of the CSS is just some basic form styling I've chosen to use.  Do pay attention to the following points of interest, though:

• I've set the form itself to be relatively positioned.  This is so I can absolutely place the 'instructions' where I want inside the form.  (Obviously, you can easily make changes to put the instructions wherever you want...)
• I've also made sure to set the text color and the background color of the form inputs (and the textarea) to the same color I am using in the javascript (below).

Now, let's check out the javascript

var form_items = $$('div.fieldbox');
	
//loop through each 'fieldbox' div
form_items.each(function(element, index) {

      var theDesc = element.getElement('.field_desc');
      var theLabel = element.getElement('label');
      var theInput = element.getElement('input');
      
      //handle the textarea
      if(theInput == null){
            var theInput = element.getElement('textarea');	
      }
      
      //set up animation for description box
      var desc_fx = new Fx.Styles(theDesc, {
                 duration:250, 
                 transition: Fx.Transitions.Quad.easeOut, 
                 wait:false
      });
      
      //set up animation for input/textarea
      var field_fx = new Fx.Styles(theInput, {
                 duration:250, 
                 transition: Fx.Transitions.Quad.easeOut, 
                 wait:false
      });
      
      //hide description box (immediately)
      theDesc.setStyle('opacity',0);	 
      
      theInput.addEvents({
            'focus': function(){
                  desc_fx.start({
                  'opacity': 1
                  });
                  
                  field_fx.start({
                  'background-color': '#d8eedf',
                  'color': '#000000'
                  });
            },
            
            'blur': function(){
                  desc_fx.start({
                  'opacity': 0
                  });
                  
                  field_fx.start({
                  'background-color': '#64796b',
                  'color': '#ffffff'
                  });
            }
            
      });
      

});

Again, there's really not much here – chances are, you can probably see what's going on already just from the comments in the code.  But just in case, I'll break it down into parts to help it all sink in:

Javascript Breakdown

var form_items = $$('div.fieldbox');
	
//loop through each 'fieldbox' div
form_items.each(function(element, index) {

The code above just gets all the .fieldbox divs and sets them up as 'elements' to use in mooTools.

var theDesc = element.getElement('.field_desc');
var theLabel = element.getElement('label');
var theInput = element.getElement('input');
      
//handle the textarea
if(theInput == null){
      theInput = element.getElement('textarea');	
}

The block of code above just sets up things we want to 'mess with' into familiar-named variables.  I basically am doing this so they're easier for me (and you) to read and work with.  Also notice the if() statement -- as the comments note, I'm handling the case of a textarea here.

//set up animation for description box
var desc_fx = new Fx.Styles(theDesc, {
	     duration:250, 
	     transition: Fx.Transitions.Quad.easeOut, 
	     wait:false
});

//set up animation for input/textarea
var field_fx = new Fx.Styles(theInput, {
	     duration:250, 
	     transition: Fx.Transitions.Quad.easeOut, 
	     wait:false
});

//hide description box (immediately)
theDesc.setStyle('opacity',0);	

Above, I'm setting up the style animations for both the instructions box and the input/textarea fields.  I'm choosing to separate them, since I may want to do different things to each at some point.  I'm also initializing the opacity of each instruction message here to 0.

theInput.addEvents({
	'focus': function(){
		desc_fx.start({
		'opacity': 1
		});
		
		field_fx.start({
		'background-color': '#d8eedf',
		'color': '#000000'
		});
	},
	
	'blur': function(){
		desc_fx.start({
		'opacity': 0
		});
		
		field_fx.start({
		'background-color': '#64796b',
		'color': '#ffffff'
		});
	}
	
});

And finally in the block of code above, I'm adding focus/blur events to each of our inputs. On focus, the input (or textarea) changes to a specified color - and the appropriate instruction is revealed.  The opposite happens when the field loses focus (blur)...

Conclusion

There... that wasn't too bad, right?  I'm sure there are probably better ways to do this, so feel free to share your thoughts! Stay tuned for the next part of this tutorial, when I explain how to make an auto-expanding textarea AND live comment preview.

Download/Demo