Docs

[nonenone]

Hi guys,

I’m looking to change contact form 7 colour to rgb(155, 89, 182) and make the user text input white and also add a white glow that gets bigger when the user clicks on the field.

What’s the CSS code for it?

Many thanks,

[John Ezra]

Hi there,

Thanks for writing in! To assist you with this issue, would you mind providing us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything. Thanks!

[nonenone]

Hi,

The website is not ready yet, there’s a lot of editing happening at the moment.
If you provide me the CSS code I think I will be able to take it from there.

Many thanks,

[Rupok]

Hi there,

Thanks for writing back. Unfortunately it’s not possible to provide a general code without checking the URL because we are not even sure what you are referring by “contact form 7 colour”. You can add a screenshot and point us the issue so that we could try to provide you some code.

Cheers!

[nonenone]

Hi,

Sorry about not being very clear, this is how I would like it to look like.

Also I would like the user text input to be white and add a white glow when the user clicks on the field.

Many thanks,

[Paul R]

Hi,

You can add this under Custom > CSS in the Customizer.

.wpcf7 p {
   color:#fff;
}

.wpcf7 textarea, 
.wpcf7 input[type="text"] {
   border: 5px solid #fff;
}

.wpcf7 input[type=text]:focus, 
.wpcf7 textarea:focus {
  @include box-shadow(0 0 5px rgba(0, 0, 0, 0.5));
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

Hope that helps.

[nonenone]

Hi,

Thank you for your response.

The user text input colour didn’t change even when I added !important; also for some reason changes didn’t apply to the email field.

Please check the attachment.

Many thanks,

[Paul R]

Hi,

Please change the code given above to this

.wpcf7 p {
   color:#fff;
}

.wpcf7 textarea, 
.wpcf7 input[type="text"] {
   border: 5px solid #fff;
}

.wpcf7 input[type=text]:focus, 
.wpcf7 textarea:focus {
  color:#fff !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

[nonenone]

Thank you! I love this but still styling changes didn’t apply to the email field.
Is there something missing in the code?

[nonenone]

Also after the text is typed and the user clicks on the next field, the text turns black 🙁

How can I keep it white?

[Paul R]

Hi,

Sorry about that, please replace the code with this.

.wpcf7 p {
   color:#fff;
}

.wpcf7 textarea, 
.wpcf7 input[type="text"],
.wpcf7 input[type="email"] {
   color:#fff !important;
   border: 5px solid #fff;
}

.wpcf7 input[type=text]:focus, 
.wpcf7 input[type=email]:focus, 
.wpcf7 textarea:focus {
  color:#fff !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

Thanks

[nonenone]

Great! 😀 Thank you very much!

[Paul R]

You’re welcome! 🙂

[Author]

Posts