I've just noticed that when a user fails to fill out all the required fields on my contact form they get the error message, " There was a problem with your submission. Errors have been highlighted below."
However, nothing is highlighted.
Can you please tell me what I have to do to highlight any errors?
Hey CG, can you please post a link to your form so we can take a look.
Sure, thanks.
CG, it looks like you are choosing to not output the Gravity Forms CSS in the plugin's settings area. Have you tried turning that on or is there a reason you are choosing not to output it?
OK, thanks for checking that. How are you placing that form on the page? You may need to enqueue the styles/scripts if this was placed outside of the WP loop. Have a look at this:
http://www.gravityhelp.com/documentation/page/Gform_enqueue_scripts
That all sounds a bit complicated to me. I just placed [gravityform id=1 title=false description=false ajax=true] into the HTML and then customized fonts, colors and sizes in custom css. Is there any custom css that would make this work?
Hmm, the ideal solution is to try to figure out why the style sheet isn't being ouput. Does your page template include the function call to wp_head()? At any rate, here is our error CSS that is in the forms stylesheet:
[css]
.gform_wrapper li.gfield.gfield_error,
.gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
background-color: #FFDFDF;
margin-bottom: 6px !important;
padding: 6px 6px 4px 6px !important;
border: 1px solid #C89797
}
.gform_wrapper li.gfield.gfield_creditcard_warning {
margin-bottom: 6px !important;
padding: 6px 6px 4px 6px !important;
border: 1px dashed #C89797
}
.gform_wrapper li.gfield.gfield_creditcard_warning div.gfield_creditcard_warning_message {
font-size:1em;
font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
padding: 10px 20px 10px 45px;
min-height: 25px;
background-image: url(../images/stopbanner.png);
background-repeat: no-repeat;
background-position: 0 0;
background-color: #790000;
border-bottom: 1px solid #620101;
color: #FFF;
text-shadow: 0 1px 1px rgba(0,0,0,0.50);
line-height: 1.3em;
letter-spacing: 0.2pt
}
li.gfield + li.gfield.gfield_creditcard_warning {
margin-top: 14px !important
}
.gform_wrapper li.gfield.gfield_error .gfield_description {
color: #790000
}
.gform_wrapper .top_label .gfield_error .ginput_container {
max-width: 99%
}
.gform_wrapper .top_label .gfield_error {
width: 97%
}
.gform_wrapper .top_label .gfield_error input.large,
.gform_wrapper .top_label .gfield_error select.large,
.gform_wrapper .top_label .gfield_error textarea.textarea {
width: 100%
}
.gform_wrapper .right_label .gfield_error input.large,
.gform_wrapper .right_label .gfield_error select.large,
.gform_wrapper .right_label .gfield_error textarea.textarea,
.gform_wrapper .left_label .gfield_error input.large,
.gform_wrapper .left_label .gfield_error select.large,
.gform_wrapper .left_label .gfield_error textarea.textarea {
width: 66%
}
.gform_wrapper .gfield_error .gfield_label {
color: #790000
}
.gform_wrapper li.gfield.gfield_error.gfield_contains_required {
margin-top: 12px;
margin-bottom: 12px !important
}
.gform_wrapper li.gfield.gfield_error.gfield_contains_required label.gfield_label,
.gform_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container {
margin-top: 12px
}
.gform_wrapper .validation_error {
color: #790000;
font-weight: bold;
font-size: 14px;
line-height: 1.5em;
margin-bottom: 16px
}
.gform_wrapper .validation_message {
color: #790000;
font-size: 11px;
letter-spacing: normal
}RE: " Hmm, the ideal solution is to try to figure out why the style sheet isn't being output,....."
If you have any tips as to where or how I might start figuring this out I'd appreciate it otherwise it looks like I'm going to have to just leave this as not working, which is obviously not ideal.
Thanks for trying to help, anyway.
Chris
Chris, can you email a login to your site to rob@rocketgenius.com so I can take a look.
Above, I asked: Does your page template include the function call to wp_head()? This could be a cause. It's most likely a theme conflict of some kind. Also, worst-case placing that style block in your custom.css would solve for this.
Sorry, Rob,
I missed that question, but actually, I have no idea whether my page template includes the function call to wp_head() and don't know what that means.
The site is built on Headway Theme.
I'll send over my site login to you tomorrow as I've got to run.
Thanks a lot. I appreciate your help :)
Sounds good, glad to help. I will be on the look out, we'll get it fixed. :)