Anmeldeformulare erstellen und einbetten

Published: 16. Juli 2026 · Last updated: 21. Juli 2026 · By Marcus Biel

Ein eingebettetes Formular wird direkt in eine bestehende Seite Ihrer Website eingefügt. Es bleibt Teil des umgebenden Inhalts, statt darüber zu erscheinen.

Eingebettete Formulare eignen sich gut für Blogartikel, Landingpages auf Ihrer eigenen Website, Newsletter-Bereiche, Seitenleisten und Fußzeilen. Die Stelle, an der Sie den Formularcode einfügen, bestimmt, wo das Formular erscheint.

Dieser Leitfaden behandelt die Schritte, die speziell für eingebettete Formulare gelten. Die allgemeinen Funktionen zur visuellen Bearbeitung werden im Leitfaden zum Anmeldeformular-Builder erklärt.

Eingebettetes Formular erstellen

Öffnen Sie „Signup Forms“, klicken Sie auf „Create Form“ und wählen Sie „Embedded Form“. Geben Sie einen eindeutigen internen Namen ein und wechseln Sie zum Builder.

Sie können auch ein bestehendes Formular bearbeiten, indem Sie in der Übersicht der Signup Forms auf seinen Namen klicken.

Der interne Name wird Besuchern nicht automatisch angezeigt. Benennen Sie das Formular nach seinem Ort oder Zweck, zum Beispiel „Homepage Newsletter“, „Blog Footer“ oder „Product Updates“.

Startdesign auswählen

Eingebettete Formulare bieten ein leeres Formular, ein Standardformular und vier gestaltete Vorlagen:

• Calm note
• Coupon strip
• Dark editorial
• Minimal blue

Wählen Sie das Design, das am besten zu dem Bereich und dem Stil der Website passt, auf der das Formular erscheinen soll. Jede Vorlage kann nach der Auswahl vollständig geändert werden.

Eingebettetes Formular gestalten

Verwenden Sie „Layout“ und „Content“, um das Formular anzuordnen. Ein eingebettetes Formular kann neben dem Anmeldeformular auch unterstützende Texte, Bilder, Listen, Schaltflächen, Social-Media-Links, einen Abonnentenzähler, Abstandshalter oder Trennlinien enthalten.

Für eine schmale Seitenleiste oder Fußzeile ist ein einspaltiges Design meist am einfachsten zu lesen. In einem breiteren Seitenbereich kann ein zweispaltiges Layout eine kurze Erklärung oder ein Bild neben den Feldern platzieren.

Wählen Sie den Block des Anmeldeformulars aus, um Abonnentenfelder, Pflichtfelder, Beschriftungen, ausgeblendete Tags, eine Fortschrittsanzeige und optional einen Abonnentenzähler festzulegen. Anschließend können Sie den Formularcontainer, die Felder und die Absenden-Schaltfläche separat gestalten.

Öffnen Sie „Page settings“, um den Hintergrund und die allgemeinen Designvorgaben für die Arbeitsfläche des eingebetteten Formulars zu ändern. Berücksichtigen Sie dabei die umgebende Website. Ein transparenter oder schlichter Hintergrund fügt sich oft natürlicher ein, während ein kontrastierender Hintergrund das Anmeldeangebot hervorhebt.

Die vollständigen Anleitungen zu Layouts, Inhalten, Ebenen, Feldern, Tags, Typografie und Darstellung finden Sie unter Signup Form Builder verwenden.

Anmeldeablauf verbinden

Verwenden Sie die Steuerung für den Anmeldeablauf in der Kopfzeile des Builders, um zu prüfen, was nach dem Absenden geschieht, welche Double-Opt-in-E-Mail versendet wird und was der Besucher nach der Bestätigung sieht.

Sie können einen bestehenden Ablauf auswählen, den zugewiesenen Ablauf bearbeiten oder einen neuen erstellen. Wenn der ausgewählte Ablauf mit anderen Formularen geteilt wird, beachten Sie, dass eine Bearbeitung auch diese Formulare beeinflussen kann.

Vorschau anzeigen und speichern

Klicken Sie auf „Preview“, um das vollständige Formular zu prüfen, bevor Sie es auf Ihrer Website platzieren. Kontrollieren Sie die Reihenfolge der Felder, Beschriftungen, den Platz für Fehlermeldungen, den Schaltflächentext und den Umfang der unterstützenden Inhalte.

Klicken Sie auf „Save changes“, um die aktuelle Version zu speichern. Kehren Sie zur Übersicht der Signup Forms zurück, wenn Sie das Formular einbetten möchten.

Formular aktivieren

Das eingebettete Formular muss aktiv sein, bevor sein öffentlicher Code verwendet werden kann.

Wenn das Formular inaktiv ist, öffnen Sie in der Übersicht der Signup Forms das Drei-Punkte-Aktionsmenü und wählen Sie „Activate“. Bei einem aktiven Formular wird die Aktion „Show Code Snippet“ angezeigt.

Deaktivieren Sie das Formular, wenn es auf Ihrer Website nicht mehr verfügbar sein soll. Durch die Deaktivierung wird das Formular offline genommen, ohne sein Design oder frühere Berichtsdaten zu löschen.

JavaScript-Code kopieren

Klicken Sie auf „Show Code Snippet“ und öffnen Sie den Tab „JavaScript“. Maildroppa stellt ein kurzes Skript bereit, das die eindeutige Formular-ID enthält.

Der Code folgt dieser Struktur:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Kopieren Sie den vollständigen Code, ohne die Skriptadresse oder die Formular-ID zu ändern.

Die JavaScript-Option lädt das aktuell gespeicherte Formular über die Maildroppa-Formularlaufzeit. Wenn Sie dasselbe Formular später in Maildroppa bearbeiten und speichern, verweist das vorhandene Snippet weiterhin auf diese Formular-ID. Sie müssen kein neues Formular erstellen, nur um Text oder Design zu ändern.

Formular zur Website hinzufügen

Fügen Sie das Skript an der Stelle der Seite ein, an der das eingebettete Formular erscheinen soll.

Die genauen Schritte hängen von Ihrem Website-System ab. Verwenden Sie in einem Page Builder oder Content-Management-System einen Block, der benutzerdefiniertes HTML oder Skriptcode akzeptiert. Fügen Sie das Skript bei einer individuell erstellten Website in das relevante Template oder Seiten-Markup ein.

Einige Website-Editoren entfernen Skript-Tags aus Sicherheitsgründen. Wenn das Formular nach der Veröffentlichung der Seite nicht erscheint, prüfen Sie zunächst, ob der Editor das vollständige Maildroppa-Skript übernommen hat. Möglicherweise müssen Sie den speziellen Bereich des Systems für benutzerdefinierten Code verwenden oder die für die Website zuständige Person bitten, dies zu überprüfen.

Fügen Sie dasselbe Snippet für ein eingebettetes Formular nicht mehrmals auf einer Seite ein, außer Sie möchten dasselbe Formular absichtlich an mehreren Stellen anzeigen und haben diese Konfiguration getestet.

HTML-Tab verwenden

Der Tab „HTML“ stellt das generierte Formular-Markup bereit. Diese Option ist für individuelle Implementierungen gedacht, bei denen Sie direkt mit dem gerenderten HTML arbeiten möchten.

Kopieren Sie das vollständige Markup, wenn Sie diese Methode wählen. Da eine individuelle HTML-Integration durch die Styles und Implementierung Ihrer Website beeinflusst werden kann, testen Sie Felder, Validierung, Übermittlung und Bestätigungsablauf sorgfältig.

Für das normale, von Maildroppa verwaltete Formular ist das JavaScript-Snippet die kürzere Integration und lädt die aktuelle öffentliche Formularkonfiguration anhand ihrer ID.

Eingebettetes Formular testen

Veröffentlichen Sie die Website-Seite, die den Code enthält, oder zeigen Sie eine Vorschau an. Testen Sie das Formular anschließend so, wie es ein Besucher tun würde:

1. Prüfen Sie, ob das Formular an der richtigen Stelle erscheint.
2. Rufen Sie die Seite auf einem breiten und einem schmalen Bildschirm auf.
3. Füllen Sie jedes Pflichtfeld aus.
4. Senden Sie das Formular ab und prüfen Sie die Antwort.
5. Öffnen Sie die Double-Opt-in-E-Mail.
6. Bestätigen Sie die Adresse und prüfen Sie die abschließende Antwort.
7. Überprüfen Sie, ob der Abonnent und alle ausgeblendeten Tags in Maildroppa korrekt angezeigt werden.

Wenn das Formular breiter als sein Website-Container ist, passen Sie im Builder die Formularbreite, das Spaltenlayout, den Innenabstand oder die Einstellungen für die mobile Darstellung an. Beheben Sie Layoutprobleme nicht durch Änderungen am generierten Maildroppa-Code.

Eingebettetes Formular aktualisieren

Öffnen Sie dasselbe Formular in Maildroppa, nehmen Sie die Änderungen vor, zeigen Sie eine Vorschau an und klicken Sie auf „Save changes“. Das JavaScript-Snippet auf Ihrer Website verwendet weiterhin dieselbe Formular-ID und lädt die gespeicherte öffentliche Konfiguration.

Wenn das Formular vorübergehend entfernt werden soll, deaktivieren Sie es in der Übersicht der Signup Forms. Wenn es nicht mehr benötigt wird, entfernen Sie das Snippet zusätzlich von der Website, damit die Seite keinen ungenutzten Code enthält.