Senden Sie einen beliebigen Wert über Contact Form 7

Dieser Artikel erklärt, wie Sie einen beliebigen Wert über Contact Form 7 senden können. Vielleicht hilft diese Methode, um Ihnen Produktnamen oder andere Daten über das Contact Form 7 Plugin zu senden.

Obwohl diese Methode recht arbeitsintensiv ist, stellt sie in vielen Situationen den einfachsten Ausweg dar. Die Werkzeuge werden wie folgt aussehen:

1. Contact Form 7 – Dynamischer Text Erweiterung. Ein Plugin für die Verwendung dynamischer Felder.
2. jQuery.
3. Dann gibt es natürlich noch WordPress mit CF7.

Es ist an der Zeit, sich an die Arbeit zu machen!

Erste Aufgabe

Es ist also an der Zeit, sich zu überlegen, worüber wir überhaupt reden wollen. Wir haben ein Zufallsobjekt, dessen Wert gesendet werden muss. Siehe Bildschirmfoto.

Die Herausforderung ist also folgende. Wenn Sie auf die Schaltfläche “Bestellen” klicken, sollte ein Feedback-Formular erscheinen. Nach dem Ausfüllen werden die Daten, einschließlich des Namens der aktiven Registerkarte, an Ihre E-Mail geschickt. Aber wie sendet man etwas, das nicht zu Contact Form 7 gehört? Richtig, den Tabulatorwert abrufen und an ein Feld im Feedback-Formular senden. Und damit sie nicht auffällt, ist es am besten, sie zu verstecken.

Entscheidung

In diesem Fall gehen wir folgendermaßen vor:

1. Installieren Sie Contact Form 7 – Dynamic Text Extension. Natürlich können Sie auch ohne sie auskommen, aber dieses Plugin gibt Ihnen die Möglichkeit, versteckte Felder mit dynamischen Werten zu versehen.
2. Erstellen Sie ein Kinderthema! Darin befindet sich ein Ordner assets/js. Erstellen Sie dort eine Datei script.js. Warum in einem Kinderthema? Wenn Sie eine funktionierende Version einfügen, kann die Aktualisierung den gesamten benutzerdefinierten Code löschen. Aber es liegt an Ihnen.
3. Fangen wir an, fleißig zu programmieren!

Zunächst müssen wir den Textwert des gewünschten Feldes berechnen. Lasst die totale Zufälligkeit zu!

Wir haben eine aktive Registerkarte, der Stilpfad dazu sieht so aus .vc_tta-color-grey .vc_tta-style-classic .vc_tta-tab .vc_active > span.vc_tta-title-text

Achten Sie besonders auf .vc_active, denn dieses Feld ist der Schlüssel für die Ersetzung des Wertes im Feld CF_7. Die anderen Registerkarten werden auf .vc_hiden gesetzt, um unnötige Werte auszublenden.

Für diese Aufgabe eignet sich der folgende Code, der in die neu erstellte script.js eingetragen werden muss:

jQuery(document).ready(function($) { //Nur hinzufügen, wenn eine solche Zeile nicht vorhanden ist.
$('.popup-button').on('click', function() { //Schaltflächenklasse „Bestellen“.
      var value = $('.vc_tta-color-grey .vc_tta-style-classic .vc_tta-tab .vc_active > span.vc_tta-title-text').text();
    $("#products_name").val(value);
  });
}); //Fügen Sie nur hinzu, wenn Sie die erste Zeile hinzugefügt haben.

Lassen Sie mich nun das Prinzip erklären, nach dem dies alles funktioniert. Zunächst erstellen wir eine Funktion, die aktiviert wird, wenn eine Schaltfläche oder ein Widget mit der gewünschten Klasse angeklickt wird. In diesem Fall ist es .popup-button. Wenn Sie auf diese Schaltfläche klicken, wird der folgende Code ausgeführt.

var value = $('.vc_tta-color-grey .vc_tta-style-classic .vc_tta-tab .vc_active > span.vc_tta-title-text').text();

Verwenden Sie diese Zeichenfolge, um den Textwert der Titelleiste der aktiven Registerkarte zu erhalten. Dieser Wert kann nun an Contact Form 7 gesendet werden. Öffnen Sie dazu das Plugin und erstellen Sie ein Feedback-Formular. Dementsprechend geben wir in dem Feld die gewünschte Klasse an.

Wie Sie wahrscheinlich schon bemerkt haben, habe ich den Wert der Übersichtlichkeit halber in das sichtbare Feld gesetzt. Aber Sie brauchen kaum einen solchen Ansatz, denn es ist besser, ein verstecktes Feld zu machen, wird der Titel nur von Ihnen gesehen werden, aber in der Form wird nicht stören Ihre Augen.

Hierfür benötigen Sie die Dynamic Text Extension. Damit können Sie versteckte dynamische Felder erstellen.

Fügen Sie das angegebene Feld ein, fügen Sie die erforderliche ID hinzu, und schon sind Sie fertig.

Ich muss nur noch die letzte Zeile beenden:

$("#products_name").val(value);

Diese Zeile sendet den empfangenen Wert an das Feld mit der ID products_name, Sie können eine Klasse anstelle einer ID verwenden. nach eigenem Ermessen.

Wie man Daten per E-Mail versendet, wissen Sie hoffentlich. Nach diesem Prinzip können Sie jeden beliebigen Wert in das erforderliche Feld eingeben, was Ihnen manchmal das Leben erleichtern kann. Die Hauptsache ist, dass sich die richtigen Klassen gegenüber ähnlichen Klassen durchsetzen.