Naučte sa jednoduchými krokmi vytvoriť jednoduchý kontaktný formulár pre svoju webovú stránku, čím zaistíte efektívnu komunikáciu s publikom.

Kontaktné formuláre sú kľúčovou súčasťou webových stránok a umožňujú používateľom osloviť vás s otázkami, spätnou väzbou alebo žiadosťami.

Tu sa dozviete, ako vytvoriť základný kontaktný formulár pre váš web. Od nastavenia projektu až po pridanie overenia formulára a štýlu, aby ste na konci mali funkčný a príjemný kontaktný formulár.

Nastavenie projektu

Skôr ako začnete s kódovaním, uistite sa, že je vaše vývojové prostredie nastavené. Otvorte preferovaný textový editor alebo jedno z odporúčaných integrovaných vývojových prostredí (IDE) Páči sa mi to Kód Visual Studio alebo Vznešený text.

Vytvorte priečinok projektu, aby ste mali súbory HTML a CSS usporiadané.

V tomto priečinku vytvorte samostatné súbory pre HTML (index.html) a CSS (style.css). Nakoniec prepojte svoj súbor CSS v dokumentoch HTML oddiel pomocou tag.

Vytvorenie štruktúry HTML

Základom každého kontaktného formulára je jeho HTML štruktúra. Tu je návod, ako môžete vytvoriť potrebné prvky HTML pre svoj kontaktný formulár.

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>

Vyššie uvedený kód HTML vytvorí prvok formulára a vnorí viacero vstupných polí, aby mohol prijímať vstupy používateľov pre kontaktný formulár.

Váš kontaktný formulár momentálne vyzerá takto:

Atraktívny a užívateľsky prívetivý kontaktný formulár zvyšuje celkovú používateľskú skúsenosť. Kód CSS uvedený nižšie používa vlastnosti modelu flexbox a CSS box, ako je výplň a okraj na úpravu kontaktného formulára pre lepší vzhľad.

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

Váš kontaktný formulár teraz vyzerá takto:

Implementácia overenia formulára

Zabezpečenie presnosti a úplnosti informácií poskytovaných používateľom je prvoradé. Jeden účinný prístup zahŕňa pomocou JavaScriptu na overenie formulárov na strane klienta. Ak chcete začať, vytvorte značku skriptu na konci súboru HTML a zacieľte na prvok formulára.