Placeholder "hint" JavaScript

hint_placeholder.css

<style type="text/css">
  .lp-pom-form-field .hint {
    color:#999999 !important; /* Grey */
  }
</style>

hint_placeholder.js

<script type="text/javascript">
jQuery(document).ready(function() {
  var hints = {
    "name": "John Doe",
    "email": "[email protected]",
    "comments": "Enter your comments..."
  };
  
  var hideHint = function(field, text){
    if (jQuery(field).val() === text) {
      jQuery(field).val("");
      jQuery(field).removeClass('hint');
    }
  };
  
  var showHint = function(field, text){
    if (jQuery(field).val() === "") {
      jQuery(field).val(text);
      jQuery(field).addClass('hint');
    }
  };

  var text;
  
  for (fieldName in hints) {
    text = hints[fieldName];
    jQuery("#"+fieldName).val(text).focus((function(text) {
      return function() {hideHint(this, text);};
    })(text)).blur((function(text) {
      return function() {showHint(this, text);};
    })(text)).addClass('hint');
  }
  
  var submitButton = jQuery('#'+window.module.lp.form.data.formButtonId);
  var submitAction = submitButton.data('events').click[0];
  var field;
  
  submitButton.unbind('click', submitAction);
  submitButton.click(function(e) {
    for (fieldName in hints) {
      field = jQuery("#"+fieldName);
      if (field.val() === hints[fieldName]) {
        field.val('');
      }
    }
    
    submitAction.handler(e);
    
    for (fieldName in hints) {
      field = jQuery("#"+fieldName);
      if (field.val() === '') {
        field.val(hints[fieldName]);
      }
    }
  });
});
</script>

The contents of "hint_placeholder.css" should be placed in the "Styles" section, and the contents of "hint_placeholder.js" should be placed in the "Scripts" section (with 'placement' set to 'Head'). More context here: http://support.unbounce.com/entries/412825