View Categories

Scroll to the Top of Popup On Form Submit

In some situations, you may need to scroll back to the top of your popup when a form is submitted. In this case, we can use the code below to get our desired results.

The global $_POST array key and value in the following code sample will vary based on your form. Replace the values in the sample with the actual array key and value used on your project.

Copy, paste, and edit the following code in your child theme’s functions.php file, or use the My Custom Functions plugin to install the code for you. 

<?php
/**
 *  Note 1: Replace the placeholder strings 'form_id' and 'my_form'
 *  in the example below with the actual values from your use case.
 *
 *  Note 2: From the WP Admin, refer to 'Popup Maker' ->
 *  'All Popups' -> 'CSS Classes (column)' -> to find the popup ID
 *  mumber specific to the popop that contains the form. Replace the
 *  number below ('123') with the integer value from your popup inside
 *  the string '#pum-{integer}'.
 *
 *  Add the following code to your theme (or child-theme)
 *  'functions.php' file starting with 'add_action()'.
 * -------------------------------------------------------------------------- */
add_action( 'wp_footer', 'pum14_popup_reg_form_check', 1000 );
/*
 *  Scroll back to top of screen after popup form submit.
 *
 *  @since 1.0.0
 *
 *  @return void
 */
function pum14_popup_reg_form_check() {
	if ( isset( $_POST['form_id'] ) && $_POST['form_id'] == 'my_form' ) {
		?>
        <script type="text/javascript">
            jQuery('#pum-123').animate({'scrollTop': 0}, 1000);
        </script>
		<?php
	}
}

View the source on GitHub.

Leave the first comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.