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.

Einfaches Kontaktformular

Kontakt aufnehmen

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

Vue

Angular