Skip to content

11.4 Inhaltliche Formulargestaltung

Bei der optischen Gestaltung Ihrer Formulare haben Sie alle Möglichkeiten, die Ihnen bei Websiten zur Verfügung stehen. Sie definieren das Design mit CSS und HTML und sind hier vollkommen flexibel. Damit die Formulare am Ende Daten in die Datenbank übertragen oder daraus auslesen können, müssen bestimmte Werte gesetzt und Datenbankspalten (Profilfelder) verknüpft werden.

Wie Sie dafür vorgehen, erläutern die nachfolgenden Abschnitte.

11.4.1 Formulargrundlagen

Beim Aufbau des Inhalts sind Ihnen grundsätzlich keine Grenzen gesetzt. Ein paar Dinge sind aber gut zu wissen:

  1. Öffnen Sie den Formular-Teil im HTML mit folgendem Ausdruck:

  2. Wenn Sie Daten in ein Empfängerprofil speichern möchten, müssen Sie dem OpenEMM im Hintergrund mitteilen, um welche CompanyID es sich bei Ihrem Mandanten handelt. Damit diese nicht in Klarschrift zu lesen ist, gibt es dafür ein sogenanntes CTOKEN, das ist ein verschlüsselter Wert für die ComanyID. Das CTOKEN finden Sie z.B. in den URLs bestehender Formulare. Im Formular können Sie dies mit folgendem Ausdruck hinterlegen – anstelle von xxxxxx fügen Sie den individuellen Wert aus Ihrem Mandanten ein:

  3. Möchten Sie nach dem Absenden des Formulars direkt ein weiteres OpenEMM-Formular aufrufen, verwenden Sie folgenden Ausdruck und ersetzen Sie bei agnFN den Platzhalter Formularname mit dem Namen des gewünschten Formulars:

  4. Wenn es sich um ein Anmeldeformular handelt, müssen Sie dem OpenEMM mehrere Infos geben. Zum einen, für welche Mailing-Liste (agnMAILINGLIST) der Empfänger angemeldet werden soll, welches Mail-Format (mailtype) er erhalten soll und welchen Status (agnSUBSCRIBE) er erhalten soll. Die ID Ihrer Mailing-Liste finden Sie in der Übersicht der Mailing-Listen und fügen Sie anstelle von xxxxx ein. Das Mail-Format ist in der Regel HTML (= 1) und der Empfängerstatus soll nach der Bestätigung auf aktiv (= 1) gesetzt werden:

  5. Weitere Felder, die im Hintergrund befüllt werden sollen, können Sie auf die gleiche Weise einbetten, indem Sie bei name den Feldnamen in der Datenbank einsetzen und für value den gewünschten Inhalt hinterlegen. Beispiel:

  6. Formularfelder, die durch den Aufrufer selbst befüllt werden sollen, könnten so aussehen:

    Wichtig ist hierbei, dass beim Parameter name der Feldname aus der OpenEMM-Datenbank verwendet wird, in diesem Beispiel FIRSTNAME. So wird das Eingabefeld des Formulars dem entsprechenden Feld in der Empfängerdatenbank zugeordnet.

  7. Datumsfelder müssen in drei einzelne Eingabefelder für Tag, Monat und Jahr aufgeteilt werden. Die Feldnamen lauten dabei immer nach dem Schema: FELDNAME_DAY_DATE, FELDNAME_MONTH_DATE, FELDNAME_YEAR_DATE. Beispiel für ein Datumsfeld birthday:

Tag: <input type="text" name="birthday_DAY_DATE" /><br/>
Monat: <input type="text" name="birthday_MONTH_DATE" /><br/>
Jahr: <input type="text" name="birthday_YEAR_DATE" />

11.4.2 Auswahlliste statt Eingabefeld

Einige Angaben sind in der Profildatenbank als Kennziffern gespeichert, etwa das Mail-Format oder das Geschlecht. Bei der Anmeldung kann man einem Anwender natürlich nicht zumuten, diese Kennziffern direkt einzutippen. Dadurch entstehen nur viele Fehler, manche Anwender werden vielleicht sogar absichtlich ungültige Zahlenwerte eintippen. Viel eleganter ist es, wenn der Anwender die Werte über eine Auswahlliste mit sprechenden Einträgen einstellt. Dazu definieren Sie im HTML-Formular mit den Tags -Tag mit dem Attribut name="GENDER" fest, dass die Auswahlliste das OpenEMM-Datenbankfeld für Geschlecht betrifft. Diese Angabe ist unerlässlich, damit der OpenEMM die Eingabe einer Datenbankspalte zuordnen kann.

Die folgenden Zeilen mit legen die einzelnen Listenpunkte fest. Für jeden Listenpunkt gibt es ein eigenes -Tag. In jedem -Tag geben Sie mit dem Attribut value="" den Wert an, den der OpenEMM bei der Auswahl dieses Punktes in die Profildatenbank übernehmen soll. Dabei stehen die Werte 0 für männlich, 1 für weiblich und 2 für divers/unbekannt.

Was passiert aber, wenn der Anwender gar keine Auswahl trifft? Für diesen Fall geben Sie selbst eine Auswahl vor. Im Beispiel soll - Anrede - als Standardwert bei der Auswertung des Formulars erscheinen. Dazu fügen Sie in das betroffene -Tag das Attribut selected ein. Damit ist beim Anzeigen des Formulars zunächst dieser Eintrag sichtbar und ausgewählt.

Für andere Angaben wie das gewünschte Mail-Format oder selbst definierte Felder müssen Sie zwei Dinge anpassen:

  • den Namen des Feldes im Attribut name

  • die Werte (value="") und den Text der einzelnen Listenpunkte (); Sie dürfen dabei so viele Listenpunkte einfügen, wie Sie wollen.

11.4.3 Vorhandene Daten darstellen

Nicht immer sollen leere Felder im OpenEMM mit einem neuen Inhalt befüllt werden, wie bei der Neuanmeldung eines Empfängers. Es gibt auch zahlreiche Anwendungsfälle, bei denen die Daten eines bestehenden Empfängerprofils im Formular geladen und dargestellt werden sollen, z.B. wenn ein Empfänger Datenkorrekturen oder -ergänzungen vornehmen möchte.

Damit Sie die Daten aus einem vorhandenen Empfängerprofil abrufen können müssen drei Punkte erfüllt sein:

  1. Der Formularaufruf muss mit einer existierenden User ID erfolgt sein, sonst weiß der OpenEMM nicht, welche Daten er darstellen soll.

  2. Das Formular benötigt einen einleitenden Trigger, der die Profildaten abruft.

  3. Das darzustellende Profilfeld wird mit dem Skriptbefehl $customerData. erweitert.

Im Falle eines einfachen Eingabefelds, wie z.B. dem Vornamen, sieht der Aufruf wie folgt aus:

Vorname: <input type="text" name="FIRSTNAME" value="$!customerData.FIRSTNAME">

Bei der Ausgabe eines bestehenden Profils muss auch in einer Auswahlliste der richtige Punkt markiert sein. Dazu müssen Sie im HTML-Code das Attribut selected in das entsprechende -Tag einfügen. Ähnlich verhält es sich mit einer Checkbox, hier erzeugt das Attribut checked ein Häkchen. Über Skriptbefehle fügen Sie die Attribute an der richtigen Stelle, abhängig vom Empfängerprofil, ein. Das Beispiel für die Anzeige des Mail-Formats in einer Auswahlliste sieht so aus:

Mail-Format: <select name="MAILTYPE" size="1">
<option value="0" #if( $customerData.MAILTYPE == "0" ) selected #end >
Text-Version
</option>
<option value="1" #if( $customerData.MAILTYPE == "1" ) selected #end >
HTML-Version
</option>
<option value="2" #if( $customerData.MAILTYPE == "2" ) selected #end >
Offline-HTML
</option>
</select><br>

Der Listenpunkt, den der Browser als markiert anzeigt, muss mit dem Attribut selected markiert sein. Die Wenn-Abfrage #if prüft zunächst, ob der im Empfängerprofil gespeicherte Wert zum Listeneintrag passt. Den Wert aus dem Profil rufen Sie mit $customerData.MAILTYPE ab. MAILTYPE ist der Name des Feldes, in dem der OpenEMM den E-Mail-Typ (Text, HTML oder Offline-HTML) eines Empfängers speichert. Besteht eine Übereinstimmung, so fügt der Skriptbefehl den Text vor dem abschließenden #end der Wenn-Abfrage in den HTML-Code ein. Aus dem Ausdruck

<option value="1" #if( $customerData.MAILTYPE == "1" ) selected #end >

wird damit zum Beispiel

<option value="1" selected >

Das passiert im Beispiel natürlich nur, wenn im Empfängerprofil eine 1 eingetragen ist. Bei einer 2 oder einer 0 sieht es dann folglich so aus:

<option value="2">

Im Ergebnis befüllt das -Tag die Auswahl mit dem Wert, der dem Empfängerprofil entspricht.

11.4.4 Bilder in Formulare einbauen

Ebenso wie bei Mailings können Sie Bilder über den HTML-Tag auch in Formulare einbauen – mit genau der gleichen Vorgehensweise (siehe dazu auch Kapitel Bilder verwenden). Der HTML-Befehl verweist auf eine Bilddatei, die zum Beispiel auf Ihrem Server gespeichert sein kann und eine Image-URL wie https://www.yourdomain.com/uploads/logo.jpg besitzt. Sie können aber auch das Bild auf dem OpenEMM-Server speichern und dann den Bildpfad aus dem Medienpool oder dem Register Bilder verwenden, alternativ können Sie auch das agnIMAGE-Tag verwenden, um das Bild zu referenzieren..

Ob Sie die Image-URL im Formular korrekt angegeben haben, überprüfen Sie indem Sie in den WYSIWYG-Modus wechseln oder den Link, der Ihnen nach dem ersten Speichern unter dem Formular-Namen angeboten wird, aufrufen. Wenn Sie ein Bild im Formular verwenden möchten, das Sie zuvor im Bereich Bilder im Formular hochgeladen haben, dann kopieren Sie die Image-URL aus der Spalte Link und fügen Sie diese an entsprechender Stelle im Formular ein.

Hinweis: Wenn Ihr Erfolgsformular einen einleitenden Trigger hat, dann berücksichtigen Sie die Beschreibung aus Kapitel Formulare in Mailings einfügen, um dieses überprüfen zu können.

Wollen Sie die Bilder für das Formular auf dem OpenEMM-Server speichern, müssen Sie die entsprechenden Dateien hochladen. Das können Sie auf zweierlei Arten erledigen. Sie können einzelne oder mehrere Bilder hochladen indem Sie diese im Register Bilder entweder, via Drag and Drop, in das blaue Kästchen mit der Aufschrift Dateien hier hineinziehen schieben oder auf den nebenstehenden Button Dateien auswählen klicken. Nach einem Klick auf die Schaltfläche Datei hochladen überträgt der OpenEMM die Bilddatei(en) auf den AGNITAS-Server.

Der OpenEMM unterstützt ebenfalls den Upload von Zip-Dateien. Zusätzlich können Sie auch .ico-Dateien hochladen, um das Favicon des Formulars individuell zu gestalten.

Sie können veraltete Bilder über das Papierkorbsymbol jederzeit wieder entfernen. Zudem bietet der OpenEMM Ihnen auch die Möglichkeit, einzelne Bilder über das Download-Symbol am Zeilenende sowie über die Sammelaktion Bilder gesammelt herunterladen für die Archivierung oder Weiterbearbeitung außerhalb des OpenEMM abzuspeichern.

In Ihre Formulare können Sie ebenso wie in Mailings messbare Links einfügen (siehe auch Kapitel Messbare Links verwenden). Klickt ein Anwender einen im Formular enthaltenen Link an, ruft er damit eine URL auf, die auf den OpenEMM-Server verweist. Der Server registriert den Klick und ordnet ihn dem speziellen Empfänger zu. Es werden auch Aufrufe eines Links und Trigger registriert, die nicht einem einzelnen Empfänger zugeordnet werden können. Dazu zählen zum Beispiel Links eines Anmeldeformulars. So können Sie leicht ermitteln, welche im Formular behandelten Themen auf besonderes Interesse stoßen.

Einen messbaren Link tragen Sie im Feld Erfolgs-Formular ein. Der OpenEMM erkennt automatisch, wenn Ihr Formular einen Link enthält. Vor dem Verwenden des Formulars legen Sie fest, welche der im Formular enthaltenen Links Sie messen möchten und welche nicht. Dazu gehen Sie wie folgt vor:

  1. Klicken Sie auf das Register Links. Daraufhin erscheint unter der Spalte URL eine Übersicht der Links, die im Erfolgs-Formular vorhanden sind.

  2. Um einen bestimmten Link zu bearbeiten, klicken Sie auf den Eintrag.

  1. Der Eingabedialog für messbare Links zeigt oben den ausgewählten Link an. Darunter finden Sie ein Eingabefeld für eine Beschreibung. Hier können Sie einen knappen Text eingeben, der die Bedeutung des Links kurz beschreibt. Dieser Text bleibt für die Besucher des Formulars unsichtbar. Bei der statistischen Auswertung der Klicks zeigt der OpenEMM die Beschreibung jedoch an. Das erleichtert die Auswertung bei langen URLs erheblich.

  2. Die Option Link-Tracking legt fest, ob die Klicks erfasst werden sollen. Die Parameter messen und nicht messen sprechen für sich.

  3. Über das Feld Link-Erweiterungen können Sie einer im Formular enthaltenen URL zusätzliche Parameter übergeben, z.B. für Web- oder Shoptracking. Dazu tragen Sie die gewünschten Erweiterungen mit Name und Wert ein. Mit der Schaltfläche Hinzufügen wird eine neue Zeile eingefügt. Soll einer der Parameter gelöscht werden, entfernen Sie die entsprechende Zeile durch einen Klick auf das Papierkorbsymbol.

  4. Abschließend übergeben Sie die geänderte Link-Einstellung mit der Schaltfläche Speichern an das System und Sie sehen wieder die Übersicht.

Erweiterungen, die Sie unter Einstellungen rechts auf der Übersichtsseite der Links vornehmen, überträgt der OpenEMM automatisch auf alle Links des Formulars. In der Spalte Erweitert erkennen Sie auf einen Blick, ob der Link erweitert wurde inklusive der Anzahl an Parameter.

Im Auswahlfeld Standard Link-Tracking können Sie für alle Links auf einmal festlegen, ob der OpenEMM die Klicks messen oder nicht messen soll. Bei der Einstellung nicht messen übernimmt der OpenEMM die Links unverändert für das Formular. Der Formularanwender kann nachvollziehen, wohin ein Link führt, allerdings lassen sich Klicks darauf dann nicht erfassen. Genau umgekehrt verhält es sich bei der Einstellung messen: Die Links werden in Redirects umgewandelt und verweisen zuerst auf den OpenEMM-Server und können damit erfasst werden. Anwender sehen in diesem Fall jedoch nicht die ursprüngliche Zieladresse des Links. Das Standard Link-Tracking gilt pauschal für alle im Formular enthaltenen Links. Sie können diese Einstellung aber jederzeit für einzelne Links ändern.

Über das Symbol am Ende der Zeile können Sie den angezeigten Link direkt in einem neuen Register öffnen.

11.4.6 Formulargenerator

Der Formulargenerator erlaubt Ihnen eine einfache Erstellung aller notwendigen Formulare ohne weitere HTML-Kenntnisse. Standardinformationen, die im Hintergrund mitgegeben werden müssen, sind automatisch vorbefüllt und diese sollten nicht entfernt werden, damit die Daten dem richtigen Mandanten zugeordnet werden können. Neue Elemente fügen Sie durch Anklicken des entsprechenden Typs in der rechten Seitenleiste einfach in den Inhaltsbereich ein. Möchten Sie Informationen im Hintergrund übermitteln, dann verwenden Sie dafür den Typ Verstecktes Feld. Alle anderen Typen sind sichtbar. Anschließend können die Einstellungen, z.B. Beschriftung, Darstellung, Pflichtfeld etc., durch Klick auf das Stift-Symbol bearbeitet sowie die Verknüpfung zu einem Profilfeld hergestellt werden. Sie können die Felder per Drag & Drop in der Reihenfolge sortieren. Selbstverständlich können Sie Felder mit den Bedienelementen auf der rechten Seite kopieren oder auch wieder entfernen.