19. Das Kontaktformular

Möge unser Netzwerk wachsen und uns verbinden.

Mentorin Seraphina

Seraphina lehnt sich grinsend über deinen Code und hebt eine Augenbraue.
„So sieht das im HTML aus. Völlig unspektakulär – also lass uns was draus machen.“
Sie schnippt mit den Fingern, und für einen Moment glaubst du, dass sich der Code vor deinen Augen bewegt. „Du hast die Struktur, jetzt braucht es nur noch Stil, Drehung und ein bisschen Drama. Mach die Karten lebendig.“

Deine Aufgaben

Dieser Container hält alle Eingabefelder nebeneinander oder untereinander.

  • Du willst, dass sich die Felder bei kleineren Bildschirmen umbrechen können – nutze also eine Eigenschaft, die Zeilenumbrüche in einem Flex-Layout erlaubt.

Jeder Bereich (Name, Farbe, Nachricht usw.) bekommt eine minimale Breite von 18rem, kann aber auch wachsen.

  • Verwende eine Flex-Eigenschaft, die sowohl Mindestgröße als auch Flexibilität erlaubt.

Jeder Bereich (Name, Farbe, Nachricht usw.) bekommt eine minimale Breite von 18rem, kann aber auch wachsen.

  • Verwende eine Flex-Eigenschaft, die sowohl Mindestgröße als auch Flexibilität erlaubt.

Das ist der Rahmen um das Formular.

  • Füge Innenabstand hinzu (groß, mit –spacing-large)
  • gib ihm eine dünne Rahmenlinie in Sekundärfarbe, runde die Ecken leicht ab (Variable: –border-small)
  • und verwende eine Schriftart, die du bereits als Überschriftenschrift festgelegt hast.

Der Titel des Formulars.

  • Er bekommt einen kleinen Innenabstand (–spacing-small)
  • eine Titelgröße (–font-size-title)
  • und eine Farbe in Sekundärfarbe.

Die einzelnen Formularfelder (Name + Eingabe, Auswahl + Label usw.) sollen gut lesbar nebeneinander stehen.

  • Setze einen kleinen vertikalen Außenabstand oben und unten
  • und nutze flex mit einer Verteilung, bei der ein Element ganz links, das andere ganz rechts steht.

Wenn ein Eingabefeld fokussiert wird,

  • soll der Hintergrund eine auffällige Farbe bekommen – nimm Highlightfarbe. Das hilft dem Nutzer zu sehen, wo er gerade schreibt.

input[type=“text“], input[type=“date“], textarea, select. Diese Elemente werden einheitlich gestaltet.

  • Verwende die headline-Schriftart
  • Setze die Schriftgröße auf 1rem
  • Die Textfarbe kommt aus der Primärfarbe
  • Die Breite der Felder liegt bei 55 %, damit das Label daneben Platz hat
  • Entferne den Rahmen komplett – aber gib ihnen eine Linie am unteren Rand
  • (Sekundärfarbe)
  • Innenabstand nicht vergessen
  • Der Hintergrund soll transparent sein
  • Und Übergänge weich – nutze eine Übergangszeit von ca. 0.3 Sekunden.

Dieses Feld braucht zusätzlich einen Rahmen rundum in Sekundärfarbe. (Achte auf den Unterschied zu den anderen Feldern.)

textarea:focus, select:focus, input[type=“text“]:focus, input[type=“date“]:focus

  • Wenn eines dieser Felder aktiv wird, soll sich der Hintergrund auf Highlightfarbe ändern,
  • die Schrift bleibt Primärfarbe
  • der Rahmen wird vollständig entfernt (sieht moderner aus).

Standardmäßig zeigen Browser einen blauen Fokusrahmen – den willst du nicht.

  • Entferne diesen mit einer entsprechenden Eigenschaft, die die Umrandung bei Fokus unterdrückt.

Dieser Bereich hält den Button.

  • Zentriere den Inhalt mit einer geeigneten Flex-Ausrichtung
  • und gib ihm einen großen Abstand nach oben (Variable: –spacing-large), damit der Button nicht am letzten Eingabefeld klebt.

Löse die Aufgabe hier in der Konsole [–> im neuen Tab öffnen]

CSS
.contact-container {
   flex-wrap: wrap;
}

.contact-container>div {
   flex: 1 1 18rem;
}

fieldset {
   padding: var(--spacing-large);
   border: 1px solid var(--secondary);
   border-radius: var(--border-small);
   font-family: var(--headline);
}

legend {
   padding: var(--spacing-small);
   font-size: var(--font-size-title);
   color: var(--secondary);
}

fieldset>div {
   margin: var(--spacing-small) 0;
   display: flex;
   justify-content: space-between;
}

input:focus {
   background-color: var(--highlight);
}

input[type="text"],
input[type="date"],
textarea,
select {
   font-family: var(--headline);
   font-size: 1rem;
   color: var(--primary);
   width: 55%;
   border: none;
   border-bottom: 1px solid var(--secondary);
   padding: var(--spacing-small);
   background-color: transparent;
   transition: 0.3s;
}

textarea {
   border: 1px solid var(--secondary);
}

textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="date"]:focus {
   background-color: var(--highlight);
   color: var(--primary);
   border: none;
}

/* Outlines entfernen */
input,
textarea {
   outline: none;
}

.submit {
   justify-content: center;
   margin-top: var(--spacing-large);
}
Nach oben scrollen