---
title: "Interaktionseinstellungen für benutzerdefinierte Pop-ups"
description: "Richten Sie benutzerdefinierte HTML-Eingabefelder, Absende-Buttons und Schließen-Buttons ein, um Kontaktdaten zu erfassen und die Pop-up-Leistung zu verfolgen."
url: https://help.user.com/de/articles/262-interaktionseinstellungen-fur-benutzerdefinierte-pop-ups
collection: "Pop-ups"
updated: 2026-10-28
language: de
alternates: [en, pl, fr, it, es]
---

# Interaktionseinstellungen für benutzerdefinierte Pop-ups

Richten Sie benutzerdefinierte HTML-Eingabefelder, Absende-Buttons und Schließen-Buttons ein, um Kontaktdaten zu erfassen und die Pop-up-Leistung zu verfolgen.

Der Aufbau von Pop-ups mit benutzerdefiniertem HTML gibt Ihrem Team die vollständige kreative Freiheit, Ihre Pop-ups exakt an Ihre Markenrichtlinien und Designanforderungen anzupassen. Wenn Sie eine visuelle, codefreie Alternative bevorzugen, können Sie Pop-ups stattdessen mit dem [visuellen Editor](https://help.user.com/en/articles/150-how-to-create-a-pop-up.md) im „Website-Erlebnis" gestalten.

Wenn Sie benutzerdefiniertes HTML verwenden, stellt die Einhaltung der Interaktionsregeln in dieser Anleitung sicher, dass Kontaktdaten korrekt in Ihren Workspace übertragen werden und dass Ihre Pop-up-Leistungsstatistiken (einschließlich angezeigter, angeklickter und abgesendeter Interaktionen) genau erfasst werden.

## Eingabefelder konfigurieren

Grundlegende Eingabefelder in Pop-ups erfassen wesentliche Kontaktinformationen wie Namen, E-Mail-Adressen oder Telefonnummern. Um eine korrekte Datenzuordnung in Positive User sicherzustellen, muss das Attribut `name` jedes Eingabefelds mit dem Namen des entsprechenden Kontaktattributs übereinstimmen. Positive User unterstützt Standardattribute wie „Vorname", „Nachname" und „Telefonnummer" sowie benutzerdefinierte Attribute, die für spezifische geschäftliche Anforderungen wie Marketing-Einwilligungen oder E-Commerce-Statistiken definiert werden. Die Angabe des Feldtyps (z. B. `text`, `email` oder `number`) und das Hinzufügen eines aussagekräftigen Platzhaltertextes leiten Kontakte an und gewährleisten eine genaue Datenerfassung.

### Pflichteingabefelder einrichten

Pflichteingabefelder stellen sicher, dass Kontakte wesentliche Informationen bereitstellen, bevor sie ein Pop-up-Formular absenden. Fügen Sie das Attribut `required` in das Eingabeelement ein, um eine Validierung auf Browserebene zu aktivieren, die Kontakte auffordert, das Feld vor dem Absenden auszufüllen. Die Kombination mit einem klaren Platzhaltertext oder Labels verbessert die Benutzerfreundlichkeit.

Beispiel: Pflichteingabe

```javascript
<input type="email" name="email" placeholder="Enter your email address" required>
```

In diesem Beispiel:

-   `type="email"` stellt sicher, dass die Eingabe als E-Mail-Adresse validiert wird.
    
-   `name="email"` ordnet das Feld dem E-Mail-Attribut des Kontakts in Ihrem Positive User Workspace zu.
    
-   `„required"` stellt sicher, dass das Feld vor dem Absenden des Formulars ausgefüllt werden muss.
    
-   `placeholder="Enter your email address"` leitet den Kontakt an.
    

### Optionale Eingabefelder einrichten

Optionale Eingabefelder ergänzen Pflichtfelder, indem sie Kontakten ermöglichen, zusätzliche, nicht obligatorische Daten bereitzustellen. Um ein optionales Feld zu konfigurieren, fügen Sie das Attribut `name` für die Datenzuordnung ein, lassen Sie jedoch das Attribut `required` weg.

Beispiel: Konfiguration von Pflicht- und optionalen Eingabefeldern

```javascript
<input type="email" name="email" placeholder="Enter your email address" required>
<input type="text" name="first_name" placeholder="Enter your first name (optional)">
```

In diesem Beispiel:

-   Die Eingabe „email" ist obligatorisch, da sie das Attribut `required` enthält.
    
-   Die Eingabe „first name" ist optional, da das Attribut `required` weggelassen wird.
    
-   `name="email"` und `name="first_name"` stellen sicher, dass die Daten den korrekten Attributen in Positive User zugeordnet werden.
    

### Einzelne Checkbox-Eingaben konfigurieren

Eine einzelne Checkbox wird häufig für binäre Entscheidungen verwendet, wie z. B. die Erteilung einer Einwilligung. Verwenden Sie `<input type="checkbox">` und ordnen Sie das Attribut `name` dem Kontaktattribut in Positive User zu. Wenn das Kästchen angekreuzt ist, wird der Wert „true" an Positive User gesendet. Wenn Sie die Eingabe in ein `<label>`\-Tag einschließen, wird der Text anklickbar, was die Benutzerfreundlichkeit verbessert.

Beispiel: Checkbox für Newsletter-Einwilligung

```javascript
<label>
  <input type="checkbox" name="newsletter_consent">
  I agree to receive the newsletter.
</label>
```

In diesem Beispiel:

-   `type="checkbox"` erstellt eine einzelne Checkbox.
    
-   `name="newsletter_consent"` ordnet die Eingabe dem Kontaktattribut „newsletter\_consent" zu.
    
-   Das `<label>` macht den Text anklickbar und verbessert so die Benutzerfreundlichkeit.
    

### Mehrfachauswahlfelder einrichten

Eingaben mit fester Auswahl ermöglichen es Kontakten, eine oder mehrere vordefinierte Optionen aus einer Liste auszuwählen, was ideal für die Erfassung von Daten zu Interessen oder Kommunikationspräferenzen ist. Verwenden Sie mehrere `<input type="checkbox">`\-Elemente, die dasselbe Attribut `name` teilen, damit alle ausgewählten Werte diesem einen Kontaktattribut zugeordnet werden. Bevor Sie sie zu Ihrem Code hinzufügen, gehen Sie zu „Workspace Einstellungen" → „Kontaktdaten & Events" → „Kontaktattribute", um [das benutzerdefinierte Attribut zu erstellen](https://help.user.com/en/articles/38-how-to-create-a-custom-attribute.md) und dessen Optionen zu definieren. Das value-Attribut in Ihrem HTML muss exakt mit dem Optionsnamen übereinstimmen, der in Ihren Workspace Einstellungen erstellt wurde.

Beispiel: Konfiguration von Mehrfachauswahl-Eingaben

```javascript
<p>What topics are you interested in?</p>

<label>
  <input type="checkbox" name="interests" value="product_updates">
  Product Updates
</label>
<br>
<label>
  <input type="checkbox" name="interests" value="monthly_newsletter">
  Monthly Newsletter
</label>
<br>
<label>
  <input type="checkbox" name="interests" value="special_offers">
  Special Offers
</label>
```

In diesem Beispiel:

-   `type="checkbox"` erstellt ein auswählbares Kästchen für jede Option.
    
-   `name="interests"` ist für alle drei Eingaben gleich. Dies gruppiert sie und stellt sicher, dass alle ausgewählten Werte im Kontaktattribut „Interests" gespeichert werden.
    
-   `value="..."` gibt den eindeutigen Text an, der für jede Option gespeichert wird, wenn sie ausgewählt ist. Wichtig: Die im Attribut `value` angegebenen Werte (z. B. „product\_updates") müssen zuvor als Optionen für das entsprechende benutzerdefinierte Attribut (z. B. „Interests") in Ihrem Workspace erstellt werden. Der Wert im HTML muss exakt mit der in der App erstellten Option übereinstimmen.
    
-   Das `<label>`\-Element verbessert die Benutzerfreundlichkeit, indem es Kontakten ermöglicht, auf den Text zu klicken, um die entsprechende Checkbox auszuwählen.
    

## Absende-Buttons konfigurieren

Konfigurieren Sie Absende-Buttons, um Formularübermittlungen zu verarbeiten und wichtige Statistiken über die Leistung Ihres Pop-ups zu erfassen.

### Standard-Formularübermittlungen einrichten

Weisen Sie `id="submitButton"` einem Button-Element innerhalb Ihres `<form>`\-Tags zu. Diese spezifische ID ist entscheidend für das Auslösen der Weiterleitung und für die Erfassung von Pop-up-Übermittlungsstatistiken in Positive User. Sie ermöglicht die Validierung von Eingaben, die Zuordnung von Attributen, das Verfolgen von Übermittlungsstatistiken und das Starten automatisierter Workflows.

Beispiel: Formular mit Eingabe und Absende-Button

```javascript
<form>
  <input type="email" name="email" placeholder="Enter your email address" required>
  <button id="submitButton">Submit</button>
</form>
```

### Weiterleitungs-Übermittlungen einrichten

Konfigurieren Sie einen Absende-Button, der Kontakte mithilfe eines Anker-`<a>`\-Tags mit `id="submitButton"` auf eine andere Seite weiterleitet. Diese spezifische ID ist entscheidend, da sie die Weiterleitung auslöst und gleichzeitig Positive User ermöglicht, Pop-up-Übermittlungsstatistiken zu erfassen. Verwenden Sie das Attribut `href` im `<a>`\-Tag, um die Ziel-URL anzugeben. Diese Konfiguration eignet sich ideal, um Kontakte nach einem Klick auf Danke-Seiten oder Sonderangebote zu leiten.

Wenn Ihr Button komplexe verschachtelte Elemente (wie gestalteten Text oder Bilder) enthält, stellen Sie sicher, dass nur das `<a>`\-Tag selbst das Klickereignis empfängt. Wenden Sie `pointer-events: none;` per CSS auf alle Elemente innerhalb des `<a>`\-Tags an, um zu verhindern, dass innere Elemente die Weiterleitung oder das Klick-Tracking blockieren.

Beispiel: Konfiguration eines Weiterleitungs-Buttons mit verschachtelten Elementen

```javascript
<a id="submitButton" href="https://example.com/thank-you">
  <b>Click here to continue</b>
  <img src="https://example.com/image.png" alt="Submit" onerror="this.style.display='none'">
</a>
<style>
  #submitButton * {
    /* This prevents any element inside the link from capturing the click event. */
    pointer-events: none;
  }
</style>
```

## Schließen-Buttons konfigurieren

Erlauben Sie Kontakten, Pop-ups sauber zu schließen, ohne Daten abzusenden.

### Schließen über Attribute aktivieren

Fügen Sie das Attribut `data-dismiss="true"` zu einem beliebigen gültigen HTML-Element hinzu, z. B. zu einem `<span>`\- oder `<svg>`\-Schließsymbol. Ein Klick auf dieses Element signalisiert Positive User, das Pop-up zu schließen und die Schließaktion zu erfassen.

Beispiel: Konfiguration eines Schließen-Buttons

```javascript
<!-- Using a span element -->
<span data-dismiss="true" class="close-icon">&times;</span>
```

### Schließen durch Klick auf das Overlay konfigurieren

Standardmäßig kann das Overlay (der Hintergrundbereich außerhalb des Pop-up-Inhalts) das Pop-up ebenfalls schließen. Wenn ein Kontakt jedoch versehentlich innerhalb des Pop-ups klickt und dieser Klick auf den Overlay-Bereich innerhalb des iframes fällt, kann dies das Pop-up unbeabsichtigt schließen. Um dies zu verhindern, können Sie ein Skript hinzufügen, das sicherstellt, dass nur direkte Klicks auf den Overlay-Hintergrund eine Schließaktion auslösen.

```javascript
// Handle overlay clicks to close popup
document.querySelector('.ue-overlay').addEventListener('click', function (event) {
    // Only close if clicking directly on the overlay background
    if (event.target === this) {
        // Find and click the close button to trigger User.com's close function
        const closeBtn = document.querySelector('[data-dismiss="true"]');
        if (closeBtn) {
            closeBtn.click();
        }
    }
});
```

### Wichtiger Hinweis

Die einzige gültige Methode, ein Pop-up in Positive User zu schließen, ist die Verwendung des Attributs `data-dismiss="true"`. Sie dürfen niemals benutzerdefiniertes JavaScript schreiben, um das Pop-up manuell auszublenden.

Da das Pop-up innerhalb eines `<iframe>` gerendert wird, das die gesamte Seite abdeckt, wird der Inhalt des Pop-ups durch benutzerdefinierten Code nur unsichtbar. Das `<iframe>` selbst bleibt aktiv, deckt die darunterliegende Seite ab und blockiert alle Klicks. Dies ist ein kritischer Fehler, der Ihre Website für Besucher unbrauchbar machen kann.

## Verwandte Artikel

-   [So erstellen Sie ein Pop-up](https://help.user.com/en/articles/150-how-to-create-a-pop-up.md)
    
-   [Pop-up-Statistiken](https://help.user.com/en/articles/222-pop-up-statistics.md)