Kā izveidot vienkāršu saziņas veidlapu, izmantojot HTML, CSS un JavaScript

Saziņas veidlapas ir būtiska vietņu sastāvdaļa, kas ļauj lietotājiem sazināties ar jums ar jautājumiem, atsauksmēm vai pieprasījumiem.

Šeit jūs uzzināsit, kā izveidot pamata saziņas veidlapu savai vietnei. No projekta iestatīšanas līdz veidlapas apstiprināšanas un stila pievienošanai, nodrošinot funkcionālas un patīkamas saziņas formas līdz beigām.

Projekta iestatīšana

Pirms sākat kodēšanu, pārliecinieties, vai ir iestatīta izstrādes vide. Atveriet vēlamo teksta redaktoru vai viena no ieteicamajām integrētajām izstrādes vidēm (IDE) patīk Visual Studio kods vai Cildens teksts.

Izveidojiet projekta mapi, lai sakārtotu savus HTML un CSS failus.

Šajā mapē izveidojiet atsevišķus failus HTML (index.html) un CSS (stils.css). Visbeidzot, saistiet savu CSS failu savā HTML dokumentā sadaļu, izmantojot tagu.

HTML struktūras izveide

Jebkuras saziņas formas pamatā ir tās HTML struktūra. Lūk, kā jūs varat izveidot nepieciešamos HTML elementus savai saziņas veidlapai.

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

Iepriekš minētais HTML kods izveido veidlapas elementu un ligzdo vairākus ievades laukus, lai saņemtu lietotāja ievades saziņas veidlapai.

Šobrīd jūsu saziņas veidlapa izskatās šādi:

Pievilcīga un lietotājam draudzīga saziņas forma uzlabo kopējo lietotāja pieredzi. Tālāk norādītajā CSS kodā tiek izmantoti flexbox un CSS kastes modeļa rekvizīti, piemēram, polsterējums un piemale, lai saziņas veidlapu veidotu labākam izskatam.

* {
 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ūsu saziņas veidlapa tagad izskatās šādi:

Veidlapu apstiprināšanas ieviešana

Sevišķi svarīgi ir nodrošināt lietotāja sniegtās informācijas precizitāti un pilnīgumu. Viena efektīva pieeja ietver izmantojot JavaScript klienta puses veidlapu validācijai. Lai sāktu, izveidojiet skripta tagu HTML faila beigās un atlasiet veidlapas elementu.