Een eenvoudig contactformulier maken met HTML, CSS en JavaScript
Contactformulieren zijn een cruciaal onderdeel van websites, waarmee gebruikers contact met u kunnen opnemen met vragen, feedback of verzoeken.
In deze tutorial begeleiden we u door de stappen die nodig zijn om een fundamenteel webformulier voor uw site te maken. Dit omvat het opzetten van het project, het implementeren van formuliervalidatie en het aanpassen van het uiterlijk om aan het einde van onze instructies een volledig functionerend en visueel aantrekkelijk contactformulier te hebben.
Het project opzetten
Voordat u begint met coderen, moet u ervoor zorgen dat uw ontwikkelomgeving is ingesteld. Open de teksteditor van uw voorkeur of een van de aanbevolen geïntegreerde ontwikkelomgevingen (IDE’s) zoals Visual Studio Code of Sublime Text .
Om het gevoel van organisatie te behouden, is het aan te raden om een speciale projectmap te maken waarin al je HTML- en CSS-bestanden op één centrale locatie worden opgeslagen. Zo kun je deze documenten gemakkelijk terugvinden en openen als dat nodig is.
Om de inhoud van je webpagina goed te organiseren, kun je het beste een mappenstructuur maken met verschillende mappen voor verschillende soorten onderdelen. In de hoofdmap van je project maak je twee aparte bestanden aan: een met de naam “index.html”, die zal dienen als het hoofdstartpunt voor je webpagina, en een met de naam “style.css”, die het stylesheet bevat dat het visuele uiterlijk van je site bepaalt. Zorg er bovendien voor dat er een geschikt koppelingsmechanisme tussen deze twee bestanden bestaat, zodat de benodigde opmaak kan worden toegepast op de HTML-inhoud. Om dit te bereiken voeg je een
HTML-structuur maken
Het fundamentele onderdeel van elk contactformulier is de HTML-architectuur. Volg deze stappen om de vereiste HTML-componenten voor een contactformulier te maken.
<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>
De meegeleverde HTML-code genereert een formuliercomponent die verschillende invoerelementen in zijn structuur bevat, met de bedoeling gegevens te accepteren die door de gebruiker zijn ingevoerd voor een contactformulier.
Momenteel ziet ons contactformulier er als volgt uit:
Het contactformulier stylen
Het gebruik van een aantrekkelijk en intuïtief contactformulier kan de algemene gebruikerservaring aanzienlijk verbeteren. De meegeleverde CSS-code maakt gebruik van flexbox, samen met CSS-kenmerken voor boxmodellen zoals opvulling en marge, om een aantrekkelijke visuele presentatie voor het contactformulier te creëren.
* {
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;
}
Je contactformulier ziet er nu zo uit:
Formuliervalidatie implementeren
Ervoor zorgen dat de gegevens die gebruikers verstrekken nauwkeurig en volledig zijn, is cruciaal. Een betrouwbare methode om dit te bereiken is door JavaScript aan de clientzijde te gebruiken om formulieren te valideren. Om dit proces te starten, voeg je aan het einde van je HTML-document een scripttag toe die naar het gewenste formulierelement wijst.
<script>
"use strict";
const form = document.getElementById("form");
</script>
Om een gebeurtenisluisteraar toe te voegen voor het afhandelen van formulierinzendingen, kun je JavaScript of jQuery als volgt gebruiken:javascript//vanilla JavaScript gebruikendocument.getElementById(‘myForm’).addEventListener(‘submit’, function(event) {//Hier de formulierinzending afhandelen});//JQuery gebruiken$(’#myForm’). on(‘submit’, function(e) {e.preventDefault(); // voorkom standaardgedrag bij het indienen van een formulier//handel de indiening van een formulier hier af});
form.addEventListener("submit", function (event) { });
Volg deze stappen om de automatische paginavernieuwing te voorkomen die optreedt bij het indienen van een formulier en in plaats daarvan ervoor te kiezen om de huidige geselecteerde waarde in het veld “e-mail” te behouden:
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;
});
Maak uiteindelijk gebruik van regexpatronen om het ingevoerde e-mailadres te valideren en een passend antwoord weer te geven op basis van de echtheid ervan.
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");
});
Deze actie is erop gericht om typische fouten te voorkomen en te garanderen dat de gebruiker alleen aanvaardbare informatie verstrekt, waardoor de nauwkeurigheid van het indieningsproces wordt gegarandeerd.
Testen en oplossen van problemen met het definitieve contactformulier
Om een project als volledig gerealiseerd te beschouwen, moet het rigoureus getest worden om de functionaliteit te bevestigen. Om dit te bereiken, moet je de juiste gegevens in de formuliervelden invoeren, de verzending starten en evalueren of de verwachte resultaten zijn bereikt.
Uw browser ondersteunt de videotag niet.
Uw contactformulier aanpassen
Gefeliciteerd met het succesvol maken van een fundamenteel contactformulier voor uw website! Je vaardigheid in het opzetten van projecten, het bouwen van HTML-structuren, het ontwerpen van CSS-stijlen, het implementeren van JavaScript-formuliervalidaties en het uitvoeren van strenge tests is prijzenswaardig.
Een doordacht ontworpen contactformulier kan de gebruikerservaring aanzienlijk verbeteren door de communicatie tussen websitebezoekers en de website-eigenaar te vergemakkelijken. Het wordt ten zeerste aanbevolen om de mogelijkheden ervan te personaliseren en uit te breiden volgens uw unieke vereisten.