discover css element in contact form

Hi I am struggling to locate the css class to change the input and place holder text for the contact form.

Can you please identify the css class as mentioned above for the contact form on this page. http://bokke.com.au/

    • VivaArturo
      • The Incredible Code Injector

      Thanks Kasia Swiderska the css selectors provided partially work. I have updated the code to provide an example, I have created the input field background as black.

      I require a css selector for the color of the placeholder text as the above code only provides the css selector for input text
      And the css selector for the input text on the phone field is different as does not work with the selectors for font color above

      Thanks for your help

  • Nithin
    • Support Wizard

    Hi VivaArturo,

    Hope you are doing good today. :slight_smile:

    Could you please try the following code, this should replace the forms entire placeholder color, including the phone field:

    div.wpforms-container-full .wpforms-form input[type="text"] {
    	color: #FFFFFF;
    }

    Please remove your old code, since the old code is using !important, the above code won't work.

    I hope this helps. Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • VivaArturo
    • The Incredible Code Injector

    so I know have the following css code been used which works partially. The placeholder text will not change color to white. The input text into the email and paragraph field is now grey.

    .wpforms-field-large {background-color:#000!important;}
    .wpforms-field-medium {background-color:#000!important;}
    /*.wpforms-field-required {color:#ffffff!important;}*/

    div.wpforms-container-full .wpforms-form input[type="text"] {
    color: #FFFFFF!important;
    }

    If I add the following .wpforms-field-required {color:#ffffff!important;} then all fields input text will be white but the placeholder text still does not change

  • Nithin
    • Support Wizard

    Hi VivaArturo,

    Hope you are doing good today. :slight_smile:

    I just saw that difference, thanks for pointing that out, please try the following, and it should work for the given form:

    div.wpforms-container-full .wpforms-form input[type="text"] , div.wpforms-container-full .wpforms-form input[type="email"], div.wpforms-container-full .wpforms-form textarea {
    
    	color: #FFFFFF;
    }

    I hope this helps. Please let us know if you still need any further assistance. Have a nice weekend. :slight_smile:

    Kind Regards,
    Nithin

  • VivaArturo
    • The Incredible Code Injector

    Hi Nithin thanks for your continued help.

    I have updated all the code as below but the placeholder text still does not change color

    .wpforms-field-large {background-color:#000!important;}
    .wpforms-field-medium {background-color:#000!important;}

    div.wpforms-container-full .wpforms-form input[type="text"] , div.wpforms-container-full .wpforms-form input[type="email"], div.wpforms-container-full .wpforms-form textarea {

    color: #FFFFFF;
    }

  • Nithin
    • Support Wizard

    Hi VivaArturo,

    Hope you are doing good today. :slight_smile:

    I checked your website, and the style provided above seems to work, could you please point out what I'm missing?

    If you meant the placeholder color is light in shade, please try adding this in your child themes style.css file:

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

    If the above didn't work, try with !important, ie opacity: 1 !important;.

    I hope this helps. Please let us know how that goes, have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin
    • Support Wizard

    Hi VivaArturo,

    I don't see the CSS code provided above in your website, please add it in your child themes style.css, and as mentioned in my previous reply, if the code doesn't work, please try using !important.

    If you have already implemented the CSS, and still having issues, please enable support access, so that I could give check whether I'm missing out anything.

    You can grant access from WPMU DEV > Support > Support Access > Grant Access, or check this manual.

    Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.