Anleitungen

Mailiy in deine Website einbauen

Du brauchst den Schlüssel deines Formulars aus dem Dashboard und ein HTML-Formular. Fertige Formulare findest du in den Vorlagen.

Anleitung für deine Plattform

• Kontaktformular in WordPress ohne Plugin

  Kontaktformular in WordPress ohne Plugin: HTML-Block einfügen, Schlüssel eintragen, fertig. Einsendungen kommen per E-Mail, gehostet in der EU.

• Webflow-Formulare per E-Mail empfangen

  Webflow-Formulare an Mailiy senden: Action und Method im Form Block setzen, Schlüssel per Embed einfügen. Einsendungen per E-Mail, Server in der EU.

• Kontaktformular in Framer einbauen

  Kontaktformular in Framer mit Mailiy: HTML-Embed einfügen, Schlüssel eintragen, veröffentlichen. Einsendungen landen per E-Mail in deinem Postfach.

• HTML-Kontaktformular ohne PHP

  HTML-Kontaktformular ohne PHP und ohne Server: Formular-Code kopieren, Schlüssel eintragen, Einsendungen per E-Mail empfangen. DSGVO-konform in der EU.

• React-Kontaktformular ohne Backend

  Kontaktformular in React ohne Backend: eine Komponente mit fetch(), kein zusätzliches Paket. Einsendungen kommen per E-Mail, Server in der EU.

• Next.js-Kontaktformular ohne API-Route

  Kontaktformular in Next.js ohne API-Route: Client-Komponente mit fetch() an Mailiy. Kein Server-Code, kein SMTP, Einsendungen per E-Mail aus der EU.

• Astro-Kontaktformular ohne Server

  Kontaktformular für Astro ohne Server-Adapter: HTML-Formular als Komponente, Einsendungen per E-Mail. Funktioniert mit statischem Build, gehostet in der EU.

• Vue- und Nuxt-Kontaktformular ohne Backend

  Kontaktformular in Vue und Nuxt ohne Backend: Single-File-Komponente mit fetch() an Mailiy. Einsendungen per E-Mail, DSGVO-konform in der EU.

Datenschutz

Was ein Formular nach DSGVO braucht, steht in der Checkliste für ein DSGVO-konformes Kontaktformular.

Jede andere Website

Ein Formular mit action auf Mailiy und method POST reicht. Bindest du zusätzlich das Skript ein, schickt es jedes solche Formular im Hintergrund ab und schreibt die Antwort darunter. Steht im lang-Attribut deiner Seite Deutsch, kommt die Antwort auf Deutsch, sonst auf Englisch.

<form action="https://mailiy.com/api/submit" method="POST"
      data-success="Danke! Wir melden uns.">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  …
  <p data-mailiy-result></p>
</form>
<script src="https://mailiy.com/client/script.js" defer></script>

• data-success, data-error: eigene Texte statt der Antwort von Mailiy.
• data-mailiy-result: dort erscheint die Antwort. Fehlt das Element, legt das Skript eines am Ende des Formulars an.
• data-mailiy / data-mailiy-off: Formular mit anderer action einschließen oder ein Mailiy-Formular ausnehmen.
• redirect: Hat das Formular ein Feld mit diesem Namen, geht es nach dem Erfolg dorthin.

Während des Sendens hat das Formular aria-busy und der Button ist gesperrt. Danach steht data-state auf success oder error, und das Skript löst ein Event aus:

document.addEventListener("mailiy:success", (event) => {
  // event.target is the form, event.detail the answer from Mailiy
});

Zum Dashboard