PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Pre-populated Text in field

  1. Hello,

    I am looking to emulate the behavior of a field like they have here:

    https://rightsignature.com/

    Basically the text "email address" is inside the box and when the user clicks on it, the "email address" text disappears.

    I think this can be done with jquery. Any help will be much appreciated.

    Posted 7 years ago on Thursday February 28, 2013 | Permalink
  2. Richard Vav
    Administrator

    What your describing is a placeholder and yes you can accomplish that using the following jQuery, 6 is your form number and 102 is the field number, you may need to replace $ with jQuery

    $(document).ready(function() {
        $('#input_6_102').attr('placeholder','email address');
    });

    I believe there are also a couple of placeholder plugins for gravity forms in the wordpress.org plugin repository that convert the field label into the placeholder. It's worth noting however that the placeholder attribute is not intended to replace the label rather it is intended to act as a guide to filling in the field in addition to the clue provided by the label, also the label is also required by screen readers for visitors with impaired vision.

    Posted 7 years ago on Friday March 1, 2013 | Permalink
  3. ok great, thanks for this.. one last question - how do i style the placeholder?

    the placeholder would have a different style than the text that is being entered by the user in the field.

    thanks again!

    Posted 7 years ago on Friday March 1, 2013 | Permalink
  4. Richard Vav
    Administrator

    To style the placeholder text you'll need the following vendor prefix CSS properties

    ::-webkit-input-placeholder {
       color: red;
    }
    :-moz-placeholder { /* Firefox 18- */
       color: red;
    }
    ::-moz-placeholder {  /* Firefox 19+ */
       color: red;
    }
    :-ms-input-placeholder {
       color: red;
    }

    The ms prefix will only work for IE10 as IE9 and older can't be styled.

    Posted 7 years ago on Friday March 1, 2013 | Permalink