So füllen Sie Felder in Ihrem ActiveCampaign-Formular voraus

Sie können Formularfelder für bekannte Kontakte mit Informationen vorbefüllen, die Sie bereits in Ihrem ActiveCampaign-Konto haben. Um Formularfelder vorauszufüllen, müssen Sie den URL-Pfad der Webseite oder die Formular-URL mit einem Abfrageparameter anhängen.

Hinweis

  • Sie müssen Site Tracking einschalten und implementieren, um diese Lösung zu nutzen
  • Kontakte sehen ihre Informationen in einem Formular vorausgefüllt, wenn sie einen Kontaktdatensatz in Ihrem Konto haben und wenn sie über die ActiveCampaign Site Tracking-Funktion identifiziert worden sind
  • Jeder Abfrage-String, den Sie zu einem URL-Pfad hinzufügen, unterscheidet sich je nach Feldern, die Sie für ein Formular automatisch ausfüllen möchten
  • Kontakte können die Informationen bearbeiten, die sie in einem Formular vorausgefüllt sehen
  • Es ist nicht möglich, diese Lösung mit ActiveCampaign-Landing Pages zu verwenden. Landing Pages unterstützen keine Abfrageparameter

Wie es funktioniert

Das Anhängen eines URL-Pfads an einen Query-String ist schnell und einfach. Sie müssen nur wissen, welches Feld in einem Formular vorausgefüllt werden soll und das entsprechende Personalisierungs-Tag des Feldes. Sobald Sie die Felder identifiziert haben, die im Formular vorausgefüllt werden sollen, können Sie Ihren Abfrage-String erstellen.

Nachdem Sie den Query-String in die URL der Webseite oder des Formulars eingefügt haben, sehen bekannte Kontakte, die auf Ihrer Seite landen, ihre eigenen Informationen im Formular vorausgefüllt.

So füllen Sie Formularfelder voraus

Diese Lösung funktioniert für die folgenden Formularfeldtypen:

  • Texteingabe
  • Textbereich
  • Datum
  • Datum Uhrzeit
  • Versteckt

Schritt 1: Identifizieren Sie Formularfelder und Personalisierungs-Tags

Die Seite Felder verwalten in Ihrem Konto listet alle Standard- und benutzerdefinierten Kontaktfelder auf. Um die Seite "Felder verwalten" aufzurufen, klicken Sie auf "Einstellungen" (Zahnradsymbol), dann klicken Sie auf "Felder verwalten."

Auf der Seite "Felder verwalten" sehen Sie eine Liste mit Ihren Standard- und benutzerdefinierten Feldern. Jedes Feld hat ein Personalisierungs-Tag. Kopieren Sie das Personalisierungs-Tag für jedes Feld, das Sie im Formular vorausfüllen möchten, und fügen Sie es dann in die Zwischenablage oder eine andere Datei ein.

Als Beispiel werden wir die folgenden Formularfelder vorausfüllen: Vorname und E-Mail Adresse. Das Feld Vorname hat ein Personalisierungs-Tag von %FIRSTNAME% und das Feld E-Mail-Adresse hat ein Personalisierungs-Tag von %EMAIL% .

Schritt 2: Erstellen Sie den Abfrage-String

Als Nächstes müssen Sie den Abfragestring nach dem folgenden Format erstellen:

?fieldname=%PERSONALISIERUNG-TAG%

Wenn Sie mehrere Felder vorausfüllen wollen, dann hat Ihr Query-String dieses Format (beachten Sie das "&" zwischen den einzelnen Feldnamen):

?fieldname=%PERSONALIZATION-TAG%&?fieldname=%PERSONALIZATION-TAG%

Um mit dem obigen Beispiel fortzufahren, hier ein Query-String, der die Felder für den Vornamen und die E-Mail-Adresse in einem Formular vorbefüllt:

?firstname=%FIRSTNAME%&email=%EMAIL%

Schritt 3: Fügen Sie die URL Ihrer Webseite oder Ihres Formulars mit dem Query-String an.

Sobald Sie Ihren Query-String erstellt haben, können Sie ihn an das Ende des URL-Pfads Ihrer Webseite oder Formular-URL anfügen.

Webpage URL

  • Damit werden Felder für jeden Formulartyp vorausgefüllt
  • Sie müssen mit Ihrem Webhosting-Anbieter zusammenarbeiten, um die Abfragezeichenfolge am Ende des URL-Pfads Ihrer Webseite in der Adressleiste hinzuzufügen
  • Ein Beispiel für eine Webseite mit einem Query-String könnte so aussehen:
    www.activecampaign.com/support?Firstname=%FIRSTNAME%&email=%EMAIL%

Formular URL

  • Dies funktioniert nur bei Inline-Formularen
  • Sie können die Abfragezeichenfolge an das Ende des URL-Pfads des Formulars anhängen und dann die URL des Formulars freigeben oder verwenden, wie Sie möchten. Zum Beispiel können Sie Formularfelder für ein Multi-Page-Formular vorausfüllen oder den Query-String am Ende des Formular-Links hinzufügen, wenn Sie Ihr Formular teilen

So rufen Sie die URL für Ihr Inline-Formular ab:

1. Klicken Sie in Ihrem ActiveCampaign-Konto auf "Site" und dann auf "Forms."

2. Klicken Sie auf "Bearbeiten" für das Formular, mit dem Sie arbeiten möchten.

3. Klicken Sie auf die Schaltfläche “Integrieren” Schaltfläche:

4. Klicken Sie auf den “Link” tab.

Der Link des Formulars sieht dann etwa so aus:

https://youracaccountname.activehosted.com/f/213

5. Als nächstes fügen Sie den Query-String an das Ende des Formular-Links.

Als Beispiel möchte ich die E-Mail-Adresse in meinem ActiveCampaign-Formular vorausfüllen. Dazu würde ich die Formular-URL wie folgt formatieren:

https://youracaccountname.activehosted.com/f/213?email=%EMAIL%

Sobald der Query-String zum Link Ihres Formulars hinzugefügt wurde, können Sie ihn überall freigeben, wo Sie möchten.

Fortgeschrittene: Verwenden Sie JavaScript zum Vorausfüllen von Einzel- und Mehrfachauswahlfeldern

Bevor Sie beginnen:

  • Dies ist nur für fortgeschrittene Benutzer
  • Das ActiveCampaign-Support-Team ist nicht in der Lage, Ihnen bei der Implementierung oder Fehlerbehebung von Code zu helfen, den Sie zu Ihrer Webseite hinzufügen
  • Die folgenden Beispiele verwenden Standard-JavaScript-Code. Es gibt andere Möglichkeiten, diesen Code zu schreiben

Wenn Sie mit dem Programmieren eigener Lösungen vertraut sind, können Sie JavaScript verwenden, um Antwortoptionen für Checkbox- und Dropdown-Formularfelder vorauszuwählen. Dieses JavaScript muss in den Quellcode Ihrer Webseite eingefügt werden.

Die unten gezeigten Beispiele sind für die Feldtypen Dropdown-Menü und Optionsfeld. Sie sollten jedoch in der Lage sein, JavaScript zur Vorauswahl von Antwortoptionen für die folgenden Feldtypen zu verwenden:

  • Dropdown-Menü
  • Auswahlknopf
  • Kontrollkästchen

Klicken Sie auf jeden Link unten, um Beispiele zu sehen.

ActiveCampaign JavaScript laden

Um unser JavaScript automatisch zu laden, sobald die Seite geladen ist, verwenden wir die Methode window.onload, etwa so:

</Skript>
window.onload = () => {
    ...
}
</Skript>

Um die automatische Auswahl auf ein bestimmtes Element zu setzen, suchen wir es mit der Methode document.querySelector().

Optionsfeld nach Wert auswählen

Um ein bestimmtes Optionsfeld beim Laden der Seite automatisch auszuwählen, untersuchen Sie das Optionsfeld, das Sie automatisch auswählen möchten, und notieren Sie das Wertattribut:

<input type="radio" value="blue">

Um automatisch blau auszuwählen, schreiben wir unser JavaScript wie folgt:

</Skript>
window.onload = () => {
    /** Überprüft den 'blue'-Wert beim Laden der Seite */
    document.querySelector('input[value="blue"]').checked = true;
}
</Skript>
Option nach Index auswählen

Um eine bestimmte Option aus dem Dropdown-Menü automatisch auszuwählen, zählen wir die erste Option, beginnend bei Null:

<select id="food">
  <option> --- </option>
  <option>Pizza</option>
  <option>Spaghetti</option>
  <option>Cheeseburger</option>
</select>

Um Spaghetti automatisch auszuwählen, schreiben wir unser JavaScript wie folgt, wobei der Indexwert 2 mit der Klammer [2] geschrieben wird:

</Skript>
window.onload = () => {
    /** Auswahl der Option Spaghetti beim Laden der Seite */
    document.querySelector('[id="food"]')[2].selected = true;
}
</Skript>
Alternativ: Option nach Index auswählen

Eine Alternative, eine fortschrittlichere Art der automatischen Auswahl eines Dropdown-Werts, besteht darin, eine eigene Funktion zu schreiben, ohne die Methode document.querySelector() erneut zu verwenden:

/**
 * Automatische Auswahl des Optionswertes aus dem Dropdown-Menü
 * 
 * @param {string} node Der Knoten-Datenname, der die Auswahl festlegen soll
 * @param {number} value Der Optionsindexwert, der beim Laden der Seite ausgewählt werden soll
 * @return {void}
 */
function setSelectedValue(node, value) {
    var elem = document.querySelector(node);
    for (var i = 0; i < elem.options.length; i++) {
        // Zählen nach Index
        var nodeIndex = elem.options[i].index;
        // Wählen Sie die gewünschte Option
        if (nodeIndex == Wert) {
// Setzen Sie die Option auf 'ausgewählt'
elem.options[value].selected = true;
zurück;
        }
    }
}

und ruft es beim Laden der Seite auf:

window.onload = () => {
    /** Wählen Sie die Option 'Spaghetti' beim Laden der Seite */
    setSelectedValue('[id="food"]', 2);
}
Vollständiger Beispielcode
</Skript>
window.onload = () => {
    /** Wählen Sie die Option 'Spaghetti' beim Laden der Seite */
    setSelectedValue('[id="food"]', 2);
}

/**
 * Automatische Auswahl des Optionswertes aus dem Dropdown-Menü
 * 
 * @param {string} node Der Knoten-Datenname, der die Auswahl festlegen soll
 * @param {number} value Der Optionsindexwert, der beim Laden der Seite ausgewählt werden soll
 * @return {void}
 */
function setSelectedValue(node, value) {
    var elem = document.querySelector(node);
    for (var i = 0; i < elem.options.length; i++) {
        // Zählen nach Index
        var nodeIndex = elem.options[i].index;
        // Wählen Sie die gewünschte Option
        if (nodeIndex == Wert) {
// Setzen Sie die Option auf 'ausgewählt'
elem.options[value].selected = true;
zurück;
        }
    }
}
</script>
War dieser Beitrag hilfreich?
0 von 0 fanden dies hilfreich

Have more questions? Submit a request

Direkt loslegen