As seen here: https://anythinggraphic.net/gravity-forms-notification-popup/
Gravity Forms is by far one of the most popular, user friendly, easy to use form plugins for WordPress. With its many hooks and filters it is easy for developers to make it do pretty much anything.
I was working on a small website development project for the CO2 Coalition. The design called for the notification in a popup instead of the normal page redirect or AJAX notification.
I work with the Genesis Framework by StudioPress. Below you will see the hook‘genesis_after_footer’. If you aren’t using this framework, make sure you change that to‘wp_footer’.
[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>
';
}[/php]
You will put your custom notification in the Form Settings of the particular form you are making this popup for. $confirmation on line 10 is reserved for that. Notice that after this variable there is custom content. You can put anything you want there. From lines 15 on, we write some simple jQuery to close the popup and get rid of the overlay that we insert on line 16. Make sure to style that with CSS like so:
[css]#overlay {
background: #000;
background: rgba(0, 0, 0, 0.3);
display: block;
float: left;
height: 100%;
left: 0;
position: fixed;
top: 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;
}[/css]
Revisions
- August 4, 2015 @ 05:15:45 [Current Revision] by PeterLugg
- August 4, 2015 @ 05:15:45 by PeterLugg
Revision Differences
There are no differences between the August 4, 2015 @ 05:15:45 revision and the current revision. (Maybe only post meta information was changed.)
No comments yet.