• shimzani

    (@shimzani)


    Hi,

    I am trying to add a loader with a screen overlay when a form is submitted but before redirected. This is particularly necessary as there are a few files that have to be uploaded with each form, thus creating a lag when submitting.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hello @shimzani

    I hope you’re well today!

    There’s a built-in “loader” option that you can enable in “Behaviour” section of form configuration, namely the “Submission indicator” option. If it’s set to “Show Loader” you can put a text in the input filed there (to be displayed while the form is being submitted).

    By default that submission indicator is positioned right above the form (as a message) but you should be able to style a

    .forminator-loading

    class to show in form of “full screen overlay”. A CSS like this should give you a foundation for the start:

    .forminator-loading {
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    	background:rgba(0,0,0,0.5);	
    }

    Best regards,
    Adam

    shimzani

    (@shimzani)

    Thats great! Thank you!
    The problem is I cannot seem to get the overlay to be applied to the entire page. I have using a jQuery to append it to the body, which doesnt seem to be working. Any suggestions?

    Plugin Support Kasia – WPMU DEV Support

    (@wpmudev-support2)

    // wrong reply 🙁

    Plugin Support Kasia – WPMU DEV Support

    (@wpmudev-support2)

    Hello @shimzani ,

    Can we have a look at your site so we could check why code that Adam provided is not working there?

    kind regards,
    Kasia

    shimzani

    (@shimzani)

    Hi yes sure. Please click here and scroll down to the center of the page where you will see the form

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi @shimzani

    Thanks for response!

    My idea was to use just CSS, without the need for any JS. However, after further testing – also with your site – it seems that it wasn’t really a “best shot”.

    I have asked our developers for advice on this and am awaiting their opinion so please keep an eye on this ticket and I’ll update you here as soon as I get to know more.

    Best regards,
    Adam

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi @shimzani

    I hope you’re doing well today and I’m sorry for such a long overdue.

    One of our developers came up with another solution for such full-screen overlay. I tested it on my end and it seems to be working nicely.

    To put it on site you’d need to make sure that “Show Loader” option is enabled in the form’s “Behaviour” section and put this code as MU plugin on site:

    <?php 
    
    add_action( 'wp_footer', function() {
    
        global $post;
    
        if ( ! $post instanceof WP_Post || ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
            return;
        }
    
        $message = __( "Please wait while your info is being submitted" );
    
        ?>
        <div id="forminator-overlay" style="display: none;z-index:100; position: fixed!important; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5)!important;">
            <h2 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"><?php print( $message ); ?></h2>
        </div>
        <script type="text/javascript">
    
            (($,d)=>{
    
                if ( window.wpmudev_forminator_loader_on_submit ) {
                    return;
                }
    
                window.wpmudev_forminator_loader_on_submit = {
    
                    run: function() {
    
                        let form = $( 'form.forminator-custom-form' ),
                            button = form.find( 'button' );
    
                        button.on( 'click', function(e){
                            $( '#forminator-overlay' ).fadeIn( 400 );
                        } );
    
                        $(d).ajaxComplete( function( event, xhr, settings ) {
    
                            let response_text = JSON.parse( xhr.responseText );
    
                            if ( 
                                typeof response_text.data.behav !== 'undefined' &&
                                response_text.data.behav != ''
                            ) {
                                $( '#forminator-overlay' ).fadeOut( 300 );
                            }
    
                        });
    
                    }
                    
                };
    
                $(d).ready( function(){
                    $(document).on( 'after.load.forminator',function( e, form_id ) {
                        wpmudev_forminator_loader_on_submit.run();
                    });
                } );
            })(jQuery,document);
    
        </script>
        <?php
    
    }, 999);

    To put it as “Must Use” plugin on site simply create an empty file with a .php extension (e.g. “forminator-overlay.php”), copy and paste code into it and upload it to the

    /wp-content/mu-plugins

    folder of your WordPress install.

    It should work out of the box though you might want to adjust message content and CSS in the code to make it match your design needs.

    Best regards,
    Adam

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.