Почему contact form 7 не скрывается после отправки?

Question

[greg_13]

После успешной отправки, форма должна скрыться, а остаться только уведомление, о том что всё успешно отправлено.
Использовал скрип с wp-kama

document.addEventListener( 'wpcf7mailsent', function( event ) {
	jQuery('#contactform').hide();
}, false );

Вписал id свой контактной формы, для проверки, но форма не закрывается.

в чем может быть проблема?

Answer 1

[Александр Черемхин]

Скорее всего у Вас страница перегружается при отправки формы. Но Вам кажется что форма не закрывается. Всм только кажется ...

document.addEventListener( 'wpcf7mailsent', function( event ) {
  event.preventDefault(); // предотвратит отправку страницы
  jQuery('#contactform').hide();
}, false );

Comments

[greg_13]

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

document.addEventListener( 'wpcf7mailsent', function( event ) {
  event.preventDefault(); // предотвратит отправку страницы
  jQuery('#38').hide();
}, false );

[Alex]

greg_13, id не может начинаться с цифры

[greg_13]

где contactform - это ID формы которую нужно скрыть. Вместо #contactform можно указать другой селектор HTML элемента (формы), который нужно скрыть

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

[contact-form-7 id="38" title="Контактная форма 1"]

Что тогда нужно вписать или как добавить другой id?

[Alex]

greg_13, код формы предоставьте

[greg_13]

Alex, Если вы про шорткод, который добавляется на странице, то я его уже скидывал, но могу продублировать:

[contact-form-7 id="38" title="Контактная форма 1"]

Если весь код, как он отображается на странице, то вот:

<div role="form" class="wpcf7" id="wpcf7-f38-p124-o1" lang="ru-RU" dir="ltr">
<div class="screen-reader-response" role="alert" aria-live="polite"></div>
<form action="/#wpcf7-f38-p124-o1" method="post" class="wpcf7-form init" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="38">
<input type="hidden" name="_wpcf7_version" value="5.2.2">
<input type="hidden" name="_wpcf7_locale" value="ru_RU">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f38-p124-o1">
<input type="hidden" name="_wpcf7_container_post" value="124">
<input type="hidden" name="_wpcf7_posted_data_hash" value="">
</div>
<p><label> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required close-form" aria-required="true" aria-invalid="false" placeholder="ФИО"></span> </label></p>
<p><label> <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email close-form" aria-required="true" aria-invalid="false" placeholder="Email"></span>  </label></p>
<p><label> <span class="wpcf7-form-control-wrap mask-568"><input type="tel" name="mask-568" value="" class="wpcf7-form-control wpcf7mf-mask wpcf7-mask close-form" size="40" placeholder="+7(___)___-__-__" data-mask="+7(___)___-__-__"></span> </label></p>
<p><input type="submit" value="ОТПРАВИТЬ" class="wpcf7-form-control wpcf7-submit close-form booking_btn"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output" role="alert" aria-hidden="true"></div></form></div>

[Александр Черемхин]

document.addEventListener( 'wpcf7mailsent', ...

А может все проще. Название события выглядит странно «wpcf7mailsent»

Может всё-таки “wpcf7mailsend”?

Answer 2

[Alex]

Ошибка заключается в том, что у вас нет элемента, который вы пытаетесь скрыть.

Если весь код, как он отображается на странице, то вот:

<div role="form" class="wpcf7" id="wpcf7-f38-p124-o1" lang="ru-RU" dir="ltr">
<div class="screen-reader-response" role="alert" aria-live="polite"></div>
<form action="/#wpcf7-f38-p124-o1" method="post" class="wpcf7-form init" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="38">
<input type="hidden" name="_wpcf7_version" value="5.2.2">
<input type="hidden" name="_wpcf7_locale" value="ru_RU">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f38-p124-o1">
<input type="hidden" name="_wpcf7_container_post" value="124">
<input type="hidden" name="_wpcf7_posted_data_hash" value="">
</div>
<p><label> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required close-form" aria-required="true" aria-invalid="false" placeholder="ФИО"></span> </label></p>
<p><label> <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email close-form" aria-required="true" aria-invalid="false" placeholder="Email"></span>  </label></p>
<p><label> <span class="wpcf7-form-control-wrap mask-568"><input type="tel" name="mask-568" value="" class="wpcf7-form-control wpcf7mf-mask wpcf7-mask close-form" size="40" placeholder="+7(___)___-__-__" data-mask="+7(___)___-__-__"></span> </label></p>
<p><input type="submit" value="ОТПРАВИТЬ" class="wpcf7-form-control wpcf7-submit close-form booking_btn"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output" role="alert" aria-hidden="true"></div></form></div>

document.addEventListener( 'wpcf7mailsent', function( event ) {
  jQuery('#contactform').hide();
}, false );

Вместо #contactform можно указать другой селектор HTML элемента (формы), который нужно скрыть

Нужно указать валидный селектор элемента (формы или любой обертки)

А в шотркоде, атрибут id служит чисто для плагина, чтобы он понимал какую форму ему нужно вывести

Comments

[greg_13]

Прежде чем что-то спрашивать у других ,привык искать информацию своими руками. Задать вопрос решил потому что здесь:
https://wp-kama.ru/plugin/contact-form-7/sovety-ha...
Если это не номерной id который выдается в шорткоде, как я могу задать свой id?
(опять же сейчас у меня уже сдеалано что каждому элементу формы назначен класс и в случае успешной отправки они скрываются, но по мне это колхоз и я хочу сделать правильно, но не знаю как)