Jak vytvořit jednoduchý kontaktní formulář pomocí HTML, CSS a JavaScriptu

Kontaktní formuláře jsou klíčovou součástí webových stránek a umožňují uživatelům kontaktovat vás s dotazy, zpětnou vazbou nebo požadavky.

Zde se dozvíte, jak vytvořit základní kontaktní formulář pro váš web. Od nastavení projektu až po přidání ověření formuláře a stylingu, zajištění, že budete mít na konci funkční a příjemný kontaktní formulář.

Nastavení projektu

Než začnete kódovat, ujistěte se, že je vaše vývojové prostředí nastaveno. Otevřete preferovaný textový editor nebo jedno z doporučených integrovaných vývojových prostředí (IDE) jako Kód Visual Studio nebo Vznešený text.

Vytvořte složku projektu, abyste měli soubory HTML a CSS pořádané.

V této složce vytvořte samostatné soubory pro HTML (index.html) a CSS (styl.css). Nakonec propojte svůj soubor CSS v dokumentu HTML sekce pomocí štítek.

Vytvoření struktury HTML

Základem každého kontaktního formuláře je jeho HTML struktura. Zde je návod, jak vytvořit potřebné prvky HTML pro svůj kontaktní formulář.

<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>

Výše uvedený kód HTML vytvoří prvek formuláře a vnoří více vstupních polí, aby mohl přijímat uživatelské vstupy pro kontaktní formulář.

V tuto chvíli váš kontaktní formulář vypadá takto:

Atraktivní a uživatelsky přívětivý kontaktní formulář zvyšuje celkovou uživatelskou zkušenost. Níže uvedený kód CSS používá vlastnosti modelu flexbox a CSS box, jako je výplň a okraj, ke stylování kontaktního formuláře pro lepší vzhled.

* {
 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;
}

Váš kontaktní formulář nyní vypadá takto:

Implementace ověření formuláře

Zajištění přesnosti a úplnosti informací poskytovaných uživatelem je prvořadé. Jeden účinný přístup zahrnuje pomocí JavaScriptu pro ověření formuláře na straně klienta. Chcete-li začít, vytvořte značku skriptu na konci souboru HTML a zaměřte se na prvek formuláře.