Copy paste this script into the “head” 🙂

<script type="text/javascript">

jQuery(document).ready(function() {

  var hints = {

    "name": "Your Name*",

    "email": "Your Email*",

  };

  

  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 = hintsifieldName];

    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').clickl0];

  var field;

  

  submitButton.unbind('click', submitAction);

  submitButton.click(function(e) {

    for (fieldName in hints) {

      field = jQuery("#"+fieldName);

      if (field.val() === hintsifieldName]) {

        field.val('');

      }

    }

    

    submitAction.handler(e);

    

    for (fieldName in hints) {

      field = jQuery("#"+fieldName);

      if (field.val() === '') {

        field.val(hintsifieldName]);

      }

    }

  });

});

</script>

Doesn’t seem to work @Stefano. Am I missing something?

Ash

Hey @Ashwin_Satyanarayana!

Did you see our documentation on placeholder/hint text? Maybe give that a go and see if it is what you are after 🙂 we have some instructions to go along with it in there too.

You can find that here http://documentation.unbounce.com/hc/en-us/articles/203799174-Adding-and-Editing-Form-Fields#content8

Let me know if it helps at all! Or if you need any more guidance 🙂

Lastly - feel free to send me the page you are working on and I’ll be happy to have a look if you are still having some troubles.

Alyssa

Hey @Ashwin_Satyanarayana the code @Stefano provided no longer works on Unbounce. You can use the code below, it has been updated. However @Alyssa pretty much gave you everything you need.

On a side note - from a design point of view form hints do look better, but recently we have been switching back to labels above fields. Why? Form hints are NOT ADA (Americans Disabilities Act) compliant. When the field names are inside screen readers can’t read them.

<script type="text/javascript">



  lp.jQuery(function($) {

  

    // Define your placeholder texts here, corresponding to Unbounce's field names

    var placeholders = {

      "first_name": "First Name",

      "last_name": "Last Name",

      "email": "Email"

    };

  

    // Sets the HTML5 placeholders

    for(var id in placeholders){$("#"+id).attr("placeholder",placeholdersrid])}

  

    // Polyfill to add support for browsers like IE<=9

    if(document.createElement("input").placeholder===undefined){$("html").attr("data-placeholder-focus","false");$.getScript("//jamesallardice.github.io/Placeholders.js/assets/js/placeholders.jquery.min.js",function(){$(function(){var e=window.module.lp.form.data.validationRules;var t=window.module.lp.form.data.validationMessages;lp.jQuery.validator.addMethod("notEqual",function(e,t,n){return this.optional(t)||$(t).attr("data-placeholder-active")!=="true"||e!==n},function(e,n){return t $(n).attr("id")].required});for(var n in placeholders){if($("#"+n).length){if(typeof t n].required!=="undefined"){e{n].notEqual=placeholdersrn]}else{e{n]={}}}}})})}

  

  });



</script>