# Section Contact

Bei einem überzeugenden Portfolio ist es wahrscheinlich, dass einige Besucher deiner Website mit dir in Kontakt treten möchten.

Aktuell ist das bereits durch die Social Media Links und deine Email-Adresse in der “About”-section möglich.

Obwohl das eine praktische und übliche Lösung ist, gibt es insbesondere bei E-Mail zwei Nachteile:

Deine E-Mail-Adresse wird öffentlich im Internet sichtbar. So kann es passieren, dass du plötzlich von Werbetreibenden und Scammern (Betrüger) unerwünschte E-Mails erhälst.
Es kommt häufig vor, dass Personen die Kontakt aufnehmen wollen, für dich wichtige Angaben in ihrer E-Mail-Anfrage vergessen und ihr viel hin- und herschreiben müsst.

Beide Probleme kannst du durch ein Formular auf deiner Website lösen. Einerseits, weil dieses nicht unmittelbar deine E-Mail-Adresse zur Schau stellt; Andererseits, weil du den Nutzern zeigen kannst, welche Informationen du in welcher Form bei einer Kontaktaufnahme erwartest.

# HTML-Formulare

Formulare sind ein ziemlich umfangreiches Thema im Web-Development. Das reicht von der Eingabe von Daten durch Nutzer auf deiner Website, über die Validierung (Sicherstellung keiner falschen Angaben) und Spam-Protection (Schutz for unerwünschtem Absenden oder gar Attacken), bis hin zur Auswertung und Verarbeitung der Daten auf dem Server.

All diese Themen verständlich zu behandeln, wäre im Rahmen dieses Kurses nicht möglich. Deshalb fokussiert sich dieser Guide auf die für dein Portfolio relevanten Aspekte.

Weiterführende Links

HTML bietet dir viele Tags und Attribute, um mit Eingaben von Nutzern umzugehen. Grundsätzlich bestehen HTML Formulare immer aus einem umschliessenden form-Tag, einem oder mehreren input-Tags und einem button-Tag, um das Formular abzusenden.

<form action="URL-für-die-Verarbeitung-des-Formulars">
  <input type="text" placeholder="Gib einen Text ein">
  <button type="submit">Absenden</button>
</form>

Hinweis

Wie du siehst, gibt es bei input-Tags kein schliessendes Tag. Diese verhalten sich also self-closing (selbstschliessend) wie das img-Tag.

# Die wichtigsten Formular-Tags

Damit du funktionale HTML-Formulare aufbauen kannst, solltest du mindestens diese Tags kennen:

Tag	Bedeutung
`form`	Formular, welches alle darin verschachtelten Eingabefelder beim Absenden an die URL im `action` Attribut sendet
`label`	Beschreibungstext für ein einzelnes Eingabefeld, welches im `for` Attribut zugewiesen werden kann
`input`	Einzeiliges Eingabefeld für verschiedene Datentypen
`textarea`	Mehrzeiliges Eingabefeld für Text
`select`	Auswahlliste mit einer oder mehreren Optionen

# Die wichtigsten Formular-Attribute

Damit dein Formular sich wie vorgesehen verhält, solltest du einige Attribute für HTML-Formulare kennen.

Diese Attribute sind beim form-Tag wichtig:

Attribut	Bedeutung
`action`	Bestimmt, was beim Absenden des Formulars geschehen soll.
`method`	Bestimmt, ob beim Absenden etwas gesendet (`post`) oder empfangen (`get`) werden soll.

…und diese beim input-Tag:

Attribut	Bedeutung
`type`	Bestimmt die zugelassenen Daten in der Eingabe. Mögliche Values (Werte) von `type` sind z.B. `text`, `email`, `number`, `date`, `time`, `file`, `password`, `checkbox` etc. Moderne Browser haben für jeden dieser Typen vordefinierte Darstellungen und Verhaltensweisen. Auch den type `submit` gibt es. In den meisten Fällen ist es aber sinnvoller ein `button`-Tag mit dem Type `submit` als Auslöser zum Absenden des Formulars zu verwenden.
`required`	Pflichtfeld, welches ohne korrektes Auszufüllen das Absenden blockiert
`placeholder`	Beschreibungstext für ein einzelnes Eingabefeld
`name`	Name des Eingabefelds, das beim Absenden des Formulars übermittelt wird
`value`	Wert, der beim Absenden des Formulars übermittelt wird
`id`	ID damit unter anderem das Label weiss, zu welchem Input es gehört

# Contact Markup Aufgabe

Da du nun das wichtigste über HTML-Formulare weisst, kannst du mit der Erstellung deiner “Contact”-section beginnen.

<!-- Nach der Career section, innerhalb von <main> einfügen -->
<!-- Contact section -->
<section id="contact">
  <div class="block_with_background">
    <div class="section_title">
      <h3>Contact</h3>
      <p class="section_subtitle">So erreichst du mich</p>
    </div>
    <form class="form" action="https://formspree.io/f/GIB_DEIN_ENDPOINT_AN" role="form" method="post">
      <label for="name">Name</label>
      <input type="text" class="form_input" id="name" name="name" placeholder="Wie heisst du?" required>

      <label for="email">Email</label>
      <input type="email" class="form_input" id="email" name="_replyto" placeholder="Wie ist deine Email-Adresse?" required>

      <label for="message">Nachricht</label>
      <textarea class="form_input" rows="5" id="message" name="message" placeholder="Was möchtest du mir mitteilen?"required></textarea>

      <input type="hidden" name="_subject" id="email-subject" value="Neue Anfrage via Portfolio">
      <button class="form_submit" value="submit" type="submit">Absenden</button>
    </form>
  </div>
</section>

# Contact Styles Aufgabe

Damit dein Formular auch visuell einen guten Eindruck macht, benötigst du wiederum das passende CSS.

/* 
--------------------------------
Contact section
--------------------------------
*/

#contact {
	padding: 7vh 0 0;
}

.form {
	display: flex;
	flex-direction: column;
	max-width: 50rem;
	margin: 0 auto;
	padding: 0 7vw;
}

.form label {
	font-size: 0.85rem;
}

.form_input {
	padding: 1rem;
	margin: 0.5rem 0 1rem 0;
	border-radius: 0.5rem;
	resize: none; /* Vergrössern/verkleinern verbieten */
}

/* Mit der ::placeholder Pseudoklasse kannst du die Farbe des Platzhalters regulieren. */
.form_input::placeholder {
	color: rgba(2,54,94,0.5);
}

.form_submit {
	align-self: center;
	padding: 1.25rem 3.5rem; /* oben/unten 1.25rem und link/recht 3.5rem */
	margin: 1rem 0;
	border-radius: 10rem;
	text-transform: uppercase;
	background: #02365E;
	color: white;
	letter-spacing: 0.025rem;
	cursor: pointer;
}

Alle Properties, die nicht zusätzlich kommentiert wurden, solltest du bereits aus vorherigen Kapiteln kennen.

# Formular funktionsfähig machen Aufgabe

Account erstellen

Die Verarbeitung des Formulars und das Zusenden der Emails könntest du natürlich auch selbst programmieren. Um die Dinge jedoch möglichst einfach zu halten, wird hier Formspree als Formular-Verarbeiter verwendet.

Registriere dich auf Formspree
Bestätige deine E-Mail Adresse
Erstelle ein Projekt auf Formspree (z.B. IMD ÜK)
Erstelle ein Formular (z.B. Kontaktform Portfolio)
Öffne die Form Details und klicke auf den Link/Tab Integration
Kopiere den Integrations-Link und baue diesen in deinem Formular ein (action="...")
Teste dein Formular / E-Mail

# Überprüfen im Browser Aufgabe

Wie immer ist es wichtig, die Darstellung deines Fortschritts im Browser zu überprüfen. Gemäss Vorlage sollte die "Contact"-section nun folgendermassen aussehen:

section contact

Hinweis

Bitte sende mindestens einmal das Formular auf deiner Seite selbst ab. Du solltest eine Bestätigungsmail erhalten. Erst danach funktioniert dein Formular.

Passende Challenges

#19 Select Dropdown (Füge ein Dropdown mit Auswahlmöglichkeiten zum Formular hinzu)

← Transitions & Animations Footer →