Ajax loader animation for submit button not working

[allieprincipe]

Hi there! Would like some help on how to troubleshoot the ajax loader for my Contact Form 7 installed on this page: https://graar.ph/feedback/.

I was able to have the loader show up using the following code:

form.submitting .wpcf7-spinner {
visibility: visible;
}

.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d;
opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
top: 8px;
right: 14px;
position: relative;
}

.wpcf7-spinner::before {
content: ‘’;
position: absolute;
background-color: #fbfbfc;
top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

However, the spinning animation doesn’t seem to work. Hope someone can help me out with this!

[tristup]

Hi Allie,

Thanks for reaching out.
It seems that Contact Form 7 is submitted without AJAX and that is why the AJAX loader is not showing. There might be some different reasons behind your issue, I would like to suggest troubleshooting the following common issue to help us to recognize the reason.

1.Theme Related Issue
2.Plugin Conflict
3.Theme Update related issue
4.CSS/JS Customization
5.Disabling Cache
6.Disabling CDN

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If none of the above help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks