Zentrieren und Funktion des Kontaktformulars ....

[Rolf B]

Hallo Steffen,

so, jetzt guck ich auf die richtige Seite und da sieht das HTML schon viel ordentlicher aus. A-bär:

• <div class="title"> möchte ein <header> Element sein, und das h2 darin konsequenterweise ein h1. Wenn Dir die Schriftgröße oder die Abstände für das h1 nicht gefallen, ändere das mit CSS. Aber wähle nicht nur der Darstellung wegen das falsche Element.
• die beiden br unter dem Titel möchten dementsprechend gerne verschwinden und zum margin-bottom des header werden, oder zum margin-top des form.
• das <div class="Form_1"> möchte gerne ein <main> Element sein. Und es möchte gerne das tun, was im Moment dein fieldset mit class="Form_1" macht. Ich mach gleich noch ein Beispiel.
• dein form Element ist prinzipiell nicht falsch. Aber ein class="form" ist nicht nötig, du hast nur ein form auf der Seite. D.h. im CSS kannst Du den Elementselektor benutzen (was Du auch schon tust)
• die Action im form solltest Du auf das nötigste verkürzen. Deine Kontakt-Seite ist in einem Ordner deines Webs, und die Antwort schickst Du an contact.php im gleichen Ordner. Es reicht deshalb, action="contact.php" zu schreiben

main { 
   width: 30em;                /* em, nicht px! */
   border: thin groove #888;   /* groove-Border eines Fieldset */
   margin: 0 auto;             /* zentriert horizontal */
}

form {
   width: 100%;                /* Breite vom Elternelement */
   border: 3px solid blue;
   box-sizing: border-box;     /* Border in width einbeziehen */
   background-color: #eee;
}

   <main>
      <form method="post" action="contact.php">
      </form>
   </main>

• Dass Du labels zur Beschriftung verwendest, ist sehr löblich - aber nur die halbe Miete. Du musst auch einen Bezug zwischen Label und belabeltem Element herstellen. Dafür verwendet man am label das for Attribut, das auf die id des input Elements Bezug nimmt.

<label for="name">Dein Vor- und Familienname</label>
<input type="text" id="name-contact" name="name-contact">

• Jetzt hast Du zwei Attribute, id und name, die gleichen Inhalt haben. Das ist leider nicht zu ändern. Die id brauchst Du für's Label, und das name-Attribut ist nötig für den Versand an den Server. Um Konfusion zu vermeiden, ist es sinnvoll, beide gleich zu nennen.

• Ein <div class="form-group"> im fieldset ist nicht nötig. Das kannst Du weglassen

• Eine Klasse "form-control" auf den inputs scheint mir auch überflüssig

• Die Klasse input-lg deutet auf "large input" hin. Das ist auf deiner Seite noch nicht definiert, aber es wäre sinnvoll, damit die inputs zu den labels passen.

.input-lg {
   font-size: 150%;
}

• Die <br> hinter den Labels möchten weg. Statt dessen sollte das label einen margin-bottom bekommen. Irgendwas zwischen 0.8em und 1em.
• font-size und font-family kannst Du zu font zusammenfasen. Der Familyname muss dann aber wegen der Leerstelle in Anführungszeichen.

label {
   display: block;
   background-color: gold;
   margin-bottom: 1em;
   font: 1.7em "Arial Narrow";
}

• Die br zwischen den fieldsets möchten auch weg. Statt dessen gib dem Rahmen einen margin-bottom. Dummer Fallstrick: Damit bekommt auch das Fieldset mit dem Button einen Abstand nach unten. Das löst man durch einen CSS Selektor mit einer Pseudoklasse:

.Rahmen {
   border-color: blue;
}

.Rahmen:not(:last-of-type) {
   margin-bottom: 2em;
}

• dein Dropdown hat einen viel zu kleinen Font. Aber das weißt Du vermutlich schon...
• Du plenkst (=Blanks, wo sie nicht hingehören). Es heißt "Dein Vor- und Familienname" und "Deine E-Mail". Deine Schreibung "Dein Vor - und Familien - Name" ist ein typographischer Unfall.

Wenn Du das Kontaktformular in einen irgendwie gearteten Seitenrahmen einpassen willst, sieht die Gestaltung des Seitenlayouts vielleicht etwas anders aus. Das muss man sich dann im Zweifelsfall nochmal angucken.

Serverseitig kann ich Dir nicht sagen, ob das sauber ist. Dein contact.php sehe ich ja nicht. Ich warne nur vor simpel gestrickten Form-Mailern, die für Angriffe durch bösartige Eingaben in den Feldern verletzlich sind. Ein Mailformular sicher zu gestalten ist alles andere als trivial. Wir haben es in unserem Wiki aufgegeben, ein sicheres Kontaktformularscript zu empfehlen, weswegen ich das hier im Forum auch nicht tun kann.

Rolf