Add placeholder text for Widgets

  • Profile Image
    MJLLC
    Asked on February 23, 2018 at 12:23 AM

    Hello all,

    Is there a way inject CSS that adds placeholder text for both the Date Picker and Dropdown widgets? What would that look like?

    Thanks in advance!

  • Profile Image
    Victoria_K
    Answered on February 23, 2018 at 05:56 AM

    Actually, you can not add placeholder values with just CSS. 

    I'm not sure if it is what you're looking for, but there is a workaround to add some text and position it over the input field. 

    I have cloned one of your forms, which you might refer to, to show the result.

    Here is the code I used for Datepicker field:

    #cid_6:after {

      content: "Placeholder";

      position: absolute;

      left: 10.5em;

      top: 1.8em;

    }

    1519382912Board and Take Flight - Opera

    Please note, that the fake placeholder needs to be positioned somewhat right, in order to avoid overlapping the picked date.

    Despite all mentioned above, I encourage you to use "Show Today's Date" at DatePicker widget and "Show Text in Empty Option" at OPTIONS tab of dropdaows for placeholders of these fields. 

    1519383269Screenshot_2.png1519383285The Easiest Online Form Builde

     

    Let us know if you need further assistance.