Învață să creezi un formular de contact simplu pentru site-ul tău, cu pași simpli, asigurând o comunicare eficientă cu publicul tău.

Formularele de contact sunt o componentă crucială a site-urilor web, permițând utilizatorilor să vă contacteze cu întrebări, feedback sau solicitări.

Aici veți învăța procesul de creare a unui formular de contact de bază pentru site-ul dvs. web. De la configurarea proiectului până la adăugarea de validare a formularului și stil, asigurându-vă că aveți un formular de contact funcțional și plăcut până la sfârșit.

Configurarea Proiectului

Înainte de a începe codarea, asigurați-vă că mediul de dezvoltare este configurat. Deschideți editorul de text preferat sau unul dintre mediile de dezvoltare integrate recomandate (IDE) ca Codul Visual Studio sau Text sublim.

Creați un folder de proiect pentru a vă menține organizate fișierele HTML și CSS.

În acest folder, creați fișiere separate pentru HTML (index.html) și CSS (stil.css). În cele din urmă, conectați fișierul dvs. CSS în documentul HTML secțiunea folosind etichetă.

instagram viewer

Crearea structurii HTML

Fundamentul oricărui formular de contact este structura sa HTML. Iată cum puteți crea elementele HTML necesare pentru formularul dvs. de contact.

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

Codul HTML de mai sus creează un element de formular și imbrica mai multe câmpuri de introducere pentru a primi intrările utilizatorilor pentru formularul de contact.

În acest moment, formularul dvs. de contact arată astfel:

Un formular de contact atractiv și ușor de utilizat îmbunătățește experiența generală a utilizatorului. Codul CSS de mai jos folosește proprietățile modelului de casete flexibile și CSS, cum ar fi umplutura și marginea, pentru a stila formularul de contact pentru un aspect mai bun.

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

Formularul dvs. de contact arată acum astfel:

Implementarea validării formularelor

Asigurarea acurateții și completității informațiilor furnizate de utilizator este esențială. O abordare eficientă implică utilizând JavaScript pentru validarea formularului pe partea clientului. Pentru a începe, creați o etichetă de script la sfârșitul fișierului HTML și vizați elementul de formular.