So fügen Sie eine benutzerdefinierte Javascript-Funktion im Kontaktformular 7 WordPress hinzu
Lesezeit: 4 Minuten
Ich habe ein Problem bei der Verwendung des Kontaktformulars 7 in WordPress und brauche etwas Hilfe für Sie alle. Problem: Ich habe eine Radiobox, die zwei Optionen hat, ja oder nein. Wenn jemand die Ja-Option ankreuzt, sollte Div 1 angezeigt werden, und wenn er auf Nein klickt, sollte 2. Div angezeigt werden. Ich schreibe einen Code, aber wie es uns in Kontaktformular 7 sein wird, weiß ich nicht. Hier ist der Code.
Wenn Ihre Funktion in der JS-Konsole funktioniert, aber nicht, wenn sie im Formular gespeichert wird, stellen Sie sicher, dass sie keine Leerzeilen enthält.
Aus irgendeinem Grund werden diese in p-Tags umgewandelt, der Editor ist zumindest auf den Seiten, auf denen ich ihn verwendet habe, nicht wirklich HTML-bewusst.
ZB das erste Zeichen bestimmter Eingabefelder einer Klasse groß schreiben.
<script language="javascript" type="text/javascript">
jQuery(function($){
// Capitalize first character as needed.
$.fn.capitalize = function() {
$(this).blur(function(event) {
var box = event.target;
var txt = $(this).val();
var stringStart = box.selectionStart;
var stringEnd = box.selectionEnd;
$(this).val(txt.replace(/^(.)/g, function($char) {
return $char.toUpperCase();
}));
box.setSelectionRange(stringStart, stringEnd);
});
return this;
}
$('input[type=text].capitalize').capitalize();
});
</script>
Sobald ich die neue Zeile entferne, funktioniert es facepalm …
Fügen Sie einfach Ihre JavaScript-Funktion zu Ihrer Seite hinzu, suchen Sie dann das Feld Zusätzliche Einstellungen unten auf der Seite zur Verwaltung des Kontaktformulars und verwenden Sie den JavaScript-Aktionshaken on_submit wie folgt:
on_submit: “MY_JavaScript_function_Name();”
Ich möchte die Schaltfläche “Weitere Dateien hinzufügen”. Ich möchte eine Funktion aufrufen, wenn der Benutzer auf die Schaltfläche “Weitere Dateien hinzufügen” klickt. Wie soll ich es bei Zusätzliche Einstellungen nennen.
– Entwickler
8. Mai 2017 um 8:25 Uhr
Israel
Fügen Sie Ihrem WordPress das Plugin hinzu: Kopf- und Fußzeilen einfügen von WPBeginners
Aktivieren Sie das Plugin und gehen Sie zu Einstellungen -> Kopf- und Fußzeilen einfügen
Fügen Sie Ihren Javascript-Code in Skript-Tags ein. Wenn Ihre Seite geladen wird, befindet sich dieses Skript im Kopf Ihres DOM
Fügen Sie in Contact Form 7 Ihre Schaltflächen mithilfe von HTML-Code hinzu, indem Sie die entsprechenden ID-Attribute hinzufügen, die in Ihrem Code erwähnt werden, um Ihr Dokument zu steuern.
Ich mache das die ganze Zeit, speziell um jQuery zu verwenden.
gtamboro
Sie können den generierten HTML-Code der Kontaktformulare kopieren und den Javascript-Code hinzufügen. Zum Beispiel haben Sie ein Sendeformular als:
Ich weiß, dass dies ein alter Beitrag ist, aber ich wollte meine Entdeckungen teilen, falls ihn jemand später braucht.
Das OP-Problem sind definitiv die leeren Zeilen im Code, der Formulareditor fügt jeder neuen Zeile P-Elemente hinzu. Wenn Sie die js-Konsole öffnen, sehen Sie die Fehler, die auf den Code hinweisen.
Außerdem sollten wir darauf achten, und das hat mich viel Zeit gekostet, um herauszufinden, dass der Editor Backslashes entfernt. Ich habe einige Eingabemasken-Validierungen hinzugefügt und diesen Code gefunden:
v = v.replace(/\D/g, "");
Wird nach dem Speichern so:
v = v.replace(/D/g, "");
Eine Problemumgehung besteht also darin, Folgendes zu deklarieren:
v = v.replace(/\\D/g, "");
Allerdings wurden bei jedem Speichern die Backslashes entfernt, also musste ich den Quellcode an einer anderen Stelle speichern und ihn dann jedes Mal in den Editor einfügen.
Am Ende habe ich gerade ein benutzerdefiniertes HTML-Widget mit allen benutzerdefinierten js in einem Skript-Tag hinzugefügt. Dadurch wird der Code global auf der Website funktionieren, aber ich wollte sicherstellen, dass Benutzer die Formularmasken und den Validierungscode nicht durcheinander bringen.
13521600cookie-checkSo fügen Sie eine benutzerdefinierte Javascript-Funktion im Kontaktformular 7 WordPress hinzuyes