Kako stvoriti jednostavan obrazac za kontakt koristeći HTML, CSS i JavaScript

Obrasci za kontakt ključna su komponenta web stranica koja korisnicima omogućuje da vam se obrate s upitima, povratnim informacijama ili zahtjevima.

Ovdje ćete naučiti postupak izrade osnovnog obrasca za kontakt za svoju web stranicu. Od postavljanja projekta do dodavanja provjere valjanosti obrasca i oblikovanja, osiguravajući da na kraju imate funkcionalan i ugodan obrazac za kontakt.

Postavljanje projekta

Prije nego počnete kodirati, provjerite je li vaše razvojno okruženje postavljeno. Otvorite željeni uređivač teksta ili jedno od preporučenih integriranih razvojnih okruženja (IDE) Kao Visual Studio Code ili Uzvišeni tekst.

Stvorite mapu projekta kako biste organizirali svoje HTML i CSS datoteke.

Unutar ove mape stvorite zasebne datoteke za HTML (index.html) i CSS (stil.css). Na kraju, povežite svoju CSS datoteku u svoj HTML dokument odjeljak pomoću označiti.

Stvaranje HTML strukture

Temelj svakog obrasca za kontakt je njegova HTML struktura. Evo kako možete stvoriti potrebne HTML elemente za svoj obrazac za kontakt.

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

Gornji HTML kod stvara element obrasca i ugniježđuje višestruka polja za unos kako bi se primili korisnički unosi za obrazac za kontakt.

Trenutačno vaša kontakt forma izgleda ovako:

Atraktivan i jednostavan obrazac za kontakt poboljšava cjelokupno korisničko iskustvo. CSS kod u nastavku koristi flexbox i svojstva modela CSS okvira kao što su ispuna i margina za stiliziranje obrasca za kontakt radi boljeg izgleda.

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

Vaš obrazac za kontakt sada izgleda ovako:

Implementacija provjere valjanosti obrazaca

Najvažnije je osigurati točnost i cjelovitost informacija koje su dali korisnici. Jedan učinkovit pristup uključuje koristeći JavaScript za provjeru valjanosti obrazaca na strani klijenta. Za početak stvorite oznaku skripte na kraju vaše HTML datoteke i ciljajte element obrasca.