Gravity Forms Notification Popup (Genesis Framework)

gravity-forms-notification-popup-keep-form.php

<?php

//* OPTIONAL STEP - Keep the form disappearing. 
//* Gravity Forms notification popup instead of the page redirect or AJAX notification. 
//* Props to @WilliamAlexander in the comments
//* @link https://anythinggraphic.net/gravity-forms-notification-popup

add_filter( 'gform_confirmation', 'ag_custom_confirmation', 10, 4 );
function ag_custom_confirmation( $confirmation, $form, $entry, $ajax ) {
	add_filter( 'wp_footer', 'ag_overlay');
    $thisform = $form['id'];
	return '[gravityform id=' . $thisform . ' title=false description=false]' . $confirmation . '<a href="#" rel="nofollow">OK</a>';
}

gravity-forms-notification-popup.css

#overlay {
	background: #000;
	background: rgba(0, 0, 0, 0.3);
	display: block;
	float: left;
	height: 100%;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	z-index: 99;
}

#gform-notification {
	background: #fff;
	border-radius: 10px;
	display: block;
	margin: auto;
	max-height: 237px;
	max-width: 520px;
	padding: 61px;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	width: 100%;
	z-index: 101;
}

#gform-notification .button {
	margin: 20px 0 0;
	padding: 12px 24px;
}

gravity-forms-notification-popup.php

<?php
//* Gravity Forms notification popup instead of the page redirect or AJAX notification
//* @link https://anythinggraphic.net/gravity-forms-notification-popup

/* Override the default Gravity Forms confirmation behavior, displaying it in a popup. Remember to style the divs.
----------------------------------------------------------------------------------------*/
add_filter( 'gform_confirmation', 'ag_custom_confirmation', 10, 4 );
function ag_custom_confirmation( $confirmation, $form, $entry, $ajax ) {
	add_filter( 'wp_footer', 'ag_overlay');
	return '<div id="gform-notification">' . $confirmation . '<a class="button" href="#">OK</a></div>';
}

/* Add script to remove the overlay and confirmation message once the button in the popup is clicked.
----------------------------------------------------------------------------------------*/
function ag_overlay() {
	echo '<div id="overlay"></div>';
	echo '
		<script type="text/javascript">
			jQuery("body").addClass("message-sent");
			jQuery("#gform-notification a").click(function() {
				jQuery("#overlay,#gform-notification").fadeOut("normal", function() {
					$(this).remove();
				});
			});
		</script>
	';
}