So erstellen Sie ein einfaches Kontaktformular mit HTML, CSS und JavaScript

Kontaktformulare sind ein wichtiger Bestandteil von Websites und ermöglichen es Benutzern, sich mit Anfragen, Feedback oder Wünschen an Sie zu wenden.

Hier erfahren Sie, wie Sie ein einfaches Kontaktformular für Ihre Website erstellen. Von der Einrichtung des Projekts bis hin zum Hinzufügen von Formularvalidierung und -gestaltung stellen wir sicher, dass Sie am Ende ein funktionales und ansprechendes Kontaktformular haben.

Einrichten des Projekts

Bevor Sie mit dem Codieren beginnen, stellen Sie sicher, dass Ihre Entwicklungsumgebung eingerichtet ist. Öffnen Sie Ihren bevorzugten Texteditor bzw eine der empfohlenen integrierten Entwicklungsumgebungen (IDEs) wie Visual Studio-Code oder Erhabener Text.

Erstellen Sie einen Projektordner, um Ihre HTML- und CSS-Dateien organisiert zu halten.

Erstellen Sie in diesem Ordner separate Dateien für HTML (

index.html) und CSS (style.css). Zum Schluss verknüpfen Sie Ihre CSS-Datei mit Ihrem HTML-Dokument Abschnitt mit dem Etikett.

Erstellen der HTML-Struktur

Die Grundlage jedes Kontaktformulars ist seine HTML-Struktur. So erstellen Sie die notwendigen HTML-Elemente für Ihr Kontaktformular.

<main>
<h1>Welcome to my Formh1>
<formid="form">
<divclass="input__container">
<labelfor="name">Namelabel>

<inputtype="text"id="name"name="name"required />
div>
<divclass="input__container">
<labelfor="email">Emaillabel>
<inputtype="email"id="email"name="email"required />
div>
<divclass="input__container">
<labelfor="message">Messagelabel>
<textareaid="message"name="message"rows="4"required>textarea>
div>
<button>Submitbutton>
form>
main>

Der obige HTML-Code erstellt ein Formularelement und verschachtelt mehrere Eingabefelder, um Benutzereingaben für das Kontaktformular zu empfangen.

Im Moment sieht Ihr Kontaktformular so aus:

Ein attraktives und benutzerfreundliches Kontaktformular verbessert das gesamte Benutzererlebnis. Der folgende CSS-Code verwendet Flexbox- und CSS-Boxmodelleigenschaften wie Abstand und Rand, um das Kontaktformular für ein besseres Erscheinungsbild zu gestalten.

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
html {
 font-size: 62.5%;
}
body {
 font-family: "Mulish", sans-serif;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}
main {
 width: 40rem;
 box-shadow: 2px 3px 5pxrgba(0, 0, 0, 0.2);
 margin: 0 auto;
 height: 45rem;
 border-radius: 2rem;
 padding: 2rem;
}
h1 {
 text-align: center;
 font-size: 3rem;
 padding: 1rem 2rem;
}
form {
 margin: 3rem 0;
 display: flex;
 flex-direction: column;
 row-gap: 2rem;
}
.input__container {
 display: flex;
 flex-direction: column;
 row-gap: 0.5rem;
}
.input__containerlabel { font-size: 1.6rem; }
.input__containerinput,
textarea {
 padding: 1rem 2rem;
 border-radius: 5px;
 border: 1pxsolid#555;
 resize: none;
}
button {
 align-self: flex-start;
 padding: 1rem 2rem;
 border-radius: 5px;
 border: none;
 background: #333;
 color: #fff;
 cursor: pointer;
}

Ihr Kontaktformular sieht nun so aus:

Implementierung der Formularvalidierung

Die Gewährleistung der Richtigkeit und Vollständigkeit der vom Benutzer bereitgestellten Informationen ist von größter Bedeutung. Ein effektiver Ansatz beinhaltet Verwendung von JavaScript für die clientseitige Formularvalidierung. Erstellen Sie zunächst ein Skript-Tag am Ende Ihrer HTML-Datei und zielen Sie auf das Formularelement.