The blank input field sometime makes me confused what I should enter.
That’s why user-frendly website has some example text displayed by gray color.
It not so difficult to make, and I think almost all Crossmedia user already know how to implement it into the campaign.
Here is one example by using jQuery.
1. Layout items
Just drop some input fields, and assign them to the database column.
2. Check the name
Because this tip identify each input field by class name, so you need to check the exact name by display preview of the campaign page. Then add identical class name by using another jQuery,
To do so, you need to know the name of each input fields. You can check it by using FireBug with FireFox. or even you can simply check the code of preview page.
3. Add script
Here is the main part of jQuery script you need to add.
$(".focus1").focus(function(){
if(this.value == "Company Name"){
$(this).val("").css("color","#000");
}
});
$(".focus1").blur(function(){
if(this.value == ""){
$(this).val("Company Name").css("color","#969696");
}
});
It because this tip require to have default value for each input fields, so I give the value by script as well. Entire of script looks like below.
<script type="text/javascript">// <![CDATA[
$(function(){
$('input[name="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"]').addClass('focus1');
document.dsmf_form.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.value = "Company Name";
$('input[name="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"]').addClass('focus2');
document.dsmf_form.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.value = "Your Name";
$('input[name="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"]').addClass('focus3');
document.dsmf_form.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.value = "example@example.com";
$(".focus1").focus(function(){
if(this.value == "Company Name"){
$(this).val("").css("color","#000");
}
});
$(".focus1").blur(function(){
if(this.value == ""){
$(this).val("Company Name").css("color","#969696");
}
});
$(".focus2").focus(function(){
if(this.value == "Your Name"){
$(this).val("").css("color","#000");
}
});
$(".focus2").blur(function(){
if(this.value == ""){
$(this).val("Your Name").css("color","#969696");
}
});
$(".focus3").focus(function(){
if(this.value == "example@example.com"){
$(this).val("").css("color","#000");
}
});
$(".focus3").blur(function(){
if(this.value == ""){
$(this).val("example@example.com").css("color","#969696");
}
});
});
// ]]></script>
4. Add CSS
I also change the color of text by using CSS. Here is the code.
.focus1 {
color: #969696
}
It will help visitor, and hopefully they won’t be confused.
NOG
nogtips 