Title: Submit button loader
Last modified: November 21, 2019

---

# Submit button loader

 *  Resolved [shimzani](https://wordpress.org/support/users/shimzani/)
 * (@shimzani)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/submit-button-loader/)
 * 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 [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/)
 * (@wpmudev-support8)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/submit-button-loader/#post-12161840)
 * Hello [@shimzani](https://wordpress.org/support/users/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
 *  Thread Starter [shimzani](https://wordpress.org/support/users/shimzani/)
 * (@shimzani)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/submit-button-loader/#post-12162781)
 * 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 [Amin – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support2/)
 * (@wpmudev-support2)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/submit-button-loader/#post-12176589)
 * // wrong reply 🙁
    -  This reply was modified 6 years, 8 months ago by [Amin - WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support2/).
      Reason: posted incorrect reply in ticket
 *  Plugin Support [Amin – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support2/)
 * (@wpmudev-support2)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/submit-button-loader/#post-12176632)
 * Hello [@shimzani](https://wordpress.org/support/users/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
 *  Thread Starter [shimzani](https://wordpress.org/support/users/shimzani/)
 * (@shimzani)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/submit-button-loader/#post-12176660)
 * Hi yes sure. Please [click here](http://sacredheart.co.za/application-form-primary/)
   and scroll down to the center of the page where you will see the form
 *  Plugin Support [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/)
 * (@wpmudev-support8)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/submit-button-loader/#post-12187091)
 * Hi [@shimzani](https://wordpress.org/support/users/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 [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/)
 * (@wpmudev-support8)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/submit-button-loader/#post-12333445)
 * Hi [@shimzani](https://wordpress.org/support/users/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)

The topic ‘Submit button loader’ is closed to new replies.

 * ![](https://ps.w.org/forminator/assets/icon-256x256.gif?rev=3443182)
 * [Forminator Forms – Contact Form, Payment Form & Custom Form Builder](https://wordpress.org/plugins/forminator/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/forminator/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/forminator/)
 * [Active Topics](https://wordpress.org/support/plugin/forminator/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/forminator/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/forminator/reviews/)

 * 7 replies
 * 3 participants
 * Last reply from: [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/)
 * Last activity: [6 years, 6 months ago](https://wordpress.org/support/topic/submit-button-loader/#post-12333445)
 * Status: resolved