Wie funktioniert es? 

Der Mailjet Form-Editor besteht aus einem Anmeldeformular, einer Bestätigungs-E-Mail und einer Bestätigungsseite. Wenn jemand Ihre Website abonniert, wird ihm eine Bestätigungs-E-Mail mit einem Link zur Bestätigungsseite gesendet. Sobald sie ihre Registrierung bestätigen, wird ihre E-Mail-Adresse (und alle anderen über das Anmeldeformular gesammelten Informationen) zu Ihrer Kontaktliste hinzugefügt.

Der beste Teil? Alles, was Sie tun müssen, ist das Formular, die E-Mail und die Zielseite im Form-Editor zu entwerfen und anzupassen. Mailjet generiert den Code für das Anmeldeformular und kümmert sich um den Workflow.

Läuft Ihre Website auf WordPress? Vielleicht möchten Sie das WordPress-Plugin von Mailjet ausprobieren, mit dem Sie ein Abonnementformular erstellen, Ihre Kontakte verwalten, E-Mails erstellen und Echtzeitstatistiken direkt von Ihrem WordPress-Admin aus anzeigen können.

Ein Formular erstellen

Wählen Sie im Menü Kontakte → Form-Editor aus.

Klicken Sie nun auf die Schaltfläche "Neues Formular erstellen“.

Die Seite "Neues Formular erstellen" zeigt die verschiedenen Abschnitte Ihres Formulars.

Wenn Sie jeden Abschnitt abschließen, wird das entsprechende Häkchen grün.

Sind alle Abschnitte ausgefüllt, können Sie Ihr neu erstelltes Anmeldeformular veröffentlichen.

1. Titel: Geben Sie Ihrem Formular einen Titel, um es in Ihren Berichten zu identifizieren.Dies ist ein interner Name, den nur Sie sehen werden.
2. Formulardesign: Erstellen Sie Ihr Formular und zeigen Sie es in der Vorschau an.
3. Opt-in-Methode: Wählen Sie aus, ob sich Kontakte über ein Single-Opt-in- oder Double-Opt-in-Verfahren anmelden.
4. E-Mail-Details: Definieren Sie die Betreffzeile und die Absenderinformationen.
5. E-Mail-Design: Sie können die E-Mail anpassen (Double-Opt-in), die an neue Abonnenten gesendet wird und sie auffordert, ihr Abonnement für Ihren Newsletter zu bestätigen. Diese E-Mail enthält eine Schaltfläche mit dem Link, der die Empfänger auf die Bestätigungsseite weiterleitet.
6. Bestätigungsseite: Sobald sich jemand für Ihr Formular anmeldet, erhält er eine Bestätigungs-E-Mail mit einem Link zur Validierung (Bestätigung) seiner Registrierung. Standardmäßig führt dieser Link auf die Bestätigungsseite von Mailjet, die Sie im Formulareditor gestalten können. Wenn Sie eine eigene Bestätigungsseite auf Ihrer Website verwenden möchten, klicken Sie auf "Externe Bestätigungsseite verwenden“ und geben Sie dann die URL ein.
7. Kontaktliste: Wählen Sie aus, wo Abonnentendaten gespeichert werden.

Fangen wir an – klicken Sie auf "Formular entwerfen“, um Ihre Formularvorlage auszuwählen.

Der erste Schritt besteht darin, zu entscheiden, welche Art von Formular Sie erstellen möchten:

Möchten Sie lieber ein Registrierungsformular, das direkt in Ihre Website eingebettet ist, oder möchten Sie lieber, dass das Formular in einem neuen Fenster erscheint, wenn auf eine Schaltfläche oder einen Link geklickt wird?

Eingebettetes oder Popup-Formular

Eingebettete Anmeldeformulare und Pop-up-Anmeldeformulare sind zwei verschiedene Methoden, um Formulare zur Erfassung von Abonnentendaten anzuzeigen, die häufig auf Websites verwendet werden, um E-Mail-Adressen zu sammeln. Schauen wir uns die Unterschiede und Vorteile jedes Typs genauer an.

Eingebettetes Formular

Beschreibung:

• Ein eingebettetes Formular ist direkt in den Inhalt einer Webseite integriert. Es bleibt statisch auf der Seite und ist für Besucher immer sichtbar, ohne dass eine Interaktion erforderlich ist.
• In der Regel werden eingebettete Formulare an stark frequentierten Stellen wie der Seitenleiste, der Fußzeile oder am Ende eines Blogbeitrags platziert.

Vorteile:

• Nicht aufdringlich: Da es Teil der Seite ist, unterbricht es die Benutzererfahrung nicht. Besucher können das Formular in ihrem eigenen Tempo nutzen.
• Immer sichtbar: Es bietet eine konstante Präsenz auf der Webseite, was es den Nutzern erleichtert, das Formular zu finden und sich anzumelden, wenn sie bereit sind.
• Ideal für langfristige Sammlung: Eingebettete Formulare sind effektiv, wenn man eine kontinuierliche Sichtbarkeit aufrechterhalten möchte, insbesondere für Nutzer, die die Seite häufig besuchen.
• Besser in den Inhalt integriert: Eingebettete Formulare fügen sich natürlich in den Kontext ein, zum Beispiel nach einem Artikel oder einer Produktbeschreibung, und ermutigen die Nutzer zur Anmeldung, nachdem sie den Inhalt konsumiert haben.

Wann sollte man es verwenden:

• Wenn Sie eine subtile Methode zur Sammlung von E-Mails wünschen, ohne die Benutzererfahrung zu stören.
• Auf Blogs, Artikeln oder Produktseiten, auf denen die Nutzer sich nach dem Konsumieren von Inhalten anmelden möchten.

Pop-up-Formular

Beschreibung:

• Pop-up-Formulare erscheinen als modales Fenster auf der Webseite, nachdem eine bestimmte Zeit vergangen ist, nach einer bestimmten Aktion (wie Scrollen oder Klicken auf eine Schaltfläche) oder bei Exit-Intent (wenn der Besucher die Seite verlassen will).
• Pop-ups sind visuell auffällig und beinhalten oft Anreize wie Rabatte oder spezielle Angebote.

Vorteile:

• Hohe Sichtbarkeit: Pop-ups ziehen sofort Aufmerksamkeit auf sich, da sie im Vordergrund des Bildschirms erscheinen. Das macht sie sehr effektiv für die Generierung von Abonnements.
• Flexible Timing- und Trigger-Optionen: Sie können Pop-ups so einstellen, dass sie nach einer bestimmten Aktion erscheinen, z. B. nach der auf der Seite verbrachten Zeit, dem Scroll-Prozentsatz oder Exit-Intent (dies muss auf Ihrer Seite codiert werden). So können Sie Nutzer ansprechen, die wahrscheinlich interessiert sind.
• Effektiv zur Lead-Konvertierung: Aufgrund ihrer aufdringlichen Natur sind Pop-ups besonders effektiv bei der Erhöhung der Konversionsrate, insbesondere wenn sie mit einem attraktiven Angebot wie einem Rabatt, einem kostenlosen Leitfaden oder exklusiven Inhalten verbunden sind.
• Anpassbar an das Nutzerverhalten: Sie können basierend auf der Nutzeraktivität personalisiert werden, was sie ideal macht, um bestimmte Zielgruppen mit maßgeschneiderten Nachrichten anzusprechen.

Wann sollte man es verwenden:

• Wenn Sie schnell möglichst viele Anmeldungen generieren möchten und einen Anreiz wie einen Rabatt, ein eBook oder einen kostenlosen Leitfaden bieten können.
• Auf Seiten, auf denen die Aufmerksamkeit der Nutzer eingefangen werden soll, bevor sie die Seite verlassen, wie z. B. Produktseiten oder Exit-Intent-Seiten.

Wenn Sie den Pop-up-Formulartyp auswählen, wird auf der Formularentwurfsseite ein zusätzlicher Button mit dem Namen "Trigger" (Auslöser) angezeigt, mit der Sie den Pop-up-Formular-Button nach Ihren Wünschen ändern können (Text, Farbe usw.).

Für dieses Beispiel wählen wir das "Pop-up"-Formular .

Formular-Layout-Tools

Dieser Teil ist der Beginn des Entwurfs, in dem Sie die Struktur Ihres Formulars erstellen. In diesem Schritt können Sie alle notwendigen Spalten hinzufügen, die später mit Inhalt gefüllt werden.

Sie können zwischen 1 und 4 aufeinanderfolgenden Spalten wählen und bei Bedarf mit den Verhältnissen der Inhaltsblöcke spielen, indem Sie auf "weitere Optionen anzeigen" klicken.

Wenn Sie Ihr Design später ändern möchten, kann dies auch später über die Symbolleiste geändert werde.

Content-Tools

Dieser Bereich umfasst alle Inhaltselemente, die in Ihrem Formular erscheinen (Text, Bilder, Schaltflächen, Social Sharing usw.).

Das Hinzufügen von Inhalten ist ganz einfach – klicken Sie einfach auf den Inhaltsblock und ziehen Sie ihn in den gewünschten Bereich Ihres Formulars. Wenn Sie diesen Block verschieben möchten, ziehen Sie ihn einfach per Drag-and-drop an die neue Position.

Klicken Sie innerhalb des Rahmens, um das Element mithilfe der Symbolleiste anzupassen, die um den Rahmen angezeigt wird.

Text

Mit der Text-Symbolleiste können Sie Ihren Textblock ganz einfach formatieren und anpassen:

o Zeilenhöhen anpassen
o Text ausrichten
o Legen Sie die Hintergrundfarbe fest
o Ränder ändern
o Formatieren Sie Ihren Text (Schriftart, Fett, Kursiv usw.)

o Wählen Sie den Zustimmungstyp (Explizit oder implizit) 

Bilder

Mit der Symbolleiste Bild können Sie:

o Stellen Sie die horizontale Positionierung ein
o Ränder ändern
o Wenden Sie einen Rand (Form) auf das Bild an

o Mobile Skalierung
o Legen Sie die Hintergrundfarbe fest

Sie haben zwei Möglichkeiten, dem Abschnitt ein Bild hinzuzufügen:

o Laden Sie Ihr Bild hoch oder wählen Sie ein Bild aus Ihrer Galerie aus
o Link zu einem bestehenden Bild online

Lassen Sie uns für dieses Beispiel ein Bild hochladen.

Nachdem Sie auf die Schaltfläche Bild hochladen geklickt haben, können Sie Ihre Bilddatei per Drag & Drop in das Dialogfeld ziehen oder auf klicken Link "Datei importieren", um Ihr Bild hochzuladen. Sie haben auch die Möglichkeit, ein Bild über einen externen Link hochzuladen.

Sie können Ihrem Bild ALT-Text hinzufügen. Falls Ihr Bild nicht gerendert werden kann, wird stattdessen der ALT-Text angezeigt. Halten Sie Ihren ALT-Text kurz und aussagekräftig, ähnlich wie einen Tweet. :)

Nachdem Sie ein Bild ausgewählt haben, können Sie es mit dem Bildwerkzeug-Editor zuschneiden, in der Größe ändern, drehen oder spiegeln. 

Dies kann auch erfolgen, nachdem das Bild gespeichert wurde, indem Sie auf das Bild klicken, das Sie ändern möchten, und dann auf die Schaltfläche Bildwerkzeug-Editor.

Teiler

Sie können getrennten Abschnitten oder Elementen innerhalb eines Abschnitts eine Trennlinie hinzufügen.

Mit der Trenner-Symbolleiste können Sie:

o Legen Sie die Hintergrundfarbe fest
o Ränder ändern
o Linie formatieren (Design, Farbe, Linienstärke)
o Passen Sie den horizontalen und vertikalen Abstand an

Button

In der Button-Symbolleiste sind viele Optionen verfügbar, darunter:

o Randradius (Stellen Sie die Rundheit der Button-Ecken ein)
o Farbe, Stärke und Stil des Schaltflächenrahmens (durchgehend, gepunktet, gestrichelt usw.)
o Legen Sie horizontale Positionierung und Polsterung fest
o Fügen Sie einen Hyperlink hinzu
o Schriftausrichtung
o Passen Sie die Ränder an
o Personalisieren Sie den Text mithilfe der Kontakteigenschaften
o Formatieren Sie die Schriftart (Schriftfamilie, Farbe, Fett usw.)

Abstandhalter

Fügen Sie ein Leerzeichen hinzu, um Elemente oder Abschnitte in Ihrem Formular zu trennen. Mit dem Spacer-Tool können Sie:

o Legen Sie die Höhe des Leerzeichens fest (in Pixel)
o Hintergrundfarbe hinzufügen (optional)

[Nach oben]

Social Sharing

Fügen Sie Ihrem Formular Ihre bevorzugten sozialen Symbole wie Facebook, Twitter, LinkedIn, Instagram, YouTube... hinzu.

Klicken Sie auf die Schaltfläche "Links konfigurieren" , um das Modal "Social Media-Konfiguration" zu öffnen, in dem Sie Folgendes tun können:

• Wählen Sie bis zu 10 Social Media-Symbole.
• Ändern Sie den Labeltext.
• Teilen Sie die Online-Version Ihres Marketing-Newsletters in Ihren Social Media-Konten, oder richten Sie den Link so ein, dass er direkt zu Ihrer Social Media-Seite führt.
• Erstellen Sie Ihr eigenes Social Media-Symbol, indem Sie auf "Benutzerdefiniertes Symbol hinzufügen" klicken.

Um die Textbeschriftungen anzuzeigen und zu konfigurieren, klicken Sie auf "Beschriftungen anzeigen" .

Klicken Sie auf die Blockoptionen (Stift), um die Symbolgröße, -formen und -farbe sowie die Hintergrundfarbe und -auffüllung des Abschnitts zu konfigurieren.

HTML-Block

Sie können HTML-Code direkt in Ihr Formular einfügen. Ziehen Sie den HTML-Block in Ihr Formular und klicken Sie dann auf die Schaltfläche in der Symbolleiste, um das HTML-Editor-Fenster zu öffnen und loszucodieren!

Videos

Um Ihrem Formular ein Video hinzuzufügen, ziehen Sie das Video-Tool an die gewünschte Stelle. Fügen Sie im Popup-Modal Ihre Video-URL hinzu.

Für YouTube-, Vimeo- und Dailymotion-Videos werden automatisch Vorschaubilder generiert. Klicken Sie für alle anderen Videos auf "Anderes Bild auswählen", um Ihr eigenes Vorschaubild hinzuzufügen.

Sobald das Vorschau-Thumbnail erstellt wurde, wird die Standard-Wiedergabeschaltfläche hinzugefügt. Sie können aus mehreren Designs für den Play-Button wählen. (Bitte beachten Sie, dass das Bild der Wiedergabeschaltfläche automatisch relativ zur Miniaturansichtsgröße angepasst wird. Insbesondere sind es 50 % der kleinsten Kante (Breite oder Höhe) des Vorschau-Miniaturbilds.) 

Der letzte Schritt besteht darin, eine einfache Beschreibung des Vorschaubilds im Feld "Image Alt Text" hinzuzufügen. Dieser Alt-Text wird angezeigt, falls Ihr Abonnent das Bild nicht sehen kann. Klicken Sie dann auf "Video einfügen" .

Klicken Sie in der Videosymbolleiste auf die Schaltfläche "Video", um Ihr Video jederzeit zu bearbeiten.

Formulare

Das Sammeln zusätzlicher Informationen (Eigenschaften) von Ihren Abonnenten ist einfach - klicken Sie einfach auf den Formularblock Ihrer Wahl und ziehen Sie ihn in den gewünschten Bereich Ihres Formulars. Wenn Sie diesen Block verschieben möchten, ziehen Sie ihn einfach per Drag-and-drop an die neue Position.

Text

Mit dem Formularblock "Text" können Sie eine Zeichenfolgendateneigenschaft hinzufügen, die mit der E-Mail des Abonnenten verknüpft ist. Die maximale Länge dieses Feldes beträgt 255 Zeichen.

Verfügbare Optionen:

o Legen Sie horizontale Positionierung und Polsterung fest
o Wenden Sie einen Rand (Form) auf das Bild an

o Legen Sie die Hintergrundfarbe oder das Bild fest 

o Wählen Sie eine Kontakteigenschaft aus 

o Feld wie gewünscht einstellen 

o Platzhaltertext hinzufügen (Hinweise)

o Passen Sie die maximale Zeichenbegrenzung an

Textbereich

Mit dem Formularblock "Textbereich“ können Sie eine Zeichenfolgendateneigenschaft hinzufügen, die mit der E-Mail des Abonnenten verknüpft ist (wie beim Block "Text"), aber dieses Mal beträgt die maximal zulässige Länge des Felds 500 Zeichen.

Verfügbare Optionen:

o Legen Sie horizontale Positionierung und Polsterung fest
o Wenden Sie einen Rand (Form) auf das Bild an

o Legen Sie die Hintergrundfarbe oder das Bild fest 

o Wählen Sie eine Kontakteigenschaft aus 

o Feld wie gewünscht einstellen 

o Platzhaltertext hinzufügen (Hinweise)

o Passen Sie die maximale Zeichenbegrenzung an

Nummer

Der Formularblock "Zahl" ermöglicht es Ihnen, eine ganzzahlige oder dezimale Dateneigenschaft hinzuzufügen, die mit der E-Mail des Abonnenten verknüpft ist. Sie können für dieses Feld einen benutzerdefinierten Bereich und Inkrementlimits hinzufügen. 

Verfügbare Optionen:

o Legen Sie horizontale Positionierung und Polsterung fest
o Wenden Sie einen Rand (Form) auf das Bild an

o Legen Sie die Hintergrundfarbe oder das Bild fest 

o Wählen Sie eine Kontakteigenschaft aus 

o Feld wie gewünscht einstellen 

o Platzhaltertext hinzufügen (Hinweise)

o Legen Sie benutzerdefinierte Bereichs- oder Inkrementgrenzen fest 

Optionsfelder

Der Formularblock "Optionsfelder" ermöglicht es dem Benutzer, eine einzelne Option aus einer vordefinierten Gruppe von sich gegenseitig ausschließenden Optionen auszuwählen. Wenn der Benutzer ein Optionsfeld auswählt, werden alle zuvor ausgewählten Optionsfelder in derselben Gruppe abgewählt.

Verfügbare Optionen:

• Außenabstand 
• Formatieren Sie Ihren Text (Schriftart, fett, kursiv, usw.)
• Hintergrund-, Innen- und Rahmenfarben der Optionsfelder festlegen
• Positionierung auswählen (Abstand zwischen Symbolen/Text und Optionen)
• Verwenden Sie eine Kontakteigenschaft 
• Legen Sie das Feld als erforderlich fest
• Definieren Sie den Text für jedes Optionsfeld

Beachten Sie, dass die Textoptionen je nach ausgewähltem Eigenschaftsdatentyp (String, Integer, Boolean usw.) unterschiedlich sind. 

Web-URL

Der Formularblock "Web-URL" dient zum Speichern von Web-URLs. Sie wird meist verwendet, um die persönliche Website des Kontakts zu speichern. Das Formular akzeptiert die URL nur, wenn sie korrekt formatiert ist. Wenn das Format nicht korrekt ist, wird das Feld rot und eine Fehlermeldung wird angezeigt. 

Verfügbare Optionen:

• Rahmen und Innenabstand festlegen
• Einstellen der Hintergrundfarbe oder des Bildes
• Legen Sie das Feld als erforderlich fest
• Fügen Sie einen Platzhaltertext hinzu (Hinweise)
• Anpassen der maximalen Zeichenanzahl

Datum

Das Formularfeld "Datum" dient dem Speichern bestimmter Termine in einem Formular wie etwa das Geburtsdatum des Benutzers. Die Eingabemaske wird automatisch zu dem Feld hinzugefügt und zeigt dem Benutzer die korrekte Reihenfolge für die Datumseingabe an. Diese kann in den Einstellungen verwaltet werden.

Verfügbare Optionen:

• Rahmen und Innenabstand festlegen
• Festlegen der Hintergrundfarbe oder des Bildes
• Kontakteigenschaft verwenden
• Feld als erforderlich festlegen
• Einstellen des Datenformats

Dropdown

Das Formularfeld "Dropdown" ermöglicht es dem Benutzer, eine einzelne Option aus einem Dropdown-Menü mit vordefinierten Optionen auszuwählen, ähnlich wie beim Button-Formularfeld. Wenn der Benutzer eine Option aus dem Dropdown-Menü auswählt, werden alle zuvor ausgewählten Optionen aufgehoben.

Ein Dropdown-Menü in einem Anmeldeformular kann das Formular benutzerfreundlicher machen, da es den Eingabeaufwand verringert und klare Optionen bereitstellt, aus denen der Benutzer wählen kann. Außerdem trägt es dazu bei, dass Benutzer genaue und einheitliche Angaben machen, was für die Verwaltung von Abonnements wichtig sein kann.

Verfügbare Optionen:

• Rahmen und Innenabstand festlegen
• Text formatieren (Schriftart, fett, kursiv etc.)
• Farbige Pfeilsymbole
• Festlegen der Hintergrundfarbe oder des Bildes
• Kontakteigenschaft verwenden
• Feld als erforderlich festlegen
• Text für jede Option definieren

Captcha

Schützen Sie Ihre Anmeldeformulare mit CAPTCHA

CAPTCHA hilft, Ihre Mailjet-Anmeldeformulare vor automatisiertem Spam und Bot-Anmeldungen zu schützen, indem es einen zusätzlichen Verifizierungsschritt hinzufügt (oder Prüfungen im Hintergrund ausführt). Mailjet unterstützt die folgenden Anbieter/Typen:

• reCAPTCHA v2

• reCAPTCHA v2 (Invisible)

• reCAPTCHA v3

• hCaptcha

• Cloudflare Turnstile

Fügen Sie CAPTCHA zu Ihrem Mailjet-Anmeldeformular hinzu

1. Gehen Sie zu Formulare → öffnen Sie Ihr Formular im Form-Editor.

2. Ziehen Sie Captcha per Drag-and-Drop aus dem linken Panel in Ihr Formular.

3. Im Einrichtungsfenster:

   • Wählen Sie einen Captcha-Typ aus

   • Fügen Sie Ihren Site-Schlüssel ein

   • Fügen Sie Ihren geheimen Schlüssel ein

4. Klicken Sie auf Erstellen und dann auf Speichern & anwenden.

CAPTCHA-Typen: Worin besteht der Unterschied?

Was sind „Site-Schlüssel“ und „geheimer Schlüssel“?

Um CAPTCHA nutzen zu können, müssen Sie im Dashboard des gewählten Anbieters ein Schlüsselpaar für Ihre Internetseite erstellen:

• Site-Schlüssel (öffentlich): wird im Formular verwendet, um das CAPTCHA aufzurufen/zu rendern oder die Hintergrundprüfung durchzuführen.

• Geheimer Schlüssel (privat): wird vom Server verwendet, um den Captcha-Antwort-Token beim Anbieter zu verifizieren.

So erhalten Sie Ihren Site-Schlüssel und geheimen Schlüssel

Wählen Sie den CAPTCHA-Anbieter aus, den Sie verwenden möchten, und folgen Sie dann dem offiziellen Einrichtungsleitfaden, um Ihren Site-Schlüssel und Ihren geheimen Schlüssel zu generieren:

• Google reCAPTCHA (v2 / v3): https://docs.cloud.google.com/recaptcha/docs/create-key-website

• hCaptcha: https://docs.hcaptcha.com/switch/

• Cloudflare Turnstile: https://developers.cloudflare.com/turnstile/get-started/

Best Practices und Fehlerbehebung

Bewährte Verfahren

• Halten Sie Ihren geheimen Schlüssel geheim. Behandeln Sie ihn wie ein Passwort.

• Verwenden Sie den richtigen Schlüsseltyp:

  • reCAPTCHA-v2-Schlüssel funktionieren nicht für v3 und umgekehrt.

• Registrieren Sie die richtige(n) Domain(s) im Dashboard des Anbieters.

Häufige Probleme

• „Captcha-Verifizierung fehlgeschlagen“: falsche Schlüssel, falscher Captcha-Typ ausgewählt oder Domain-Nichtübereinstimmung.

• Captcha wird nicht angezeigt: Werbeblocker/Datenschutz-Tools blockieren möglicherweise die Skripte des Anbieters (insbesondere reCAPTCHA).

• Funktioniert in einer Umgebung, aber nicht in einer anderen: Die Schlüssel wurden nur für die Produktions-Domain registriert, nicht für die Staging-/Pre-Prod-Umgebung.

Abschnitte

Einen Abschnitt duplizieren

Klicken Sie in den Abschnitt, um ihn hervorzuheben, und klicken Sie dann auf das Duplikat-Symbol auf der rechten Seite des Bildschirms.

Einen Abschnitt löschen

Um einen Abschnitt aus Ihrem Formulartext zu entfernen, klicken Sie in den Abschnitt, dann auf das Papierkorbsymbol und bestätigen Sie den Löschvorgang.

Sie können einen Abschnitt oder ein Element auch schnell löschen, indem Sie es in den Bereich der Inhaltswerkzeuge ziehen.

Globale Stileinstellungen

Mit ein paar Klicks formatieren Sie ganz einfach die Textstile all Ihrer Absätze, Überschriften und Hyperlinks in Ihrem Formular.

Um auf die globalen Textstile zuzugreifen, klicken Sie auf das Zahnradsymbol in der oberen linken Ecke (Registerkarte "Einstellungen").

Wie der Name schon sagt, legt die Option "Globaler Stil" die Schriftfamilie und Farbe für alle aufgelisteten Elemente (Überschriften, Absätze, Links) fest.

Sie können dann das Styling für jedes der Header-, Paragraph- und Link-Elemente weiter anpassen.

Und schließlich, wenn Sie einen anderen Textstil für eine bestimmte Überschrift oder einen bestimmten Absatz in Ihrem Formular haben möchten, gestalten Sie den Text einfach wie gewohnt mit der Abschnittssymbolleiste.

Logo Optionen

Wenn Sie unseren Form-Editor verwenden, wird in der Fußzeile ein „Powered by Mailjet“-Logo platziert.

Sie können zwischen 5 verschiedenen Logo-Farbschemata im Abschnitt „Logo Optionen“ im Bereich „Einstellungen“ wählen. Beachten Sie, dass sich das Logo nicht verschieben oder in der Größe verändern lässt. 

Wenn Sie einen kostenpflichtigen Plan haben, kann das Logo durch Auswahl der Option "Kein Logo" entfernt werden.

Änderung von Erfolgs- und Fehlermeldungen

Wenn jemand Ihr Formular absendet, wird die Person weitergeleitet zu:

• einer Erfolg-Seite, wenn das Formular korrekt übermittelt wurde

• einer Fehler-Seite, wenn etwas schiefgeht (zum Beispiel ein technisches Problem)

Kontakte müssen trotzdem noch auf den Bestätigungslink in der E-Mail klicken, bevor sie vollständig angemeldet sind (Double Opt-in).

Standardmäßig stellt Mailjet fertige Erfolg- und Fehlermeldungen zur Verfügung, sodass Sie nichts konfigurieren müssen. Sie können diesen Text jedoch ganz einfach durch eigenen Inhalt und eigenes Design ersetzen.

1. Öffnen Sie Ihr Formular im Editor.

2. Verwenden Sie die Registerkarten oben rechts, um zwischen den verschiedenen Ansichten zu wechseln:

   • Formular – das Anmeldeformular selbst

   • Erfolg – die Bestätigungsnachricht, die nach einer erfolgreichen Übermittlung angezeigt wird

   • Fehler – die Nachricht, die angezeigt wird, wenn die Übermittlung fehlschlägt

3. Wählen Sie Erfolg oder Fehler und bearbeiten Sie dann den Inhalt auf der Arbeitsfläche wie jede andere Seite (Text, Bilder, Layout usw.).

Art der Zustimmung und Textänderung

Sie können zwischen zwei Arten der Zustimmung wählen: explizit und implizit. Klicken Sie innerhalb des Zustimmungsrahmens, um die Symbolleiste anzuzeigen, und wählen Sie das Symbol für die Schieberegler. Wählen Sie die Art der Zustimmung aus, die Sie verwenden möchten, und bearbeiten Sie den Text gegebenenfalls nach Ihren Wünschen.

Explizite Zustimmung (empfohlen)

Eine explizite (ausdrückliche) Zustimmung liegt vor, wenn eine Person vor der Datenerfassung vor die Entscheidung gestellt wird, ob sie die Erfassung ihrer personenbezogenen Daten genehmigt. Dies ist der beste Weg, um sicherzustellen, dass die Abonnenten mit dem Erhalt Ihrer Mitteilungen einverstanden sind.

Implizite Zustimmung

Bei der impliziten (stillschweigenden) Zustimmung müssen die Abonnenten nicht "das Kästchen ankreuzen". Diese Art der Zustimmung bedeutet, dass die Abonnenten mit dem Absenden des Formulars zustimmen, die von Ihnen geplanten Mitteilungen zu erhalten.

Eine Vorlage speichern

Eine Vorlage zu erstellen, erspart Ihnen in der Zukunft Zeit und Arbeit. Wenn Sie eine Vorlage erstellen, können Sie bei ähnlichen Projekten immer wieder darauf zugreifen, ohne jedes Mal von vorne anfangen zu müssen.

Während der Gestaltung Ihres Formulars haben Sie die Möglichkeit, es als neue Vorlage zu speichern oder eine bereits vorhandene Vorlage durch den neuen Entwurf zu ersetzen. Klicken Sie hierfür auf der Designseite im Form-Editor einfach auf das Dropdown-Menü oben rechts und wählen Sie "Als Vorlage speichern".

Auf lange Sicht sparen Sie eine Menge Zeit und Mühe, wenn Sie Ihre Arbeit als Vorlage speichern. Gleichzeitig sorgen Sie auf diese Weise für projektübergreifende Einheitlichkeit und Standardisierung und erleichtern die Zusammenarbeit.

Um während der Erstellung eines Formulars auf Ihre gespeicherten Vorlagen zuzugreifen, klicken Sie auf den Button zum Designen eines Formulars und wählen Sie dann eine Ihrer Vorlagen aus.

Vorlagen bearbeiten, duplizieren oder löschen

Um eine Formularvorlage zu bearbeiten, zu duplizieren oder zu löschen, navigieren Sie zur Formularvorlagenverwaltungsseite und klicken Sie auf das Zahnradsymbol.

Es werden Ihnen mehrere Optionen angezeigt, aus denen Sie auswählen können. Wählen Sie die gewünschte Aktion aus. Das war's schon.

Hinweis: Gehen Sie beim Löschen von Formularvorlagen besonnen vor, da die Löschung endgültig ist und nicht rückgängig gemacht werden kann.

Integrieren Sie Ihr Formular in Ihre Website

Der letzte Schritt besteht darin, den HTML-Code des Anmeldeformulars zu integrieren - kopieren Sie einfach den Code und fügen Sie ihn in Ihre Website ein!

Hier finden Sie eine Aufschlüsselung des Codes, die Ihnen bei der Integration auf Ihrer Website helfen wird.

Integrieren Sie Ihr Formular in WordPress

Sie können den Code des Anmeldeformulars direkt in einen Beitrag oder eine Seite einfügen oder ihn über ein WordPress-Widget hinzufügen.

Für dieses erste Beispiel erstellen wir eine neue Seite und fügen das Anmeldeformular hinzu.

Wählen Sie im Menü Seiten → Erstellen

Geben Sie den Seitentitel ein, wählen Sie den Block"Benutzerdefiniertes HTML"aus und fügen Sie den Abonnementformularcode (aus Ihrem Mailjet-Konto) ein.

Klicken Sie auf "Veröffentlichen" und Sie sind fertig - Ihr Anmeldeformular wird auf der neuen Seite angezeigt.

Ihr Anmeldeformular kann auch auf Ihrer Website über Wordpress-Widgets hinzugefügt werden.

Gehen Sie im Hauptmenü zu Design → Widgets

Auf der Widgets-Seite sehen Sie alle Ihre Widgets. Um ein neues Widget (Formular) hinzuzufügen, klicken Sie auf das "+"-Symbol in der oberen linken Ecke und ziehen Sie den Block "Benutzerdefiniertes HTML" aus dem Menü des Widgets.

Fügen Sie den Code Ihres Anmeldeformulars (von Ihrem Mailjet-Konto) in den Bereich "Inhalt" ein. Wählen Sie dann "Aktualisieren".

Und das war's – gehen Sie einfach auf Ihre Website, um Ihr Anmeldeformular anzuzeigen!

Vorschauformular

Sie können Ihr Vorschauformular jetzt auf zwei verschiedene Arten anzeigen:

👉 Schnelle Vorschau von der Formularseite

In Ihrer Formularliste klicken Sie auf das Zahnradsymbol ⚙️ neben dem Formular, das Sie in der Vorschau anzeigen möchten, und wählen Sie Voransicht aus.
Das Vorschauformular wird sofort geöffnet, sodass Sie sein Erscheinungsbild prüfen können, ohne den Editor zu öffnen.

👉 Vorschau aus dem Formulareditor

Wenn Sie Ihr Formular bereits bearbeiten, können Sie es auch direkt aus dem Editor heraus in der Vorschau anzeigen.
Klicken Sie oben rechts auf Vorschau, um eine interaktive Ansicht Ihres Vorschauformulars zu öffnen.
Diese Option ist besonders hilfreich, wenn Sie gerade Design- oder Inhaltsanpassungen vornehmen.

Sie können Ihr Vorschauformular auf verschiedenen Geräten anzeigen, z. B. auf Mobilgeräten und Desktop-Computern. 

Formularcode anzeigen

Klicken Sie auf der Formularverwaltungsseite auf das Zahnradsymbol des Formulars, dessen Code Sie anzeigen möchten, und wählen Sie "Code anzeigen".

Hier finden Sie eine Aufschlüsselung des Codes, die Ihnen bei der Integration auf Ihrer Website helfen wird.

Formular bearbeiten

Klicken Sie auf der Formularverwaltungsseite auf das Zahnradsymbol und wählen Sie "Bearbeiten".

Bitte beachten Sie, dass Sie nach jeder Änderung des Anmeldeformulars den HTML-Code auf Ihrer Website neu laden müssen, damit die Änderungen berücksichtigt werden.

Formularnutzung anzeigen

Öffnen Sie auf der Formularverwaltungsseite das Zahnrad ⚙️ neben Ihrem Formular und wählen Sie Verwendung anzeigen. Dadurch wird die Tabelle Aktuelle Formularverwendung geöffnet, die alle Landingpages auflistet, auf denen das Formular derzeit verwendet wird.

Formulare archivieren, löschen oder wiederherstellen

Um ein einzelnes Formular zu archivieren, klicken Sie auf der Formularverwaltungsseite auf das Zahnradsymbol und wählen Sie "Archivieren".

Um mehrere Formulare gleichzeitig zu archivieren, setzen Sie für jedes Formular ein Häkchen und klicken Sie dann auf den Button "Archivieren".

Wenn Sie ein bereits archiviertes Formular dauerhaft löschen möchten, öffnen Sie auf der Formularverwaltungsseite den Bereich "Archiviert", klicken Sie auf das Zahnradsymbol und wählen Sie "Löschen".

Gehen Sie beim Löschen von Formularen oder anderen Daten in Ihrem Mailjet-Konto besonnen vor, da gelöschte Daten nicht wiederhergestellt werden können.

Wenn Sie ein Formular archiviert haben und es wiederherstellen möchten, klicken Sie auf das Zahnradsymbol und dann auf "Wiederherstellen".

Fehlerbehebung

Wenn Sie ein Abonnementformular auf Ihrer Website implementiert haben und es plötzlich nicht mehr funktioniert, überprüfen Sie bitte, ob die mit dem Formular verknüpfte Kontaktliste nicht geändert oder gelöscht wurde.  

[Nach oben]