Lær at oprette en simpel kontaktformular til din hjemmeside med nemme trin, hvilket sikrer effektiv kommunikation med dit publikum.

Kontaktformularer er en afgørende komponent af websteder, som giver brugerne mulighed for at kontakte dig med forespørgsler, feedback eller anmodninger.

Her lærer du processen med at oprette en grundlæggende kontaktformular til din hjemmeside. Fra opsætning af projektet til tilføjelse af formularvalidering og styling, hvilket sikrer, at du har en funktionel og behagelig kontaktformular til sidst.

Opsætning af projektet

Før du begynder at kode, skal du sikre dig, at dit udviklingsmiljø er sat op. Åbn din foretrukne teksteditor eller et af de anbefalede integrerede udviklingsmiljøer (IDE'er) synes godt om Visual Studio kode eller Sublim tekst.

Opret en projektmappe for at holde dine HTML- og CSS-filer organiseret.

I denne mappe skal du oprette separate filer til HTML (index.html) og CSS (style.css). Til sidst skal du linke din CSS-fil i dit HTML-dokument sektion ved hjælp af tag.

instagram viewer

Oprettelse af HTML-strukturen

Grundlaget for enhver kontaktformular er dens HTML-struktur. Sådan kan du oprette de nødvendige HTML-elementer til din kontaktformular.

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

HTML-koden ovenfor opretter et formularelement og indlejrer flere inputfelter for at modtage brugerinput til kontaktformularen.

I øjeblikket ser din kontaktformular således ud:

En attraktiv og brugervenlig kontaktformular forbedrer den samlede brugeroplevelse. CSS-koden nedenfor bruger flexbox- og CSS-boksmodelegenskaber som polstring og margin til at style kontaktformularen for et bedre udseende.

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

Din kontaktformular ser nu sådan ud:

Implementering af formularvalidering

Det er altafgørende at sikre nøjagtigheden og fuldstændigheden af ​​brugerleveret information. En effektiv tilgang involverer bruger JavaScript til formularvalidering på klientsiden. For at komme i gang skal du oprette et script-tag i slutningen af ​​din HTML-fil og målrette mod formularelementet.