Zum Hauptinhalt springen
Alle KollektionenMulti-Step-Formulare (Funnel)
Wie kann man dynamische Inhalte und Query-Parameter in Onepage verwenden?
Wie kann man dynamische Inhalte und Query-Parameter in Onepage verwenden?

In diesem Artikel wird erklärt, wie Query-Parameter in Onepage verwendet werden können

Alina avatar
Verfasst von Alina
Gestern aktualisiert

Was sind Query-Parameter?

Query-Parameter (der Teil einer URL nach dem ?) sind eine leistungsstarke Möglichkeit, Informationen an deine Onepage zu übermitteln. Sie sind besonders nützlich für mehrstufige Formulare, das Tracking von Kampagnendaten und um dein Marketing gezielter zu gestalten.

Diese Anleitung hilft dir dabei, noch heute mit Query-Parametern zu starten, damit du morgen bessere Ergebnisse erzielen kannst.

Warum Query-Parameter verwenden?

  • Kampagnen-Tracking. Marketer verwenden häufig Parameter wie ?utm_source=facebook, um herauszufinden, welche Kampagnen die meisten Leads generieren.

  • Personalisierung. Wenn du ?name=Max zu einem Link hinzufügst, kann das „Name“-Feld automatisch mit „Max“ vorausgefüllt werden, was die Benutzererfahrung verbessert.

So kannst du deine Links anpassen

Eine typische Query-Parameter-Struktur sieht so aus:

https://example.com/form-page?param1=value1&param2=value2
  • ? zeigt den Start der Query-Parameter an.

  • param1 und param2 sind die Schlüssel der Parameter (z.B. coupon, utm_source, ref).

  • value1 und value2 sind die Werte der Parameter (z. B. NY2026, google, maxmustermann)

Lass uns die Möglichkeiten zur Nutzung von Query-Parametern in Onepage genauer anschauen.


Szenario 1: Automatisches Ausfüllen von Formularfeldern

In Onepage kannst du diese Parameter in Formularfeldern mit folgender Syntax referenzieren:

{{query.param1}}

Beispiel: Wenn dein Link https://example.com/form?coupon=NY2025 lautet, kannst du {{query.coupon}} als „Standardwert“ im Formularfeld setzen. Dadurch wird das Feld automatisch mit NY2025 vorausgefüllt.


Szenario 2: Autoausfüllen in Auswahlfeldern - Feld-ID finden und verwenden

Die Nutzung von Query-Parametern mit Eingabefeldern ist einfach, aber wie funktioniert das bei Auswahlfeldern wie Karten, Chips oder Dropdowns?

  1. Klicke auf das Drei-Punkte-Menü neben „Standardwert“ in den Einstellungen deines Auswahlfeldes.

  2. Kopiere die generierte ID (z. B. 294c124c-aa43-46df-adba-...).

  3. Füge einen Parameter in deine URL ein, indem du diese ID verwendest. Beispiel:

    ?select=294c124c-aa43-46df-adba-...
  4. Ersetze nach dem Kopieren der ID den Standardwert durch den gewünschten Parameternamen, z. B. select, sodass du Folgendes Resultat erhältst:


Szenario 3: Den Wert eines beliebigen Eingabefelds anzeigen

Du kannst diese Funktion für verschiedene Anwendungsfälle nutzen, zum Beispiel:

  • Interaktive Quizze: Zeige Antworten sofort an, um die Nutzereingabe zu bestätigen („Du hast ausgewählt: Barcelona“).

  • Buchungsbestätigungen: Dynamische Anzeige des eingegebenen Buchungsdatums („Du hast gewählt: 12. April 2025“), um Nutzer zu versichern.

So funktioniert es:

  1. Füge ein Formularfeld hinzu und weise ihm einen internen Namen zu (z. B. userName).

  2. Setze ein Textelement ein, um den eingegebenen Wert dynamisch anzuzeigen, mit der Syntax: {{ form.field.userName }}.

Für Auswahlfelder:

  1. Füge ein Auswahlfeld hinzu und weise es einen internen Namen zu (z. B. mySelect).

  2. Setze ein Textelement ein, um den ausgewählten Wert dynamisch anzuzeigen, mit der Syntax:
    {{ form.field.mySelect.values }}

Für das „Name“-Feld:

  1. Weise dem Feld einen internen Namen zu (z. B. INTERNAL_NAME).

  2. Setze ein Textelement ein, um die eingegebenen Werte dynamisch anzuzeigen, mit folgenden Syntaxen:

    • Vorname anzeigen: {{ form.field.INTERNAL_NAME.firstName }}

    • Zweiter Vorname anzeigen: {{ form.field.INTERNAL_NAME.middleName }}

    • Nachname anzeigen: {{ form.field.INTERNAL_NAME.lastName }}

Lass uns die Builder-Ansicht vergleichen:

Und die Live-Ansicht:

Sichtbarkeitsoptionen

Wenn du einen Fallback (Standardwert) erstellen möchtest, folge bitte dieser Anleitung:

  • Zusätzlich setze den Wert für das Standartwert:
    {{ form.field.userName|default('Default value') }}

  • |default('Any string') ist das Format, das angezeigt wird, falls kein Parameter bereitgestellt wurde.

Wenn du den Textblock erst anzeigen möchtest, wenn ein Wert ausgewählt wurde:

  1. Setze den folgenden Code in dein Textelement ein:
    {% if form.field.mySelect.values %}Selected: {{ form.field.mySelect.values }}{% endif %}

  2. Ersetze form.field.mySelect.values mit der Syntax des Quell-Elements. Sieh dir Fall 3 an, um herauszufinden, welche Syntax für den jeweiligen Elementtyp verwendet werden kann.

  3. Ersetze „Select:“ mit deinem eigenen Text.

📌 Hinweis: Du kannst dies auch mit normalen Texteingaben kombinieren. Zum Beispiel:

{% if form.field.bedrooms and form.field.bathrooms and form.field.area %}Based on a {{ form.field.propertyType.values }} with {{ form.field.bedrooms }} bedrooms, {{ form.field.bathrooms }} bathrooms and {{ form.field.area }} m² area.

Diese Kombination ermöglicht es dir, mehrere Eingabefelder zu prüfen und deren Werte zusammen anzuzeigen.


Szenario 4: Eingaben in den nächsten oder End-Schritten anzeigen

Der Prozess ist identisch zu dem vorherigen Schritt. Verwende einfach die gleichen Abfrageparameter in den folgenden Schritten, ohne Änderungen vorzunehmen.


Szenario 5: Verwenden von JavaScript, um Abfrageparameter zu manipulieren

Du kannst diese Option nutzen, um verschiedene Transformationen durchzuführen, indem du benutzerdefiniertes JavaScript schreibst und diese Funktion dann im Builder referenzierst.

So funktioniert es:

  1. Schreibe eine Funktion und füge sie in den <Body>-Seiten-Code ein.

  2. Verwende sie auf deiner Seite und weise sie den gewünschten Eingabefeldern zu.

  3. Die Syntax lautet: {{ transformMyText(form.field.myInput) }}

Wenn Aktionen auf einem externen Server erforderlich sind:

In diesem Beispiel verwenden wir benutzerdefinierten JavaScript-Code, um einen entfernten Server aufzurufen und lokale Formularvariablen zu nutzen, um die zurückgegebenen Daten zu speichern.

1. Erstelle die Formularelemente.

Schreibe benutzerdefinierten Code, um Daten vom entfernten Server abzurufen.

Klicke, um Code anzuzeigen

<script>
function fetchTotalPrice(form) {
form.var.asyncData = 'loading...'
fetch(`https://broad-smoke-df46.onepage-io.workers.dev/?price=${form.field.myPrice}&count=${form.field.myCount}`)
.then(res => res.text())
.then(data => form.var.asyncData = data)
}
</script>

2. form.var.asyncData = data – speichert die vom Server empfangenen Daten in einer lokalen Variablen.

3. Rufe den benutzerdefinierten Code mit {{ fetchTotalPrice(form) }} auf.

4. Zeige die Variable an: Total price: {{ form.var.asyncData }}

📌Hinweis: In diesem Beispiel ist der Schritt zur Erstellung des Servers nicht enthalten, da dieser spezifisch für jeden Kunden ist.

Wenn du einen asynchronen Ansatz benötigst:

📌 Hinweis: Dies ist eine Variante eines vorherigen Beispiels, jedoch mit asynchronem Abrufen von Daten in einem separaten Schritt, gefolgt von einer automatischen Navigation zum nächsten Schritt mittels Code.

Um manuell zum nächsten Schritt zu wechseln, verwende: form.state.nextFrame().

In diesem Beispiel warten wir auf die Daten vom Server, und sobald diese empfangen wurden, fahren wir automatisch mit dem nächsten Schritt fort.

Klicke, um Code anzuzeigen

<script>
function fetchTotalPrice(form) {
fetch(`https://broad-smoke-df46.onepage-io.workers.dev/?count=${ form.field.myCount }&price=${ form.field.myPrice }`)
.then(res => res.text())
.then(data => form.var.asyncData = data)
.then(() => form.state.nextFrame())

}
</script>

Wenn du die Daten vom Server speichern musst:

Sieh dir bitte unsere Videoanleitung an.

In diesen Beispielen verwenden wir CloudFlare Worker als Server.

Dieser Server multipliziert nur die Werte: https://demo-server.onepage-io.workers.dev/?price=200&count=5

Klicke, um Code anzuzeigen

const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
"Access-Control-Max-Age": "86400",
}

const wait = (time) => new Promise(r => setTimeout(r, time))

export default {
async fetch(request, env, ctx) {
const url = new URL(request.url)
const query = new URLSearchParams(url.search)

const price = +query.get('price') || 1
const count = +query.get('count') || 1

await wait(1000)
return new Response(`${ price * count }`, { headers: corsHeaders });
},
};


Reale Beispiele

1. Gutschein-Landingpage

  • 🔗 Link: https://yourdomain.com/offer?coupon=SUMMER50

  • 📌 Anwendung: Ein Textfeld verwendet {{query.coupon}} als Standardwert, sodass es automatisch mit „SUMMER50“ ausgefüllt wird.

2. Newsletter Anmeldung

  • 🔗 Link: https://yourdomain.com/signup?utm_source=Instagram

  • 📌 Anwendung: Ein verstecktes Feld erfasst den utm_source Wert für Analysezwecke.

3. Vorausgewähltes Service-Pak

  • 🔗 Link: https://yourdomain.com/services?plan=294c124c-aa43-46df-adba-...

  • 📌 Anwendung: Ein Auswahlfeld wählt automatisch die passende Option für den Tarif oder das Paket aus.

4. Benutzerdefinierten Text anzeigen, basierend auf einer der drei Eingaben, und ihn verstecken, bis eine Auswahl getroffen wird

Klicke, um Code anzuzeigen

{% if form.field.energyConsumption.values %}{% if form.field.energyConsumption.values == "Small house (1-2 kW)" %}Small house selected: Ideal for basic energy needs. {% endif %}{% if  form.field.energyConsumption.values == "Mid-sized / Duplex (3-5 kW)" %}Mid-sized / Duplex selected: Perfect for moderate household usage.{% endif %}{% if form.field.energyConsumption.values == "Large house (6-10 kW)" %}Large house selected: Recommended for large homes with high consumption. {% endif %} {% endif %}

5. Anwenden eines Promo-Codes auf einen improvisierten Checkout

5. Anwendung eines Promo-Codes in einem improvisierten Checkout

Klicke, um den Code anzuzeigen

<script>
function applyDiscount(code) {
const originalPrice = 300;
if (code.trim().toLowerCase() === 'minusfifty') {
return (originalPrice - 50).toFixed(2);
}
return originalPrice.toFixed(2);
}
</script>

6. „Kostenabschätzung“ – Alle Informationen aus Schritt 1 und Schritt 2 zusammenführen, um den Endpreis zu berechnen

Klicke, um Code anzuzeigen

<script>
function calculateFinalPrice(form) {
let base;

// Get base price by property type
switch (form.field.propertyType.values) {
case "Apartment":
base = 60;
break;
case "House":
base = 80;
break;
case "Office":
base = 100;
break;
default:
base = 70; // fallback
}

// Start fresh each time
let total = base;

const bedrooms = Number(form.field.bedrooms || 0);
const bathrooms = Number(form.field.bathrooms || 0);
const area = Number(form.field.area || 0);

total += bedrooms * 10;
total += bathrooms * 5;
total += area * 0.5;

// Add-on 1: Window cleaning
if (form.field.addon1?.values === "Yes") {
total += 20;
}

// Normalize addon2 values
const rawValues = form.field.addon2?.values || [];
const selectedServices = Array.isArray(rawValues) ? rawValues : [rawValues];

// Add service prices
for (const service of selectedServices) {
if (typeof service !== "string") continue;
if (service.includes("Deep carpet cleaning")) total += 30;
if (service.includes("Fridge cleaning")) total += 15;
if (service.includes("Laundry service")) total += 25;
}

// Promo code
if (form.field.promoCode === "SAVE20") {
total *= 0.8;
}

// Output
form.var.basePrice = `$${base.toFixed(2)}`;
form.var.totalPrice = `$${total.toFixed(2)}`;
}
</script>


Häufig gestellte Fragen und Lösungen

Ich habe alles gemäß der Anleitung eingestellt, aber der Text verschwindet einfach in der Live-Ansicht.

Es kann mehrere Gründe geben. Die häufigsten sind:

  1. Fehler im Code: Bitte überprüfe noch einmal, ob der Code ohne zusätzliche Zeichen kopiert wurde.

  2. Fehlende oder zusätzliche Leerzeichen: Selbst ein einfaches Leerzeichen kann zu Fehlern führen.

  3. Falsche Syntax: Beachte, dass es je nach verwendetem Element verschiedene Syntaxarten gibt. Siehe dazu Fall 3.

Muss ich den Schritt angeben, in dem sich das Feld befindet?

Nein, es reicht aus, den Standardwert des Feldes festzulegen. Du kannst ein Eingabefeld vorausfüllen, unabhängig davon, in welchem Schritt es sich befindet.

Welchen Preisplan benötige ich dafür?

Du benötigst das Add-on „Optimize“ Forms & Funnels.

Wie lang darf mein Link sein?

So lange, wie es nötig ist! Es gibt zwar technische Einschränkungen, aber 99,9 % der Nutzer werden sie nie erreichen. 🙂


💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂

Hat dies deine Frage beantwortet?