Adding custom loader to Fluent Forms

Fluent Forms is a great plugin that allows you to do lots of amazing and complex things, far beyond just standard contact forms.

Recently, I saw someone that asked if it was possible to add a custom loader/spinner.

Fluent Forms has a built-in loader which is a progress bar at the bottom of the submit button. However, this is not very obvious sometimes. Especially when you are using the amazing Form API to do some advanced calculations and functions that take a bit of time to process.

Below is a quick demo of what we are going to build:

We are going to make use of CSS loaders from https://loading.io/css/. You can swap my example for any you prefer.

Adding the loader

First we need to add the loader. I have chosen the LDS Ring loader.

Add a Custom HTML field at the end of your form and paste the divs from the CSS Loader website inside the text tab. (Make sure its text and not visual)

        <div class="lds-ripple"><div></div><div></div><div></div><div></div></div>
Copy

We need to add 2 classes to the Custom HTML field:. ff-hidden & loader-wrapper. First class hides the field, so we don’t see it on the frontend. The second class allows us to target the field with our JavaScript later.

Next is the css for the loader to “animate”. You can place this under the forms Custom CSS and JS section. However, if you want to reuse the code, I recommend putting it in a global stylesheet.

We also need to add some custom styles to position the loader properly.

        .loader-wrapper{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: rgba(0,0,0,0.33);
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Replace with your loader CSS below */
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
      
Copy

The JavaScript

The last part of this is actually showing and hiding the loader when we need it. To do that, we are going to use JavaScript. This needs to be placed inside the JS section of the Custom CSS and JS in Fluent Form Settings.

The reason is we have to place the Javascript in here is because we are using $form which is The Javascript (jQuery) DOM object of the Form` which allows us to hide the loader when the form has completed.

        $(".ff-btn-submit").click(function(){
    $(".loader-wrapper").removeClass("ff-hidden");
});

$form.on('fluentform_submission_success', function() {
    $(".loader-wrapper").addClass("ff-hidden");
});
      
Copy

You can follow the exact same process for the other spinners on the https://loading.io/css/ website.