Gunnar Bittersmann: Kontaktformular: methode Post geht nicht

Beitrag lesen

SELF-Forum

Kontaktformular: methode Post geht nicht

Gunnar Bittersmann Homepage des Autors
+1 Informationen zu den Bewertungsregeln

@@sdgfnnfg433d

mein Kontaktformular funktioniert leider nicht so wie es soll.

Dein Kontaktformular funktioniert aus mehreren Gründen nicht.

Datenschutz / User experience

Du erwartest, dass jemand, der mit dir in Kontakt treten möchte, 9 Felder ausfüllt? Und seine Anschrift und Telefonnummer preisgibt? Ernsthaft? Wozu?

Datensparsamkeit! AFAIK bist du dazu verpflichtet. Das heißt, du darfst nur die Daten erheben, die du bei einer Kontaktaufnahme wirklich benötigst. Das wäre wohl nur die E-Mail-Adresse.

Mache deutlich, welche Felder Pflichtfelder sind. Auch im HTML mittels required-Attribut. Die anderen Felder lässt du am besten ganz weg.

Barrierefreiheit

Deine Eingabefelder haben keine Beschriftung. Sie müssen aber eine haben, damit Nutzer wissen, was sie in welches Feld eingeben sollen.

Im Markup wäre also zu ändern:

 <div class="kontaktformular_spalte"><div class="kontaktformular_bezeichnung">Vorname:</div> <input class="kontaktformular_feld" type="text" name="vorname" /></div>

in:

<p>
  <label for="vorname">Vorname:</label>
  <input type="text" id="vorname" name="vorname" />
</p>

Und das bei allen Eingabefeldern.

Statt des div hab ich mal p genommen. Die Klassen brauchst du nicht.

Das <div id="kontaktformular"> brauchst du auch nicht. Das hattest du übrigens auch nicht richtig geschlossen.

 <div class="kontaktformular_spalte"><div class="kontaktformular_bezeichnung">Nachname:</div> <input class="kontaktformular_feld" type="text" name="nachname" /></div>

Statt „Nachname“ solltest du besser „Familienname“ verwenden.

 <div class="kontaktformular_spalte"><div class="kontaktformular_bezeichnung">E-Mail:</div> <input class="kontaktformular_feld" type="text" name="e-mail" /></div>

Statt type="text" wäre hier type="email" angebracht.

 <div class="kontaktformular_spalte"><div class="kontaktformular_bezeichnung">Telefon:</div> <input class="kontaktformular_feld" type="text" name="telefon" /></div>

Statt type="text" wäre hier type="tel" angebracht.

 <div class="kontaktformular_spalte"><div class="kontaktformular_bezeichnung">Stra&szlig;e:</div> <input class="kontaktformular_feld" type="text" name="strasse" /></div>

Warum verst&uuml;elst du das ß? Du solltest „Straße“ mit ß schreiben.

(Den Artikel gab’s doch auch mal auf deutsch‽ Da war ja noch was … *Knoten-ins-Taschentuch-mach*)

 <input type="submit" value=" Absenden " id="absenden" name="abschicken">

Für Buttons gibt es das button-Element. Verwende es:

<button type="submit" id="absenden" name="abschicken">Absenden</button>

Außerdem solltest du hier

<html>

die Sprache des Seiteninhalts angeben. (Warum?)

Wenn dieser auf deutsch ist:

<html lang="de">

Damit sich der Seiteninhalt dem Viewport anpassen kann, ist noch die eine Angabe in den head hinzuzufügen

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

und im Stylesheet keine Breiten in px festnageln, also nicht sowas wie

#kontaktformular{
height: 700px;
width: 934px;
}

Mein Viewport ist – wie der vieler anderer – deutlich schmaler als 934px. Sinvoll wäre vielleicht max-width statt width. Und responsive design (deutsche Übersetzung).

700px für die Höhe ist eine magic number – der Wert mag bei dir passen, aber nicht zwangsweise bei anderen. Sowas sollte man immer vermeiden.

Wozu willst du da überhaupt eine Höhe angeben? Du willst eher einen clearfix verwenden.

LLAP 🖖

--
“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Beitrag melden
+1
Informationen zu den Bewertungsregeln