Kaip sukurti paprastą kontaktinę formą naudojant HTML, CSS ir JavaScript

Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

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

MUO dienos vaizdo įrašas SLĖKITE, KAD TĘSITE SU TURINIU

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

 <main> 
     <h1>Welcome to my Form</h1> 
     <form id="form"> 
       <div class="input__container"> 
         <label for="name">Name</label> 
           <!-- The 'required' prop ensures a filled field before submission --> 
         <input type="text" id="name" name="name" required /> 
       </div> 
       <div class="input__container"> 
         <label for="email">Email</label> 
         <input type="email" id="email" name="email" required /> 
       </div> 
       <div class="input__container"> 
         <label for="message">Message</label> 
         <textarea id="message" name="message" rows="4" required></textarea> 
       </div> 
       <button>Submit</button> 
     </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:

Susisiekimo formos formavimas

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 5px rgba(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__container label { font-size: 1.6rem; } 
 
.input__container input, 
textarea { 
 padding: 1rem 2rem; 
 border-radius: 5px; 
 border: 1px solid #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 pusės formos patvirtinimui . Norėdami pradėti, sukurkite scenarijaus žymą HTML failo pabaigoje ir taikykite formos elementą.

 <script> 
 "use strict"; 
    const form = document.getElementById("form"); 
</script>

Tada prie formos pridėkite įvykių klausytoją, kad naudotojas pateiktų informaciją.

 form.addEventListener("submit", function (event) { });

Tada neleiskite atlikti numatytojo puslapio perkėlimo veiksmo pagal formas ir pasirinkite reikšmę el. pašto lauke.

 form.addEventListener("submit", function (event) { 
    // Prevent page reload on submit 
    event.preventDefault();  
    // Selecting the email value filled by the user 
    const email = document.getElementById("email").value; 
});

Galiausiai naudokite reguliariąsias išraiškas, kad patikrintumėte vartotojo el. pašto galiojimą ir parodytumėte pranešimą pagal el. pašto reikšmę.

 form.addEventListener("submit", function (event) { 
    // Preventing page reload on submit 
    event.preventDefault();  
 
    // Selecting the email value filled by the user 
    const email = document.getElementById("email").value; 
 
    // Checking for valid email using a simple regex pattern 
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 
 
    if (!emailPattern.test(email)) { 
      alert("Wrong email format"); 
      return; 
    } 
 
    // If everything passes, show success message 
    alert("Form submitted successfully"); 
});

Šis veiksmas padės išvengti dažnų klaidų ir užtikrinti, kad vartotojas pateiktų tik tinkamus duomenis.

Galutinės kontaktinės formos testavimas ir trikčių šalinimas

Joks projektas nėra baigtas be kruopštaus testavimo. Kad forma veiktų tinkamai, įveskite reikiamas reikšmes, pateikite formą ir patikrinkite, ar ji duoda numatytus rezultatus.

nemokama teksto ir skambučių programa naudojant „Wi -Fi“

Tinkinkite savo kontaktinę formą

Sukūrėte pagrindinę savo svetainės kontaktinę formą. Įvaldote projekto sąranką, HTML struktūrą, CSS stilių, JavaScript formos patvirtinimą ir kruopštų testavimą.

Gerai sukurta kontaktų forma pagerina vartotojo sąveiką, todėl lankytojams lengviau su jumis susisiekti. Nesivaržykite tinkinti ir išplėsti jo funkcijas, kad atitiktų jūsų konkrečius poreikius.