Contact Form 7 Validation/Error Message Background Colors Won’t Change

  • I’m a junior designer who just joined Bluberry Creative’s design team about a month ago. This month (Jan 2021), one of my first tasks was to work on some things for a client’s WordPress site, and among those tasks was styling the contact forms.

    Through the Contact Form Style 7 Plugin, I was able to change the background colors for pretty much everything except the background and text colors for the validation error and validation message boxes, which are currently yellow with white text and green with white text specifically. Ideally I’m looking for the validation error to have the background color #f5725a with white text, and the validation message to simply be a white border, black background, and white text.

    I currently have them set to those settings within the style plugin, but something seems to be interfering with it showing up. I would appreciate ideas as to what, since while CSS solutions would be appreciated, we are looking to have sort of two separate “dark mode” and “light mode” versions of this contact form and having overarching CSS solutions is not ideal.

    So if anyone has any ideas, I would appreciate the help in a timely manner, thanks. We are also running the Bridge Dashboard and Qode Options, in case that helps anything.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • So, I am by no means an expert but while searching for similar posts, I saw yours and thought I could at least share what I have been able to accomplish through trial and error.

    I have been able to change the styles of the individual field validation messages as follows:

    .wpcf7 .wpcf7-not-valid-tip {
	background-color: #ab8e17;
	color: Blue;
	font-weight: normal;
	width: 10em;
	padding-left: 10px;
	border: solid;
	border-color: Black;
	border-width: 3px;
	border-radius: 5px;
}

    Note, I am using the Themify Basic theme so it may be different with other themes.

    I have been able to change just the text color of the validation error message box but have yet to be able to change the background or border color.

    .wpcf7 .wpcf7-response-output {
    color: Blue;
    border-radius: 5px;
    }

    It appears that the CF7 styles override the custom css for those particular features and I am searching for a method to overcome that myself.

    If you have discovered any additional approaches, it would be much appreciated if you could share.

    Doug

    CF 7 uses same div to display error or success message. So it is no way to tell what color you need to apply. But ‘form’ tag that actually contains everything including message div changes some attribute to reflect submission status.

    Example:

    .wpcf7-response-output {
    color: green; //success
}

form.wpcf7-form[data-status='invalid'] .wpcf7-response-output {
    color: red; //error
}

    Hi
    I hope you can help me. true newbie Jr. when it comes to css coding
    want to change the color of the message validation from small black to White

    there is some css code already inserted..

    /*
You can add your own CSS here.

Click the help icon above to learn more.
*/

.home-content{
padding:50px;
}
.file-transfer-form .g-recaptcha{

text-align:center !important;
}

    ********************************************

    Where r can I ADD THIS AT THE NEXT LINE RGHT AFTER
    tried it ut nothing changed

    div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
    color: white;
}

div.wpcf7-mail-sent-ok {
    color: #ebf3e7
}

    thanks much

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Contact Form 7 Validation/Error Message Background Colors Won’t Change’ is closed to new replies.