Anmeldeformular anlegen (frei gestaltbar)

Hier zeigen wir Dir, wie Du Dein Anmeldeformular selbst designen und detailliert ausgestalten kannst.

Du willst schneller zum Ziel? Dann arbeite stattdessen mit dem schnellen vorgefertigten Anmeldeformular.

Schritt für Schritt

  1. Öffne den Navigationspunkt "Formulare".

  2. Klicke auf Neues Formular.

  3. Klicke auf "Formular-Editor nutzen".

  4. Gib Deinem Formular einen sprechenden Namen.

  5. Gib die Breite und Höhe für Dein Formular in Pixeln an.

  6. Wähle ein Styleset.

  7. Klicke auf Anlegen.

  8. Struktur

    Baue die Struktur für Dein Formular auf. Die Funktionsweise ist dieselbe wie im Container-Editor.

    • Bewege Deinen Cursor von links oder rechts auf die Container-Fläche, um einen vertikalen Schnitt zu setzen.

    • Bewege Deinen Cursor von oben oder unten auf die Container-Fläche, um einen horizontalen Schnitt zu setzen.

    Werkzeug wechseln

    Für die Arbeit mit Schnitten gibt es vier Werkzeuge.

    Wechsel das Werkzeug, um Schnitte zu verschieben oder zu löschen. Oder, um Teil-Schnitte zur setzen, die nicht über die volle Breite oder Höhe gehen.

    1. Schnitt setzen

      Standard und wichtigstes Werkzeug ist das Werkzeug Schnitt setzen. Mit diesem Werkzeug setzt Du einen Schnitt über die volle Seitenbreite oder Seitenhöhe.

    2. Teil-Schnitt setzen

      Du kannst einen Schnitt nicht nachträglich splitten. Definiere gleich beim Anlegen des Schnitts, wie Du ihn setzen möchtest.

      • Klicke auf das Werkzeug Teil-Schnitt setzen, um einen Schnitt nur für die aktuelle Spalte oder Zeile zu setzen (1)

      • Klicke auf das Werkzeug Schnitt setzen, um einen Schnitt über die volle Breite bzw. Höhe zu setzen (2)

    3. Schnitt verschieben

      Wechsel auf das Werkzeug Verschieben , um einen Schnitt nachträglich zu verschieben.

      Arbeite pixel-genau

      Du möchtest Deine Schnitt-Position pixel-genau eingeben? Im Verschieben -Werkzeug kannst Du den genauen Wert eingeben.

    4. Schnitt löschen

      Wechsel auf das Werkzeug Löschen , um einen Schnitt zu löschen.

      Lösche Teil-Schnitte zuerst

      • Lösche zuerst alle Teil-Schnitte, die von einem anderen Schnitt abhängig sind (1)

      • Nun kannst Du die Schnitte löschen, die den Teil-Schnitten als Begrenzung gedient haben (2)

    Der Editor verhält sich komisch? Du kannst plötzlich keine Schnitte mehr setzen? Der Editor reagiert nicht wie gewohnt? Dann liegt das meistens daran, dass Du noch im falschen Werkzeug bist.

  9. Layout

    Hier definierst Du, welches Formularelement wo platziert sein soll. Welche Formularelemente es gibt und wie sie funktionieren, erklären wir Dir im nächsten Schritt Inhalt.

    Inhalt & Funktion kommen später: Im Workflowschritt "Layout" definierst Du nur die Struktur. Im nächsten Workflowschritt "Inhalt" ergänzt Du dann Texte und Feldfunktionen (z. B. Checkbox für "Tracking Permission").

  10. Inhalt

    Im Workflowschritt "Inhalt" gibst Du Deine Formulartexte ein und definierst die Funktionen für Checkboxen und Eingabefelder.

    Welche Formularfelder gibt es?

    Dir stehen folgende Formularelemente zur Verfügung.

    Feld

    Beschreibung
    Text

    Gib einen oder mehrere freie Beschreibungstexte für Dein Formular ein.

    • Textformatierung: Klicke in das Textfeld und nutze die Textstile aus Deinem Styleset.

    • Hyperlinks: Füge über die Textwerkzeuge Links ein, z.B. auf Deine Datenschutzerklärung.

    • Gestaltung: Achte darauf, dass das richtige Formularelement türkis hervorgehoben ist und gehe in die Element-Einstellungen. Dort sind vor allem die Bereiche "Abstände und Rahmen" und "Styling" (Buttons) für Dich interessant.
    Bild Ziehe Bilder per Drag & Drop aus dem Medien-Panel in Dein Formular.
    Eingabefeld

    Nutze das Eingabefeld, um in Deinem Anmeldeformular beliebige Attribute abzufragen. Achte darauf, dass Du auf jeden Fall die E-Mail-Adresse abfragst.

    Alle Optionen (bis auf den Label-Text) findest Du im Panel Element-Einstellungen im Workflowschritt "Inhalt".

    • Einzeilig / mehrzeilig

    • Pflichtfeld

    • Label: Das Label editierst Du direkt am Textelement. Im Panel Element-Einstellungen kannst Du Dein Label ein- oder ausblenden.

    • Vorbefüllen: Du kannst Dein Eingabefeld mit einem Text vorbefüllen. Der vorbefüllte Text ist bei Aufruf des Formulars sichtbar und wird als Attribut-Wert übernommen, falls Dein·e Empfänger·in ihn nicht ändert.

    • Platzhalter-Text: Der Platzhalter-Text erscheint, wenn Du keinen vorbefüllten Text hinterlegt hast – oder sobald Dein·e Empfänger·in den vorbefüllten Text löscht.

    Nutze die Vorschau: Im Formular-Editor kannst Du das Zusammenspiel von Vorbefüllung und Platzhaltertext nicht vollständig nachstellen. Nutze die Browser-Vorschau, um sicherzugehen, dass alles nach Deinen Vorstellungen umgesetzt ist.
    Checkbox

    Bei Checkboxen können Deine Empfänger·innen mehrere Optionen auswählen.

     

    Nutze Checkboxen für:

    Nutze Checkboxen per Einfach- oder Mehrfachauswahl, um beliebige Attributwerte zu erfassen, z.B. zur Interessenabfrage.

    Beispiel: Ich interessiere mich für:

    • Abenteuerreisen

    • Sprachreisen

    • Individualreisen

    Die Checkbox zur Anmeldebestätigung ist eine Pflichtangabe. Deine Empfänger·innen müssen die Checkbox anhaken, damit der Button zur Newsletteranmeldung aktiv wird.

     

    Ergänze einen passenden Text, z.B. "Ich stimme dem Empfang des Newsletters zu."

    Bei aktivem Schalter willigen Deine Empfänger·innen in personenbezogenes Tracking ein.

     

    Ergänze einen passenden Text, z.B. "Ich willige in das personenbezogene Tracking meiner Klicks und Öffnungen ein."

    § DSGVO Du darfst Klicks und Öffnungen nur von Empfänger·innen personlisiert auswerten, von denen Du die Einwilligung in personenbezogenes Tracking eingeholt hast.

    Weitere Optionen:

    • Pflicht

    • Vorausgewählt
    Radiobuttons

    Bei Radiobuttons können Deine Empfänger·innen genau eine Option auswählen.

     

    Nutze Radiobuttons für:

    Attribut auswählen:

    Wähle eines Deiner Empfänger-Attribute, aus, z. B. Geschlecht.

     

    Optionen definieren:

    • Gib direkt im Formular einen Namen für die Option an, z. B. „Männlich“.

    • Lege fest, welcher Wert gespeichert wird, wenn Empfänger·innen diese Option auswählen, z. B. „Ja“.

    Du kannst beliebig viele Optionen anlegen.

    Hinweis: Die Tracking Permission kannst Du entweder als Checkbox oder als Radiobutton in Deinem Formular hinterlegen.

    Wenn Du die Tracking Permission per Radiobutton in Deinem Formular hinterlegst, werde die beiden Optionen automatisch erstellt:

    • Tracking Permission erteilen

    • Tracking Permission nicht erteilen

    Gib direkt im Formular an, wie sie auf der Oberfläche heißen sollen, z. B.: "Ich willige in das personenbezogenes Tracking meiner Klicks und Öffnungen ein" (für "Tracking Permission erteilen").

    Stelle über die Markierung in den Element-Einstellungen sicher, dass der Wert richtig zugeordnet wird.

    § DSGVO Du darfst Klicks und Öffnungen nur von Empfänger·innen personlisiert auswerten, von denen Du die Einwilligung in personenbezogenes Tracking eingeholt hast.

    Weitere Optionen:

    • Pflicht

    • Ausgewählte Option
    Friendly Captcha

    Nutze Friendly Captcha oder Google ReCaptcha, um Dein Formular vor Bot-Zugriffen zu schützen.

    • Friendly Captcha fügst Du als Formular-Element hinzu.

    • Google ReCaptcha stellst Du in den Formulareinstellungen ein. Entferne dazu zunächst das "Friendly Captcha"-Element aus Deinem Formular.

    Genehmigung nötig: Damit Du Google reCAPTCHA nutzen kannst, benötigen wir von Dir eine Genehmigung von Google als Unterauftragsverarbeiter. Du kannst uns dafür die ausgefüllte Zusatzvereinbarung zur bestehenden Auftragsverarbeitungsvereinbarung zusenden. Falls Du Partnerkunde bist, wende Dich bitte an Deinen Inxmail Partner.

    Hintergrund: Im Gegensatz zu Friendly Captcha hat Google ReCaptcha kein sichtbares Formularelement.

    Anmeldebutton Per Klick auf den Anmeldebutton lösen Deine Empfänger·innen ihre Anmeldung aus.
    Trenner Verwende die Trennlinie als Gestaltungselement. Passe ihr Design über das Panel Element-Einstellungen an.
    Inhalt löschen Ziehe das Element "Inhalt löschen" auf ein bereits platziertes Formularelement, um den Bereich zu leeren.

    Die Formularfelder "Anmeldebutton" und "Friendly Captcha" kannst Du nur einmal pro Formular platzieren.

  11. Meldungen

    Hier legst Du fest, welche Meldung nach dem Absenden des Formulars angezeigt werden soll.

  12. Zufrieden? Dann klicke auf Freigeben.

  13. Nimm die Einstellungen zur Einbettung vor und klicke dann auf Veröffentlichen.

  • Du hast Dein Anmelderformular angelegt und veröffentlicht.

Deine Empfänger·innen können das Anmeldeformular online einsehen und ausfüllen, sobald Du es per iframe in Deine Homepage eingebettet hast.

Nächste Schritte

  • Bereite Dein Formular für die Einbettung in Deine Homepage vor: Sieh es Dir in der Vorschau an, definiere den Formular-Pfad und die Domains, die darauf zugreifen dürfen.

  • Richte Deinen An- und Abmeldeprozess ein.

  • Wechsel in Dein Content-Management-System und binde Dein Anmeldeformular per iframe in Deine Homepage ein.