Real-time-Marketing-Formulare mit kleinen JavaScript-Snippets erweitern

Für ein Update zu diesem Artikel und mehr JavaScript in Marketingformularen schau dir die JavaScript-Bibliothek an: Javascript library for real-time marketing form in Customer Insights

Was ich an den Real-time-Marketing-Formularen besonders mag, ist der moderne Designer und die Tatsache, dass du kein separates Marketingformularfeld mehr erstellen musst. Alle Formularfelder auf dem Kontakt oder Lead sind automatisch Marketingfelder, die du direkt im Formulardesigner verwenden kannst. Selbst wenn du ein neues Feld zu diesen Tabellen hinzufügst, erscheint es innerhalb weniger Sekunden im Marketingformular.

Use Case: Felder basierend auf Eingaben in Real-time-Marketing-Formularen ein- oder ausblenden

Manchmal möchtest du bestimmte Felder ein- oder ausblenden, abhängig davon, was der Kunde in einem anderen Feld eingibt.
Ein Beispiel: Du fragst Kontakte, ob sie bereits Kunde sind. Wenn ja, sollen sie ihre Kundennummer angeben. Leider gibt es dafür im Designer keine einfache Checkbox-Logik. Deshalb brauchen wir ein paar Anpassungen und etwas JavaScript im HTML.

Real-time-Marketing-Formular erstellen

Der erste Schritt ist natürlich das Marketingformular. In Real-time Marketing erstellst du das Formular und fügst alle benötigten Felder hinzu – inklusive des Feldes für die Kundennummer.

Designer Real-time Marketing forms

Die richtigen Felder finden

Zum Glück ist es nicht notwendig, HTML oder CSS mit Klassen und IDs hinzuzufügen. Es reicht aus, den logischen Namen des Feldes zu kennen, da wir ihn direkt im Skript verwenden.
Den logischen Namen findest du entweder im Maker-Portal oder – viel einfacher – direkt im Real-time-Marketing-Formular. Wähle das gewünschte Feld aus, und im rechten Bereich siehst du das zugeordnete Feld inklusive des technischen Namens.

Jetzt schauen wir uns an, wie du das JavaScript hinzufügst und die Kundennummer nur unter bestimmten Bedingungen anzeigst.

JavaScript hinzufügen

Das Skript definiert zunächst, welche Felder als Trigger für unsere Funktion dienen und welches Feld ein- oder ausgeblendet werden soll. Bevor du das Skript einfügst, denke daran, die logischen Feldnamen anzupassen.

<script>
   let customer = document.querySelector('input[name="cr6d5_areyoualreadyacustomer"]'); 
   document.querySelector('input[name="cr6d5_customernumber"]').style.display = 'none'; 
   customer.addEventListener('change', showCustomerNumber);
   function showCustomerNumber() {
      if (customer.checked === true) {
         document.querySelector('input[name="cr6d5_customernumber"]').style.display = 'block';
         }
     else {
         document.querySelector('input[name="cr6d5_customernumber"]').style.display = 'none';
          }
     }
</script>

Das Skript definiert zunächst die Variable customer, in der wir das Checkbox-Feld setzen. Anschließend wird das Feld „Customer Number“ ausgeblendet, da es nur angezeigt werden soll, wenn die Checkbox aktiviert ist. Danach „lauscht“ das Skript auf Änderungen am Kundenfeld und führt die Funktion aus. In der Funktion prüfen wir zuerst die Bedingung: Ist das Kundenfeld aktiviert (true) oder nicht? In unserem Fall soll das Kundennummernfeld nur angezeigt werden, wenn das vorherige Feld auf „Ja“ gesetzt ist. Es sind aber auch viele andere Aktionen möglich, zum Beispiel das Feld zusätzlich als Pflichtfeld zu markieren. Mit der else-Bedingung stellen wir sicher, dass das Feld wieder ausgeblendet wird, wenn die Checkbox deaktiviert ist.

Wechsle nun in den HTML-Code deines Formulars. Den entsprechenden Button findest du oben rechts im Designer. Dort kannst du das Skript einfügen. Platziere das JavaScript irgendwo innerhalb des <head>-Tags. Ich füge es normalerweise ganz am Ende ein, also direkt vor dem schließenden </head>-Tag. Füge den Code nicht in den <body>-Bereich ein – der Formulareditor entfernt den Code dort automatisch und ohne Warnung.

Wichtig: Wenn ein Formular live ist und du Änderungen vornimmst, zum Beispiel an einem Feld oder am Skript, kann es bis zu 10 Minuten dauern, bis die Änderung auf der Formularseite sichtbar wird!

Zusammenfassung

Verwende das Skript aus diesem Artikel und ersetze die Feldnamen durch deine eigenen
Füge das <script> in den <head>-Bereich deines Formulars ein
Teste dein Formular
Fertig!

Leider gibt es aktuell noch keine Formular-Template-Funktionalität für Real-time Marketing. Bis dahin kannst du den HTML-Code aber einfach kopieren und für zukünftige Formulare wiederverwenden.

Referenz: Extend real-time marketing forms using code (Dynamics 365 Marketing Developer Guide) | Microsoft Learn

Hast du Fragen, Ideen oder Anmerkungen? Meld dich gern.