Aufruf einer JavaScript-Funktion bei der Übermittlung von Contact Form 7
Lesezeit: 4 Minuten
Nikos K
Ich verwende Contact Form 7 in WordPress mit Skin Beauty als Thema. Ich möchte eine bestimmte JavaScript-Funktion aufrufen, wenn das von mir erstellte Formular gesendet wird.
In meinem HTML-Code erstelle ich ein Formular wie dieses:
<form onsubmit="checkvalue()">
...
</form>
Und am Ende des Hauptteils meines HTML-Codes erstelle ich eine JavaScript-Funktion mit der Validierung, die ich für das Formular durchführen möchte:
<script language="JavaScript" type="text/javascript">
function checkvalue() {
...
}
</script>
Ich habe den Code in einem anderen Thema (Twenty Thirteen) ausprobiert – mit Contact Form 7 – und das Seltsame ist, dass es dort kein Problem gab.
Kann mir jemand sagen, warum es auf dem Thema Twenty Thirteen richtig läuft, aber mit Skin Beauty nicht? Gibt es eine Möglichkeit, meine JavaScript-Funktion mit meinem Formular zu verwenden? onsubmit?
Simon Braun
Die genehmigte Antwort wurde nun aus Sicherheitsgründen/potenziellen Schwachstellen im Code, auf die der Autor von Contact Form 7 keine Kontrolle hat, als veraltet markiert. Weitere Details hier: https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/
Suchen Sie in Ihrem speziellen Beispiel die ID Ihres Formulars, die die ID im Shortcode ist. Stellen wir uns vor, diese Zahl ist 123 (obwohl sie 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 möglicherweise nicht mehr sichtbar sind. Das liegt daran (zweites Problem), dass dieses Ereignis NACH der Übermittlung ausgelöst wird und Sie Ihre Ereignisse VOR der Übermittlung ausführen müssen, sodass das onsubmit-Ereignis wahrscheinlich nicht der geeignete Auslöser ist. Das Absenden des Formulars erfolgt, nachdem auf die Schaltfläche „Senden“ geklickt wurde. Die genehmigte Antwort hier: Contact Form 7 Call Submit Event in jQuery fängt das DOM an der Stelle ab, an der auf die Schaltfläche geklickt wird, bevor das gesamte Formular gesendet wird. Das ist der Ansatz, den ich wählen würde.
Denken Sie daran, dass Sie den Listener wie folgt in die functions.php einfügen können:
Wenn Sie vor dem Senden etwas tun möchten, können Sie die Funktion jQuery Submit() verwenden. Laut jQuery-Dokumentation “Dies geschieht vor der eigentlichen Übermittlung”. Sie müssen es an das Formularelement anhängen, nicht an die Schaltfläche.
$('.wpcf7-form').submit(function() {
//your code here
});
Ich habe die Javascript-Funktion am Ende hinzugefügt footer.php Datei:
Dies funktioniert nur, wenn Sie ein einzelnes Formular auf Ihrer Website haben:
Tim Malon
BEARBEITEN: Diese Antwort ist jetzt veraltet, da die genannten Optionen veraltet (und entfernt) wurden. Siehe Simons Antwort für die neueste Methode.
Ich bin mir bei Twenty Thirteen nicht sicher, aber der korrekte Weg, eine Funktion beim Absenden des Formulars mit Contact Form 7 aufzurufen, besteht darin, die on_submit Option in der Zusätzliche Einstellungen Abschnitt Ihres Formulars.
Dadurch wird sichergestellt, dass Ihr Code ordnungsgemäß in die Routinen von Contact Form 7 eingebunden ist und zur richtigen Zeit aufgerufen wird.
So sieht es aus:
Sie können entweder eine oder beide dieser zusätzlichen Einstellungen hinzufügen.
Laut Dokumentation:
Wenn Sie einstellen on_sent_ok: gefolgt von einem einzeiligen JavaScript-Code können Sie dem Kontaktformular den Code mitteilen, der bei erfolgreichem Versand der Mail ausgeführt werden soll. Ebenso mit on_submit:können Sie den Code angeben, der ausgeführt werden soll, wenn das Formular unabhängig vom Ergebnis gesendet wird.
Bitte beachten Sie auch Sie sollte nicht selbst erstellt werden <form> Schild. Kontaktformular 7 erledigt dies für Sie, wenn Sie das Formular über seinen Shortcode (z. [contact-form-7 id="10"]) und das Erstellen Ihres eigenen Tags hat unbeabsichtigte Folgen.
Da Sie an Validierung interessiert sind, können Sie sich auch über Contact Form 7 informieren austauschbare serverseitige Validierungsoptionen (obwohl ich weiß, dass Sie in diesem Fall versuchen, eine clientseitige Validierung durchzuführen).
13744000cookie-checkAufruf einer JavaScript-Funktion bei der Übermittlung von Contact Form 7yes