Hur man skapar ett enkelt kontaktformulär med HTML, CSS och JavaScript
Kontaktformulär är en viktig del av webbplatser och gör det möjligt för användare att kontakta dig med frågor, feedback eller önskemål.
I den här handledningen guidar vi dig genom de steg som krävs för att skapa ett grundläggande webbformulär för din webbplats. Detta inkluderar att etablera projektet, implementera formulärvalidering och anpassa dess utseende för att uppnå ett fullt fungerande och visuellt tilltalande kontaktformulär i slutet av våra instruktioner.
Konfigurera projektet
Innan du börjar koda måste du se till att din utvecklingsmiljö är konfigurerad. Öppna din föredragna textredigerare eller en av de rekommenderade integrerade utvecklingsmiljöerna (IDE) som Visual Studio Code eller Sublime Text .
För att hålla ordning och reda rekommenderar vi att du skapar en särskild projektmapp där alla dina HTML- och CSS-filer samlas på en central plats. På så sätt kan du enkelt hitta och komma åt dessa dokument efter behov.
För att organisera innehållet på din webbsida på rätt sätt rekommenderar vi att du skapar en katalogstruktur med olika mappar för olika typer av tillgångar. I projektets rotkatalog skapar du två separata filer - en med namnet “index.html” som kommer att fungera som huvudingång för din webbsida, och en med namnet “style.css” som innehåller den stilmall som definierar det visuella utseendet på din webbplats. Se dessutom till att det finns en lämplig länkmekanism mellan dessa två filer så att den nödvändiga stylingen kan tillämpas på HTML-innehållet. För att uppnå detta, infoga en
Skapa HTML-strukturen
Den grundläggande komponenten i alla kontaktformulär ligger i dess HTML-arkitektur. Följ dessa steg för att skapa de HTML-komponenter som krävs för ett kontaktformulär.
<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>
Den medföljande HTML-koden genererar en formulärkomponent, som omfattar flera inmatningselement i sin struktur, med avsikten att acceptera användarinmatade data för ett kontaktformulär.
För närvarande ser vårt kontaktformulär ut på följande sätt:
Styling av kontaktformuläret
Att använda ett lockande och intuitivt kontaktformulär kan avsevärt förbättra den allmänna användarupplevelsen. Den medföljande CSS-koden använder flexbox, tillsammans med CSS-boxmodellattribut som padding och margin, för att skapa en tilltalande visuell presentation för kontaktformuläret.
* {
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;
}
Ditt kontaktformulär ser nu ut så här:
Implementering av formulärvalidering
Det är viktigt att säkerställa att de data som användarna tillhandahåller är korrekta och fullständiga. En tillförlitlig metod för att uppnå detta är att använda JavaScript på klientsidan för att validera formulär. För att initiera denna process, lägg till en script-tagg mot slutet av ditt HTML-dokument och rikta den mot det önskade formulärelementet.
<script>
"use strict";
const form = document.getElementById("form");
</script>
Om du vill lägga till en event-lyssnare för att hantera formulärinlämningar kan du använda JavaScript eller jQuery enligt följande:javascript// Med vanilla JavaScriptdocument.getElementById(‘myForm’).addEventListener(‘submit’, function(event) {// Hantera formulärinlämningen här});// Med jQuery$(’#myForm’). on(‘submit’, function(e) {e.preventDefault(); // förhindra standardbeteendet för formulärinlämning// Hantera formulärinlämning här});
form.addEventListener("submit", function (event) { });
Följ dessa steg för att undvika den automatiska siduppdatering som sker när ett formulär skickas in och istället välja att behålla det aktuella värdet i fältet “email”:
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;
});
Använd slutligen regex-mönster för att validera den inmatade e-postadressen och visa ett lämpligt svar baserat på dess äkthet.
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");
});
Denna åtgärd syftar till att undvika typiska misstag och garantera att användaren endast tillhandahåller acceptabel information, vilket säkerställer noggrannhet i inlämningsprocessen.
Testning och felsökning av det slutliga kontaktformuläret
För att ett projekt ska kunna anses vara helt genomfört måste det genomgå noggranna tester för att bekräfta dess funktionalitet. För att åstadkomma detta bör du ange lämpliga data i formulärfälten, initiera inlämning och utvärdera om de förväntade resultaten har uppnåtts.
Din webbläsare stöder inte videotaggen.
Anpassa ditt kontaktformulär
Grattis till att du har lyckats skapa ett grundläggande kontaktformulär för din webbplats! Din skicklighet i att sätta upp projekt, bygga HTML-strukturer, utforma CSS-stilar, implementera JavaScript-formulärvalideringar och genomföra rigorösa tester är berömvärd.
Ett genomtänkt utformat kontaktformulär kan förbättra användarupplevelsen avsevärt genom att underlätta kommunikationen mellan besökare och webbplatsens ägare. Det rekommenderas starkt att du anpassar och utökar dess funktioner enligt dina unika krav.