Leer hoe u in eenvoudige stappen een eenvoudig contactformulier voor uw website kunt maken, zodat u verzekerd bent van effectieve communicatie met uw publiek.

Contactformulieren zijn een cruciaal onderdeel van websites, waardoor gebruikers contact met u kunnen opnemen met vragen, feedback of verzoeken.

Hier leert u hoe u een eenvoudig contactformulier voor uw website maakt. Van het opzetten van het project tot het toevoegen van formuliervalidatie en styling, zodat u aan het eind een functioneel en prettig contactformulier heeft.

Het project opzetten

Voordat u begint met coderen, moet u ervoor zorgen dat uw ontwikkelomgeving is ingesteld. Open uw favoriete teksteditor of een van de aanbevolen geïntegreerde ontwikkelomgevingen (IDE's) leuk vinden Visual Studio-code of Sublieme tekst.

Maak een projectmap om uw HTML- en CSS-bestanden georganiseerd te houden.

Maak in deze map afzonderlijke bestanden voor HTML (index.html) en CSS (stijl.css). Koppel ten slotte uw CSS-bestand in uw HTML-document sectie met behulp van de label.

Het creëren van de HTML-structuur

De basis van elk contactformulier is de HTML-structuur. Zo kunt u de benodigde HTML-elementen voor uw contactformulier maken.

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

De bovenstaande HTML-code creëert een formulierelement en nestelt meerdere invoervelden om gebruikersinvoer voor het contactformulier te ontvangen.

Op dit moment ziet uw contactformulier er als volgt uit:

Een aantrekkelijk en gebruiksvriendelijk contactformulier verbetert de algehele gebruikerservaring. De onderstaande CSS-code gebruikt flexbox- en CSS-boxmodeleigenschappen zoals opvulling en marge om het contactformulier een beter uiterlijk te geven.

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

Uw contactformulier ziet er nu als volgt uit:

Formuliervalidatie implementeren

Het garanderen van de juistheid en volledigheid van door gebruikers verstrekte informatie is van het allergrootste belang. Eén effectieve aanpak houdt in JavaScript gebruiken voor formuliervalidatie aan de clientzijde. Om te beginnen maakt u een scripttag aan het einde van uw HTML-bestand en richt u zich op het formulierelement.