Kuidas luua lihtsat kontaktivormi HTML-i, CSS-i ja JavaScripti abil

Kontaktvormid on veebisaitide oluline komponent, mis võimaldab kasutajatel teiega päringute, tagasiside või taotlustega ühendust võtta.

Siit saate teada oma veebisaidi jaoks põhilise kontaktivormi loomise protsessi. Alates projekti seadistamisest kuni vormide kinnitamise ja stiili lisamiseni, tagades, et teil on lõpuks toimiv ja meeldiv kontaktvorm.

Projekti seadistamine

Enne kodeerimise alustamist veenduge, et teie arenduskeskkond on seadistatud. Avage eelistatud tekstiredaktor või üks soovitatavatest integreeritud arenduskeskkondadest (IDE) meeldib Visual Studio kood või Ülev tekst.

Looge oma HTML- ja CSS-failide korrastamiseks projekti kaust.

Looge selles kaustas HTML-i jaoks eraldi failid (index.html) ja CSS (stiil.css). Lõpuks linkige oma CSS-fail oma HTML-dokumendis jaotist kasutades tag.

HTML-i struktuuri loomine

Iga kontaktivormi alus on selle HTML-struktuur. Siit saate teada, kuidas saate luua oma kontaktivormi jaoks vajalikud HTML-i elemendid.

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

Ülaltoodud HTML-kood loob vormielemendi ja pesastab mitu sisestusvälja, et saada kontaktivormi jaoks kasutaja sisestusi.

Hetkel näeb teie kontaktivorm välja selline:

Atraktiivne ja kasutajasõbralik kontaktivorm suurendab üldist kasutajakogemust. Allolev CSS-kood kasutab kontaktivormi paremaks väljanägemiseks flexboxi ja CSS-kasti mudeli atribuute, nagu polster ja veeris.

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

Teie kontaktivorm näeb nüüd välja selline:

Vormi kinnitamise rakendamine

Kasutaja esitatud teabe täpsuse ja täielikkuse tagamine on ülimalt oluline. Üks tõhus lähenemisviis hõlmab kasutades JavaScripti kliendipoolse vormi valideerimiseks. Alustamiseks looge HTML-faili lõppu skriptimärgend ja sihtige vormielementi.