Customising 'There has been an error with your form'

Gravity Support Forums » Plugin Support » Gravity Forms

JonC
Member

Using several different Gravity forms across various pages on my website. Each form has three required fields, if these fields are not filled in an error message if shown just under the form title saying
'There was a problem with your submission. Errors have been highlighted below.'

Next to each field that has not been filled in is
'This field is required.'

Is there anyway I can customise the size and colour of this text to make it stand out a bit more?
Also is it possible to also highlight the actual fields that should have been filled in?

Posted 11 years ago on Saturday February 23, 2013 | Permalink
Chris Hajer
Key Master

Please provide a link to the page on your site with the form in question, and let us know exactly which text you want to change.

For each individual field, you can change the text "This field is required." on the advanced tab. Fill in the field "Validation Message" to override the default message.

To change the whole form validation error message ('There was a problem with your submission. Errors have been highlighted below.') you can use the gform_validation_message filter http://www.gravityhelp.com/documentation/page/Gform_validation_message

Posted 11 years ago on Sunday February 24, 2013 | Permalink
Richard Vav
Administrator

Hi JonC, as Chris says if you provide a link more specific & customised guidance can be provided but in the meantime you may want to take a look at the CSS targeting samples in the documentation which provide examples for targeting and customising the styling of various gravity forms elements, this link will take you straight to the section regarding validation errors http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples#Validation_Errors

Posted 11 years ago on Sunday February 24, 2013 | Permalink
JonC
Member

Hi,

Example form is at the following link (bottom of page)
http://www.woodworkersuk.co.uk/wooden-driveway-gates.htm

What I would like to do is not change the actual text, but change the format of it - make it larger and a different colour so it stands out more.
I'd also if possible like to reposition the main 'There has been an error' text so it appears next to (or just above) the 'Submit' button.

Would also like to have the name of each field next to each field rather than above it as well if that is possible?

Cheers
Jon

Posted 11 years ago on Sunday February 24, 2013 | Permalink
Richard Vav
Administrator

Jon to move the field labels from above each field to the left of each field you can edit the form settings and at the bottom of the form settings properties panel there is a 'label placement' drop down which should have 'top aligned' selected, change that to left aligned and then save and re-load your page.

Posted 11 years ago on Monday February 25, 2013 | Permalink
Richard Vav
Administrator
Here's a sample for changing the appearance of the main validation error message
```
body .gform_wrapper .validation_error {
    border: 1px solid #000;
    background: yellow;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
    padding: 5px;
}
```
Now that will apply to all gravity forms site wide, if you only want it to apply to that one form then modify it to read, with 5 being your form number
```
body .gform_wrapper_5 .validation_error {
```
Now to change the position of the validation error message I think you will have to use some jQuery like so, I haven't tested it but it should move the validation error message so it appears in the forms footer area with the submit button.
```
$('.gform_footer').prepend(
     $('.validation_error')
);
```
Depending on your sites setup you probably will need to replace $ with jQuery
Posted 11 years ago on Monday February 25, 2013 | Permalink
JonC
Member

Thanks Richard I shall give go later.

Where do I place the snippet of code to change the position of the error message?

Thanks for your help!
Jon

Posted 11 years ago on Monday February 25, 2013 | Permalink
Richard Vav
Administrator
I usually place small jquery code like that at the bottom of the page I have embedded the form on, you will need to wrap it in a document ready function like so
```
<script type="text/javascript">
$(document).ready(function(){
     $('.gform_footer').prepend(
          $('.validation_error')
     );
});
</script>
```
Posted 11 years ago on Monday February 25, 2013 | Permalink