Lär dig att skapa ett enkelt kontaktformulär för din webbplats med enkla steg, vilket säkerställer effektiv kommunikation med din publik.

Kontaktformulär är en avgörande komponent på webbplatser, vilket gör att användare kan nå ut till dig med förfrågningar, feedback eller förfrågningar.

Här får du lära dig hur du skapar ett grundläggande kontaktformulär för din webbplats. Från att sätta upp projektet till att lägga till formulärvalidering och styling, för att säkerställa att du har ett funktionellt och tilltalande kontaktformulär i slutet.

Konfigurera projektet

Innan du börjar koda, se till att din utvecklingsmiljö är konfigurerad. Öppna önskad textredigerare eller en av de rekommenderade integrerade utvecklingsmiljöerna (IDE) tycka om Visual Studio Code eller Sublim text.

Skapa en projektmapp för att hålla dina HTML- och CSS-filer organiserade.

Inom den här mappen skapar du separata filer för HTML (index.html) och CSS (style.css). Slutligen, länka din CSS-fil i ditt HTML-dokument avsnitt med hjälp av märka.

instagram viewer

Skapa HTML-strukturen

Grunden för alla kontaktformulär är dess HTML-struktur. Så här kan du skapa de nödvändiga HTML-elementen för ditt kontaktformulär.

<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 ovan skapar ett formulärelement och kapslar flera inmatningsfält för att ta emot användarinmatningar för kontaktformuläret.

För tillfället ser ditt kontaktformulär ut så här:

Ett attraktivt och användarvänligt kontaktformulär förbättrar den övergripande användarupplevelsen. CSS-koden nedan använder flexbox- och CSS-boxmodellegenskaper som utfyllnad och marginal för att utforma kontaktformuläret för ett bättre 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;
}

Ditt kontaktformulär ser nu ut så här:

Implementera formulärvalidering

Att säkerställa noggrannheten och fullständigheten i den information som användaren tillhandahåller är av största vikt. Ett effektivt tillvägagångssätt innebär använder JavaScript för formulärvalidering på klientsidan. För att komma igång, skapa en skripttagg i slutet av HTML-filen och rikta in formulärelementet.