Kapcsolati űrlap létrehozása WordPress-ben (4 egyszerű és ingyenes bővítmény)

Ebben a cikkben bemutatjuk, hogy hogyan hozhatsz létre egy kapcsolati űrlapot (vagy bármilyen egyéb felhasználású űrlapot) a WordPress-ben. Ehhez négy egyszerű, könnyen használható és ingyenes bővítményt ajánlunk a figyelmetekbe, illetve egy bővítményt részletesen bemutatva, létre is hozunk egy űrlapot.

WordPress alapok kezdőknek, WP ismeretek kurzus borítókép

Kapcsolati űrlap létrehozása WordPress-ben (4 egyszerű és ingyenes bővítmény)

Ebben a cikkben bemutatjuk, hogy hogyan hozhatsz létre egy kapcsolati űrlapot (vagy bármilyen egyéb felhasználású űrlapot) a WordPress-ben. Ehhez négy egyszerű, könnyen használható és ingyenes bővítményt ajánlunk a figyelmetekbe, illetve egy bővítményt részletesen bemutatva, létre is hozunk egy űrlapot.

Mi az a kapcsolati űrlap és mire való?

A kapcsolati űrlap (angolul contact form vagy szimplán form, mint űrlap) egy olyan felület, ahol a felhasználók üzenetet küldhetnek a weboldal tulajdonosának. Ez a felület általában a weboldalba beágyazva található, így az üzenetküldéshez nem szükséges megnyitnunk egy e-mail küldő rendszert, például a Gmailt.

Egy (kapcsolati) űrlap különböző mezőket tartalmaz, amelyeket a felhasználóknak kell kitölteniük. Az űrlap mezői bekérhetik a felhasználó nevét, e-mail címét, telefonszámát, üzenetét, illetve bármilyen a weboldal üzemeltetője által fontosnak tartott információt.

Amikor a felhasználók elküldik az űrlapot, akkor az a weboldal üzemeltetőjéhez, vagy az ügyfélszolgálathoz kerül. Ez lehet egy e-mail postafiók, vagy egy külön erre a célra kialakított rendszer is. Az üzenet feldolgozása után általában a felhasználó által megadott e-mail címen vagy telefonszámon jelentkeznek. Ez leginkább a kapcsolatfelvétel céljától függ, hibakezelés, általános célú kérdések esetén valószínűleg inkább e-mailválaszra számíthatunk, míg árajánlatkérés, értékesítéssel kapcsolatos kommunikáció során valószínűleg inkább a telefonos beszélgetést preferálják.

A kapcsolati űrlapok hasznosak lehetnek, ha a weboldal tulajdonosa azt szeretné, hogy könnyen kapcsolatba tudjanak lépni vele, így ideálisak lehetnek árajánlatkéréshez, visszajelzéshez, panaszkezeléshez vagy szimplán egyszerű kérdések feltevéséhez.

A kapcsolati űrlapok általában a Kapcsolat oldalon vagy egyszerűbb, szolgáltatást kínáló oldalak esetében a főoldalon jelennek meg.

Hogyan hozhatom létre őket?

Űrlapok létrehozására több mód is van, de biztosan állíthatjuk, hogy a legegyszerűbb és a legtöbb későbbi problémától megkímélő módszer, ha valamilyen űrlapkészítő bővítményt használunk. Alább bemutatunk nektek 4 különböző WordPress bővítményt, amelyek mindegyike alkalmas űrlapok készítésére. Ezek a bővítmények már több százezer letöltésnél járnak, így azt mondhatjuk, hogy ezek az űrlapkészítő pluginok a legnépszerűbbek a piacon.

A bővítmények egy része ingyenesen használható, kiegészülve néhány prémium funkcióval, illetve van köztük olyan is, amely teljes mértékben fizetős. Illetve a bővítmények bemutatása után, egy bővítményt részletesen bemutatva, elkészítünk egy konkrét, működő űrlapot is.

Contact Form by WPForms

A WPForms csapatának elve, hogy egy űrlapelkészítéséhez nincs szükség szakemberre. Ezen elvet szem előtt tartva készítették el a Contact Form névre keresztelt bővítményt, így ez az űrlapkészítő egy könnyen kezelhető, erőteljes fogd és vidd (drag & drop) szerkesztővel rendelkező bővítmény.

Segítségével készíthetünk kapcsolati űrlapokat, visszajelzési felületeket, feliratkozói űrlapokat, fizetési felületeket és más egyéb célú űrlapokat is.

A bővítmény ingyenesen használható, de van prémium verziója is.

Gravity Forms

A Gravity Forms egy fizetős, ám rendkívül sokat kínáló űrlapkészítő bővítmény. Tartalmaz vizuális szerkesztőt, Mailchimp integrációt, online fizetési funkciókat, munkafolyamat automatizálást, feltételes utasításokat, fájlfeltöltési lehetőségeket és még sok mást.

A bővítményről még több információt találhattok a hivatalos weboldalán.

Ninja Forms

A következő bővítmény az egyik legfelhasználóbarátabb űrlapkészítő. Segítségével készíthetünk fizetési és támogatási felületeket, regisztrációs és leadgyűjtő űrlapokat. Továbbá tartalmaz előre elkészített sablonokat, integrációs lehetőségeket és még GDPR kompatibilis is.

A bővítményt részletes leírását itt találhatjátok.

Contact Form 7

A legutolsó bővítmény már több, mint 5 millió aktív telepítésnél tart, az értékelések túlnyomó többsége 5 csillagos. Segítségével összetett kapcsolati űrlapot készíthetünk, kezelhetünk, melyek Ajax támogatással, illetve Captcha védelemmel vannak ellátva.

A bővítmény ingyenesen elérhető a WordPress bővítménytárában.

Űrlap létrehozása Contact Form by WPForms bővítménnyel (Részletes leírás)

Na most, hogy végignéztük a legnépszerűbb űrlapkészítő WordPress bővítményeket, itt az idő, hogy egyet részletesen is bemutassunk, és elkészítünk a segítségével egy használható űrlapot.

Az űrlap létrehozásához kövesd az alábbi lépéseket..

1. lépés: Telepítsd és aktiváld a Contact Form by WPForms plugint. (Magyar WordPress esetében általában a következő címmel található meg: Kapcsolati űrlap a WPForms-tól – Húzd & Dobd típusú kapcsolati űrlap építő a WordPresshez)

2. lépés: Menj a Bővítmények menübe a WordPress admin felületén és kattints a WPForms Lite plugin alatti Settings gombra.

3. lépés: Az oldalsó menüben válaszd az Add New alpontot.

image 14
Kattints a képre a nagyításhoz!

4. lépés: Zárd be a felugró ablakokat, ha elsőnek használod. (Let’s Go, Continue és X gombokkal.)

5. lépés: Nevezd el az űrlapot a Name Your Form résznél.

6. lépés: Válassz egy űrlapsablont.

  • Blank Form: egy üres űrlap, amelyet teljes mértékben te építhetsz fel
  • Simple Contact Form: egyszerű kapcsolatfelvételi űrlap
  • Newsletter Signup Form: hírlevélre való feliratkozáshoz ajánlott


A kiválasztott sablon neve alatt kattintsunk a Use Template gombra.

7. lépés: Szintén zárd be a felugró ablakokat, ha elsőnek használod. (Let’s Go, Continue és X gombokkal.)

8. lépés: Szerkeszd meg az űrlapot. A kiválasztott sablon alapján már lesz egy alap űrlapunk, amelyet szerkeszthetünk.

image 16
Kattints a képre a nagyításhoz!

Ha csak a szöveget szeretnénk lefordítani, akkor kattintsunk rá az egyik elemre, és a bal oldali menüben írjuk át a megjelenő szöveget.

Ha az egyik űrlapelem nem tetszik, akkor szintén kattintsunk rá egy elemre, majd a szemetesláda ikonnal törölhetjük az adott elemet.

Ha új elemet szeretnénk hozzáadni, akkor az Add Fields menüpont alatt látható elemeket az egeret lenyomva behúzhatjuk az űrlap azon pontjára, ahol szeretnénk megjelentetni.

9. lépés: A bal oldali SettingsNotifications fül alatt beállíthatjuk, hogy mely e-mail címre (Send To Email Address) kapjuk meg az üzeneteket, illetve azt is, hogy mely e-mail címről küldjük ki a(z esetleges) válaszüzeneteket.

Csapatunk, illetve a bővítmény készítői alapján is erősen ajánlott a WP Mail SMTP bővítmény telepítése, ha problémák adódnak az e-mailek kiküldésével.

10. lépés: Mentsük el az űrlapot a Save gombbal.

11. lépés: Nyomjuk meg a fenti Embed gombot, majd válasszuk ki, hogy már egy meglévő oldalra (Select Existing Page) szeretnénk beilleszteni az űrlapot, vagy létrehozunk-e egy újat (Create New Page) számára. Mindkét esetben válasszuk ki vagy adjuk meg a használni kívánt oldalt és bökjünk rá a Let’s Go gombra.

Ha nem oldalba szeretnénk beilleszteni az űrlapot, akkor az Embed fül alatt kattintsunk az „use a shortcode” szövegre. Ezt a shortcode-ot beilleszthetjük a sablonunk forráskódjába, vagy pedig a Gutenberg szerkesztőben egy HTML kódblokkba.

12. lépés: Kövessük az útmutatót: kattintsunk a plusz jelre, majd válasszuk ki a WPForms blokkot. A blokknak adjuk meg, hogy mely űrlapot jelenítse meg, majd végül mentsük el az egész oldalt a fenti Frissítés gombbal.

image 17
Kattints a képre a nagyításhoz!

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!