Naucz się tworzyć prosty formularz kontaktowy dla swojej witryny w prostych krokach, zapewniając skuteczną komunikację z odbiorcami.

Formularze kontaktowe są kluczowym elementem witryn internetowych, umożliwiającym użytkownikom kierowanie zapytań, opinii lub próśb.

Tutaj poznasz proces tworzenia podstawowego formularza kontaktowego dla Twojej witryny. Od skonfigurowania projektu po dodanie walidacji i stylizacji formularza, upewniając się, że na koniec masz funkcjonalny i przyjemny formularz kontaktowy.

Konfiguracja projektu

Zanim zaczniesz kodować, upewnij się, że środowisko programistyczne jest skonfigurowane. Otwórz preferowany edytor tekstu lub jedno z zalecanych zintegrowanych środowisk programistycznych (IDE) tak jak Kod Visual Studio Lub Wzniosły tekst.

Utwórz folder projektu, aby uporządkować pliki HTML i CSS.

W tym folderze utwórz osobne pliki dla HTML (indeks.html) i CSS (styl.css). Na koniec połącz plik CSS w dokumencie HTML sekcja za pomocą etykietka.

Tworzenie struktury HTML

Podstawą każdego formularza kontaktowego jest jego struktura HTML. Oto jak możesz utworzyć niezbędne elementy HTML dla swojego formularza kontaktowego.

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>

Powyższy kod HTML tworzy element formularza i zagnieżdża wiele pól wejściowych, aby otrzymywać dane wejściowe od użytkownika w formularzu kontaktowym.

W tej chwili Twój formularz kontaktowy wygląda następująco:

Atrakcyjny i przyjazny dla użytkownika formularz kontaktowy poprawia ogólne doświadczenie użytkownika. Poniższy kod CSS wykorzystuje właściwości modelu flexbox i CSS box, takie jak dopełnienie i margines, aby nadać styl formularzowi kontaktowemu lepszy wygląd.

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

Twój formularz kontaktowy wygląda teraz tak:

Wdrażanie sprawdzania poprawności formularza

Zapewnienie dokładności i kompletności informacji przekazywanych przez użytkowników jest sprawą najwyższej wagi. Jedno skuteczne podejście obejmuje używanie JavaScript do sprawdzania poprawności formularzy po stronie klienta. Aby rozpocząć, utwórz znacznik skryptu na końcu pliku HTML i wybierz element formularza.