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.
User friendly error message Gravity Forms
Standard Gravity Forms validation error
This is how the standard (default) GF validation error looks like.
New (more friendly) Gravity Forms validation error
Now we want to create a more friendly and visually attractive error message for Gravity Forms.
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", "gwp_change_message", 10, 2);
function gwp_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.
.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 & change the color of the label and the required text.
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;
}
.gform_wrapper .gfield_error .gfield_label, .gform_wrapper .validation_message {
color: #FFFFFF !important;
}And 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;
}Hire the best developers for Gravity Forms
If you’re looking for good and experienced Gravity Forms developers to help you with your questions about Gravity Forms (like User friendly error message Gravity Forms) and other add-ons, we advice you to hire experts on Codeable. Codeable is by far the most professional, dedicated and fun community to find the freelancer you need to help you with your WordPress questions.Click here to visit Codeable