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.

    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.

      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 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.

    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: Nutze bei Bedarf Links, 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.
    Eingabefeld

    Derzeit gibt es ein Eingabefeld, über das Du die E-Mail-Adresse abfragst.

    Wir arbeiten dran: Künftig wirst Du über Eingabefelder noch weitere Attribute wie z. B. Vorname oder Nachname abfragen können.
    Checkbox

    Dir stehen derzeit zwei Checkbox-Typen zur Verfügung.

    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.
    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.

    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.
    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. Zufrieden? Dann klicke auf Freigeben.

  12. 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.