Contact form 7 (WPCF7) Spinner

[llribas]

The spinner for Contact Form 7 is not showing.
This issue is very old, I think it’s a shame it’s still an issue.

Some past posts about this issue:

Contact Form 7 Spinner

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

WPCF7 Spinner

Two more differences I spotted is that the forms with working spinners have this whereas the others do not… [image] And, the ones that work have created a space for the spinner, the non-functioning ones don’t… [image] [image]

CF7 no spinner on submit

I just updated the CF7 plugin and noticed that I have several duplicate emails from form submissions. What I am seeing now is that when the submit button is clicked, there is no indication that anything is happening. No spinner, just looks like a static page. After some time, the form shows submitted and redirects like is it supposed to. I’m not sure where to start looking for the reason for the spinner to not display when the submit button is clicked. WP 5.7 Pro 4.2.3 CF7 5.4 PHP 7.4

this solutions does not work anymore.

Now I use this code from @striata from oct 21!

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

[tristup]

Hi @llribas,

The mentioned issue has been already fixed in the upcoming release. Till the update comes, please use the code that is working.

Thanks

[llribas]

Your theme and Cornerstone are great, but you can’t spend two years in solving and issue like this.
thank you

[tristup]

Hi @llribas,

We are really sorry for that, but unfortunately, you have to wait for the upcoming release with the fix.

Thanks