Kontaktformular erstellen

vom 28.04.2010 von Oliver Misch

Ein Kontaktformular ist das klassische erste Formular. Wir bauen es komplett und sauber, und wir reden ehrlich über den Teil den HTML allein nicht kann: das Verschicken.

Schritt 1: Die Felder

HTML-Code

<form action="/kontakt-senden" method="post">
    <p>
        <label for="name">Dein Name:</label><br>
        <input type="text" id="name" name="name" required>
    </p>
    <p>
        <label for="mail">Deine E-Mail-Adresse:</label><br>
        <input type="email" id="mail" name="mail" required>
    </p>
    <p>
        <label for="nachricht">Deine Nachricht:</label><br>
        <textarea id="nachricht" name="nachricht" rows="6"
                  required minlength="10"></textarea>
    </p>
    <p><button type="submit">Nachricht absenden</button></p>
</form>

Alles Gelernte auf einem Haufen: jedes Feld mit verknüpftem label, der Typ email prüft das Format, required macht Pflichtfelder, method="post" weil Inhalte übertragen werden (die Begründung steht beim form-Element). Der br nach den Labels ist hier legitim: Beschriftung oben, Feld darunter, dieser Umbruch gehört zum Innhalt.

Schritt 2: Etwas Politur

CSS

input, textarea {
    width: 100%;
    max-width: 420px;
    padding: 8px;
    border: 1px solid #808080;
    font: inherit;
}
input:focus, textarea:focus {
    outline: 2px solid #008080;
}

font: inherit ist ein kleiner Geheimtipp: Formularfelder erben die Schrift der Seite, statt in der Browser-Standardschrift zu klemmen. Und ein sichtbarer Fokusrahmen ist Pflicht, Tastaturnutzer müssen sehen wo sie geradee sind.

Schritt 3: Die ehrliche Wahrheit übers Absenden

HTML sammelt ein, verschicken muss jemand anders. Beim Absenden schickt der Browser die Daten an die Adresse im action-Attribut, und dort muss etwas laufen das sie entgegennimmt: ein kleines Skript deines Hosters, ein Formular-Dienst oder ein selbstgeschriebenes Backend. Reines HTML kann keine E-Mails versenden. Die oft empfohlene Abkürzung action="mailto:..." öffnet nur das Mailprogramm des Besuchers und scheitert bei allen die keins eingerichtet haben, also für die meisten. Für den Anfang tut es übrigens auch ein schlichter E-Mail-Link auf der Kontaktseite, ganz ohne Formularr.

Schritt 4: Testen

Leer abschicken (die Pflichtfeld-Meldungen erscheinen), eine kaputte Mailadresse probieren (der Typ email meckert), einmal komplett per Tastatur durchtabben. Und im Hinterkopf behalten: Die Browserprüfung ist Komfort, auf dem Server wird nochmal geprüft, sonst schickt dir das erste Spamskript den Papierkorb voll.

Weiter im Fahrplan: Zweispaltiges Layout · Referenz: input, textarea, button