Praktische Beispiele für die Verwendung der Platzhalter im CF7 Event Tracker Plugin für WordPress

Gerade Firmen benötigen in vielen Fällen mehr dynamische Funktionen in Ihren Kontaktformularen als es Contact Form 7 anbietet.

Einige meiner Kunden erstellen für jedes ihrer Produkte und Dienstleistungen ein eigenes Formular, obwohl sich die geforderten Angaben vom Anfragenden nie unterscheiden.

Du kannst dir sicher vorstellen, dass es in der Formular-Übersicht im WordPress-Backend dieser Webseiten-Besitzer entsprechend chaotisch aussieht.

Ich zeige dir, wie du mit den neuen Platzhalter-Funktionen meines CF7 Event Tracker Plugin dynamische Felder erstellst, um nur ein einziges Formular für viele verschiedene Produkte oder Dienstleistungen zu verwalten.

Die Platzhalter des CF7 Event Tracker Plugin

In der neuen Version 2.1 des CF7 Event Tracker erhältst du eine breite Palette an Platzhaltern, mit denen du deine Kontaktformulare und das Tracking dynamisieren kannst.

Das erlaubt dir eine wesentlich strukturiertere Übersicht und eine effizientere Verwaltung deiner Contact Form 7 Anfrageformulare.

Wo können die Platzhalter verwendet werden?

Ob in den verschiedenen Tracking-Masken oder direkt im Contact Form 7 Formular - Die Platzhalter sind so gut wie überall verwendbar.

In diesen Bereichen kannst du die Platzhalter verwenden:

Formular

Das Formular ist das Herzstück von Contact Form 7. Natürlich musste ich die Platzhalter hier hinzufügen!

CF7 Event Tracker - Platzhalter im Formular
Mailing

Sobald der Interessent ein Formular absendet, erhältst du eine Nachricht. In den beiden Email-Körpern des CF7-Formulars kannst du die Platzhalter verwenden.

CF7 Event Tracker - Platzhalter im Mailing
Google Analytics Event Tracking

Verwende die Platzhalter im Google Analytics Tracking, um verschiedene Angaben des Benutzers an dein Analytics-Konto zu senden.

CF7 Event Tracker - Platzhalter Google Analytics Tracking
Individuelles JavaScript

Durch die Verwendung der Platzhalter im individuellem JavaScript kannst du die Benutzer-Daten weiter verarbeiten oder für andere (individuelle) Tracking-Codes verwenden.

CF7 Event Tracker - Platzhalter im individuellen JavaScript
HubSpot-Anbindung

Sende alle Informationen, die du durch die Platzhalter erhalten hast auch an HubSpot.

CF7 Event Tracker - Platzhalter im HubSpot-Ticket

Bitte beachte, dass einige Platzhalter nicht direkt in das HubSpot-Ticket unter "CF7 Event Tracker > Formulare" eingefügt werden können.

Für diese Platzhalter muss du ein Hidden-Feld in deinem Formular einfügen und diese im Reiter "HubSpot" mit dem Platzhalter "{FIELD(id)}" einfügen:

  • {GET(parameter)}
  • {POST(parameter)}
  • {META(identifier)}
  • {POSTID}
  • {POSTNAME}
  • {POSTDESC}
  • {POSTURL}

Beispiele für die Verwendung der Platzhalter

Damit du einen Einblick erhältst, was du mit den Platzhaltern alles anstellen kannst, habe ich dir einige Beispiele vorbereitet.

Deiner Fantasie sind natürlich keine Grenzen gesetzt. Verwende die Platzhalter für alle möglichen Bereiche deiner Kontaktformulare.

Die URL der aktuellen Seite in der E-Mail hinzufügen

Nehmen wir an, du möchtest auf deiner Webseite mehrere Dienstleistung anbieten, die deine potentiellen Kunden über ein Kontaktformular anfragen können. Du erstellst für jedes deiner Dienstleistungen eine eigene Landingpage und möchtest auf jeder ein Anfrage-Formular einfügen.

Ohne die Platzhalter hast du 2 Möglichkeiten herauszufinden, für welches Produkt sich dein Besucher interessiert:

  1. Du erstellst für jedes deiner Dienstleistungen ein eigenes Formular mit den gleichen Feldern. Über die E-Mail kannst du angeben, um welche Anfrage es sich handelt.
    Wie bereits am Anfang beschrieben bekommst du ein Chaos in deine Formulare, wenn du einige Dienstleistungen anbietest.
    Versuche mal alle Formulare zu bearbeiten, wenn du vergessen hast überall ein Termin-Feld zu einzufügen...
  2. Die noch schlechtere Variante: Du lässt den Benutzer den Namen der Dienstleistung eingeben oder in einer Dropdown-Liste auswählen.
    Warum eine Dropdown-Liste, wenn du doch eigentlich eine Landingpage für eine bestimmte Dienstleistung erstellen möchtest? Der Kunde hat sich ja bereits durch die Landingpage entschieden, dass er eine bestimmte Dienstleistung anfragen möchte.
    Der Kunde müsste also eine weitere Hürde nehmen, indem er das Dropdown der Dienstleistung auswählt. Das ist schlecht, da jede Hürde im Kontaktformular deinen Besucher zum Abbruch bewegen kann!

Mit den Platzhaltern des Plugins ist es sehr einfach zu identifizieren, welches Produkt der Interessent anfragen möchte.

Verwende dazu einfach einen der beiden Platzhalter {POSTURL} oder {POSTNAME}. Mit beiden kannst du eindeutig identifizieren, über welche Seite der Benutzer das Formular abgesendet hat.

Setze die Platzhalter in dein Formular

So fügst du den Post-Link in deinem Formular ein (Sidebar "Formulare" > Reiter "Formular" im Formular):

[hidden my-pageurl id:pageurl readonly "{POSTURL}"]

Und so kannst du den Titel hinzufügen:

[hidden my-pagename id:pagename readonly "{POSTNAME}"]
 
CF7 Event Tracker - Platzhalter Produkte identifizieren

Die beiden Zeilen unterscheiden so gut wie gar nicht.

Achte darauf, dass du alle deine Felder im Formular mit einer ID ausstattest. Das wird später wichtig.

Denke auch daran, dass du die entsprechenden Felder in deiner E-Mail angeben solltest (Sidebar "Formulare" > Reiter "E-Mail" im Formular). Das ist ganz üblich in Contact Form 7.

[my-pageurl]
[my-pagename]

Ohne diese Zeile in deinem Email-Körper erhältst du die Info nicht.

CF7 Event Tracker - Platzhalter Ausgabe der Produkt-Identifizierung

Das aktuelle Datum und die Zeit verwenden

In manchen Fällen muss der Interessent ein Datum angeben, denn eine Dienstleistung kann oft mit einem Termin verbunden sein. Der Kunde kann dann einen oder mehrere Wunsch-Termine im Kontaktformular auswählen und an dich versenden.

Mit dem Feld [date] kannst du eine Eingabe für ein Datum in deinem Formular hinzufügen. Für Laien sieht der Standard-Wert aber sehr kryptisch aus.

CF7 Event Tracker - Platzhalter Wunschtermin

Es wäre doch besser, wenn das Feld bereits mit dem aktuellen Tag ausgefüllt wäre, damit gerade ein deutscher Besucher das besser versteht!

Dafür gibt es den Platzhalter {DATE()}, den du überall dort platzieren kannst, wo ein Datum in einem bestimmten Format benötigt wird.

Ein Beispiel:

[date your-date id:date "{DATE(Y-m-d)}"]

Mit der Verwendung dieses Felds wird dem Besucher das heute Datum im Formular ausgegeben, das er dann nach Belieben bearbeiten kann.

CF7 Event Tracker - Platzhalter Wunschtermin ausgefüllt

Auf php.net findest du alle Datum-Formate für die Verwendung des Date-Platzhalters.

Datum des Date-Platzhalters modifizieren

Manchmal möchte man aber nicht nur den aktuellen Tag ausgeben lassen. Du kannst nach dem Format noch einen weiteren Wert einfügen, um das Datum nach belieben auszutauschen.

[date your-date id:date "{DATE(Y-m-d;1.1.2021)}"]

Beachte, dass die beiden Werte mit einem Semikolon (;) getrennt werden. Der erste Wert muss immer das Datum-Format sein. Den zweiten Wert kannst du hinzufügen, um das Datum zu bearbeiten.

Format Beschreibung
1.1.2021 Damit kannst du einen eindeuten Tag festlegen. In diesem Beispiel der erste Januar 2021.
+1 day Mit dieser Angabe erhältst du das morgige Datum. Alternativ kannst du auch "tomorrow" eintragen.
-1 day Du erhältst das gestrige Datum. Alternativ kannst du auch "yesterday" eintragen.
+1 month Das gleiche wie "+1 day" nur mit dem Monat. Das gleiche gilt auch für das Jahr "+1 year".
+1 day +1 year Morgen in einem Jahr. Die Angaben wie oben beschrieben lassen sich nach belieben kombinieren.
Monday Du erhältst das Datum des nächsten Wochentags. In diesem Fall "Montag".

Eine Übersicht aller möglichen Formate findest du auch auf php.net.

Daten in der URL übergeben

Auch sehr beliebt sind Seiten, die mehrere verschiedene Produkt-Arten präsentieren und auf getrennten Kontaktformularen angefragt werden.

Angenommen wir haben die 3 Produkte "Hosting Small", "Hosting Medium" und "Hosting Large". In der Regel würde man 3 verschiedene Kontaktformulare erstellen.

Auf einer "Verteiler-Seite" bieten wir alle 3 Produkte in einer Gegenüberstellung an. Mit einem Klick auf einen der 3 "Jetzt Angebot anfordern"-Buttons wird der Besucher auf das Kontaktformular weitergeleitet.

Alle 3 Buttons leiten auf die gleiche Seite weiter - mit einem kleinen Unterschied: Jeder Link verwendet einen anderen Wert im Parameter "hosting":

https://example.com/hosting-anfragen?hosting=1
https://example.com/hosting-anfragen?hosting=2
https://example.com/hosting-anfragen?hosting=3

Der Wert 1 wird unser "Small"-Hosting, der Wert 2 das "Medium"-Hosting und der Wert 3 wird dann das "Large"-Hosting.

In unserem Formular fügen wir als nächstes ein Dropdown-Feld mit den entsprechenden Werten ein. Während des Ausfüllens könnte sich der Besucher dann vielleicht doch noch vom Small- zum Medium-Paket umentscheiden.

[select hosting id:hosting default:{GET(hosting)} "Small" "Medium" "Large"]

Durch den Platzhalter {GET(parameter)} wird der Wert aus einem "GET"-Parameter in der URL platziert. Beachte, dass du das Wort "parameter" zu dem entsprechenden Wert vor dem "=" austauschst.

Es gibt auch noch ganz andere Anwendungsfälle. Wenn du zum Beispiel eine Google AdWords Kampagne (UTM-Parameter) in dein Kontaktformular oder das Tracking aufnehmen möchtest. In diesem Fall könnest du ein Hidden-Feld im Formular einfügen oder den Platzhalter direkt in der E-Mail angeben.

Auf Benutzer-Daten zugreifen

Durch einen der vielen Platzhalter kannst du verschiedene Benutzer-Daten an das Formular übergeben, um festzustellen welcher deiner registrierten Benutzer die Anfrage sendet.

Verwende den Platzhalter {USER(parameter)}, um die Daten des aktuellen Benutzers zu erhalten. Sollte der Anfragende nicht auf deiner Webseite eingeloggt sein, wir ein Leerstring "" platziert. In diesem Fall müsste der Besucher z.B. seine Email-Adresse manuell in das Formular eintragen.

[text user-id id:user_id "{USER(user_email)}"]

Der Platzhalter testet zunächst, ob du ein Standart-Wert innerhalb der normalen Klammern "()" eingegeben hast. Sollte der Parameter kein Standard-Wert sein, überprüft das Plugin, ob es einen geeigneten Meta-Wert zum Benutzer gibt.

Auf der Entwickler-Seite von WordPress findest du eine Anleitung, wie du eigene Werte zu deinen Benutzern hinzufügen kannst.

Eine Liste aller Standard-Werte findest du im Hilfe-Tab des Plugins unter "Platzhalter".

Felder vom Formular ins Tracking übernehmen

Nun zu einem Thema, dass du für die HubSpot-Anbindung dringend benötigst: Die Verwendung der CF7-Feld-Platzhalter.

Der Platzhalter {FIELD(id)} lässt dich eine Eingabe des Benutzers im Formular für dein Tracking verwenden. Damit kannst du die E-Mail, den Namen, die Firma, die Nachricht an dich und weitere Informationen des Anfragenden an HubSpot senden.

Ohne die Verwendung dieser Felder wirst du keine ordentliche Anbindung an HubSpot erstellen können. Da jedes Formular anders ist, kann das CF7 Event Tracker Plugin leider nicht automatisch erkennen welches der Felder für den Namen und welches für die Firma verwendet wird.

 

Vor der Version 2.1 des CF7 Event Trackers konnten die entsprechenden Felder noch mit einer anderen Platzhalter-Struktur verwendet werden.

Solltest du noch Platzhalter wie "%BLOGNAME%" oder "[CF7-FIELD]" verwenden, musst du diese austauschen. Leider habe ich bemerkt, dass diese Struktur der Platzhalter in bestimmten Situationen nicht funktioniert. Deshalb habe ich diese Platzhalter in der Version 2.1 durch andere ersetzt.

In der Platzhalter-Übersicht findest du noch einmal alle Platzhalter, die du in deinen Formularen verwenden kannst.

ID's in Contact Form 7 Felder hinzufügen

Für den Platzhalter {FIELD(id)} benötigst du die ID des Felds. Im Standard-Formular sind diese ID's nicht enthalten. Achte also bitte darauf, wenn du alle Funktionen des CF7 Event Tracker verwenden möchtest!

Um dein Formular zu erweitern musst du nur nach dem Namen des Felds die Angabe "id:id-name" hinzufügen.

Ein paar Beispiele:

[text* your-name id:name]
[email* your-email id:mail]
[select my-dropdown id:dropdown "Value 1" "Value 2" "Value 3"]

Das ermöglicht es die Felder per ID anzusprechen. In den meisten Fällen (vor allem bei JavaScript) ist es dringend notwendig einen eindeutigen Identifier für das entsprechende Feld zu verwenden.

Alle Platzhalter in der Übersicht

Formular-Platzhalter

Platzhalter Beschreibung
{FORMID} Die ID des aktuellen Formulars über die eine Anfrage versendet wird.
{FORMTITLE} Der Titel des Formulars über die eine Anfrage versendet wird.

Blog-Platzhalter

Platzhalter Beschreibung
{BLOGID} Die ID deines Blogs. Diese kann interessant sein, wenn du ein WordPress-Multisystem besitzt.
{BLOGNAME} Der Titel deiner WordPress-Webseite. Zu finden in "Einstellungen > Allgemein".
{BLOGDESC} Die Beschreibung deiner WordPress-Webseite. Ebenfalls zu finden unter "Einstellungen > Allgemein".
{BLOGURL} Die Basis-URL zu deiner Webseite. In der Regel ist das deine Startseite.
{BLOGVERSION} Die Version deines WordPress-Systems.
{BLOGLANG} Die Sprache deines WordPress-Systems.

Seiten-Platzhalter

Platzhalter Beschreibung
{POSTID} Die ID deines Blogbeitrags oder deiner Seite.
{POSTNAME} Der Titel deiner Seite. Das ist entweder der Seitentitel oder Beitragstitel. Solltest du YOAST auf deiner WordPress-Webseite installiert haben, wird stattdessen dieser Titel verwendet.
{POSTDESC} Die Beschreibung deiner Seite. Die Beschreibung wird automatisch von WordPress erstellt. Alternativ kannst du diese auch unter "Textauszug" angeben, wenn du eine individuelle Beschreibung möchtest. Solltest du YOAST installiert haben, wird die Beschreibung des Search-Snippets verwendet.
{POSTURL} Der Link zu deiner Seite auf der das Kontaktformular abgesendet wurde.

Spezielle-Platzhalter

Platzhalter Beschreibung
{DATE(format;modifier)} Mit diesem Shortcode kannst du das aktuelle Datum oder die aktuelle Zeit zum Zeitpunkt des Aufrufs des Kontaktformulars platzieren. Durch den Wert "modifier" kannst du das heutige Datum ändern. Eine genaue Erklärung findest du im Thema Das aktuelle Datum die Zeit verwenden. Achte darauf, dass die beiden Werte mit einem Semikolon (;) getrennt sind.
{GET(parameter)} Erhalte einen Parameter aus dem aktuellen Link mit der Angabe des "parameter". Sollte der Parameter nicht gesetzt sein, wird ein Leerstring "" ausgegeben.
{POST(parameter)} Mit diesem Platzhalter kannst du die Werte über die $_POST-Variable auslesen. Das ist hilfreich, falls du vor dem CF7-Formular ein weiteres Formular erstellen möchtest, dessen Werte du an das Anfrageformular weitergeben möchtest.
{FIELD(id)} Verwende diesen Platzhalter um Zugriff auf die Eingaben des Benutzers zu erhalten. Achte darauf, dass die ID des Felds angegeben wird, nicht der Feldname! In JavaScript kann auf den Namen des Felds nicht zuverlässig zugegriffen werden.
{USER(parameter)} Dieser Platzhalter wird dazu verwendet, um Daten vom registrierten Benutzer zu erhalten. Der Benutzer muss dazu eingeloggt sein, ansonten wird der Platzhalter durch einen Leerstring ersetzt.
{META(parameter)} Erstelle Meta-Variablen auf der Seite, die das CF7-Formular enthält. Vielleicht kennst du diese Meta-Variablen auch unter dem Namen "Eigene Felder". In diese Felder kannst du einen "Namen" (entspricht dem "parameter" im Platzhalter) und einen Wert eingeben. An der Stelle des Platzhalters wird dann der Wert des Meta-Felds eingefügt.

Hast du Fragen zum CF7 Event Tracker?

Feel Free - Ich helfe dir gerne bei Fragen, falls du Ideen und Wünsche hast oder wenn Hilfe mit dem CF7 Event Tracker benötigst. Kontaktiere mich gerne über das Kontaktformular. Gib bitte deine Webseite oder deine Purchase-Email-Adresse an, wenn du das CF7 Event Tracker Plugin bereits gekauft hast.

 

Du hast das WordPress-Plugin noch nicht, bist aber auf den Geschmack gekommen? Alle Funktionen und häufig gestellte Fragen des CF7 Event Tracker Plugin findest du auf der offiziellen Seite.

 

Codepalm
Platzhalter in Contact Form 7 Formulare verwenden