How To: Display Gravity Form Error Messages in a JavaScript Popup

Gravity Forms is an extremely popular contact form plugin for WordPress. One of the reasons Gravity Forms is so popular is the ease in which you can customize it. Much like WordPress, Gravity Forms features various action and filter hooks for developers to use to easily tweak how GF functions.

Working on a client site recently I needed to customize how error messages were displayed in Gravity Forms. By default GF will display an error message above the form if any field values aren’t validated (ie a required field is left empty). On this particular website I wanted the error message to display in a simple JavaScript popup, instead of on the page. Below is the code I used to do just that:

add_filter( 'gform_validation_message', 'sw_gf_validation_message', 10, 2 );

function sw_gf_validation_message( $validation_message ) {

	//display error JS popup
	add_action( 'wp_footer', 'sw_gf_js_error' );

}

function sw_gf_js_error() {
	?>
	<script type="text/javascript">
		alert( "Please fill out all required fields indicated by a *" );
	</script>
	<?php
}

As you can see I’m using the gform_validation_message filter to customize how the error message is processed. The PHP variable $validation_message stores the original error message GF was going to display. In this example I didn’t use the original error message, but you could easily pass that to your JS popup if needed.

This is a pretty simple example of customizing the Gravity Forms error message. Enjoy!