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.
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)
We need to add 2 classes to the
Custom HTML field:.
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.
Custom CSS and JS in Fluent Form Settings.
$form which is
You can follow the exact same process for the other spinners on the https://loading.io/css/ website.