Custom Spinner for Contact Form 7

Description

For good reason the Contact Form 7 plugin is the most used contact form plugin for WordPress. The downside is that you see the same boring spinning animation on zillions of websites. The CF7 Custom Spinner plugin allows you to customize this loader animation!

Usage

Customize the spinner animation in ‘CF7 Custom Spinner’ section of your WordPress Dashboard. That’s it!

Customization Options

This plugin allows you to choose from

  • 12 animations
  • 16 colors
  • 3 sizes

(which gives a total of 576 possible combinations)

Requirements

The only requirement for this plugin is that you have the Contact Form 7 plugin installed and activated.

Support

Support Forum

Video

How to customize the Loader Animation of Contact Form 7

Do you like this plugin?

I spend some of my precious free time developing and maintaining my free WordPress plugins. You don’t need to make a donation. No money, no beer, no coffee. If you like this plugin then please do me a favor and give it a good rating. Thanks.

Plugin Privacy Information

  • This plugin does not set cookies
  • This plugin does not collect or store any data
  • This plugin does not send any data to external servers

Peters’ Plugins Privacy Information Page

ClassicPress

This plugin is compatible with ClassicPress.

More plugins from Peter

Take a look at my other plugins

Credits

Thanks a lot to Takayuki Miyoshi for the great Contact Form 7 plugin. Thanks a lot to Tobias Ahlin for creating the beautiful CSS only loading spinners.

Screenshots

  • Customize the spinner
  • Test it live on your site (this shows the spinner animation immediately without the need to click the submit button on your form)
  • The custom spinner in action

FAQ

At some point the customized spinner suddenly stopped working, how can I fix it?

Just open the settings page in the WordPress Admin and save the settings. This should fix the problem.

Will it work with the theme I’m using?

Of course I can’t guarantee that, but actually the plugin should work with every theme.

What about Web Browser compatibility?

This plugin uses pure CSS animations, which are supported in the latest version of all major browsers. Browsers with support for CSS animations make up about 95% of all usage worldwide. Browsers that do not support CSS animations will display the loader without animation.

What about performance?

The CSS code is not generated each time a page is requested but only when saving the settings, so you don’t have to worry about any negative performance effects.

What about page size?

The plugin only adds some CSS code. It does not use images. It does not generate additional server requests. The size of the CSS code depends on the complexity of the anmiation. The most complex animation generates additional CSS code of about 3 KB. Nothing to worry about.

Is it possible to prevent the CSS code from being loaded on pages where it is not needed?

The CSS code generated by the Contact Form 7 Custom Spinner plugin automatically is not added to a page on which you prevented the Contact Form 7 stylesheet from being loaded. You don’t have to care about this.

Where can I get help?

Please use the Support Forum.

Reviews

August 19, 2023
This works great. It does what I wanted it to do. I was able to customize the color with some custom coding. Works great. However: I don't need a message every other time I login to my admin asking me if I like it and will I write a review and will I check out your other plugins. So rather than 5 stars, you get 3. If that's changed - how many times do I have to click the X to close it and never see it again? - then hey - 5 stars.
June 15, 2023
Good plugin that does the job. Thank you.There's just one issue that made me think it didn't work. After activating the plugin, it didn't initially work for me. You have to go into the settings and actually save which spinner you want first. After doing that it started working. I had to do this with every instance I tested.
January 31, 2023
Seems to work on some of my simple CF7 forms but not on some others that are more complicated with conditional logic. If you look at the source code and hover over the code after the submit button, the browser highlights a field where the spinner should be. (I know this b/c this is where it is on the forms that work). This is initially good b/c spinners aren't supposed to show until after you click submit. But for some reason, it doesn't show itself when you click submit even though I know it's there just waiting to show itself.
October 27, 2021
The plugin installed OK and recognised my forms, but it didn't work at all. Not in the test mode offered from the setup page, or on the live CF7 forms. The only thing I could do was toggle between the different spinner options in the test page. I have no idea if I was doing something wrong because there was no documentation as far as I could see. No troubleshooting guide anywhere, and no answers to similar problems from other users in the forums.
Read all 11 reviews

Contributors & Developers

“Custom Spinner for Contact Form 7” is open source software. The following people have contributed to this plugin.

Contributors

“Custom Spinner for Contact Form 7” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “Custom Spinner for Contact Form 7” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

2.0.1 (2022-10-18)

  • Fix for newer CF7 versions
  • Settings interface adapted to my other plugins

2 (2019-01-30)

  • Load all the admin stuff only in admin panel for better performance

1 (2018-08-20)

  • Initial Release