User friendly error message Gravity Forms

GravityWPGravityForms0 Comments

Do you want to change the standard error text (when people did something wrong on your form). It looks quite unfriendly, the standard validation error. So let’s make it a little bit more friendly. You find the PHP and CSS code you need to do just that.

Standard Gravity Forms validation error:

New (more friendly) Gravity Forms validation error:

Changing the text (PHP)

You can change the text by adding the following PHP text to your functions.php file in your WordPress theme directory.

add_filter("gform_validation_message", "change_message", 10, 2);
function change_message($message, $form){
return '
<div class="validation_error">Please adjust the blue fields below.</div>
';
}

Changing the looks (CSS)

You can change the looks by adding the following CSS code to your custom style.css file in your WordPress theme directory.

//This will change the style of the error message on top of the site
.gform_wrapper div.validation_error {
color: #000 !important;
font-size: 100% !important;
font-weight: normal !important;
border: 1px solid #65A9CC !important;
padding: 1em 0px 1em 20px !important;
}

Extra: Change the fields

This will change the background and border color of the highlighted fields:

body .gform_wrapper li.gfield.gfield_error, 
body .gform_wrapper li.gfield.gfield_error.gfield_contains_required {
border-color: #65A9CC !important;
color: #444 !important;
background-color: #65A9CC !important; }

This will change the color of the label and the required text:

.gform_wrapper .gfield_error .gfield_label, 
.gform_wrapper .validation_message {
color: #FFFFFF !important;
}

This will change the border for input fields to black (and not red):

.gform_wrapper li.gfield_error input[type="email"], 
.gform_wrapper li.gfield_error input[type="number"], 
.gform_wrapper li.gfield_error input[type="password"], 
.gform_wrapper li.gfield_error input[type="tel"], 
.gform_wrapper li.gfield_error input[type="text"], 
.gform_wrapper li.gfield_error input[type="url"], 
.gform_wrapper li.gfield_error textarea {
border: 1px solid #000;
}


Try the new error message in this form

Just make a mistake!

1 Your name
2 In HTML block
  • Fill in your name. In the next step we will use this information, even though you haven't submitted the information yet. This has great opportunities, as you will see in a bit.

Share this Post