Contact Form 7 Spinner

[ppe29]

I was wondering if you could help me assess why I’m not able to get the CF7 spinner working on my site. I looked at a few forums about this topic, but they were either left unresolved or the solutions may not apply to my site. Site is preferredpump.com/golf

[friech]

Hi @ppe29,

Thanks for reaching out, this seems to be a bug, I’ve submitted this to our issue tracker so the developers will be
made aware of it. But please note that Contact Form 7 is a 3rd party plugin and we cant guarantee a fix for this sooner.

Cheers,

[ppe29]

OK I will check back later and hopefully there will be a resolution. Are you able to share specifically what the bug is that’s causing the issue? Just out of curiosity…

[marc_a]

Hi @ppe29,

It has something to do when using forms that don’t use AJAX.

Thank you.

[ppe29]

Do you have any other suggestions for form spinner plugins that are known to work in X theme?

[tristup]

Hi @ppe29,

Temporarily, you can add the following custom CSS code into the Theme Options > CSS to get rid of this problem.

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;
    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;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[ppe29]

Unfortunately, this didn’t work for my form. But I sincerely appreciate your willingness to help and will look forward to when your team can work on the update to whatever bug @friech mentioned above. Thanks again

[ruenel]

You are most welcome.

[striata]

I have had the same problem. Before seeing this here, I solved it in the same way. However, I needed one additional piece of code, namely adding the @keyframe.

By the way, this is the exact same code as it already exists in the CSS of the CF7 plugin itself, but, for whatever reason, it does not get applied. It works when copying this code to the page-CSS, then it gets properly applied.

Here is the full CSS code that I have added:

@keyframes spin {
	from { transform: rotate(0deg);	}
	to { transform: rotate(360deg);	}
}

.wpcf7-spinner {
	visibility: hidden;
	display: inline-block;
	background-color: #23282d; /* Dark Gray 800 */
	opacity: 0.75;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 100%;
	padding: 0;
	margin: 0 24px;
	position: relative;
}

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

.wpcf7-spinner::before {
	content: '';
	position: absolute;
	background-color: #fbfbfc; /* Light Gray 100 */
	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;
}

form.submitting .wpcf7-submit {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

The very last bit ( form.submitting .wpcf7-submit {…} ) has nothing to do with the spinner. I have added it to disable the submit-button during submission to prevent double- or even triple-submission by people that click the submit button again while it is submitting. This was a big problem while the spinner was not working properly.

[ruenel]

Hey @striata,

Thanks for providing the information. Rest assured that our developers have already been informed about this issue.

Cheers.

[ppe29]

I deleted what @tristup suggested to add to Theme Options>CSS and added what @striata suggested to add to just my page CSS, but that didn’t work for me either.

PS: I know you don’t provide support for this matter, but if you’re going to do any testing using my online form, please select branch 29 so the other branches aren’t copied in on these tests. Thanks again.

And thanks anyways @striata. I appreciate the attempt

[tristup]

Hi @ppe29,

Like my colleague says our development team is already aware of this issue and will do further investigation on this.

Thanks

[ppe29]

Sounds good @tristup. Thanks!

[tristup]

Hi @ppe29,

You are most welcome.