Having trouble styling the inputs on a contact form--no selectors are working

[randylpurcell]

Hey guys,

So I’m trying to make the text inside of the input fields so that they are white. I’ve been using dev tools to find the ids but those aren’t working. The page in question can be found here: https://justinpeters.wpengine.com/book-justin/

If you don’t mind helping with this–I also need to: make contact form boxes smaller, reconfigure boxes so there are no 1 column boxes, and make submit button smaller.

Thanks a bunch!

[Prasant]

Hello Randy,

Thanks for writing in!

I think you are looking to change placeholder color. Please add following CSS under X > Theme Options > CSS:

::placeholder { 
  color: #fff !important;
}

:-ms-input-placeholder {
  color: #fff !important;
}

::-ms-input-placeholder { 
  color: #fff !important;
}

@randylpurcell

reconfigure boxes so there are no 1 column boxes

Can you please elaborate?

@randylpurcell

make submit button smaller.

Please add following CSS under X > Theme Options > CSS:

.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit] {
    padding: 0.5em;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.