How to Add a Ninja Forms Loading Icon

I searched everywhere on the web for this and only found one (that didn’t work), So here is my method of adding a loading icon / loading spinner to Ninja Forms (Or probably any form such as Gravity Forms / WPForms) using BlockUI.

The site I was working on had a lot of ‘Actions’ that ran in the background on Submit, so the form took forever to send, with nothing visually moving to let people know something is happening. Initially I wanted to append a spinner inside the button but I couldn’t figure that out (If you know how – hit me up below).

You can see the working loading icon at the bottom of the page. This will display in the centre of the screen with a semi-transparent background hiding your content.

What you’ll need:

• Insert Headers & Footers Plugin (If you only have one form).
• Insert HTML widget. (If you have multiple forms) – I used Insert PHP/HTML.
• BlockUI js file.
• FTP Access to your WP Site to upload BlockUI.
• A fully CSS loading icon. I got mine (below) from here.
• My below script to either go in your sites header or on each.

1. Lets get started.

Upload the blockUI file you downloaded to your webserver into this directory:
/wp-content/themes/your_theme_name/js/jquery.blockUI.js

• Install the Install Headers & Footers plugin.
• Login to your WP Site and Navigate to “Settings -> Insert Headers & Footers”
• Copy & paste the code below (Edit it to match your BlockUI directory from Step 1 and your submit button id – We’ll get to that.)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- include BlockUI -->
<script src="https://your_website.com/wp-content/themes/your_theme_name/js/jquery.blockUI.js"></script>
<script type="text/javascript">
    // unblock when form has submitted
    $(document).on( 'nfFormSubmitResponse', function() { $.unblockUI(); });

   $(document).on('click', '#nf-field-XXX', function() {
   $.blockUI( {
       message: '<div class="loader">Loading...</div>',
       css: {
            padding:    '15px',
            'text-align': 'center',
            color:      '#212121',
            border:     'none',
            backgroundColor:'rgba(255, 255, 255, 0.0)',
            cursor:     'wait',
            '-webkit-border-radius':'3px',
            '-moz-border-radius':   '3px',
            'border-radius':        '3px'
        } } );
});
</script>

You need to change “https://your_website.com/wp-content/themes/your_theme_name/js/jquery.blockUI.js” to your BlockUI location.

You also need to change #nf-field-XXX to your button id. This can be found by opening your website page with the form in Google Chrome, right click on your Submit button and click “Inspect”.

In the below example you can see it is #nf-field-582

---

• Log in to WordPress and Edit the page that has your form on it, using your editor of choice (I used Elementor).
• Add your Insert HTML/PHP widget.
• Copy & paste the code below (Edit it to match your BlockUI directory from Step 1 and your submit button id – We’ll get to that.)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- include BlockUI -->
<script src="https://your_website.com/wp-content/themes/your_theme_name/js/jquery.blockUI.js"></script>
<script type="text/javascript">
    // unblock when form has submitted
    $(document).on( 'nfFormSubmitResponse', function() { $.unblockUI(); });

   $(document).on('click', '#nf-field-XXX', function() {
   $.blockUI( {
       message: '<div class="loader">Loading...</div>',
       css: {
            padding:    '15px',
            'text-align': 'center',
            color:      '#212121',
            border:     'none',
            backgroundColor:'rgba(255, 255, 255, 0.0)',
            cursor:     'wait',
            '-webkit-border-radius':'3px',
            '-moz-border-radius':   '3px',
            'border-radius':        '3px'
        } } );
});
</script>

You need to change “https://your_website.com/wp-content/themes/your_theme_name/js/jquery.blockUI.js” to your BlockUI location.

You also need to change #nf-field-XXX to your button id. This can be found by opening your website page with the form in Google Chrome, right click on your Submit button and click “Inspect”.

In the below example you can see it is #nf-field-582

Repeat this same process for every page that has a form. Changing only your #nf-field-XXX

---

4. Add your Pure CSS loader of choice. (Or Mine)

• If you’re using a custom loading icon remember to change the line in the code you added to match. These work well as they are already called ‘loader’

<div class="loader">Loading...</div> 

Change “loader” to your “.loader_name” from the CSS you add. You can also change the ‘Loading…’ text or add:

<p>Your text here</p> after the </div> closing tag.

---

Adding your CSS loader

From your WordPress, go to Appearance > Customize > Additional CSS.

Copy and paste your loading icon CSS or use mine (The one at the top of the page)

.loader,
.loader:before,
.loader:after {
  background: #4a54ff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #4a54ff;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

---

You’re Done!

You can edit the style of the “BlockUI” giving it a background by changing the transparency in backgroundColor field in Step 2/3.

I’ve set it to 0.0 which makes the Block fully transparent. 0.3 would be less transparent etc.

For more blockUI styling options & demos click here

If you have any issues with this, or know how to get a spinner to work within a Ninja Form submit button, let me know below in the comments.

Any method of ‘appending’ a spinner to a Ninja Form Submit button I found online simply didn’t work.

---