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.
Change text error message
You can change the text of the Gravity Forms 2.5 and later error message by adding the following PHP text to your functions.php file in your WordPress theme directory.
/**
* Changing default error message Gravity Forms (GF2.5)
*/
add_filter("gform_validation_message", "gwp_change_message", 10, 2);
function gwp_change_message($message, $form){
return '<h2 class="gform_submission_error hide_summary">
<span class="gform-icon gform-icon--close"></span>
Oops, something was not correct.
Please review the highlighted fields below.
</h2>';
}
Styling Error message in Gravity Forms 2.5 and later
This is how the standard (default) GF validation error in GF 2.5 and later looks like.
Change colors
If you want to change the color of the background and the border line of the message at the top, use this CSS to override. You can also change the shadow effect (we left it here the same).
Notice that we’ve added body in front of the .gform_wrapper. You can also place the CSS without body in front of it, but be sure that this custom CSS is loaded later than the Gravity Forms default styling. Or you can add !important, but this makes it harder if you want to style error message differently on different places on your site.
/* Changing background and border color of top error message div */
body .gform_wrapper .gform_validation_errors {
background: #ddecf5;
border: 1.5px solid #65a9cb;
box-shadow: 0 1px 4px rgb(0 0 0 / 11%), 0 0 4px rgb(18 25 97 / 4%);
}It will look like this now:
We don’t want to use such a bright red color, so we also will change the color of the text. You can do that by adding this CSS:
/* Changing font color of top error message */
body .gform_wrapper .gform_validation_errors>h2 {
color: #212529;
}This is how we want it:
But we also want to change the red colors in the highlighted fields itself:
To do that, we can add the following CSS to our custom theme or in the customizer of the WordPress website:
/* Changing font color of error texts in form fields */
body .gform_wrapper .gfield_error .gfield_repeater_cell label,
body .gform_wrapper .gfield_error label,
body .gform_wrapper .gfield_error legend,
body .gform_wrapper .gfield_validation_message,
body .gform_wrapper .validation_message,
body .gform_wrapper [aria-invalid=true]+label, .gform_wrapper label+[aria-invalid=true] {
color: #212529;
}
/* Changing background and border of error div under field */
body .gform_wrapper .gfield_validation_message,
body .gform_wrapper .validation_message {
background: #ddecf5;
border: 1px solid #65a9cb;
}This looks much nicer and in line with our theme:
Use SCSS
You can also achieve the same as the above CSS code with the more readable SCSS code here:
body .gform_wrapper {
/* Changing background and border color of top error message div */
.gform_validation_errors {
background: $secondary;
border: 1.5px solid $primary;
box-shadow: 0 1px 4px rgb(0 0 0 / 11%), 0 0 4px rgb(18 25 97 / 4%);
/* Changing font color of top error message */
&>h2 {
color: $black;
}
}
/* Changing font color of error texts in form fields */
.gfield_error {
.gfield_repeater_cell label,
label,
legend {
color: $black;
}
}
[aria-invalid=true]+label, .gform_wrapper label+[aria-invalid=true] {
color: $black;
}
/* Changing background and border of error div under field */
.gfield_validation_message,
.validation_message {
color: $black;
background: $secondary;
border: 1px solid $primary;
}
}Gravity Forms 2.4 and earlier
Gravity Forms 2.4 has a different styling, so you’ll need to use different PHP and CSS for 2.4 and earlier.
Changing error message with PHP in 2.4 and earlier
/**
* Changing default error message Gravity Forms (GF2.4)
*/
function gwp_change_message($message, $form){
return '<div class="validation_error">
Please adjust the blue fields below.
</div>';
}Standard Gravity Forms validation error
This is how the standard (default) GF validation error in GF 2.4 and earlier 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 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;
}Our Premium add-ons for Gravity Forms
DateTime Field
The GravityWP - DateTime Field add-on adds a dedicated Date/Time field to Gravity Forms so users can enter both a date and a time in a single input.
Entry to Database
Integrates Gravity Forms with internal or external databases, offering flexible mapping of form fields to database columns and real-time synchronization between entries and database rows.
List Text
Add features like textarea, placeholder and custom validation to a column or multiple columns in a Gravity Forms List Field.
List Datepicker
Add a Datepicker with calendar select to a column or multiple columns in a Gravity Forms List Field.
Read tutorials about
Gravity Forms Discount Code Field: Apply Fixed or Percentage Discounts in a Form
Learn how to create a Gravity Forms discount code field that applies fixed or percentage discounts. This tutorial shows how to calculate subtotals, discount amounts, and final totals using tested form logic.
Gravity Forms Zoom Integration: Create Zoom Meetings From Booking Forms
Learn how to connect Gravity Forms to Zoom without Zapier using GravityWP API Connector. This step-by-step tutorial shows how to create Zoom meetings from booking form submissions and save the returned meeting details back to Gravity Forms.
Gravity Forms monday.com Integration: Create New Items From Form Submissions
Learn how to connect Gravity Forms to monday.com without Zapier using GravityWP API Connector. This step-by-step tutorial shows how to create new monday.com items from form submissions and save the returned monday.com item ID back to Gravity Forms.
Gravity Forms Pipedrive Integration: Send Form Contacts to Pipedrive Without Zapier
Learn how to connect Gravity Forms to Pipedrive without Zapier using GravityWP API Connector. This step-by-step tutorial shows how to send form contacts, custom fields, and the returned Pipedrive Person ID directly from WordPress to Pipedrive CRM.
