Kako ustvariti preprost kontaktni obrazec z uporabo HTML, CSS in JavaScript

Kontaktni obrazci so ključna sestavina spletnih mest, ki uporabnikom omogočajo, da se obrnejo na vas s poizvedbami, povratnimi informacijami ali zahtevami.

Tukaj se boste naučili postopka ustvarjanja osnovnega kontaktnega obrazca za vaše spletno mesto. Od nastavitve projekta do dodajanja validacije obrazca in oblikovanja, zagotavljanja, da imate na koncu funkcionalen in prijeten kontaktni obrazec.

Nastavitev projekta

Preden začnete kodirati, se prepričajte, da je vaše razvojno okolje nastavljeno. Odprite želeni urejevalnik besedil oz eno od priporočenih integriranih razvojnih okolij (IDE) kot Koda Visual Studio oz Vzvišeno besedilo.

Ustvarite mapo projekta, da bodo vaše datoteke HTML in CSS organizirane.

V tej mapi ustvarite ločene datoteke za HTML (index.html) in CSS (style.css). Na koncu povežite svojo datoteko CSS v dokumentu HTML razdelek z uporabo oznaka.

Ustvarjanje strukture HTML

Osnova vsakega kontaktnega obrazca je njegova struktura HTML. Tukaj je opisano, kako lahko ustvarite potrebne elemente HTML za svoj kontaktni obrazec.

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

Zgornja koda HTML ustvari element obrazca in ugnezdi več vnosnih polj, da prejme uporabniške vnose za kontaktni obrazec.

Trenutno je vaš kontaktni obrazec videti takole:

Privlačen in uporabniku prijazen kontaktni obrazec izboljša celotno uporabniško izkušnjo. Spodnja koda CSS uporablja lastnosti modela flexbox in polja CSS, kot sta oblazinjenje in rob, za oblikovanje kontaktnega obrazca za boljši videz.

* {
 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š kontaktni obrazec je zdaj videti takole:

Implementacija validacije obrazca

Zagotavljanje točnosti in popolnosti informacij, ki jih posredujejo uporabniki, je najpomembnejše. Eden od učinkovitih pristopov vključuje uporabo JavaScripta za preverjanje obrazcev na strani odjemalca. Za začetek ustvarite oznako skripta na koncu datoteke HTML in ciljajte na element obrazca.