Examples.

Ready-to-use form structures for high conversion and seamless integration with the Mailan API. Copy the HTML and adapt the styling to your brand.

How to wire a form into React, Next.js, Vue or WordPress is covered in the integration guides.

Simple contact form

Get in touch

HTML

After submitting, the visitor lands on our hosted thank-you page — add a hidden „redirect" field or set a redirect URL on the form to send them to your own page instead. Requests made with JavaScript keep receiving JSON.

Job application form

Apply now

HTML

Only one thing separates this from a normal form: „enctype=multipart/form-data". Without it the browser sends the file name instead of the file. The field name is yours to choose — every file part is accepted, no matter what it is called.

The same thing sent by JavaScript

JavaScript

Limits, validation and what comes back

Two server-side limits apply per submission: a maximum size per file (10 MB by default) and a maximum number of files (5 by default). Both are enforced while the upload is being read, so an oversized file is rejected instead of being buffered first. Uploads are kept for the configured retention period, then deleted along with the submission.

Accepted: HTTP 200 with { "success": true, "message": "Submission received" }
File too large: HTTP 413, message „File too large"
Too many files: HTTP 400, message „Too many files"
Rate limit or monthly quota: HTTP 429

Checking type, count and size in the browser first spares the visitor a pointless upload — the client script below does exactly that with „data-mailan-uploader". The server limit stays the binding one.

One script tag, no JavaScript of your own

The client script takes over every form pointing at a submit endpoint: it sends via fetch, shows success and errors on the form, solves the ALTCHA challenge, passes captcha tokens and file uploads through, and follows a „redirect" field. No dependencies, no other hosts.

The file input carries „data-mailan-uploader": it becomes a drag & drop zone with a file list and checks type, count and size before anything is sent. The server limit stays the binding one.

HTML

Vue

Contact form as a Vue component (Composition API) — submission via fetch as JSON, including the honeypot field 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

Contact form as a standalone component using HttpClient — including the honeypot field 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));
  }
}

Examples.

Simple contact form

Get in touch

Newsletter sign-up

Subscribe to the newsletter

Job application form

Apply now

The same thing sent by JavaScript

Limits, validation and what comes back

One script tag, no JavaScript of your own

Vue

Angular