Tanuljon meg egyszerű lépésekkel létrehozni egy egyszerű kapcsolatfelvételi űrlapot webhelyéhez, amely hatékony kommunikációt biztosít a közönséggel.

A kapcsolatfelvételi űrlapok a webhelyek kulcsfontosságú összetevői, amelyek lehetővé teszik a felhasználók számára, hogy megkeressék Önt kérdésekkel, visszajelzésekkel vagy kérésekkel.

Itt megtudhatja, hogyan hozhat létre alapvető kapcsolatfelvételi űrlapot a webhelyéhez. A projekt beállításától az űrlapellenőrzés és -stílus hozzáadásáig, így biztosítva, hogy a végére egy működőképes és tetszetős kapcsolatfelvételi űrlapot kapjon.

A projekt beállítása

A kódolás megkezdése előtt győződjön meg arról, hogy a fejlesztői környezet be van állítva. Nyissa meg a kívánt szövegszerkesztőt vagy az egyik ajánlott integrált fejlesztői környezet (IDE) mint Visual Studio kód vagy Magasztos szöveg.

Hozzon létre egy projektmappát a HTML- és CSS-fájlok rendszerezéséhez.

Ebben a mappában hozzon létre külön fájlokat a HTML (index.html) és CSS (stílus.css). Végül csatolja a CSS-fájlt a HTML-dokumentumban szakasz segítségével a címke.

instagram viewer

A HTML-struktúra létrehozása

Minden kapcsolatfelvételi űrlap alapja a HTML-struktúra. Így hozhatja létre a kapcsolatfelvételi űrlaphoz szükséges HTML elemeket.

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

A fenti HTML-kód létrehoz egy űrlapelemet, és több beviteli mezőt ágyaz be a kapcsolatfelvételi űrlap felhasználói beviteleinek fogadása érdekében.

A kapcsolatfelvételi űrlap jelenleg így néz ki:

A vonzó és felhasználóbarát kapcsolatfelvételi űrlap javítja az általános felhasználói élményt. Az alábbi CSS-kód a flexbox és a CSS-doboz modell tulajdonságait, például a kitöltést és a margót használja a kapcsolatfelvételi űrlap stílusához a jobb megjelenés érdekében.

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

Kapcsolatfelvételi űrlapja most így néz ki:

Az űrlap érvényesítésének végrehajtása

A felhasználók által megadott információk pontosságának és teljességének biztosítása kiemelten fontos. Az egyik hatékony megközelítés magában foglalja JavaScript használatával az ügyféloldali űrlapérvényesítéshez. A kezdéshez hozzon létre egy szkriptcímkét a HTML-fájl végén, és célozza meg az űrlapelemet.