So erstellen Sie ein HTML Kontaktformular

HTML-Quellcode eines Kontaktformulars

Wie alle Website-Inhalte werden auch Online-Formulare in HTML geschrieben. Im Folgenden zeigen wir Ihnen den HTML-Code eines typischen Kontaktformulars, den Sie gerne für Ihre Website weiterverwenden und beliebig anpassen können.

Folgender HTML-Code stellt ein typisches Kontaktformular dar, wie es häufig auf Webseiten verwendet wird. Es bietet den Nutzern drei Eingabefelder. Für die Kontaktaufnahme trägt der Nutzer seinen Namen und E-Mail-Adresse ein. Das mehrzeilige Textfeld ermöglicht die Eingabe einer längeren, beliebigen Textnachricht.

Um dieses Formular auf Ihrer Website einzufügen, kopieren Sie den folgenden HTML-Code, und fügen Sie diesen an der gewünschten Stelle in den HTML-Quelltext Ihrer Website ein. Sie können den Code in Folge gerne erweitern und für Ihren Zweck anpassen. Sehe Sie dieses Beispiel als Vorlage und als Ausgangsbasis zur Einführung in die Einrichtung von Online-Formularen.

<form action="#" method="POST" class="my-form">
  <label for="name">Ihr Name</label>
  <input type="text" name="Name" id="name" required>
  <label for="email">Ihre E-Mail-Adresse</label>
  <input type="email" name="Email" id="email" required>
  <label for="message">Was möchten Sie uns mitteilen?</label>
  <textarea name="Nachricht" id="message" cols="30" rows="6"></textarea>
  <div class="btns-row">
    <button type="submit">Formular absenden</button>
  </div>
</form>

Wir haben den HTML-Code auf das allernötigste reduziert, um einen möglichst einfachen Einstieg zu ermöglichen und den Quellcode übersichtlich und einfach verständlich zu halten.

Erleuterung des HTML-Quellcodes

Form-Tag

<form action="#" method="POST" class="my-form">
  ...
</form>

Das form-Tag schließt unser Formular ein und definiert damit den Bereich, in dem sich die dazugehörigen Eingabefelder befinden. Beim öffnenden form-Tag werden mit Parameter-Angaben einige Einstellungen getroffen, die für dieses Formular gelten.

Das action-Attribut gibt an, wo die Eingaben beim Absenden hingeschickt werden sollen. Darauf gehen wir weiter unten in diesem Artikel noch genauer ein, wenn wir uns mit der Einrichtung der Sendungsübertragung kümmern.

Bei dem Attribut method wird angegeben, mit welcher Sendemethode die Formulardaten gesendet werden sollen. Hier kann POST oder GET verwendet werden, wobei die Post-Methode die übliche und in aller Regel die passende Einstellung ist.

Die eingetragene Klasse dient für dieses Beispielformular nur dazu, die folgenden Styling-Angaben, mit diesem Formular zu verknüpfen.

Label zur Feldbeschriftung

<label for="name">Ihr Name</label>

Jedes unserer Eingabefelder besteht aus einem Label- und einem Input- oder Textarea-Element. Das label-Tag dient zur Beschriftung des Eingabefeldes. Um eine logische Verbindung zwischen den zusammengehörigen Labels und Eingabefeldern herzustellen, wird bei den Labels im Attribut for die ID des dazugehörigen Eingabefeldes eingetragen.

Eingabefelder

<input type="text" name="Name" id="name" required>

Bei den input-Tags handelt es sich um einfache Eingabefelder für einzeilige Texteingaben. Diese Art von Eingabefeldern wird am häufigsten verwendet. Mit dem type-Attribut kann der Typ der Dateneingabe genauer definiert werden. Hier stehen z.B. die Angaben email, tel, url zur Verfügung, um dem Webbrowser mitzuteilen, welche Art von Dateneingabe erwartet wird. Für eine allgemeine Texteingabe wird der Typ text verwendet.

<textarea name="Nachricht" id="message" cols="30" rows="6"></textarea>

Das textarea-Tag erstellt ein Eingabefeld für die mehrzeilige Texteingabe. Dieses eignet sich gut, wenn Nutzer einen längeren Text eingeben können. Wie es hier bei unserem Kontaktformular für die Nachricht-Eingabe verwendet wird. Das Attribut rows gibt an, wie viele Textzeilen sichtbar sein. Entsprechend hoch wird dieses Feld auf der Webseite dargestellt.

Wichtig ist, dass alle Eingabefelder mit einem Attribut name versehen sind. In dieses Attribut wird der Feldname definiert, der zusammen mit dem ausgefüllten Inhalt beim Senden übertragen wird.

Mit der id wird eine Kennung für das Formularfeld festgelegt. Diese Kennung muss eindeutig sein und darf daher nur einmal im gesamten HTML-Dokument verwendet werden. Bei unserem Beispielformular dienen IDs der Formularfelder dazu, diese mit den Labels zu verbinden.

Werden Formularfelder mit dem Attribut required versehen, so werden diese als Pflichtfelder gehandhabt und der Webbrowser lässt die Formularsendung nur zu, wenn alle Pflichtfelder ausgefüllt wurden.

Schaltfläche zum Absenden

<button type="submit">Formular absenden</button>

Mit dem button-Element wird in HTML eine Schaltfläche beschrieben. Das type-Attribut mit dem Wert submit führt dazu, dass dieser Button für das Absenden des Formulars fungiert. Der Inhalt des Elements wird als Beschriftung der Schaltfläche verwendet.

Soviel zum HTML-Code unseres Kontaktformulars. Kommen wir nun zur Anpassung des Designs.

Kontaktformular mit CSS stylen

Das Design wird, wie allgemein im Webdesign, per CSS angepasst. Mit CSS wird dem Webbrowser mitgeteilt, wie er die einzelnen HTML-Elemente platzieren soll und wie diese für die Anzeige auf der Website auszusehen haben. Das ermöglicht es uns, das optische Erscheinungsbild an das Design der Website anzupassen und nach dem eigenen Geschmack zu gestalten.

Verwenden Sie für unser Beispielformular folgenden CSS-Code, um für die richtige Darstellung zu sorgen. Unser CSS-Beispielcode stellt wiederum eine Vorlage dar, die Sie gerne direkt weiterverwenden können. In den meisten Fällen werden Anpassungen an den CSS-Anweisungen erforderlich sein, um das Erscheinungsbild an das Design der Website anzugleichen. Beispielsweise um die Schriftart oder die verschiedenen Farben anzupassen.

.my-form * {
  box-sizing: border-box;
  font-family: sans-serif;
}

.my-form {
  max-width: 500px;
  padding: 0 1.5rem;
}

.my-form label {
  display: block;
  padding: 1.2rem 0 0.2rem 0;
  font-weight: 700;
  font-size: 1rem;
  color: #374151;
}

.my-form input, .my-form textarea {
  display: block;
  width: 100%;
  font-size: 1rem;
  padding: 0.7rem;
  background-color: #fff;
  border: 3px solid #D1D5DB;
  outline: none;
  border-radius: 0.5rem;
  color: #000;
  transition: 300ms border;
}

.my-form textarea {
  resize: none;
}

.my-form input:focus, .my-form textarea:focus {
  background-color: #fff;
  border-color: #2563EB;
}

.my-form input:focus:required:invalid {
  background-color: #fff;
  border-color: #E74694;
}

.my-form .btns-row {
  margin-top: 1rem;
  text-align: right;
}

.my-form button {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  border-color: transparent;
  background-color: #2563EB;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  transition: 300ms background;
  cursor: pointer;
}

.my-form button:hover {
  background-color: #3B82F6;
}

Um unseren CSS-Code in Ihre Formularseite einzubauen, können Sie den Code entweder direkt in die HTML-Datei Ihrer Seite einfügen oder Sie binden den CSS-Code als eigenständige Stylesheet-Datei ein. Laden Sie hier den CSS-Code als Stylesheet herunter:

Fügen Sie das Stylesheet Ihren Website-Dateien hinzu und ergänzen Sie in der HTML-Datei mit dem Formular eine Verknüpfung zum Stylesheet. Dazu den folgenden Code im head-Bereich der HTML-Datei einfügen:

<link rel="stylesheet" href="formular.css">

Übertragung der Sendungen einrichten

Das Formular ist auf der Webseite eingebaut und die Darstellung angepasst, dann fehlt für ein funktionierendes Kontaktformular nur noch die Sendungsübertragung. Die Sendung wird ausgelöst, wenn der Seitenbesucher auf den Sende-Button klickt. Dann fast der Webbrowser alle Formulareingaben zusammen und sendet diese an ein Backend, welches sich um die weitere Verarbeitung kümmert.

Die Webadresse (URL) des Backends, an welche die Sendungen gesendet werden, wird im HTML-Code des Formulars beim Attribut action des form-Tags eingetragen. Beispiel:

<form action="https://www.domain.com/formular-backend" method="POST">

Zur Verarbeitung der Formularsendung gibt es verschiedenste Möglichkeiten, je nach Anforderung der Anwendung. Die üblichste Funktion ist, dass eine Nachricht mit allen Formulareingaben an eine bestimmte E-Mail-Adresse gesendet wird. In unserem Artikel HTML-Formular mit E-Mail-Versand erstellen zeigen wir Ihnen, welche technischen Möglichkeiten es für die E-Mail-Zustellung gibt und wie Sie diese einrichten.

Der schnellste und einfachste Weg ist die Nutzung unseres hauseigenen Backend-Services. Nach der Registrierung bei Form.taxi erhalten Sie eine individuelle Sendeadresse, die Sie bei Ihrem Formular im action-Attribut eintragen. Damit werden beim Absenden Ihres Kontaktformulars die Eingaben vom Form.taxi Backend empfangen und an Sie weitergeleitet. Im Einstellungsbereich des Service können Sie jederzeit die Zustelladresse und viele weitere Einstellungen anpassen.