Beispiele.

Einsatzbereite Formular-Strukturen für hohe Conversion und nahtlose Integration mit der Mailan-API. Kopiere das HTML und passe das Styling an deine Marke an.

Wie du ein Formular in React, Next.js, Vue oder WordPress einbindest, zeigen die Integrationsanleitungen.

Einfaches Kontaktformular

Kontakt aufnehmen

HTML

Nach dem Absenden landet der Besucher auf unserer gehosteten Danke-Seite — mit einem versteckten „redirect"-Feld oder einer Redirect-URL am Formular schickst du ihn stattdessen auf deine eigene Seite. Aufrufe per JavaScript bekommen weiterhin JSON.

Bewerbungsformular

Jetzt bewerben

HTML

Von einem normalen Formular unterscheidet es genau eine Sache: „enctype=multipart/form-data". Ohne das schickt der Browser den Dateinamen statt der Datei. Den Feldnamen wählst du frei — jedes Datei-Teil wird angenommen, egal wie es heißt.

Dasselbe per JavaScript verschickt

JavaScript

Limits, Validierung und was zurückkommt

Serverseitig gelten zwei Grenzen pro Einsendung: eine Maximalgröße je Datei (standardmäßig 10 MB) und eine Höchstzahl an Dateien (standardmäßig 5). Beide greifen schon beim Lesen des Uploads — eine zu große Datei wird abgewiesen, statt erst vollständig gepuffert zu werden. Uploads bleiben für die eingestellte Aufbewahrungsdauer erhalten und werden dann zusammen mit der Einsendung gelöscht.

Angenommen: HTTP 200 mit { "success": true, "message": "Submission received" }
Datei zu groß: HTTP 413, Meldung „File too large"
Zu viele Dateien: HTTP 400, Meldung „Too many files"
Rate-Limit oder Monatskontingent: HTTP 429

Typ, Anzahl und Größe schon im Browser zu prüfen erspart dem Besucher einen sinnlosen Upload — genau das macht das Client-Script weiter unten mit „data-mailan-uploader". Verbindlich bleibt das Server-Limit.

Ein Script-Tag, kein eigenes JavaScript

Das Client-Script übernimmt jedes Formular, dessen Action auf einen Submit-Endpunkt zeigt: Versand per fetch, Erfolg und Fehler direkt am Formular, ALTCHA-Challenge wird automatisch gelöst, Captcha-Tokens und Datei-Uploads werden durchgereicht, ein „redirect"-Feld wird befolgt. Keine Abhängigkeiten, keine Fremd-Hosts.

Das Datei-Feld trägt „data-mailan-uploader": Es wird zur Drag-and-Drop-Zone mit Dateiliste und prüft Typ, Anzahl und Größe schon vor dem Absenden. Verbindlich bleibt die Grenze des Servers.

HTML

Vue

Kontaktformular als Vue-Komponente (Composition API) — Submission per fetch als JSON, inklusive Honeypot-Feld botcheck.

ContactForm.vue

const form = ref({ name: '', email: '', message: '', botcheck: '' })
const sent = ref(false)

async function submit() {
  const res = await fetch('https://mailan.email/api/submit/KEY', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(form.value),
  })
  if (res.ok) sent.value = true
}
</script>

<template>
  <p v-if="sent">Danke für deine Nachricht!</p>
  <form v-else @submit.prevent="submit">
    <label for="name">Name</label>
    <input id="name" v-model="form.name" name="name" required>

<label for="message">Nachricht</label>
    <textarea id="message" v-model="form.message" name="message"></textarea>

<input v-model="form.botcheck" type="text" name="botcheck" hidden tabindex="-1" autocomplete="off">

<button type="submit">Senden</button>
  </form>
</template>

Angular

Kontaktformular als Standalone-Komponente mit HttpClient — inklusive Honeypot-Feld botcheck.

contact-form.component.ts

import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'contact-form',
  standalone: true,
  imports: [FormsModule],
  template: `
    <p *ngIf="sent">Danke für deine Nachricht!</p>
    <form *ngIf="!sent" (ngSubmit)="submit()">
      <label for="name">Name</label>
      <input id="name" [(ngModel)]="model.name" name="name" required>

<label for="message">Nachricht</label>
      <textarea id="message" [(ngModel)]="model.message" name="message"></textarea>

<input [(ngModel)]="model.botcheck" type="text" name="botcheck" hidden tabindex="-1" autocomplete="off">

<button type="submit">Senden</button>
    </form>`,
})
export class ContactFormComponent {
  private http = inject(HttpClient);
  sent = false;
  model = { name: '', email: '', message: '', botcheck: '' };

submit() {
    this.http.post('https://mailan.email/api/submit/KEY', this.model)
      .subscribe(() => (this.sent = true));
  }
}

Beispiele.

Einfaches Kontaktformular

Kontakt aufnehmen

Newsletter-Anmeldung

Newsletter abonnieren

Bewerbungsformular

Jetzt bewerben

Dasselbe per JavaScript verschickt

Limits, Validierung und was zurückkommt

Ein Script-Tag, kein eigenes JavaScript

Vue

Angular