MWML [INPUT]-Tag

MWML [INPUT]-Tag

Erzeugt im Editor ein einfaches oder komplexes Eingabefeld dessen Wert in das Mailing bzw. die Landingpage gerendert wird.

Verwendung

E-Mail-Templates, Landingpage-Templates

Übergeordnet: <root>, ELEMENT, BLOCK
Untergeordnet: -

Syntax

[INPUT type='...' name='...' ... /]


Attribute

Allgemein

Die folgenden Attribute funktionieren in sämtlichen Input-Typen.

Attribut
Wert
Beschreibung
type1
Einfache Inputs: char, text, url
Komplexe Inputs: boolean, select, color, a, img, a_img
HTML-Inputs: span, p, h1, h2, h3, h4
Definiert den Typ des Inputs
name1
Name
Name des Inputs. Darf keine Sonderzeichen und Großbuchstaben enthalten. Ziffern, Bindestriche und Unterstriche sind erlaubt.
label
Text
Angezeigte Bezeichnung dieses Inputs im Editor
label_de
Text
Übersetzung Deutsch (optional)
label_en
Text
Übersetzung Englisch (optional)
descr
Text
Beschreibungstext
descr_de
Text
Übersetzung Deutsch (optional)
descr_en
Text
Übersetzung Englisch (optional)
required
Werte: true, false2
Wenn true, wird der umgebende [BLOCK] nicht gerendert, falls dieser Input nicht ausgefüllt ist.
hidden
Werte: true, false2
Wenn true, wird dieser Input nicht in die Ausgabe gerendert.

Einfache- und HTML-Inputs

Einfache Inputs

Typen: char, text,url, html

Diese Typen unterscheiden sich lediglich durch die Darstellung im Editor. Der Input type='html' erzeugt in Abhängigkeit von den Systemeinstellungen des Benutzers entweder einen WYSIWYG-Editor oder eine Textarea.

Template-Quellcode
Editor-Ansicht
Ausgabe-Quellcode
Template-Quellcode
  1. [INPUT name='text' type='text' default='text-input' /]<br />
  2. [INPUT name='char' type='char' default='char-input' /]<br />
  3. [INPUT name='url' type='url' default='url-input' /]<br />
  4. [INPUT name='html' type='html' default='html-input' /]
Editor-Ansicht
Ausgabe-Quellcode
  1. text-input<br/>
  2. char-input<br/>
  3. url-input<br/>
  4. html-input
Attribut
Wert
Beschreibung
index
Werte: true, false2
Wenn true, wird der Wert dieses Inputs als Inhaltsverzeichnis-Eintrag genutzt.
default
Text
Standard-Wert, wenn ein neuer Inhalt mit diesem Input erstellt wird. Beispiel: default='Das ist der Artikel-Text.'
editor-form-layout
default2
textarea
wysiwyg
Funktioniert nur für Inputs vom Typ html
Ermöglicht es, die Einstellung "Editor für HTML-Elemente und HTML-Mailings" in "Eigene Einstellungen"/"Systemeinstellungen" zu überschreiben.
landingpage-link
Werte: true, false2
Für Funktion "Landingpage aus E-Mail erstellen".
Wenn true, wird der Landingpage-Link in den Input geschrieben, wenn aus dem Mailing eine Landingpage erstellt wird.

HTML-Inputs

Typen: span, p, h1, h2, h3, h4

Diese Typen rendern das entsprechende HTML-Tag in die Ausgabe.

Alert
Inline-Editing funktioniert nur mit HTML-Inputs.

Attribut
Wert
Beschreibung
index
Werte: true, false2
Wenn true, wird der Wert dieses Inputs als Inhaltsverzeichnis-Eintrag genutzt.
default
Text
Standard-Wert, wenn ein neuer Inhalt mit diesem Input erstellt wird. Beispiel: default='Das ist der Artikel-Text.'
attributes
Text
Attribute für das HTML-Tag.
Beispiel: attributes='class="my_class" style="border:solid 1px #000;"'
inputassistance
Werte: true2, false
Wenn false, werden die Eingabehilfen Eingabehilfen am Input ausgeblendet.
rows
Integer
Anzahl der Zeilen des Textfeldes. Beispiel: rows='4'

Komplexe Inputs

Checkbox

Typ: boolean
Template-Quellcode
Editor-Ansicht
Ausgabe-Quellcode
Template-Quellcode
  1. <div style="background-color: #cecece;[BLOCK name='settings' label='Einstellungen' independent='true'] padding: 20px;[INPUT 
  2.     type='boolean'
  3.     name='display-padding'
  4.     label='Innenabstand anzeigen'
  5.     default='1'
  6.     required='true'
  7.     hidden='true' /][/BLOCK]">
  8.     Lorem ipsum dolor sit amet
  9. </div>
Editor-Ansicht
Boolean Inpur
Ausgabe-Quellcode
Checkbox deaktiviert
  1. <div style="background-color: #cecece;">
  2.     Lorem ipsum dolor sit amet
  3. </div>

Checkbox aktiviert
  1. <div style="background-color: #cecece; padding: 20px;">
  2.     Lorem ipsum dolor sit amet
  3. </div>
Typ: select

Attribut
Wert
Beschreibung
option-values
Text
Werte der Auswahl-Optionen. Die Werte durch Pipe-Operator trennen. Beispiel: option-values='|info|warning'
option-labels
Text
Bezeichnungen der Auswahl-Optionen (optional). Die Bezeichnungen durch Pipe-Operator trennen. Beispiel: option-labels='bitte wählen|Info|Warnung'
option_labels_de
Text
Übersetzung Deutsch (optional)
option_labels_en
Text
Übersetzung Englisch (optional)
default
Text
Standard-Wert, wenn ein neuer Inhalt mit diesem Input erstellt wird.

Beispiel: Dropdown-Input
  1. [INPUT  type='select'
  2.         name='style'
  3.         label='Style'
  4.         option-values='|info|warning|question'
  5.         option-labels='bitte wählen|Info|Warnung|Frage'
  6.         default='info' /]

Colorpicker

Erzeugt im Editor einen Colorpicker. Ausgeben wird, je nach verwendeten Attributen entweder der Farbcode oder eine CSS-Klasse.

Typ: color

Attribut
Wert
Beschreibung
color-values
Farbe(n) (Hex)
Vordefinierte Farben. Format: Hexadezimal oder Farbname. Beispiel: color-values='|#ff0|#fff'
color-labelsTextBezeichnungen der Farben (optional). Beispiel: color-labels='Schwarz|Weiss'
color-labels_de
Text
Übersetzung Deutsch (optional)
color-labels_en
Text
Übersetzung Englisch (optional)
color-classes
Text
Rendert den hinterlegten CSS-Klassennamen. Beispiel: color-classes='black|white'
color-custom
Werte: true2, false
Legt fest, ob individuelle Farben gewählt werden dürfen.
default
Farbe (Hex)
Standard-Wert, wenn ein neuer Inhalt mit diesem Input erstellt wird. Beispiel: default='#fff'

Beispiel: Colorpicker
  1. [INPUT  type='color'
  2.         name='my-color'
  3.         label="Color"
  4.         color-values='#08f279|#ffffff'
  5.         color-labels='grün|weiß'
  6.         default='#08f279'
  7.         color-custom='true' /]

Typ: a

Attribut
Wert
Beschreibung
default_hrefURLStandard-Link-URL
default_text
Text
Standard-Link-Text
default_comment
Text
Standard Kommentar (für Mailing-/Landingpage-Statistik)

Beispiel: Link-Input
  1. [INPUT  type='a'
  2.         name='textlink'
  3.         label="Textlink"
  4.         default_href='https://example.com/'
  5.         default_text='Weiterlesen' /]

Bild-Input

Typen: img, a_img

Attribut
Wert
Beschreibung
default_href
URL
Nur a_img: Standard Link-Url
default_comment
Text
Nur a_img: Standard Kommentar
key_width
Werte: true, false2
Wenn true, wird das Eingabefeld "Bildbreite" angezeigt.
key_height
Werte: true, false2
Wenn true, wird das Eingabefeld "Bildhöhe" angezeigt.
key_src_mobile
Werte: true, false2
Wenn true, werden die Eingabefelder für das mobile Bild angezeigt.
key_width_mobile
Werte: true, false2
Wenn true, wird das Eingabefeld "Bildbreite" für das mobile Bild angezeigt.
key_height_mobile
Werte: true, false2
Wenn true, wird das Eingabefeld "Bildhöhe" für das mobile Bild angezeigt.
default_src
URL
Standard URL des Bildes
default_alt
Text
Standard Alternativtext des Bildes
default_width
Integer
Standard Breite des Bildes. Beispiel: default_width='200'
default_height
Integer
Standard Höhe des Bildes.
default_src_mobile
URL
Standard URL des mobilen Bildes
default_width_mobile
Integer
Standard Breite des mobilen Bildes.
default_height_mobile
Integer
Standard Höhe des mobilen Bildes.
desktop
Werte: true2, false
true: Bild an dieser Stelle in der Desktop-Ansicht anzeigen.
mobile
Werte: true, false2
true: Bild an dieser Stelle in der Mobile-Ansicht anzeigen.

Beispiel: verlinkbares Bild
Template-Quellcode
  1. [INPUT  type='a_img'
  2.         name='image'
  3.         label='Bild'
  4.         default_src='https://example.com/images/logo.png'
  5.         default_href='https://example.com/'
  6.         default_alt='Logo'
  7.         attributes='class="article-image"' /]

Beispiel: Abweichendes Bild in mobiler Darstellung

Aktivierst du mittels key_src_mobile='true' und mobile='true' das mobile Bild, wird die Desktop-Version des Bildes innerhalb <span class="none">...</span> und die Mobil-Version innerhalb <div class="mobile" ...></div> platziert. Den Media Queries musst du die folgenden Anweisungen hinzufügen:

Template-Quellcode
Editor-Ansicht
Ausgabe-Quellcode
Template-Quellcode
  1. <head>
  2.     <style>
  3.     @media screen and (max-width: 768px) { 
  4.         .none { 
  5.             display: none !important;
  6.         }

  8.         .mobile { 
  9.             width: auto !important;
  10.             max-height: inherit !important;
  11.             overflow: visible !important;
  12.             float: none !important;
  13.             display: block !important;
  14.         }
  15.     }
  16.     </style>
  17. </head>
  18. <body>
  19. [INPUT  type='img'
  20.         name='image'
  21.         label='Bild'
  22.         default_src='https://example.com/images/bild.png'
  23.         key_src_mobile='true'
  24.         default_src_mobile='https://example.com/images/bild-mobile.png'
  25.         mobile='true' /]
  26. </body>
Editor-Ansicht
Mobiles Bild
Ausgabe-Quellcode
  1. <head>
  2.     <style>
  3.     @media screen and (max-width: 768px) {
  4.         .none {
  5.             display: none !important;
  6.         }

  8.         .mobile {
  9.             width: auto !important;
  10.             max-height: inherit !important;
  11.             overflow: visible !important;
  12.             float: none !important;
  13.             display: block !important;
  14.         }
  15.     }
  16.     </style>
  17. </head>
  18. <body>
  19.    <span class="none">
  20.        <img alt="" src="https://example.com/images/bild.png" />
  21.    </span>
  22.    <!--[if !mso]><!-->
  23.    <div class="mobile" style="width: 0px; max-height: 0px; overflow: hidden; float:left; display: none;">
  24.        <img alt="" src="https://example.com/images/bild-mobile.png" />
  25.    </div>
  26.    <!--><![endif]-->
  27. </body>

RSS-Integration


Attribut
Beschreibung
feed-path
Der gewünschte Knoten im <item> (title, link,descripition, …)
feed-path_<key>
Knoten für komplexe Inputs bwz. Link-Inputs. Beispiel: feed-path_href='link'

Microdata-Integration


AttributBeschreibung
microdataPfad zum Mikrodaten-Element. Trennzeichen ist der Bindestrich -. Beispiel: product-offers-priceCurrency
replace_pathErsetzt Teile einer URL. Syntax: replace_path='<SEARCH>|<REPLACE>'
Beispiel: Mit replace_path='web|email'" wird die URL https://example.com/images/web/product.png zu https://example.com/images/email/product.png umgeschrieben.


1. Pflichtangabe
2. Standard: Wird das Attribut weggelassen, wird es automatisch mit diesem Wert initialisiert.