Kuinka luoda yksinkertainen yhteydenottolomake HTML: n, CSS: n ja JavaScriptin avulla

Yhteydenottolomakkeet ovat olennainen osa verkkosivustoja, joiden avulla käyttäjät voivat ottaa sinuun yhteyttä tiedustelujen, palautteen tai pyyntöjen kanssa.

Täällä opit luomaan perusyhteyslomakkeen verkkosivustollesi. Projektin perustamisesta lomakkeiden vahvistuksen ja muotoilun lisäämiseen, varmistaen, että sinulla on toimiva ja miellyttävä yhteydenottolomake loppuun mennessä.

Projektin perustaminen

Ennen kuin aloitat koodauksen, varmista, että kehitysympäristösi on määritetty. Avaa haluamasi tekstieditori tai yksi suositelluista integroiduista kehitysympäristöistä (IDE) Kuten Visual Studio Code tai Ylivoimaista tekstiä.

Luo projektikansio pitääksesi HTML- ja CSS-tiedostot järjestyksessä.

Luo tähän kansioon erilliset tiedostot HTML: lle (index.html) ja CSS (tyyli.css). Lopuksi linkitä CSS-tiedostosi HTML-dokumenttiin osio käyttämällä tag.

HTML-rakenteen luominen

Yhteydenottolomakkeen perusta on sen HTML-rakenne. Näin voit luoda tarvittavat HTML-elementit yhteydenottolomakkeellesi.

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

Yllä oleva HTML-koodi luo lomakeelementin ja yhdistää useita syöttökenttiä vastaanottaakseen käyttäjien syötteitä yhteydenottolomakkeeseen.

Tällä hetkellä yhteydenottolomakkeesi näyttää tältä:

Houkutteleva ja käyttäjäystävällinen yhteydenottolomake parantaa yleistä käyttökokemusta. Alla oleva CSS-koodi käyttää flexbox- ja CSS-laatikkomalliominaisuuksia, kuten täyte ja marginaali, muotoillakseen yhteydenottolomakkeen paremman ulkonäön saavuttamiseksi.

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

Yhteydenottolomakkeesi näyttää nyt tältä:

Lomakkeen validoinnin toteuttaminen

Käyttäjien toimittamien tietojen oikeellisuuden ja täydellisyyden varmistaminen on ensiarvoisen tärkeää. Yksi tehokas lähestymistapa sisältää JavaScriptin käyttö asiakaspuolen lomakkeiden validointiin. Aloita luomalla komentosarjatunniste HTML-tiedoston loppuun ja kohdistamalla lomakeelementti.