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.

$(document).ready(function() {
//Hide the field initially
$("#div one").hide();
  $("#div two").hide();

$('[radio radio-928]').change(function() 
{
    if ($("[radio radio-928]").val() == "yes") 
    {
        $("#div one").show();
    }
    else {
        $("#div two").hide();
        }
        if ($("[radio radio-928]").val() == "no") {
        $("#div two").show();
    }
    else {
        $("#div one").hide();
        }
});
});

Dies kann in der Contact Form 7-Editorbox wie folgt erfolgen:

<script type="text/javascript"> 
function showdiv(element){ 
document.getElementById("div-one").style.display = element=="yes"?"block":"none";                      
document.getElementById("div-two").style.display = element=="no"?"block":"none"; 
} 
</script>
<input type="radio" name="choice" value="yes" onclick="showdiv(this.value);"> Yes<br>
<input type="radio" name="choice" value="no" onclick="showdiv(this.value);"> No<br>

<div id="div-one" style="display:none;">Yes</div>
<div id="div-two" style="display:none;">No</div>

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

Benutzer-Avatar
Israel

  1. Fügen Sie Ihrem WordPress das Plugin hinzu: Kopf- und Fußzeilen einfügen von WPBeginners

  2. Aktivieren Sie das Plugin und gehen Sie zu Einstellungen -> Kopf- und Fußzeilen einfügen

  3. Fügen Sie Ihren Javascript-Code in Skript-Tags ein. Wenn Ihre Seite geladen wird, befindet sich dieses Skript im Kopf Ihres DOM

  4. 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.

Benutzer-Avatar
gtamboro

Sie können den generierten HTML-Code der Kontaktformulare kopieren und den Javascript-Code hinzufügen. Zum Beispiel haben Sie ein Sendeformular als:

[submit class:btn class:btn-lg class:btn-black "Enviar"]

Wenn Sie sich den HTML-Code (Inspector oder View Page HTML) ansehen, sehen Sie diesen Code:

<input type="submit" value="Enviar" class="wpcf7-form-control btn-lg btn-black" disabled="">

Fügen Sie den Code ein und fügen Sie das benötigte Javascript hinzu, zum Beispiel:

<input type="submit" onclick="gtag('event','EnvioFormularioHome'); ga('send', 'event', { eventCategory: 'Formulario', eventAction: 'Enviado', eventLabel: 'Hernani'}) value="Enviar" class="wpcf7-form-control btn btn-lg btn-black" disabled="">

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.

1352160cookie-checkSo fügen Sie eine benutzerdefinierte Javascript-Funktion im Kontaktformular 7 WordPress hinzu

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy