Jak stworzyć prosty formularz kontaktowy przy użyciu HTML, CSS i JavaScript?
Formularze kontaktowe są kluczowym elementem witryn internetowych, umożliwiającym użytkownikom kontakt z Tobą w celu uzyskania zapytań, opinii lub próśb.
W tym samouczku przeprowadzimy Cię przez kroki niezbędne do utworzenia podstawowego formularza internetowego dla Twojej witryny. Obejmuje to ustanowienie projektu, wdrożenie walidacji formularza i dostosowanie jego wyglądu w celu uzyskania w pełni funkcjonalnego i atrakcyjnego wizualnie formularza kontaktowego na zakończenie naszych instrukcji.
Konfigurowanie projektu
Przed rozpoczęciem kodowania upewnij się, że środowisko programistyczne jest skonfigurowane. Otwórz preferowany edytor tekstu lub jedno z zalecanych zintegrowanych środowisk programistycznych (IDE), takich jak Visual Studio Code lub Sublime Text .
Aby zachować poczucie organizacji, zaleca się utworzenie dedykowanego folderu projektu do przechowywania wszystkich plików HTML i CSS w jednej scentralizowanej lokalizacji. Umożliwi to łatwe zlokalizowanie i dostęp do tych dokumentów w razie potrzeby.
Aby właściwie zorganizować zawartość strony internetowej, zaleca się utworzenie struktury katalogów z odrębnymi folderami dla różnych typów zasobów. W szczególności, w katalogu głównym projektu należy utworzyć dwa oddzielne pliki - jeden o nazwie “index.html”, który będzie służył jako główny punkt wejścia dla strony internetowej, a drugi o nazwie “style.css”, który zawiera arkusz stylów definiujący wygląd witryny. Dodatkowo, upewnij się, że istnieje odpowiedni mechanizm linkowania między tymi dwoma plikami, aby można było zastosować niezbędną stylizację do treści HTML. Aby to osiągnąć, wstaw plik
Tworzenie struktury HTML
Podstawowym elementem każdego formularza kontaktowego jest jego architektura HTML. Aby utworzyć wymagane komponenty HTML dla formularza kontaktowego, wykonaj następujące kroki.
<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>
Dostarczony kod HTML generuje komponent formularza, który obejmuje kilka elementów wejściowych w swojej strukturze, z zamiarem zaakceptowania danych wprowadzonych przez użytkownika do formularza kontaktowego.
Obecnie wygląd naszego formularza kontaktowego wygląda następująco:
Stylizacja formularza kontaktowego
Wykorzystanie atrakcyjnego i intuicyjnego formularza kontaktowego może znacznie poprawić ogólne wrażenia użytkownika. Dostarczony kod CSS wykorzystuje flexbox wraz z atrybutami modelu pudełkowego CSS, takimi jak padding i margin, w celu stworzenia atrakcyjnej prezentacji wizualnej formularza kontaktowego.
* {
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;
}
Twój formularz kontaktowy wygląda teraz następująco:
Implementing Form Validation
Zapewnienie, że dane dostarczane przez użytkowników są dokładne i wyczerpujące, ma kluczowe znaczenie. Niezawodna metoda osiągnięcia tego celu obejmuje wykorzystanie JavaScript po stronie klienta do sprawdzania poprawności formularzy. Aby zainicjować ten proces, dodaj znacznik skryptu na końcu dokumentu HTML, kierując go do żądanego elementu formularza.
<script>
"use strict";
const form = document.getElementById("form");
</script>
Aby dodać detektor zdarzeń do obsługi przesyłania formularzy, można wykorzystać JavaScript lub jQuery w następujący sposób:javascript// Using vanilla JavaScriptdocument.getElementById(‘myForm’).addEventListener(‘submit’, function(event) {// Handle form submission here});// Using jQuery$(’#myForm’). on(‘submit’, function(e) {e.preventDefault(); // prevent default form submission behavior// Handle form submission here});
form.addEventListener("submit", function (event) { });
Aby uniknąć automatycznego odświeżania strony, które występuje podczas wysyłania formularza i zamiast tego wybrać zachowanie aktualnie wybranej wartości w polu “email”, wykonaj następujące kroki:
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;
});
Ostatecznie należy wykorzystać wzorce regex do weryfikacji wprowadzonego adresu e-mail i wyświetlenia odpowiedniej odpowiedzi na podstawie jego autentyczności.
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");
});
Działanie to ma na celu uniknięcie typowych błędów i zagwarantowanie, że użytkownik podaje tylko akceptowalne informacje, zapewniając tym samym dokładność procesu przesyłania.
Testowanie i rozwiązywanie problemów z końcowym formularzem kontaktowym
Aby projekt mógł zostać uznany za w pełni zrealizowany, musi przejść rygorystyczne testy w celu potwierdzenia jego funkcjonalności. Aby to osiągnąć, należy wprowadzić odpowiednie dane do pól formularza, zainicjować przesyłanie i ocenić, czy osiągnięto oczekiwane wyniki.
Twoja przeglądarka nie obsługuje tagu wideo.
Dostosuj swój formularz kontaktowy
Gratulujemy udanego stworzenia podstawowego formularza kontaktowego dla swojej witryny! Twoja biegłość w tworzeniu projektów, konstruowaniu struktur HTML, projektowaniu stylów CSS, wdrażaniu walidacji formularzy JavaScript i przeprowadzaniu rygorystycznych testów jest godna pochwały.
Przemyślany formularz kontaktowy może znacznie poprawić wrażenia użytkownika, ułatwiając komunikację między odwiedzającymi witrynę a jej właścicielem. Zaleca się, aby spersonalizować i rozszerzyć jego możliwości zgodnie z unikalnymi wymaganiami.