Last active
November 27, 2020 21:30
-
-
Save anythinggraphic/6106f321a6c1e92b5fe7 to your computer and use it in GitHub Desktop.
Gravity Forms Notification Popup (Genesis Framework)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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>'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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( 'genesis_after_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> | |
'; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've tried to implement this code on my Avada wordpress website, but it doesn't work as expected. The confirmation pop up shows, but the overlay doesn't. Also the OK button doesn't work as expected. It looks like the ag_overlay function doesn't run. I've already changed the hook value in the filter to wp_footer. But still no success. Any recommendations?