Анимация кнопки во время отправки формы Contact Form 7

У CF7 есть свой стандартный, хоть и некрасивый спинер, который появляется после нажатия на кнопку отправки и сообщает пользователю, что данные отправляются. Но некоторые темы его прячут или заменяют на что-то своё. Например, в моей теме в центре формы начинает крутиться кольцо загрузки. Если форма короткая, это не вызывает проблем. Но когда она длиннющая, этого кольца просто не видно. В результате пользователь жмёт на кнопку отправки ещё раз, и ещё раз, и ещё…

Вот как раз для того, чтобы юзер сразу понимал, что кнопка нажалась и что-то начало происходить, я и задался целью анимировать кнопку на то время, пока идёт отправка формы.

Данный способ вы можете применить не только для Contact Form 7, но и для любой другой формы. Отличие будет незначительное. Единственный момент, форма должна работать с Ajax.

Стили «вешаются» на класс, который добавляется непосредственно во время отправки формы. В Contact Form 7 он появляется у тега <form>, поэтому в стилях мы отталкиваемся от него.

.submitting .wpcf7-submit {
	animation: barberpole 1s linear infinite;
	background-size: 30px 30px;
	background-color: #167be5;
	background-image: linear-gradient( 135deg, rgba(255,255,255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255, 0.1) 50%, rgba(255,255,255, 0.1) 75%, transparent 75%, transparent);
}

@keyframes barberpole {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 60px 30px;
	}
}

Результат:

Пример анимации кнопки

Кстати, поскольку в CF7 класс отправки добавляется ко всей форме, можно изменить стили не только кнопки, но и полей формы. Например, можно снизить прозрачность, обозначив процесс отправки.

Напоследок добавлю кнопку, на которую наткнулся когда гуглил варианты решения. Выглядит отлично, но я не стал заморачиваться с адаптацией под CF7.

See the Pen animation submit button by Valentin Galmand (@valentingalmand) on CodePen.

Вход