Skip to content

Loading Animation For Forminator AJAX Forms

add_action( 'wp_footer', 'forminator_preload', 20 );

function forminator_preload() {

	global $post;
	if ( ! $post instanceof WP_Post || ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
		return;
	}

?>
<script type="text/javascript">
	(($,d)=>{
		if ( window.wpmudev_forminator_ajax_preloader ) {
			return;
		}
		window.wpmudev_forminator_ajax_preloader = {
			// using entry-content wrapper because form elem will be replaced with new one.
			wrapper : '.form-wrap',
			preloader_src : 	'<?php echo esc_url( admin_url() ); ?>images/spinner-2x.gif',
			preloader_is_visible : false,

			run: function() {
				//add preloader.
				this.add_preloader();
				// show the preloader.
				this.show_preloader();
				// hide form when it loads until the scripting is done.
				$(d).on( 'after.load.forminator', () => {
					$( '.forminator-custom-form' ).hide();
				} );
			},

			add_preloader: function() {
				$( this.wrapper ).prepend(
					`<img class=\"wpmudev-forminator-ajax-preloader\" style=\"display:none; position: relative; overflow: hidden; left: 40%; top: 45%;\" src=\"${wpmudev_forminator_ajax_preloader.preloader_src}\">`
				);
			},

			show_preloader : function() {
				$( '.wpmudev-forminator-ajax-preloader' ).show();
				$( '.forminator-custom-form' ).hide();
				this.preloader_is_visible = true;
			},

			hide_preloader: function() {
				$( '.wpmudev-forminator-ajax-preloader' ).
				fadeOut( 300, function() { 
					$(this).hide(); 
				} 
					   );
				$( '.forminator-custom-form' ).show();
				this.preloader_is_visible = false;
			}	
		};

		$(d).ready( function(){

			wpmudev_forminator_ajax_preloader.run();
			// element to observe
			const elem = $( wpmudev_forminator_ajax_preloader.wrapper )[0];
			// config of observation.
			const config = { attributes: false, childList: true, subtree: true };
			// observation callback.
			const callback = function( mutationsList, observer ) {
				for( const mutation of mutationsList ) {
					if ( mutation.type === 'childList' ) { // only if the childList changed
						// if pagination steps is added we know that scripting is done.
						if ( wpmudev_forminator_ajax_preloader.preloader_is_visible ) {
							//Please remove mutation.target.className === 'forminator-pagination-steps' && from the above condition, in case of single page forms
							wpmudev_forminator_ajax_preloader.hide_preloader();
						}

					}
				}
			};

			const observer = new MutationObserver(callback);
			// start observation.
			observer.observe(elem, config);

		} );
	})(jQuery,document);
</script>
<?php
};
An den Anfang scrollen