Ländervorwahl für Telefonnummern im Real-time-Marketing-Formular dynamisch ändern

Mit dem neuesten Update (1.1.43992.110) in Customer Insights Journeys wurde eine kleine, aber hilfreiche Verbesserung für Real-time-Marketing-Formulare eingeführt: die Ländervorwahl für Telefonnummern.

Damit kannst du die Eingabe der Telefonnummer vereinfachen. Du trägst einfach die richtige Ländervorwahl im Formular ein. Und sobald der Code vorausgefüllt ist, schlagen Form Submissions nicht mehr fehl, nur weil ein falsches Telefonnummernformat eingegeben wurde.

Aber: Der Wert der Ländervorwahl ist statisch.

Dabei hat jedes Land seine eigene Vorwahl. Gerade bei internationalen Kunden muss es möglich sein, dass sich die Werte je nach ausgewähltem Land ändern.

Da ich gerade in Javascript-Laune bin, habe ich noch ein Skript ergänzt, das die Ländervorwahl dynamisch ändert – abhängig davon, welches Land der Kunde auswählt. Das Länderfeld ist in meinem Beispiel ein Option Set.

Real-time-Marketing-Formular mit Telefonnummer und Ländervorwahl erstellen

Ich setze das Feld Business Phone auf das Real-time-Marketing-Formular in Customer Insights Journeys und ergänze in den Settings die Ländervorwahl. Hier siehst du schon: Ich kann nur einen festen Wert eintragen.

Ich habe außerdem ein Option Set mit meinen Ländern ins Formular aufgenommen (Hinweis: Das ist keine vollständige Liste. Fast 300 Länder einzutragen wäre für das Beispiel einfach etwas zu viel Aufwand gewesen).

Javascript für das Real-time-Marketing-Formular erstellen

Im HTML des Business Phones-Felds siehst du, dass es zwei Attribute gibt, die die Ländervorwahl enthalten. Wenn ich nur die Klasse phoneCountryCodeLabel per Javascript ändere, habe ich das Problem, dass der Kontakt-Datensatz, der erstellt oder aktualisiert wird, weiterhin +49 im Phone-Feld enthält. Das reine Ändern des Labels ist also nur ein Frontend-Update: Es sieht richtig aus, aber der Wert wird nicht korrekt übernommen.

Deshalb muss das Javascript zusätzlich auch das data-countrycode anhand des Landes anpassen.

Dann füge ich das Javascript hinzu. Wenn du mehr Länder hast, musst du sie in der Variable countryPhonePrefixes ergänzen.

document.addEventListener("d365mkt-afterformload", function() {
    const countrySelect = document.getElementById('pk_countrycode-1719506023770');
    const phonePrefixSpan = document.querySelector('.phoneCountryCodeLabel');
    const phoneInputDiv = document.querySelector('.phoneFormFieldBlock');
    const countryPhonePrefixes = {
        '125550000': '+376', // Andorra
        '125550001': '+32',  // Belgium
        '125550002': '+358', // Finland
        '125550005': '+33',  // France
        '125550003': '+49',  // Germany
        '125550008': '+39',  // Italy
        '125550010': '+47',  // Norway
        '125550007': '+351', // Portugal
        '125550006': '+34',  // Spain
        '125550009': '+46',  // Sweden
        '125550004': '+44'   // UK
    };
    countrySelect.addEventListener('change', function () {
        const selectedValue = countrySelect.value;
        if (countryPhonePrefixes.hasOwnProperty(selectedValue)) {
            const newPrefix = countryPhonePrefixes[selectedValue];
            phonePrefixSpan.textContent = newPrefix;
            phoneInputDiv.setAttribute('data-countrycode', newPrefix);
        } else {
            phonePrefixSpan.textContent = ''; // Default to empty if no match found
            phoneInputDiv.removeAttribute('data-countrycode');
        }
    });
});

Zusammenfassung

Die neue Ländervorwahl-Funktion in Customer Insights Journeys ist eine richtig schöne Ergänzung – ich finde sie super. Und sie sieht sogar im Standard-Real-time-Marketing-Formular gut aus (wenn du ein neues Template verwendest).

Mit dem Javascript können wir die Ländervorwahl jetzt auch dynamisch anpassen. Ich habe es hier mit einem Länder-Option-Set umgesetzt, alternativ geht es natürlich auch mit einem Lookup auf Länder.

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