Streaming live at 10am (PST)

Changing the color of Placeholder text in Forms


#1

Hey all,

Looking to see if anyone knows how to change the color of Placeholder text in Forms.
I have it set right now to be a pink color, but the pink color only appears when I type in the form; the placeholder text remains gray.

(Question is in re: to the support page found in the footer)

Any help is appreciated. Link below
Thanks

https://preview.webflow.com/preview/dev-homoji?preview=f7f1365148f67208c0ce8ac014558fa6


Here is my public share link: LINK
(how to access public share link)


#3

Hi @markgarcia

You can change placeholder color by using custom code in the Footer section of your site.

I know this code (found it on this forum) :

<script>
$('[placeholder]').focus(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
    }
}).blur(function() {
    var input = $(this);
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
    }
}).blur();
$('[placeholder]').parents('form').submit(function() {
    $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
        }
    })
});
</script>

Then you can style your placeholder with some CSS :

.placeholder
{
   color: #ffffff;
}

#4

For the color style of course you will have to change it to the color you need


#5

I'm not trying to change the Footer color. I'm trying to change the placeholder text color in this form
(Your Name, Your Email, Message)


#6

Sorry if I wasn't clear @markgarcia

You need to go into the settings of your site > custom code and in the Footer section of the custom code page you want to add the above code


#7

Hey @Blaise_Posmyouck , I assume this will apply the styling to the entirety of your site. Is there a way to do this just for one page - can we add it to the page code? Thanks


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.