· Pauline · How-to · 5 min read
Marketing-Formulare mit JavaScript seitenübergreifend wiederverwenden
Erfahre, wie du ein einzelnes Dynamics-365-Marketingformular mit JavaScript auf mehreren Seiten einbindest – und dabei trotzdem die Quelle trackst und Journeys personalisierst.
Bitte beachten: Der Inhalt ist zum Zeitpunkt der Erstellung korrekt. Es ist möglich, dass Microsoft in der Zwischenzeit Änderungen vorgenommen hat.
Eine Sache, über die ich oft nachgedacht habe – besonders bei der Arbeit mit Outbound Marketing – ist, wie man Marketingformulare möglichst einfach und effizient integriert. Für Outbound habe ich Form Captures wirklich gern genutzt. Aber wenn es um Real-time Marketing geht, seien wir ehrlich … ich bevorzuge es, meine Marketingformulare direkt in Dynamics 365 zu erstellen und sie dann per JavaScript auf der Website einzubetten.
Die meisten meiner Formulare verwenden ein sehr ähnliches Set an Feldern. Sie für mehrere Websites zu duplizieren bedeutet daher vor allem eins: unnötige Mehrarbeit. Mein Ziel? Ein wiederverwendbares Formular, das auf mehreren Websites eingebettet ist und mir trotzdem sagt, woher jede Übermittlung kommt, damit ich Leads in die richtige Journey schicken kann.
Und ja – das ist absolut möglich. Mit einem einzigen kleinen Script. Lass uns loslegen!
Schritt 1: Marketingformular erstellen
Als Erstes:
Gehe zu den Feature Switches und aktiviere Custom unmapped fields. Damit kannst du dem Formular neue benutzerdefinierte Felder hinzufügen – die wir später brauchen, um dynamische Kampagnenwerte zu übergeben.
Erstelle anschließend ein neues, einfaches Formular und füge ein benutzerdefiniertes Feld vom Typ Short Text hinzu. Nenne es zum Beispiel Campaign und blende das Feld für den Benutzer aus (für dieses Demo-Beispiel blende ich es noch nicht aus). Verwende einen logischen Namen wie campaignValue.
Dieses versteckte Feld füllen wir im nächsten Schritt dynamisch per JavaScript. Es wird automatisch gesetzt und später auch für die Verzweigung in deiner Journey verwendet.
Je nach Use Case kannst du auf die gleiche Weise auch weitere versteckte Felder hinzufügen und dynamisch befüllen.
Schritt 2: JavaScript zum Marketingformular hinzufügen
Jetzt fügen wir dem Marketingformular ein JavaScript-Snippet hinzu. Dieses Script liest den Kampagnenwert von der Website aus und schreibt ihn in das versteckte Feld, das wir gerade erstellt haben.
Falls du noch nicht weißt, wie du JavaScript zu einem Marketingformular hinzufügst, schau dir dazu gern meinen separaten Artikel an.
<script>
(function () {
/**
* Retrieves the value of a the attribute from the form container.
* Falls back to <body> if #formContainer is not found.
*/
function getAttributeFromPage(attribute) {
const container = document.querySelector('#formContainer') || document.body;
return container.getAttribute(attribute) || null;
}
/**
* Finds the campaign input field in the form and sets its value from the attribute.
*/
function injectFieldValues() {
const campaign = getAttributeFromPage('data-campaign');
const campaignInput = document.querySelector('[name="campaignValue"]');
if (campaign && campaignInput) {
campaignInput.value = campaign;
}
}
/**
* Uses MutationObserver to wait for the form to become available in the DOM.
* Once the form is detected, it injects the campaign value.
*/
function watchForFormLoad() {
const observer = new MutationObserver((mutations, obs) => {
const formReady = document.querySelector('[data-targetproperty]') && document.querySelector('.submitButton span');
if (formReady) {
injectFieldValues();
obs.disconnect(); // Stop watching once we're done
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
}
/**
* Waits for Marketing form load event before starting.
*/
document.addEventListener('d365mkt-afterformload', function () {
watchForFormLoad();
});
})();
</script>Schritt 3: Formular auf deiner Website einbetten
Sobald dein Formular fertig ist, veröffentliche es und gehe zu den Publish Options. Dort kopierst du einfach den Embed-JavaScript-Code. Genau dieses Script kannst du auf jeder Seite verwenden, auf der das Formular erscheinen soll.
Dein Embed-Code sollte ungefähr so aussehen:
<div
data-form-id='4fe1d6e7...46c848'
data-form-api-url='https://public-eur.mkt.dynamics.com/api/v1.0/orgs/f3be5b81-...248550/landingpageforms'
data-cached-form-url='https://assets1-eur.mkt.dynamics.com/f3be5b81-06a3-ef11-8a66-000d3a248550/digitalassets/forms/4...46c848' ></div>
<script data-minify="1" src = 'https://paulinekolde.info/wp-content/cache/min/1/eur/FormLoade/FormLoader.bundle.js?ver=1758722236' data-rocket-defer defer></script>Jetzt kommt der eigentliche Trick: Füge einfach oberhalb des Formular-Skripts ein <div> mit einem data-campaign-Attribut hinzu. Hier definierst du den Kampagnenwert für genau diese Seite:
<div id="formContainer" data-campaign="SpringCampaign2025"></div>Tipp: Du kannst das Ganze erweitern, indem du weitere data-*-Attribute hinzufügst (z. B. data-website="xyz") und diese mit zusätzlichem JavaScript im Marketingformular verarbeitest.
Auf meiner WordPress-Seite sieht das exakt so aus – und funktioniert reibungslos:
<div id="formContainer" data-campaign="SpringCampaign2025"></div>
Schritt 4: Journey mit Attribut-Verzweigungen erstellen
Da dein Formular jetzt einen versteckten Kampagnenwert übermittelt, erstellen wir eine Journey, die je nach Wert unterschiedlich reagiert.
- Starte mit dem Trigger Marketing Form Submitted.
- Füge eine Attribute Branch hinzu.
- Setze die Bedingungen basierend auf dem Field Localized Name, der übermittelt wurde. Du findest diesen Namen in der Field Submission Table des Form Submission Records.
Verwende dafür den Form Submission Field Snapshot. Nutze den Operator contains und ergänze Feldname und Wert (z. B. campaignValue: SpringCampaign).
So kann dasselbe Formular unterschiedliche E-Mail-Journeys auslösen – abhängig davon, auf welcher Website es eingebettet wurde.
Zusammenfassung
Und das war’s schon! Du hast jetzt ein einziges Marketingformular, das du auf mehreren Websites einbinden kannst – und trotzdem genau weißt, woher jeder Kontakt kommt. So kannst du Journeys personalisieren und gleichzeitig dein Formular-Setup sauber und skalierbar halten.
Diese Methode funktioniert mit jedem versteckten Feld und beliebigen Werten. Die Möglichkeiten sind nahezu unbegrenzt – also werde kreativ!
Abschließender Gedanke Vielleicht fragst du dich: Warum nicht einfach UTM-Parameter verwenden?
UTM-Parameter sind großartig, um Akquisekanäle zu tracken. Dieser Ansatz hier zielt jedoch auf Formular-Organisation und personalisierte Erlebnisse ab. Statt für jeden Use Case ein eigenes Formular zu pflegen, hast du genau eines – und steuerst das Verhalten dynamisch per JavaScript.
Hast du Fragen, Ideen oder Anmerkungen? Meld dich gern.
