Den Einbettungscode des Opt-in-Formulars anpassen

Wenn Sie ein Flexmail-Opt-in-Formular auf Ihrer Website einbetten, wird es mit Standard-Styling geliefert. Wenn dieses Styling nicht zum Design Ihrer Website passt, können Sie es mit CSS überschreiben. Dieser Artikel erklärt, wie der Einbettungscode funktioniert und wie Sie benutzerdefinierte Styles sicher anwenden.

Wie der Einbettungscode funktioniert

Wenn Sie den Einbettungscode für ein Opt-in-Formular in Flexmail generieren, erhalten Sie drei Teile:

• Ein JavaScript-Snippet, das Ihre benutzerdefinierten Styles an das Formular übergibt, sobald es geladen wurde.
• Ein iFrame, der das Formular selbst von https://return.flexmail.eu lädt.
• Ein leerer **<style id="flx-styles">** Block, in dem Sie Ihr eigenes CSS hinzufügen können.

Sie fügen alle drei Teile in das HTML Ihrer Website ein, wo das Formular erscheinen soll. Wenn die Seite geladen wird, ruft der iFrame das Formular ab, und das JavaScript fügt den Inhalt Ihres Style-Blocks in das Formular ein, sodass Ihr Styling angewendet wird.

So erhalten Sie den Einbettungscode:

1. Gehen Sie zu Formulare > Opt-in-Formulare.
2. Öffnen Sie das Formular, das Sie einbetten möchten.
3. Klicken Sie auf die Schaltfläche Formular einbetten.
4. Kopieren Sie den Einbettungscode aus dem Popup.

Support-Tipp Kopieren Sie den Einbettungscode jedes Mal neu, wenn Sie strukturelle Änderungen am Formular in Flexmail vornehmen (wie das Hinzufügen oder Entfernen von Feldern). Ihr Styling kann gleich bleiben, solange Sie dieselben Selektoren verwenden.

Benutzerdefiniertes CSS zu Ihrer Website hinzufügen

Benutzerdefinierte Styles kommen in den <style id="flx-styles"> Block. Der Block ist standardmäßig leer und enthält kommentierte Platzhalter für die häufigsten Selektoren:

• #flxml_frm > table > tbody > tr > td:nth-child(1) — die Feldbeschriftungen.
• #flxml_frm input[type="text"] — die Text-Eingabefelder.
• #flxml_frm button[type="submit"] — der Absende-Button.

Sie können dies mit Selektoren für andere Elemente erweitern, wie #flxml_frm select für Dropdowns, #flxml_frm input[type="checkbox"] für Checkboxen oder #flxml_frm input[type="number"] für numerische Felder. Setzen Sie Ihren Selektoren immer #flxml_frm voran, damit Ihre Styles nur auf das Formular angewendet werden.

Hier ist ein kleines Beispiel, das das Formular transparent macht, auf Mobilgeräten responsiv gestaltet und dem Absende-Button ein benutzerdefiniertes Aussehen verleiht:

Das !important-Flag ist manchmal erforderlich, weil die Standard-Styles des Formulars inline Breitenwerte verwenden. Von hier aus können Sie den Rest aufbauen: Schriftarten, Farben, Beschriftungs-Styling anpassen und weitere Regeln mit demselben #flxml_frm-Präfix hinzufügen.

Achtung Das Formular wird innerhalb eines iFrames geladen, was bedeutet, dass CSS von Ihrer Hauptwebsite nicht automatisch darauf angewendet wird. Deshalb müssen die Styles über den <style id="flx-styles"> Block übergeben werden – das JavaScript-Snippet übernimmt diesen Teil für Sie.

Support-Tipp Verwenden Sie die Entwicklertools Ihres Browsers (Rechtsklick > Untersuchen), um die genauen Klassennamen in Ihrem Live-Formular zu identifizieren, bevor Sie Ihr CSS schreiben. Klassennamen können je nach Ihrer Formularkonfiguration und Flexmail-Version leicht variieren.

Was Sie ändern können

Sie können jede visuelle Eigenschaft der Formularelemente sicher gestalten: Farben, Schriftarten, Abstände, Rahmen, Rahmenradius, Breite und Hintergrund.

Was Sie nicht ändern dürfen

Ändern oder entfernen Sie folgende Elemente nicht aus dem Einbettungscode:

• Die iFrame-src-URL. Diese lädt das Formular von Flexmails Servern. Eine Änderung bricht das Formular.
• Die iFrame-id (iframe_flxml_form) und die id des