• Resolved CRE8

    (@cre8gr)


    Hey guys,

    What a great plugin! Premium settings for forms at a free plugin! Whoah!

    Now to my question.

    One thing I have a problem is when I submit my test form which is quite large, meaning it has so many form elements that the users scrolls a lot until he hits the bottom and submit the form. Also it has about 10 upload fields so it takes a while to submit.

    The issue is that when the user submits the form using Ajax the Submission Indicator icon and message is displayed at the top of the form, but the user has scrolled at the bottom of the form without being able to really see what is going on unless he scrolls to the top. Is there a way to display the submission message at the center of the screen, whether he’s at the top or the bottom of the form?

    Thanks!

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

    (@wpmudev-support8)

    Hi @cre8gr

    I hope you’re well today and thank you for your question!

    Currently the message can only be displayed at the top. We’ve already discussed that with our developers and logged as feature request so there’s a good chance that in future it will be possible to adjust position of that message.

    As a workaround for now, you could try setting up a “full screen overlay” message. It would work slightly different and instead of showing the message at the very top it would show an “overlay” over entire visible part of the page with a message on it. It could be additionally adjusted with CSS.

    It takes a bit of customization but might be worth a shot. To give it a try, do as follows:

    1. make sure that the “show loader” option is enabled in form settings

    2. create an empty file with a .php extension (e.g. “forminator-loader-overlay.php”)

    3. copy and paste following code into it

    <?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);

    4. Save the file and upload it to your server to the “/wp-content/mu-plugins” folder of your WordPress installation; if there’s no “mu-plugins” folder right inside “wp-content”, just create an empty one.

    There’s no need to activate the plugin, it should work “out of the box”. To remove it, simply remove the file from server.

    Best regards,
    Adam

    Thread Starter CRE8

    (@cre8gr)

    Well, first thanks for the great help! Woah!

    It kinda works until I go and click any File Upload button. It immediately opens the overlay displaying the Please wait while your info is being submitted message without being able to fill any other input box.

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi @cre8gr

    Thanks for response and letting me know about the upload issue.

    I just asked one of our developers (who created this code) to give it another spin to see if/how to overcome that. I’ll update you here as soon as I get feedback from him.

    Best regards,
    Adam

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi @cre8gr

    Just got an update for you šŸ™‚

    It seems that “fix” would be simple. Could you please try to change line:

    button = form.find( 'button' );

    in the code that you already tried to

    button = form.find( 'button.forminator-button-submit' );

    It should do the trick.

    Best regards,
    Adam

    Thread Starter CRE8

    (@cre8gr)

    That did the trick thanks!

    One last problem (I hope) though. When the user presses the submit button and hasn’t filled the required fields, the overlay is displayed with the message, although the form itself is not being submitted, since the user hasn’t filled the required fields.

    So he/she can’t go back and fill the required fields due to the overlay.

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi @cre8gr

    I think that perhaps adding some sort of a “close” button/icon could work here. I’ve asked our developers to take another look into that and I’ll let you know.

    Please note though: we’re already quite far into custom development so any further improvements of that I’d need to file as a feature request for future plugin releases rather than asking developers for the code. I hope that makes sense šŸ™‚

    Best regards,
    Adam

    Plugin Support Pawel – WPMU DEV Support

    (@wpmudev-support9)

    Hello @cre8gr

    I trust you are doing well!

    Please use this code and place it in the functions.php of your child theme:

    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.forminator-button-submit' );
    
                        button.on( 'click', function(e){
                            $( '#forminator-overlay' ).fadeIn( 400, function(){
                                let overlay = $( this );
    
                                if ( form.find( '.forminator-error-message' ).length ) {
                                    overlay.hide();
                                }
                                
                            } );
                        } );
    
                        $(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);

    If you do not have a child theme, please see here ho to create it.

    Or you can add the code as mu-plugin. Create a new file in /wp-content/mu-plugins/ directory, name it forminator-loader-overlay.php. Make sure to add the very top of the file this line:
    <?php

    Let us know how it went!

    Kind regards,
    Nastia

    Plugin Support Pawel – WPMU DEV Support

    (@wpmudev-support9)

    Hello there @cre8gr

    I hope you are doing well!

    We haven’t heard back from you for a while now so we’ve marked this ticket as resolved. If you do have any followup questions or require further assistance feel free to reopen it and let us know here.

    Kind regards,
    Nastia

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Submission Indicator’ is closed to new replies.