Let’s have a look at a nice and simple javascript effect that can improve the look and feel of a contact form.

Looking around on the net you may have noticed a few contact forms or forms in general that use to have the label written into the input value and when you click on them to write something into it, the default value disappears,  also if you enter nothing when clicking outside the input field the default value appears back.

This is a quite simple javascript effect that has a great impact on style and look of even the simplest contact form.

We will use MooTools javascript library to achieve this effect.

Lets’ say we have a basic email subscribe form:

<form action="#" method="post">

email : <input type="text" name="email" />

<input type="submit" name="submit" value="SUBSCRIBE" />

</form>

We have to embed the default ‘email’ text into the input field and we can use the ‘rel’ attribute to do it in this way:

<form action="#" method="post">

<input type="text" name="email" rel="email" />

<input type="submit" name="submit" value="SUBSCRIBE" />

</form>

We now can add an ‘id’ to the input tag to easily retrieve it from javascript code:

<form action="#" method="post">

<input id="form_email" type="text" name="email" rel="email" />

<input type="submit" name="submit" value="SUBSCRIBE" />

</form>

Now let’s add some javascript coding, rember to include the mootools library into your page header section:

<script type="text/javascript">

function doInit()
{
$('form_email').set('value', $('form_email').get('rel');
}

window.addEvent('domready', doInit );

</script>

This piece of code will run at DOM ready and will set the ‘value’ field of ‘form_email’ element to the value of its ‘rel’ attribute.

We now need some more coding to make the default value disappear if the user clicks into che field and reappear if the user wrote nothing into it when clicking outside.

We will use the ‘focus’ and ‘blur’ events this way:

<script type="text/javascript">

function doInit()
{
$('form_email').set('value', $('form_email').get('rel');

$('form_email').addEvent('focus',function() {
if(this.get('value') == this.get('rel')) this.set('value','');
});

$('form_email').addEvent('blur',function() {
if(this.get('value') == '') this.set('value',this.get('rel'));
});
}

window.addEvent('domready', doInit );

</script>

As you may notice on ‘focus’ we will clean the ‘value’ attribute if it is equal to the ‘rel’ one, while on ‘blur’ we will set the ‘value’ to ‘rel’ if the user entered nothing.

This is all, a few lines of code that can improve user experience so much and make your form look more professional.

Tags: coding, javascript, mootools

The Author : WPstudios

WPstudios is a graphic and coding agency specialized in web design, print design, logo and branding, wordpress customization, PHP and Javascript coding, 3D graphic.

This entry was posted on Thursday, July 2nd, 2009 at 14:33 and is filed under How To. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.