Lær å lage et enkelt kontaktskjema for nettstedet ditt med enkle trinn, for å sikre effektiv kommunikasjon med publikum.

Kontaktskjemaer er en avgjørende komponent av nettsteder, som lar brukere kontakte deg med forespørsler, tilbakemeldinger eller forespørsler.

Her lærer du prosessen med å lage et grunnleggende kontaktskjema for nettstedet ditt. Fra å sette opp prosjektet til å legge til skjemavalidering og styling, for å sikre at du har et funksjonelt og behagelig kontaktskjema mot slutten.

Sette opp prosjektet

Før du begynner å kode, sørg for at utviklingsmiljøet ditt er satt opp. Åpne ditt foretrukne tekstredigeringsprogram eller et av de anbefalte integrerte utviklingsmiljøene (IDE) som Visual Studio-kode eller Sublim tekst.

Opprett en prosjektmappe for å holde HTML- og CSS-filene dine organisert.

I denne mappen oppretter du separate filer for HTML (index.html) og CSS (style.css). Til slutt kobler du CSS-filen til HTML-dokumentet delen ved å bruke stikkord.

Opprette HTML-strukturen

Grunnlaget for ethvert kontaktskjema er HTML-strukturen. Slik kan du lage de nødvendige HTML-elementene for kontaktskjemaet ditt.

instagram viewer 

<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 oppretter et skjemaelement og legger inn flere inndatafelt for å motta brukerinndata for kontaktskjemaet.

For øyeblikket ser kontaktskjemaet ditt slik ut:

Et attraktivt og brukervennlig kontaktskjema forbedrer den generelle brukeropplevelsen. CSS-koden nedenfor bruker flexbox- og CSS-boksmodellegenskaper som polstring og margin for å style kontaktskjemaet for et bedre utseende.

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

Kontaktskjemaet ditt ser nå slik ut:

Implementering av skjemavalidering

Det er avgjørende å sikre nøyaktigheten og fullstendigheten av informasjonen som er gitt av brukeren. En effektiv tilnærming innebærer bruker JavaScript for skjemavalidering på klientsiden. For å komme i gang, lag en skript-tag på slutten av HTML-filen og målrett mot skjemaelementet.