How to change the error popup style for fields?

Hello @spacemakerman

If you want to modify the error tooltips, please, enter the style definition below through the “Customize Form Design” attribute in the “Form Settings > Advanced Settings” tab:

.cff-form #fbuilder .uh div.cpefb_error.message{
	border-color: #866552 !important;
	transition: border-color 0.3s ease !important;
	background-color: #866552 !important;
	color: #D2C8BC !important;
}
.cff-form #fbuilder .uh div.cpefb_error.message::after{
	border-bottom-color: #866552 !important;
}	

Best regards.

This works but the field outline remains red when an error occurs:
Page example: https://spacemakerman.s1-tastewp.com/?cff-form=10

.cff-form #fbuilder .uh div.cpefb_error.message{
border-color: #866552 !important;
transition: border-color 0.3s ease !important;
background-color: #866552 !important;
color: #D2C8BC !important;
}
.cff-form #fbuilder .uh div.cpefb_error.message::after{
border-bottom-color: #866552 !important;
}

And on my site this solution does not work at all, stylepublic.css overrides everything. The CSS below allows customizing everything except the field outline when an error occurs, the field outline style is loaded from stylepublic.css and overrides my settings.

/* Styles for error fields (border) */
#fbuilder .fields .dfield input.cpefb_error,
#fbuilder .fields .dfield textarea.cpefb_error,
#fbuilder .fields .dfield select.cpefb_error {
border: 1px solid #866552 !important;
}

/* Styles for error popup message */
#fbuilder div.cpefb_error {
background: #866552 !important;
color: #D2C8BC !important;
}

/* :after pseudo-element for message (arrow) */
#fbuilder div.cpefb_error:after {
border-bottom: 10px solid #866552 !important;
}

Hello @spacemakerman

Please enter the style definition below through the “Customize Form Design” attribute in the “Form Settings > Advanced Settings” tab:

form.cff-form #fbuilder .fields .dfield input.cpefb_error,
form.cff-form #fbuilder .fields .dfield textarea.cpefb_error,
form.cff-form #fbuilder .fields .dfield select.cpefb_error {
border: 1px solid #866552 !important;
}

If the styles are applied to the form in the public website, please provide the link to the page containing the form to check the issue in detail.

Best regards.

This code does not redefine the field outline on input error in a CFF form environment:

.cff-form #fbuilder .uh div.cpefb_error.message{
	border-color: #000000 !important;
	background-color: #000000 !important;
	color: #ffffff !important;
}
.cff-form #fbuilder .uh div.cpefb_error.message::after{
	border-bottom-color: #000000 !important;
}

form.cff-form #fbuilder .fields .dfield input.cpefb_error,
form.cff-form #fbuilder .fields .dfield textarea.cpefb_error,
form.cff-form #fbuilder .fields .dfield select.cpefb_error {
border: 1px solid #000000 !important;
}

page for example: https://spacemakerman.s1-tastewp.com/?cff-form=10

There is also a lot of confusion caused by the “Show as floating tooltip” checkbox, as it is not at all clear how to set the style for the input error message.

Hello @spacemakerman

You’re referring to two distinct components. The error bubbles appear when validation rules fail – such as when a required field is left empty or a value falls outside the defined “min” and “max” limits, among other conditions. In contrast, the “Show as floating tooltip” option displays user instructions.

If you want to modify the design of the error bubbles, you should use these styles:

form.cff-form #fbuilder div.cpefb_error.message{
border-color: #866552 !important;
transition: border-color 0.3s ease !important;
background-color: #866552 !important;
color: #D2C8BC !important;
}
form.cff-form #fbuilder div.cpefb_error.message::after{
border-bottom-color: #866552 !important;
}	

form.cff-form #fbuilder .fields .dfield input.cpefb_error,
form.cff-form #fbuilder .fields .dfield textarea.cpefb_error,
form.cff-form #fbuilder .fields .dfield select.cpefb_error {
border: 1px solid #866552 !important;
}

Please watch the following video:

https://resources.developers4web.com/cff/tmp/2025/02/28/video-error.mp4

Best regards.

This works, but when the “Show as floating tooltip” checkbox is enabled, the style doesn’t work fully.

Hello @spacemakerman

Making your selector more specific ensures its precedence over other styles definitions. For example, Form 10 has selected template 13. So, you can use the template class name (.cp_cff_13) to make your styles more specific:

form.cff-form.cp_cff_13 #fbuilder div.cpefb_error.message{
border-color: #866552 !important;
transition: border-color 0.3s ease !important;
background-color: #866552 !important;
color: #D2C8BC !important;
}
form.cff-form.cp_cff_13 #fbuilder div.cpefb_error.message::after{
border-bottom-color: #866552 !important;
}	

form.cff-form.cp_cff_13 #fbuilder .fields .dfield input.cpefb_error,
form.cff-form #fbuilder .fields .dfield textarea.cpefb_error,
form.cff-form #fbuilder .fields .dfield select.cpefb_error {
border: 1px solid #866552 !important;
}

Best regards.

Thank you very much for your support. The solution works.

I did not create a separate topic, it is quite suitable as a continuation of the following questions:
How to change the error text? “Please enter a value less than or equal to 0.”
and
How to configure the parameters of the tooltip positioning and its color? Now the tooltip is not displayed quite correctly, I would like it to be above the icon.

Example page: https://spacemakerman.s1-tastewp.com/test3/

Thank you in advance for your answer.

Hello @spacemakerman

The error texts are entered in the “Validation Settings” area in the form settings ( https://cff.dwbooster.com/documentation#validation-settings ).

The selector for the tooltips is .uh-tooltip, so, you can modify its position as follows:

.uh-tooltip{margin-top:-40px;}

Best regards.