Method for CF7 v5.x
As of version 5.x of Contact Form 7 the first CSS method I posted below no longer works. However, you can still change the loading gif super easily using just CSS. You can either replace the CSS generated visual with your own code, or use a gif.
You may also want to change the other css elements like height and width depending on the size of your new animation. Try submitting the forms below and you’ll see that the new loading images have replaced the old default gif.
PS. You don’t need to enter your name to see this working, just hit the ‘send message’ button. It saves me cleaning up my inbox too!
If you found this in any way useful, please take a moment to read and click on one of the sponsored messages 😉
Before
After with GIF
After with CSS
The CSS option here uses a CSS animation from https://cssloaders.github.io/.
Note: As I have more than one form on the page I gave the form below a class called “.new-spinner” which is referred to in the CSS.
To do this, see: https://contactform7.com/faq/can-i-add-id-and-class-attributes-to-a-form-element
You can just strip the 2 references to the ‘.new-spinner’ class out of the code below to save you doing this.
Example CF7 form with new loading gif
This uses the original gif as a background image. It’s looking a bit tired now I think.
The CSS
/* First we hide the default CF7 loader */
.wpcf7-spinner::before {
display:none;
}
/* Add custom CF7 loader */
.wpcf7-spinner {
background-image: url('images/ajax-loader.gif');
width: 24px;
height: 24px;
margin-left: 10px;
background-color: inherit;
}
Example CF7 form with new CSS loading animation
This looks great right?
The CSS
/* First we hide the default CF7 loader */
.wpcf7-spinner::before {
display:none;
}
/* Add a new custom CF7 loader */
.new-spinner .wpcf7-spinner {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-block;
border-top: 2px solid #262b2e;
border-right: 2px solid transparent;
box-sizing: border-box;
animation: rotation 1s linear infinite;
background-color: inherit;
}
/* Style the new loader element */
.new-spinner .wpcf7-spinner::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
border-radius: 50%;
border-bottom: 2px solid #FF3D00;
border-left: 2px solid transparent;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Method for CF7 version 4.6 on
This is now deprecated. See above.
I’ve been meaning to post this for a while but have just been incredibly busy.
As of version 4.6 of Contact Form 7 the functions.php method I posted originally (see below) no longer works, as a few of you have pointed out in the comments. Thanks for the feedback guys!
The good news is that you can now change the loading gif super easily using just CSS.
You’ll still need to go find or make a new loading gif, as per the usage notes in the deprecated code instructions below, but just add this following CSS (or adaption of it after correcting the filepath to fit your theme) to your theme’s style.css file. You may also want to change the other css elements like height and width depending on the size of your new gif.
Anyhow, here’s how I’ve done it here, and on other projects. Have fun:
Before
After
/* Custom CF7 Loader */
div.wpcf7 .ajax-loader {
background-image: url('images/ajax-loader.gif');
width: 24px;
height: 24px;
margin-left: 10px;
}
Example CF7 form with new ajax loader gif
Try submitting the form below and you’ll see that the new loading image has replaced the old default gif.
PS. You don’t need to enter your name to see this working, just hit the ‘send message’ button. It saves me cleaning up my inbox too!
If you found this in any way useful, please take a moment to read and click on one of the sponsored messages 😉
Method for CF7 version 4.5 and earlier
This method is now deprecated so please use the instructions above for the latest version of Contact Form 7.
Contact Form 7 is a wonderful WordPress plugin that’s incredibly flexible, but I’ve never been a big fan of the default arrow-headed ajax loading gif that appears whilst the form’s processing after submission.
Editing 3rd party plugin files directly is a terrible idea for a number of reasons, not least because the next time the plugin’s updated you’ll lose your changes.
However the good news is that it’s really easy to find an alternative image, and to change it by adding a few simple lines of code in your theme’s functions.php file.
What we’re doing from a technical point of view is adding a filter function to replace the code created by the CF7 plugin, so that it uses our new image instead of the default one supplied.
The code’s below, but please read the notes below first.
Before
After
// Custom CF7 loading image
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
function my_wpcf7_ajax_loader () {
return get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
}
Usage notes
The first thing you’ll need to do is find a suitable or more appealing alternative to the default gif. You can make one yourself of course, but for a quicker option head over to www.ajaxload.info and select one from a pretty decent range and download it. I’d recommend using a transparent background.
Once you’ve done that, you’ll need to upload the file you downloaded to your theme and then simply add the code above to your functions.php file to reference the correct location of the new gif file.
If you look at the code above you’ll see in the 4th line that I’ve stored the new gif image in a directory within my theme called images.
return get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
Also, as I’m using a child theme, and I can’t think of a decent reason why you wouldn’t, in that line I’ve used the get_bloginfo function to target the ‘stylesheet_directory’.
However, if you’re editing the theme or parent’s functions.php file directly and not using a child then you’d need to target the ‘template_directory’ and use the following code in your 4th line instead:
return get_bloginfo('template_directory') . '/images/ajax-loader.gif';
Conclusion
All-in-all that was pretty simple really and it neatly demonstrates the ease with which you can hook into the WordPress API using filters or actions.
Comments or questions are welcome.
Updated for CF7 v5.
Comments re-opened.
Include a link to your Contact Form 7 form so we can examine your form in detail (using Firebug or Chrome Dev Tools) to understand the CSS used for your Contact Form 7 form elements.
Hi, the form’s here.
Thank you so much man 🙂
Quick Update:
So I was chatting to someone the other day about this who was having a problem getting this to work, but couldn’t figure out why. They were using a theme, with a child theme for modifications, which is all good.
They’d used ftp and uploaded the file to a new images directory in their child theme folder, as above.
However, instead of adding the css into the theme’s stylesheet, the theme had it’s own ‘Custom CSS’ screen in the theme options panel and it turned out they’d used this to add the code above.
This didn’t work since the filepath in this context was relative to the parent theme and not the child, so the new gif wasn’t found. This also happens if you or your theme adds the CSS to the native customiser in WordPress which is: ‘Appearance > Customise > Additional CSS’
Instead of using either of these ways to add the CCS, it’s much easier to use ‘Appearance > Editor’ and add the css above in your stylesheet as per the original instructions.
If, for whatever reason, you still want to use a the native customiser or a theme driven custom CSS screen, then the simple solution to this is to use an absolute filepath.
Andy
Cheers for this, I couldn’t get it to work on my theme either.
But I found a better solution with 1-line of CSS in my child theme:
div.wpcf7 .ajax-loader {background-image: url(‘images/ajax-loader.gif’);}
Hey Richard
Absolutely. I realised a while back that since 4.6 this was now updated, but only got round to updating this post due to workload, but you’re 100% correct – so as you suggest – the new solution is above.
Thanks
Andy
Those transparent GIFs at ‘www.ajaxload.info’ are fine if you want them on appropriate solid coloured backgrounds … but as an alpha based image on a background that changes colour (video background, for example) they are awful … you’re left with ‘noisy’ coloured outlines … I tend to make my own in Photoshop but without the coloured aliasing edging …
As for changing the ajax image … I find it a lot quicker just to goto the folder, where the ‘ajax-loader.gif’ is and swap it out there and then … you only need to change it under the Contact Form 7 plugin directory … /wp-content/plugins/contact-form-7/images/ … no code needed …
Cheers,
GemBro
Hey GemBro
Yeah I agree about the gifs. I tend to create a new one with the background already included if it’s on anything other than white. Unless it’s a top $ job I’m lazy and don’t tend to have the time to make my own – but I should give it a try one day 🙂
Replacing the image is fine – but every time you update the plugin – you’ll have to remember to go back and add the file back into the plugin’s folder. Remember I said I was lazy? Yeah – so just bang the file into your theme’s folder and add the CSS and forget it.
Anyhow thanks for the feedback!
cheers
Andy
Looks like they’ve restructured how it works, the loader is now the background of a span so it can be customised just using css. Example:
div.wpcf7 form.wpcf7-form span.ajax-loader {width: 32px; height: 32px; background-image:url(../images/custom-ajax-loader.gif); background-size: 32px}
Yeah I saw this when I was building a site over Christmas just too busy to update this article. I’ve posted the fix since v4.6 above.
Thanks for the feedback.
Andy
Hey there!
Thank you for this! I’m currently developing a wordpress website, using the Divi theme. I have now fully changed the appearance of my CF7 contact form (which is integrated into a popup window, using the Popup Maker plugin).
Unfortunately I still cannot change the ajax loader in my child theme, despite carefully following all of your instructions. My functions.php file (which resides in my child theme’s root folder and adds functionality to my theme’s functions.php) contains the following php:
—
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
// Custom CF7 loading image
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
function my_wpcf7_ajax_loader () {
return get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
}
—
I have downloaded an ajax gif, called "ajax-loader.gif" and placed it inside an images folder inside my Divi-child folder.
Unfortunately everything I've tried has failed to work.
Any help you could give me…or any ideas…would be greatly appreciated!
Many thanks!
Hi Paul,
Sounds like you’re almost there, but I’m not familiar with the Divi theme or the Popup Maker Plugin, however this should be relatively simple to fix – I wonder if the link to the .gif resource is slightly out. The guys at Elegant Themes are pretty helpful, so I’d ask them in the first instance. If you’re really stuck, bang your admin and ftp creds over to me via email using the address below and I’ll take a quick look.
cheers
Andy
I’m having the same issue. Not sure how to proceed. I added the ajax-loader.gif to the correct theme folder. Thanks anyway.
// custom loader
add_filter(‘wpcf7_ajax_loader’, ‘my_wpcf7_ajax_loader’);
function my_wpcf7_ajax_loader () {
return get_bloginfo(‘stylesheet_directory’) . ‘/images/ajax-loader.gif’;
}
Hey MJ
Since I posted the original article, and as a few folks have pointed out here in the comments, CF7’s been changed since v4.6 and it’s now much easier.
The new solution is above.
cheers
Andy