Išmokite lengvais veiksmais sukurti paprastą susisiekimo formą savo svetainei ir užtikrinti efektyvų bendravimą su auditorija.

Kontaktinės formos yra esminė svetainių sudedamoji dalis, leidžianti naudotojams susisiekti su jumis dėl užklausų, atsiliepimų ar užklausų.

Čia sužinosite, kaip sukurti pagrindinę savo svetainės kontaktinę formą. Nuo projekto nustatymo iki formos patvirtinimo ir stiliaus pridėjimo, užtikrinant, kad iki galo turėtumėte funkcionalią ir malonią kontaktinę formą.

Projekto nustatymas

Prieš pradėdami koduoti, įsitikinkite, kad kūrimo aplinka yra nustatyta. Atidarykite pageidaujamą teksto rengyklę arba viena iš rekomenduojamų integruotų kūrimo aplinkų (IDE) Kaip Visual Studio kodas arba Prabangus tekstas.

Sukurkite projekto aplanką, kad galėtumėte tvarkyti HTML ir CSS failus.

Šiame aplanke sukurkite atskirus failus HTML (index.html) ir CSS (stilius.css). Galiausiai susiekite CSS failą savo HTML dokumente skyrių naudojant žyma.

HTML struktūros kūrimas

Bet kurios kontaktinės formos pagrindas yra jos HTML struktūra. Štai kaip galite sukurti reikiamus HTML elementus savo kontaktų formai.

instagram viewer 

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

Aukščiau pateiktas HTML kodas sukuria formos elementą ir įdeda kelis įvesties laukus, kad būtų galima gauti kontaktinės formos naudotojo įvestį.

Šiuo metu jūsų kontaktinė forma atrodo taip:

Patraukli ir patogi kontaktų forma pagerina bendrą vartotojo patirtį. Toliau pateiktame CSS kode naudojamos „flexbox“ ir „CSS“ dėžutės modelio ypatybės, pvz., užpildymas ir paraštė, kad kontaktų forma būtų geresnė.

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

Jūsų kontaktinė forma dabar atrodo taip:

Formos patvirtinimo įgyvendinimas

Svarbiausia yra užtikrinti vartotojo pateiktos informacijos tikslumą ir išsamumą. Vienas veiksmingas būdas apima naudojant „JavaScript“ kliento formos patvirtinimui. Norėdami pradėti, sukurkite scenarijaus žymą HTML failo pabaigoje ir taikykite formos elementą.