Contact form 7 style edit

[graphictaste]

Hi, could you guys help me with some custom css?

i dont know where to find contact form div and class like this .wpcf7-form .wpcf7-text { for changing everything.

1. how to get rid of button 3d bottom?
2. how to change hover button bg?
3. how to change color bg, and font of issue message?
4. how to change color of the ‘field is required’?
5. how to change placeholder message color?

now im using this css code:

  .wpcf7-form .wpcf7-text {
    background-color: #ffffff;
  	font-family: Cantarell;
  	font-size: 14px !important;
  	color: #1c2329;
}
.wpcf7-form .wpcf7-textarea {
    background-color: #ffffff;
  	font-family: Cantarell;
  	font-size: 14px !important;
  	color: #1c2329;
}
.wpcf7-form .wpcf7-submit {
    font-size: 18px !important;
    font-family: Fjalla one;
    text-shadow: none !important;
  	background-color: #1c2329;
  	color: #ffffff;
}
input.wpcf7-form-control.wpcf7-submit {
    margin: 0 auto !important;
    display: block;
}

[rad]

Hi @graphictaste,

Thanks for reaching out.

It would require custom CSS since it inherits the theme CSS.

1. Please add this CSS to your global custom CSS.

.wpcf7-form .wpcf7-submit {
    box-shadow: none !important;
    border: 0px !important;
}

2. And this CSS as well with your preferred color.

.wpcf7-form .wpcf7-submit:hover {
background-color: red !important;
}

3. Please add this with your preferred font styling.

.wpcf7-response-output {
    background: red;
    font-size: 20px;
    color: #fff;
    font-family: "Open Sans",sans-serif;
}

4. Please add this as well with your preferred color

.wpcf7-not-valid-tip {
    color: red;
}

5. It’s a bit tricky since it may be different from browser to browser, but please try this https://css-tricks.com/almanac/selectors/p/placeholder/ and implement the suggested CSS and your color.

Thanks!

[graphictaste]

Thanks. Working fine

[jade]

You’re most welcome.