Contact Form 7 ограничение отправок формы?

Подскажите, как ограничить количество нажатий на кнопку отправки, что б пользователь, после того как пройдет все обязательные поля к заполнению мог только один раз отправить форму кнопкой Submit.

<form>
some requered* fields

 <div class="cf7__wrapper--submit a-up a-delay-1 animated fadeInUp animation-end">
	<div class="button--primary">
	  <p><input class="wpcf7-form-control has-spinner wpcf7-submit cf7__submit" type="submit" value="Submit"><span class="wpcf7-spinner"></span>
	  </p>
	</div>
  </div>
  <div class="wpcf7-response-output" aria-hidden="true"></div>

</form>

Необходимо как-то устанавливать disabled но только после того как все заполненно корректно. Пробовал так

const sendBtn = $('.cf7__submit');
if (sendBtn.length !== 0) {
  sendBtn.on("click", function() {
	sendBtn.attr('disabled', true);
	setTimeout( function(){sendBtn.attr('disabled', false)}, 3000);
  })
}

но это глупость. Оно не учитывает что поля не заполены корректно... Не могу найти правильный ответ

1
BlackStar1991
2.8 лет назад 9
contact form 7formsubmit
  • 1
    Dan Zakirov 725 air-wp.com

    Вариантов много. Можно например скрыть форму в целом при отправки и можно так же это сделать несколькими способами. Например, в дополнительных настойках прописать это:

    on_sent_ok: "jQuery('.wpcf7-form').hide();"

    или без jquery так:

    on_sent_ok: "document.querySelector('.wpcf7-form').style.display = 'none';"

    или так, с запретом на submit как вы и хотите:

    on_sent_ok: "jQuery('.wpcf7-form').find('[type="submit"]').prop('disabled', true);"

    То есть очень много вариантов. Если вы хотите использовать только js, то опять же, много всяких событий в CF, например после успешной отправки формы wpcf7mailsent, например на ванильном JS? запрещаем отправку на submit:

    document.addEventListener( 'wpcf7mailsent', function( event ) {
  var submitButton = document.querySelector('#your-form-id [type="submit"]');
  submitButton.disabled = true;
}, false );

    или полностью скрываем форму

    document.addEventListener( 'wpcf7mailsent', function( event ) {
  var form = document.querySelector('#your-form-id');
  form.style.display = 'none';
}, false );

    Где your-form-id это ID вашей формы, ну или на JQ тоже самое:

    $(document).on('wpcf7mailsent', function(event) {
  $('#your-form-id [type="submit"]').prop('disabled', true);
});

    В общем много вариантов, а вообще, на офф сайте, много всяких интересных вещей в доке https://contactform7.com/docs/

    2.8 лет назад #
    BlackStar1991 2.8 лет назад

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

    const wpcf7Elm =document.querySelector( '.wpcf7-form' );
const sendBtn = document.querySelector('.wpcf7-submit');

wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
	sendBtn.setAttribute("disabled", "disabled");
	setTimeout(function(){sendBtn.removeAttribute("disabled")}, 3000);
	console.log("SEND FORM");
}, false );

    но при таком выводе у пользователя всё равно есть время понаклацивать запросов на сервер... Если же цеплятся за событие wpcf7beforesubmit То оно не дает конроля за Обязательными полями к заполнению. => Предположим пользователь ввел не все обязательные данные тогда при нажатии кнопки Send, он блокирует отправку формы на 3 сек.

    Dan Zakirov 2.8 лет назад

    Тогда при клике заблокируйте и все

    Dan Zakirov 2.8 лет назад

    Напишите плз, получилось решить или нет?

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация