HTML-Formular-Snippets

Fertige HTML-Code-Beispiele zum Kopieren und Einbauen. Jedes Snippet enthält ein vollständiges Formular, das Eingaben über Form.taxi versendet - ohne serverseitigen Code.

So funktioniert's

1. Kopieren Sie ein Snippet in Ihre HTML-Seite
2. Ersetzen Sie die Action-URL durch Ihre Form.taxi-Endpoint-URL
3. Passen Sie die Felder und das Styling an Ihr Projekt an

Ihre Endpoint-URL finden Sie im Form.taxi-Dashboard nach der Anlage einer Sendeverbindung. Sie hat folgendes Format:

https://form.taxi/s/FORM_CODE

Kontaktformular

Das klassische Kontaktformular mit Name, E-Mail und Nachricht.

<form action="https://form.taxi/s/FORM_CODE" method="POST">
  <input type="text" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off">
  <input type="hidden" name="_redirect" value="https://yoursite.com/thank-you">

  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div>
    <label for="email">E-Mail</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div>
    <label for="message">Nachricht</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  <button type="submit">Nachricht senden</button>
</form>

Newsletter-Anmeldung

Minimales Formular für E-Mail-Opt-ins, Wartelisten oder Lead-Magnets.

<form action="https://form.taxi/s/FORM_CODE" method="POST">
  <input type="text" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off">
  <input type="hidden" name="_redirect" value="https://yoursite.com/subscribed">

  <div>
    <label for="email">E-Mail-Adresse</label>
    <input type="email" id="email" name="email" placeholder="name@example.com" required>
  </div>

  <button type="submit">Anmelden</button>
</form>

Feedback-Formular

Bewertung mit Sterneskala (1–5) und optionalem Kommentar.

<form action="https://form.taxi/s/FORM_CODE" method="POST">
  <input type="text" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off">
  <input type="hidden" name="_redirect" value="https://yoursite.com/thank-you">

  <fieldset>
    <legend>Wie bewerten Sie Ihre Erfahrung?</legend>
    <label><input type="radio" name="rating" value="1" required> 1 – Schlecht</label>
    <label><input type="radio" name="rating" value="2"> 2 – Mäßig</label>
    <label><input type="radio" name="rating" value="3"> 3 – Gut</label>
    <label><input type="radio" name="rating" value="4"> 4 – Sehr gut</label>
    <label><input type="radio" name="rating" value="5"> 5 – Ausgezeichnet</label>
  </fieldset>

  <div>
    <label for="comment">Kommentar (optional)</label>
    <textarea id="comment" name="comment" rows="4"></textarea>
  </div>

  <div>
    <label for="email">E-Mail (optional, falls Sie eine Antwort wünschen)</label>
    <input type="email" id="email" name="email">
  </div>

  <button type="submit">Feedback senden</button>
</form>

Buchungs- / Bestellformular

Formular mit Datumsauswahl, Dropdown, Anzahl und Freitextfeld – geeignet für Reservierungen, Terminbuchungen oder Bestellungen.

<form action="https://form.taxi/s/FORM_CODE" method="POST">
  <input type="text" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off">
  <input type="hidden" name="_redirect" value="https://yoursite.com/booking-confirmed">

  <div>
    <label for="name">Vollständiger Name</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div>
    <label for="email">E-Mail</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div>
    <label for="phone">Telefon</label>
    <input type="tel" id="phone" name="phone">
  </div>

  <div>
    <label for="date">Wunschdatum</label>
    <input type="date" id="date" name="date" required>
  </div>

  <div>
    <label for="time">Wunschzeit</label>
    <select id="time" name="time" required>
      <option value="">– Bitte wählen –</option>
      <option value="morning">Vormittag (9:00–12:00)</option>
      <option value="afternoon">Nachmittag (12:00–17:00)</option>
      <option value="evening">Abend (17:00–21:00)</option>
    </select>
  </div>

  <div>
    <label for="guests">Anzahl Personen</label>
    <input type="number" id="guests" name="guests" min="1" max="50" value="1" required>
  </div>

  <div>
    <label for="notes">Besondere Wünsche</label>
    <textarea id="notes" name="notes" rows="3"></textarea>
  </div>

  <button type="submit">Buchung absenden</button>
</form>

Formular mit Dateianhang

Formular mit Datei-Upload. Wichtig: Das Attribut enctype="multipart/form-data" ist für Datei-Uploads zwingend erforderlich.

<form action="https://form.taxi/s/FORM_CODE" method="POST" enctype="multipart/form-data">
  <input type="text" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off">
  <input type="hidden" name="_redirect" value="https://yoursite.com/thank-you">

  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div>
    <label for="email">E-Mail</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div>
    <label for="subject">Betreff</label>
    <input type="text" id="subject" name="subject" required>
  </div>

  <div>
    <label for="message">Nachricht</label>
    <textarea id="message" name="message" rows="4" required></textarea>
  </div>

  <div>
    <label for="attachment">Dateianhang</label>
    <input type="file" id="attachment" name="attachment" accept=".pdf,.doc,.docx,.jpg,.png">
  </div>

  <button type="submit">Mit Anhang senden</button>
</form>

RSVP-Formular

Zusage-Formular für Veranstaltungen mit Personenanzahl und Ernährungswünschen.

<form action="https://form.taxi/s/FORM_CODE" method="POST">
  <input type="text" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off">
  <input type="hidden" name="_redirect" value="https://yoursite.com/rsvp-confirmed">

  <div>
    <label for="name">Ihr Name</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div>
    <label for="email">E-Mail</label>
    <input type="email" id="email" name="email" required>
  </div>

  <fieldset>
    <legend>Werden Sie teilnehmen?</legend>
    <label><input type="radio" name="attendance" value="yes" required> Ja, ich bin dabei</label>
    <label><input type="radio" name="attendance" value="no"> Leider nicht möglich</label>
  </fieldset>

  <div>
    <label for="guests">Anzahl Personen (inkl. Ihnen selbst)</label>
    <input type="number" id="guests" name="guests" min="1" max="10" value="1">
  </div>

  <div>
    <label for="dietary">Ernährungswünsche</label>
    <select id="dietary" name="dietary">
      <option value="none">Keine besonderen Wünsche</option>
      <option value="vegetarian">Vegetarisch</option>
      <option value="vegan">Vegan</option>
      <option value="gluten-free">Glutenfrei</option>
      <option value="other">Sonstiges (bitte unten angeben)</option>
    </select>
  </div>

  <div>
    <label for="notes">Anmerkungen</label>
    <textarea id="notes" name="notes" rows="3" placeholder="Allergien, Songwünsche, Sonstiges…"></textarea>
  </div>

  <button type="submit">RSVP senden</button>
</form>

Support- / Ticket-Formular

Kategorisiertes Formular für Supportanfragen, Fehlermeldungen oder Kundendienst.

<form action="https://form.taxi/s/FORM_CODE" method="POST">
  <input type="text" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off">
  <input type="hidden" name="_redirect" value="https://yoursite.com/ticket-received">

  <div>
    <label for="name">Ihr Name</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div>
    <label for="email">E-Mail</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div>
    <label for="category">Kategorie</label>
    <select id="category" name="category" required>
      <option value="">– Bitte wählen –</option>
      <option value="bug">Fehlermeldung</option>
      <option value="feature">Funktionswunsch</option>
      <option value="billing">Abrechnung / Konto</option>
      <option value="general">Allgemeine Frage</option>
    </select>
  </div>

  <div>
    <label for="priority">Priorität</label>
    <select id="priority" name="priority" required>
      <option value="low">Niedrig</option>
      <option value="medium" selected>Mittel</option>
      <option value="high">Hoch</option>
      <option value="urgent">Dringend</option>
    </select>
  </div>

  <div>
    <label for="subject">Betreff</label>
    <input type="text" id="subject" name="subject" required>
  </div>

  <div>
    <label for="description">Beschreibung</label>
    <textarea id="description" name="description" rows="6" required
      placeholder="Bitte beschreiben Sie Ihr Anliegen möglichst genau…"></textarea>
  </div>

  <button type="submit">Anfrage senden</button>
</form>

Hinweise zu den Snippets

_honeypot – Ein unsichtbares Feld zum Schutz vor Spam-Bots. Bots füllen dieses Feld aus, echte Nutzer nicht. Das Feld muss im Formular vorhanden, aber unsichtbar bleiben.

_redirect – Bestimmt die URL, zu der der Nutzer nach dem Absenden weitergeleitet wird. Passen Sie die URL an Ihre Danke-Seite an oder entfernen Sie das Feld, um die Standard-Bestätigungsseite von Form.taxi zu verwenden.

enctype="multipart/form-data" – Dieses Attribut ist nur bei Formularen mit Datei-Upload nötig. Ohne das Attribut werden Dateianhänge nicht übertragen.

Styling – Die Snippets enthalten bewusst kein CSS. Passen Sie das Design mit Ihrem eigenen Stylesheet, Tailwind, Bootstrap oder einem anderen Framework an.

Alle Snippets auf GitHub

Alle Snippets stehen auch als einzelne HTML-Dateien zum Download und zur Weiterverwendung auf GitHub bereit:

github.com/formtaxi/html-form-snippets