Error Message

How do you get rid of not only the error message, but the pink box surrounding the form fields? Its not enough to just make the background of these div's transparent. I don't want them to display at all. However, I can't seem to find the correct CSS to make the form fields display without the pink error boxes.

I am dealing with a really small space and these pink boxes are causing a lot of problems with my form displaying nicely if the wrong data is entered into the box.

I have been able to create a popup error message that explains all fields are required. So in this case, the pink boxes are redundant.

Finally, I don't want to get rid of these pink boxes on all forms on the site, just the one in the header.

All help is really appreciated as I've just about pulled out all my hair trying to figure this one out.

URL of form (in header): http://testing.musedigitaldesign.com/site8/life-coaching/

I can help you out with this if you're still interested...

Yes, if you could and we can work through it together.

This should do the trick:

[css]
.gform_validation_error #field_5_2 .gfield_description.validation_message {
display: none;
}
.gform_validation_error #field_5_2 {
background: none;
padding: 0 !important;
margin: 0 !important;
border: 0;
width: 99.2%;
}
.gform_validation_error #field_5_1 .ginput_container, .gform_validation_error #field_5_2 .ginput_container {
margin: 0;
max-width: 100% !important;
}

Looks like you got it figured out pretty well here, try adding in this one last piece:

[css]
body #gform_wrapper_1 li.gfield.gfield_error.gfield_contains_required label.gfield_label, body #gform_wrapper_1 li.gfield.gfield_error.gfield_contains_required div.ginput_container {
margin-top: 0;
}