Вызов функции JavaScript на форме контакта 7 подчинение

Question

Я использую контактную форму 7 в Wordpress с красотой кожи в качестве темы. То, что я хочу сделать, - это вызвать конкретную функцию JavaScript, когда форма, которую я создал, отправлена.

В моем HTML код я создаю форму, как это:

<form onsubmit="checkvalue()"> 
... 
</form> 

И в конце тела моего HTML код, я создаю функцию JavaScript с проверки я хочу сделать на форма:

<script language="JavaScript" type="text/javascript"> 
    function checkvalue() { 
    ... 
    } 
</script> 

Я попробовал код в другой теме (Двадцать Тринадцать) - с Contact Form 7 - и странно то, что не было никакой проблемы.

Может кто-нибудь сказать мне, почему он работает правильно на тему Twenty Thirteen, но с Skin Beauty это не так? Есть ли способ использовать функцию JavaScript с моей формой onsubmit?

Answer 1

EDIT: этот ответ теперь устарел, поскольку упомянутые опции устарели (и удалены). См. Simon's answer для получения последнего метода.

---

Я не уверен Двадцать Тринадцать, но правильный способ вызвать функцию представления формы с контактной формой 7, путем добавления on_submit опции в Additional Settings разделе формы.

Это гарантирует, что ваш код будет правильно подключен к функциям Contact Form 7 и вызывается в нужное время.

Вот как это выглядит:

Вы можете включать либо один, либо оба, эти дополнительные настройки.

Согласно документации:

Если вы установили on_sent_ok:, за которым следует один строки кода JavaScript, вы можете сказать, контакт формируют код, который должен быть выполнен, когда почта отправляется успешно. Аналогично, с on_submit:, вы можете указать код, который должен быть выполнен, когда форма была представлена ​​независимо от результата.

Обратите внимание, вы не должны создавать свой собственный <form> тег. Контактная форма 7 делает это для вас, когда вы включаете форму через свой короткий код (например, [contact-form-7 id="10"]), и создание собственного тега будет иметь непреднамеренные последствия.

Поскольку вы заинтересованы в валидации, вам также может понравиться ознакомиться с контактным форматом 7's pluggable server-side validation options (хотя я знаю, что вы пытаетесь сделать проверку на стороне клиента в этом случае).

Answer 2

Утвержденный ответ теперь устарел из соображений безопасности/потенциальных уязвимостей в коде, который автор Контактной формы 7 не контролирует.Подробнее здесь: https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

Вместо этого вам нужно перехватить DOM Event wpcf7submit - детали, для которых здесь: https://contactform7.com/dom-events/

В вашем конкретном примере, найти идентификатор вашей формы, которая является ID в шорткоде. Представим себе, что число равно 123 (хотя, вероятно, это не так).

document.addEventListener('wpcf7submit', function(event) { 
    if ('123' == event.detail.contactFormId) { 
     alert("The contact form ID is 123."); 
     // do something productive 
    } 
}, false); 

в соответствии с приведенным выше примером. Есть две проблемы: во-первых, я не вижу, где значения формы передаются этому слушателю, и я подозреваю, что они больше не могут быть видны к этому моменту. Это потому, что (вторая проблема) это событие запускается после подачи, и вам нужно, чтобы ваши события выполнялись до отправки, поэтому событие onsubmit, вероятно, не является подходящим триггером. Подача формы происходит после нажатия кнопки «отправить». Утвержденный ответ здесь: Contact form 7 call submit event in jQuery перехватывает DOM в том месте, где нажата кнопка, до отправки всей формы. Это подход, который я бы принял.

Помните, что вы можете добавить слушателя в functions.php, как это:

add_action('wp_footer', 'mycustom_wp_footer'); 

function mycustom_wp_footer() { 
    ?> 
    <script type="text/javascript"> 
     var wpcf7Elm = document.querySelector('.wpcf7'); 

     wpcf7Elm.addEventListener('wpcf7submit', function(event) { 
      alert("Fire!"); 
     }, false); 
    </script> 
    <?php 
}