Gravity Forms is one of the most powerful form plugins for WordPress, but its default loading indicator can be somewhat underwhelming. In this tutorial, we’ll create a custom full-screen loading spinner that appears when users submit a Gravity Forms form, providing better visual feedback during submission.
The Problem with the Default Spinner
By default, Gravity Forms displays a small spinner next to the submit button when a form is being processed. This subtle indicator can be easily missed, especially on larger screens or forms that require scrolling.
Our Solution
We’ll implement a full-screen transparent overlay with a centered SVG spinner that:
- Appears immediately when a form is submitted
- Covers the entire screen with a semi-transparent background
- Shows a smooth SVG animation in the centre
- Disappears once the form submission is complete
- Features smooth fade transitions
Implementation
The best part? You won’t need to modify any HTML structure. Our solution uses jQuery (which comes with WordPress) to create the overlay dynamically when needed.
Step 1: Create a Custom Plugin, Add to functions.php or Code Snippets Plugin
Create a new file called gravity-forms-fullscreen-spinner.php in your /wp-content/plugins/ directory with this code (or add it to you functions.php or create a new code snippet in your Code Snippets plugin:
<?php
/**
* Plugin Name: Gravity Forms Full-Screen Spinner
* Description: Adds a full-screen loading spinner overlay when submitting Gravity Forms
* Version: 1.0
* Author: Your Name
*/
function add_form_spinner_overlay() {
?>
<script>
jQuery(document).ready(function($) {
// Create overlay div and append to body
$('body').append('<div id="gform-overlay"><div class="gform-spinner"></div></div>');
// Add CSS for overlay and spinner
$('head').append(`
<style>
#gform-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
visibility: hidden;
}
#gform-overlay.active {
opacity: 1;
pointer-events: all;
visibility: visible;
}
.gform-spinner {
width: 50px;
height: 50px;
background-image: url('data:image/svg+xml,<svg width="24" height="24" stroke="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3" stroke-linecap="round"><animate attributeName="stroke-dasharray" dur="1.5s" calcMode="spline" values="0 150;42 150;42 150;42 150" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite"/><animate attributeName="stroke-dashoffset" dur="1.5s" calcMode="spline" values="0;-16;-59;-59" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite"/></circle><animateTransform attributeName="transform" type="rotate" dur="2s" values="0 12 12;360 12 12" repeatCount="indefinite"/></g></svg>');
background-repeat: no-repeat;
background-size: 50px;
background-position: center center;
}
</style>
`);
// Add form submission handler
$(document).on('submit', '.gform_wrapper form', function() {
$('#gform-overlay').addClass('active');
});
// Hide overlay when form submission completes
$(document).on('gform_confirmation_loaded', function() {
$('#gform-overlay').removeClass('active');
});
});
</script>
<?php
}
add_action('wp_footer', 'add_form_spinner_overlay');
Step 2: Activate and Test
If you created a plugin, activate it through the WordPress admin panel. If you added the code to functions.php, or a new code snipper you’re already set.
Visit a page with a Gravity Forms form and submit it. You should see a full-screen overlay with a centred spinning animation that fades in when you submit the form and fades out once the submission is complete.
How It Works
Our solution consists of three main components:
- The Overlay: A fixed-position div that covers the entire screen with a semi-transparent black background
- The Spinner: An SVG animation that indicates loading
- Event Handlers: JavaScript that shows and hides the overlay at the appropriate times
The Code Explained
- We create a new div element and append it to the body
- We add CSS styles to position the overlay and spinner
- We use jQuery to listen for form submission events
- We use Gravity Forms’ built-in events to know when to remove the overlay
- We use CSS transitions for smooth fade effects
Customisation Options
You can easily modify this solution to match your site’s design:
- Change the overlay background colour and opacity in the CSS
- Replace the SVG spinner with your own design
- Adjust the spinner size (currently set to 50px)
- Modify the transition speed (currently 0.3s)
Benefits
This improved loading indicator:
- Provides clearer visual feedback to users
- Prevents users from attempting to submit a form multiple times
- Creates a more professional user experience
- Works with all Gravity Forms without modifying their HTML structure
Conclusion
With just a few lines of code, you can significantly improve the user experience of your WordPress forms. This solution works with all Gravity Forms on your site and requires no HTML modifications or additional plugins.
