Zusätzliche Felder zur Lightbox für die Responsys-Registrierung hinzufügen

Wichtig: Diese Funktion ist nur verfügbar, wenn sie für Ihren Account aktiviert ist und Sie über Oracle Maxymiser verfügen.

Standardmäßig enthält die Vorlage der Lightbox für die E-Mail-Registrierung nur das Feld Emailaddress. Sie können weitere Angaben wie Vorname, Nachname oder Land hinzufügen, indem Sie den Code der Lightbox manuell ändern.

Das folgende Beispiel zeigt, wie Sie die Felder für Vor- und Nachname zur Lightbox für die E-Mail-Registrierung hinzufügen:

  1. Prüfen Sie im Responsys-Listenschema die Namen der Felder, die Sie zur Lightbox hinzufügen möchten. Diese müssen mit den Feldnamen in der Oracle Maxymiser-Lightbox übereinstimmen. In diesem Beispiel lauten die Feldnamen wie folgt:

    1. FIRST_NAME

    2. LAST_NAME
  2. Erstellen Sie eine Lightbox für die Oracle Responsys-Registrierung.
  3. Klicken Sie auf Codeeditor.

    4. Hinweis: Wenn Sie den Lightbox-Code im Codeeditor manuell ändern und anschließend im Bereich "Interaktionen" Änderungen vornehmen, werden die manuellen Änderungen an der Funktion formSubmit mit den im Bereich "Interaktionen" vorgenommenen Änderungen überschrieben.

  4. Gehen Sie im Tag <form> wie folgt vor:
    1. Suchen Sie nach dem Tag <input> für das Feld emailaddress:
      2. <input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-email-input" name="EMAIL_ADDRESS_" type="text" style="display: block; margin: 47px auto 0px; height: 28px; width: 280px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="Email address..." title="Enter Email address." required="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}">
    2. Fügen Sie nach dem oben gezeigten Tag ein neues Tag <input> für den Vornamen ein:
      3. <input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-firstname-input" name="FIRST_NAME" type="text" style="display: block; margin: 5px auto 0px; height: 28px; width: 280px; border-radius: 2px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="First name..." title="Enter First name." required="" pattern="^[a-zA-Z]+$">
    3. Ändern Sie die Attribute von <input> wie folgt:
      • Id: eine aus der Lightbox-ID und dem Namen und Typ des Eingabefeldes bestehende eindeutige ID. Beispiel: lightbox1565788422675-lightbox-firstname-input.

        • Hinweis: Wenn Sie eine Lightbox erstellen, erhält diese eine eindeutige ID, die als Attribut des äußeren div-Elements der Lightbox oder als Teil des ID-Attributs für das oben beschriebene E-Mail-Feld angegeben wird.

      • Name: der Feldname in der Responsys-Tabelle aus Schritt 1.
      • Placeholder: der Hinweistext, der angezeigt wird, wenn das Textfeld leer ist.
      • Pattern: der reguläre Ausdruck, der die Zeichen bestimmt, die in das Textfeld eingegeben werden können. In diesem Beispiel sind Zeichen im Bereich a-z oder A-Z zulässig. Sie können aber auch andere Zeichen wie Bindestriche oder Leerzeichen zulassen.
    4. Fügen Sie ein weiteres Tag <input> für den Nachnamen hinzu, und ändern Sie es:
      5. <input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-lastname-input" name="LAST_NAME" type="text" style="display: block; margin: 5px auto 0px; height: 28px; width: 280px; border-radius: 2px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="Last name..." title="Enter Last name." required="" pattern="^[a-zA-Z]+$">
  5. Wenn das Formular weitergeleitet wird, stellen Sie sicher, dass die neuen Eingabefelder zur Weiterleitungs-URL hinzugefügt werden:
    1. Suchen Sie nach der Funktion window.onFormSubmit und der folgenden darin enthaltenen Codezeile: 
      2. var emailInput = document.getElementById(id + '-lightbox-email-input');
    2. Fügen Sie unterhalb dieser Zeile die folgenden Zeilen hinzu, um Vor- und Nachnamen in den Variablen zu speichern:
      3. var firstnameInput = document.getElementById(id + '-lightbox-firstname-input');
      var lastnameInput = document.getElementById(id + '-lightbox-lastname-input');

    Die in diesen Variablen gespeicherten Werte werden bei der Fehlerprüfung und Weiterleitung des Formulars verwendet.

  6. Der Code zur Fehlerprüfung muss aktualisiert werden, damit der Inhalt der Felder für Vor- und Nachnamen validiert werden kann.
    1. In diesem Beispiel wird der vorhandene Code
      2. var re = /[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}/;
      if (!re.test(emailInput.value)) {
      oops.style.display = 'block';
      emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
      emailInput.style.cssText = emailInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
      return;
      }
    2. durch den folgenden Code ersetzt:
      3. var re = /[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}/;
      var reName = /^[a-zA-Z]+$/;
      emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
      firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
      lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
       
      if (!re.test(emailInput.value) || !reName.test(firstnameInput.value) || !reName.test(lastnameInput.value)) {
      	oops.style.display = 'block';
      	if (!re.test(emailInput.value)) {
      		emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
      		emailInput.style.cssText = emailInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
      	}
       
      	if (!reName.test(firstnameInput.value)) {
      		firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
      		firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
      	}
       
      	if (!reName.test(lastnameInput.value)) {
      		lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
      		lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
      	}
       
      return;
      }
  7. To ensure the new values get submitted when the visitor clicks the Subscribe button, find the following code:
    8. parameters.push(encodeURIComponent('EMAIL_ADDRESS_') + '=' + encodeURIComponent(emailInput.value));
  8. Fügen Sie nach diesem Code die folgenden Zeilen hinzu, um Vor- und Nachnamen zur Weiterleitungs-URL für das Formular hinzuzufügen:
    9. parameters.push(encodeURIComponent('FIRST_NAME') + '=' + encodeURIComponent(firstnameInput.value));
    parameters.push(encodeURIComponent('LAST_NAME') + '=' + encodeURIComponent(lastnameInput.value));
  9. Wechseln Sie zum Bereich Vorschau, um die neu erstellten Felder in der Lightbox zu testen.

Verwandte Themen

Oracle Maxymiser-Integration einrichten

Integrierte Maxymiser-Responsys-Kampagnen starten

Lightbox für die Registrierung mit Maxymiser erstellen

Oracle Responsys-Integration (Oracle Maxymiser-Hilfecenter)

Maxymiser-integration, lightbox, formulare zur e-mail-registrierung