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

2. Headers & Footers Method

Skip to Insert PHP/HTML Method if you have more than one form.

  • 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


3. Insert PHP/HTML Method

Skip this step if you only had one form and completed Step 2.

  • 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.


Loading…

4 thoughts on “How to Add a Ninja Forms Loading Icon”

  1. ankara acil dis

    Its like you read my mind! You appear to know so much about this, like you wrote the book
    in it or something. I think that you could do with a few pics to drive the message home a bit,
    but instead of that, this is great blog. A great read.
    I will definitely be back.

  2. replica watches

    It’s a pity you don’t have a donate button! I’d definitely
    donate to this fantastic blog! I guess for now i’ll settle for bookmarking and adding your RSS feed to my
    Google account. I look forward to fresh updates and will talk about this site with my Facebook group.

    Talk soon!

  3. After I originally commented I appear to have clicked on the -Notify me when new comments are added-
    checkbox and now each time a comment is added I receive 4 emails with the same comment.

    Is there a way you are able to remove me from that service?
    Appreciate it!

  4. I enjoy what you guys tend to be up too. Such clever work and reporting!
    Keep up the terrific works guys I’ve added you guys
    to my blogroll.

Leave a Comment

Your email address will not be published. Required fields are marked *