E-Mail-Anmeldeformular einbinden

Wenn du eine Landingpage mit eigenem HTML gestaltest, wird dein Code unverändert ausgeliefert. Ein Anmeldeformular darin würde deshalb ins Leere laufen, weil Tentary es nicht kennt und die eingegebenen Adressen nicht speichern kann. Damit dein Formular trotzdem funktioniert, markierst du es mit einem Attribut. Alles Weitere übernimmt dann Tentary: Jede Adresse wird als Abonnent:in gespeichert und die Double-Opt-in-E-Mail automatisch verschickt.

So bindest du dein Formular ein

Ergänze in deinem <form>-Tag das Attribut data-tentary="subscribe". Mehr ist nicht nötig.

<form data-tentary="subscribe">
  <input type="email" placeholder="Deine E-Mail-Adresse" required>
  <button type="submit">Abonnieren</button>
</form>

Das funktioniert sowohl in einer HTML-Seite, die du unter Landingpages anlegst, als auch im Element Custom Code im Landingpage-Builder.

Hinweis: Füge deinem Formular kein eigenes JavaScript hinzu. Tentary verbindet das Formular beim Ausliefern der Seite, und eigene Skripte kommen diesem Ablauf in die Quere.

Was nach der Anmeldung passiert

Nach dem Absenden kehrt die Person auf deine Landingpage zurück. Das Formular verschwindet und an seiner Stelle steht eine Bestätigung.

Möchtest du die Person lieber auf eine eigene Danke-Seite schicken, legst du diese Seite zuerst als Landingpage an. Anschließend trägst du ihren Pfad im <form>-Tag ein. Liegt deine Danke-Seite zum Beispiel unter deinshop.mytentary.com/danke, dann ergänzt du data-tentary-return="/danke". Die Person landet dann dort statt auf deiner Landingpage. Angeben kannst du dabei nur Seiten aus deinem eigenen Shop.

Wenn du den Bestätigungstext selbst formulieren möchtest, setzt du das Attribut data-tentary="subscribed" auf ein Element neben dem Formular, nicht darin. Tentary blendet dieses Element so lange aus, bis das Formular abgeschickt wurde. Steht es innerhalb des Formulars, verschwindet es nach der Anmeldung gemeinsam mit dem Formular und wird deshalb nie sichtbar.

<form data-tentary="subscribe" data-tentary-return="/danke">
  <input type="email" placeholder="Deine E-Mail-Adresse" required>
  <button type="submit">Abonnieren</button>
</form>

<div data-tentary="subscribed">Danke, schau in dein Postfach.</div>

Wenn du mit einem KI-Tool arbeitest

Lässt du deine Landingpage von ChatGPT, Google Gemini oder Claude schreiben, nimm den folgenden Satz mit in deinen Prompt auf, damit das Formular von Anfang an richtig aufgebaut wird:

Füge ein Newsletter-Anmeldeformular hinzu. Setze data-tentary="subscribe" in das <form>-Tag und ein <input type="email"> hinein und füge dem Formular kein JavaScript hinzu. Direkt nach dem Formular, außerhalb davon, ergänze ein Element mit data-tentary="subscribed", das den Bestätigungstext enthält. Tentary blendet dieses Element aus, bis sich jemand angemeldet hat, blende es also nicht selbst ein oder aus. Nur wenn ich eine eigene Danke-Seite nenne, setze zusätzlich data-tentary-return="/deren-adresse" in das <form>-Tag.

Häufige Fragen

Wie muss das Feld für die E-Mail-Adresse heißen?

Das spielt keine Rolle. Tentary erkennt die Adresse unabhängig davon, wie das Feld benannt ist. Wichtig ist nur, dass dein Formular überhaupt ein Feld für die E-Mail-Adresse enthält.

Was passiert mit meinen bestehenden Formularen?

Die bleiben unverändert. Tentary verbindet ausschließlich Formulare, die das Attribut tragen. Ein Formular, das du an Mailchimp oder an einen eigenen Dienst schickst, funktioniert also weiterhin genauso wie bisher.

Warum sehe ich im Editor einen Hinweis zu meinem Formular?

Der Editor prüft, ob deine Seite ein E-Mail-Feld enthält, das keine Adressen sammelt, und erinnert dich in dem Fall an das Attribut. Schickst du das Formular bewusst an ein anderes Tool, kannst du den Hinweis einfach ignorieren.

Kann ich darüber auch ein kostenloses Produkt ausliefern?

Nein, dieses Formular sammelt ausschließlich Adressen für dein E-Mail-Marketing. Wenn du ein kostenloses Produkt auf einer fremden Website anbieten möchtest, nutze stattdessen das Einbettungsskript.