Für ein Update dieses Artikels und weitere Javascript in Marketingformularen schaue in der Javascript-Bibliothek vorbei: Javascript Bibliothek für Realtime Marketing Formular in Customer Insights
***Hinweis: Der Inhalt ist zum Zeitpunkt der Erstellung korrekt. Microsoft mag in der Zwischenzeit Änderungen vorgenommen haben.***
Was mir an dem Real-time Marketingformular gefällt, ist ihr modernes Design und die Tatsache, dass ich kein einziges Marketing-Formularfeld mehr erstellen muss. Alle Formularfelder des Kontakts oder Leads sind automatisch auch Marketing Felder, die im Formulardesigner verwendet werden können. Selbst wenn ich diesen Tabellen ein neues Feld hinzufüge, wird es innerhalb von Sekunden auch im Marketingformular angezeigt.
Use Case: Ein- oder Ausblenden von Feldern in einem Real-time Marketingformular
Manchmal möchten wir verschiedene Felder ein- oder ausblenden, je nachdem, was der Kunde in ein anderes Feld eingibt. Beispiel: Wir fragen die Kontakte, ob sie bereits Kunde sind. Und wenn ja, sollten sie ihre Kundennummer eingeben. Leider gibt es dafür keine einfache Checkbox im Designer. Wir brauchen also ein paar wenige Anpassungen und Javascript im HTML.
Erstelle ein Real-time Marketingformular
Das wichtigste ist natürlich das Formular selbst. In Real-time Marketing erstellst du also das Formular und fügst dem Formular alle erforderlichen Felder hinzu, auch das Kundennummernfeld.
Die richtigen Felder finden
Es ist zum Glück gar nicht notwendig, dass wir das HTML oder CSS mit Klassen und IDs hinzufügen müssen. Es reicht aus, den logischen Namen des Feld zu wissen, denn den fügen wir gleich ins das Skript hinzu. Den logischen Namen kannst du entweder über das make-Portal herausfinden oder viel, viel einfacher natürlich auch direkt im Real-time Marketingformular. Wähle das Feld aus, von dem du den technischen Namen wissen möchtest, und in der Schaltfläche auf der rechten Seite wird das zu mappende Feld und der technische Name angezeigt.
Ok, sehen wir uns nun an, wie man das Javascript hinzufügt und die Kundennummer nur unter bestimmten Bedingungen anzeigt.
Füge das kleine Javascript hinzu
Das Skript definiert zunächst, welche Felder als Trigger unserer Funktion verwendet werden, aber auch, welches Feld dann ein- und ausgeblendet werden soll. Bevor du das Skript bei dir einfügst, denk daran den logischen Namen zu ändern.
<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 als erstes die customer-Variable, in der wir das Checkbox-Feld festlegen. Dann versteckt es als erstes das „Customer Number“ Feld, da es ja erst angezeigt werden soll, wenn die Checkbox angehakt wird. Und dann „lauscht“ es auf die Änderung des customer-Feldes und führt die Funktion aus. Dort prüfen wir erst eine Bedingung – ist das customer-Feld angehakt, also true, oder nicht. In unserem Fall möchten wir das Feld Kundennummer nur anzeigen, wenn das vorherige Feld auf „Ja“ gesetzt ist, aber auch viele weitere Möglichkeiten sind denkbar, z.B. dass das Feld auch ein Pflichtfeld werden soll. Wir fügen noch eine else-Bedingung ein, damit das Feld bei einer leeren Checkbox auch wieder ausgeblendet wird.
Gehe nun zum HTML-Code deines Formulars. Du findest die Schaltfläche in der oberen rechten Ecke des Designers. Dort können wir das Skript einfügen. Du kannst nun das Javascript innerhalb des <head> Tags platzieren. Füge den Code nicht in den <body> Abschnitt ein, der Formulareditor entfernt den Code automatisch und ohne Vorwarnung.
Wichtig: Wenn das Real-time Marketingformulare live ist und du etwas änderst, z. B. ein Feld oder das Skript, kann es bis zu 10 Minuten dauern, bis es auf der Formularseite angezeigt wird!
Zusammenfassung
- Nutze das Skript im Artikel und tausche die Feldnamen mit deinen aus
- Füge das <script> im Formular im <head> Abschnitt hinzu
- Teste dein Formular
- Es kann losgehen
Leider gibt es noch keine Formularvorlagen-Funktionalität für Real-time Marketing. Aber im Moment kannst natürlich den HTML-Code für zukünftige Formulare kopieren und einfügen.
Schau dir auch die FAQs in meinem Blog an: Kurze Fragen - schnelle Antworten! Zu den FAQs
