Aufruf einer JavaScript-Funktion bei der Übermittlung von Kontaktformular 7

Question

Ich benutze Kontaktformular 7 in Wordpress, mit Skin Beauty als Thema. Ich möchte eine bestimmte JavaScript-Funktion aufrufen, wenn das Formular, das ich erstellt habe, übergeben wird.

In meinem HTML-Code, den ich ein Formular wie folgt zu erstellen:

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

Und am Ende des Körpers meines HTML-Code, ich bin eine JavaScript-Funktion mit der Validierung zu schaffen mag ich auf das tun Form:

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

ich habe versucht, den Code in einem anderen Thema (Twenty Dreizehn) - mit Contact Form 7 - und die seltsame Sache ist, dass es kein Problem war.

Kann mir jemand sagen, warum es richtig auf dem Twenty Thirteen Thema läuft, aber mit Skin Beauty tut es nicht? Gibt es eine Möglichkeit, meine JavaScript-Funktion mit onsubmit meines Formulars zu verwenden?

Answer 1

EDIT: Diese Antwort ist jetzt veraltet, da die Optionen, auf die verwiesen wird, veraltet sind (und entfernt wurden). Die neueste Methode finden Sie unter Simon's answer.

---

Ich bin über zwanzig Dreizehn nicht sicher, aber der richtige Weg 7 ist durch Hinzufügen der on_submit Option im Additional Settings Abschnitt des Formulars eine Funktion über die Vorlage des Formulars mit Kontaktformular zu rufen.

Dies stellt sicher, dass Ihr Code ordnungsgemäß in die Routinen von Contact Form 7 eingebunden ist und zum richtigen Zeitpunkt aufgerufen wird.

Hier ist, wie es aussieht:

Sie umfassen entweder eine oder beide dieser zusätzlichen Einstellungen.

Gemäß der Dokumentation:

Wenn Sie on_sent_ok: durch einen einzeiligen JavaScript-Code gefolgt eingestellt haben, können Sie den Kontakt sagen Sie den Code bilden, die ausgeführt werden soll, wenn die E-Mail erfolgreich gesendet wurde. Ebenso können Sie unter on_submit: den Code angeben, der beim Übermitteln des Formulars unabhängig vom Ergebnis ausgeführt werden sollte.

Bitte beachten Sie auch Sie sollen nicht Ihren eigenen <form> Tag erschaffen. Das Kontaktformular 7 erledigt dies für Sie, wenn Sie das Formular über seinen Shortcode (z. B. [contact-form-7 id="10"]) einfügen und das Erstellen eines eigenen Tags unbeabsichtigte Folgen haben wird.

Da Sie an der Validierung interessiert sind, können Sie auch über die pluggable server-side validation options von Kontaktformular 7 nachlesen (obwohl ich weiß, dass Sie in diesem Fall versuchen, eine clientseitige Validierung durchzuführen).

Answer 2

Die genehmigte Antwort wurde aus Sicherheitsgründen/potenziellen Schwachstellen im Code, über die der Autor des Kontaktformulars 7 keine Kontrolle hat, veraltet.Weitere Details hier: https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

Stattdessen müssen Sie die DOM-Event-wpcf7submit abzufangen - Details hier sind für die gilt: https://contactform7.com/dom-events/

In Ihrem speziellen Beispiel die ID des Formulars finden, die die ID in dem Shortcode ist. Stellen wir uns vor, dass die Nummer 123 ist (obwohl es wahrscheinlich nicht ist).

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

wie im obigen Beispiel. Es gibt zwei Probleme - Erstens kann ich nicht sehen, wo die Formularwerte an diesen Listener übergeben werden und ich vermute, dass sie zu diesem Zeitpunkt nicht mehr sichtbar sind. Das ist so, weil (zweites Problem) dieses Ereignis nach der Übermittlung ausgelöst wird und Sie Ihre Ereignisse VOR der Übermittlung ausführen müssen, daher ist das Ereignis onsubmit wahrscheinlich nicht der geeignete Auslöser. Die Einreichung des Formulars erfolgt nach dem Klicken auf "Senden". Die genehmigte Antwort hier: Contact form 7 call submit event in jQuery fängt das DOM an dem Punkt ab, an dem die Schaltfläche geklickt wird, bevor das gesamte Formular gesendet wird. Dies ist der Ansatz, den ich wählen würde.

Erinnern Sie den Hörer in functions.php wie folgt hinzufügen:

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 
}