Styling Placeholder in Text field

Get Help
,
1

I am able to insert placeholder text but it shows as pale grey over white, just unreadable. Where do I change the style of this placeholder, as well as have it disappear once typing begins?

2

Hi Liz. You can add CSS like this to your site to style placeholder text:

body .gform_wrapper ::placeholder,
body .gform_wrapper ::-webkit-input-placeholder,
body .gform_wrapper input[placeholder] {
  color: blue;
  opacity: 0.8;
}

Add this CSS to your theme (or child theme) stylesheet or via the Appearance Customizer (Appearance → Customize → Additional CSS).

See also this article for additional information about placing CSS snippets: https://docs.gravityforms.com/where-to-put-your-custom-css/

It looks like this on my site when applied: Screenshot on 2023-06-14 at 09-08-31.png - Droplr

If you need anything else, please let us know.

3

Hi Chris,

I inserted the code you supplied via Customizer-Addl CSS (I always wonder whether to place new CSS in a certain spot so it isnt overwritten) but am not seeing the text changed to the blue you have below . Are those the proper field names or is there something in the code view below that has to be changed? Or both?

This is what I see in code view

Is there something in this for placeholder description that is overwriting the inserted CSS that you gave me?

Liz

4

Can you send a URL where your form is online? I’ll make sure the CSS is working correctly and make it more specific if necessary.

5

https://varsityreunions.com/memory-book-submission/

If I need to send anything else along, please let me know.

I also have two other gravity form questions related to the memory book form that you’re going to be looking at. If I need to submit them separately, I will. Otherwise, here they are:

  1. Is there a way to rename the photos that are uploaded in the same memory book form to reflect the first and last name and school year of the person signing up?
  2. The text box that you are going to be helping me with placeholder text is also something that I want to limit entries to one large paragraph rather than allowing hard returns. Is that possible? This is because I’m going to be exporting the data in spreadsheet form and when I do that now it creates a spreadsheet with a mess of data that doesn’t easily link back to the original person placing the order.
    warmly,
    Liz
    Varsity Reunions Web dev.

Elizabeth Schneider
314-270-2549

6

Checking the CSS you added, it looks fine there. Please replace what you I sent previously with this version:

body .gform_wrapper input::placeholder,
body .gform_wrapper textarea::placeholder {
 color: blue!important;
 opacity: 0.8!important;
}

It looks like the only placeholder on that page is in the textarea, so this will target that. This is what it looked like when applied to your site: Screenshot on 2023-06-15 at 00-08-12.png - Droplr

Let’s resolve the issue with the placeholder style in this topic first. Please create a new topic for any other issue you want to take a look at. Thank you.

7

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