Contact Form 7 – nagy tudás egy kis bővítményben

Mindenkinek megvannak a maga kedvencei – tavasszal Péterünk mutatta be az általa leginkább kedvelt Fast Secure Contact Form űrlapkészítő bővítményt, most pedig gyakori vendégszerzőnk, Pári Balázs ír a Contact Form 7-ről, amelyet ő szokott választani, és amelynek segítségével nagyon egyszerűen hozhatsz létre profi űrlapokat.

A Contact Form 7 használatát ajánlom minden WordPress felhasználónak, a kis vállalati vagy hobby honlapoktól kezdve egészen a nagy portálokig. Ebben a bejegyzésben bemutatom, hogy hogyan készíthetsz egy egyszerű űrlapot.

A szokásos bővítménytelepítés után a Vezérlőpulton létrejön egy Kapcsolat nevű menüpont, a Hozzászólás nevű menüpont alatt. Erre kattintva megtekintheted eddigi űrlapjaidat, szerkesztheted őket és újakat hozhatsz létre. (A bejegyzés képeire kattintva megnézheted őket nagyobb méretben.)

Contact Form 7

Új űrlap létrehozásához kattints a lap tetején levő Új hozzáadása feliratú gombra. Ezután a felugró ablakban válaszd ki az űrlap nyelvét, ez esetünkben az alapértelmezett magyar lesz.

Most pedig nézzük meg lépésről-lépésre, hogy hogyan kell létrehozni, majd egy oldalba beilleszteni egy űrlapot.

 

1. lépés: Az űrlap nevének megadása

Az űrlap nevének módosításához húzd a kurzort a jelenlegi név fölé, majd kattints rá kétszer. Így átalakul beviteli mezővé, amit könnyen szerkeszthetsz. Miután megadtad a megfelelő nevet, kattints egy üres területre, és a beviteli mező értéke elmentődik.

Contact Form 7

2. lépés: Az űrlap szerkesztése

Az űrlap tartalmi részét is nagyon egyszerű szerkeszteni. Egy beviteli mező így épül fel:

<p>Mező neve<br />
[text* your-name] </p>

Tehát nyitsz egy bekezdést, jön a mező neve, majd sortörés, utána a mező rövid kódja (a program generálja), végül pedig lezárod a bekezdést.

A bal oldali ablakba kell írni az űrlap törzsének szövegét, a jobb oldaliban pedig a címkék (azaz a mezők, csak ezt így sikerült fordítani) finomhangolása végezhető el.

Contact Form 7

2/a. (opcionális) lépés: Új címke (azaz új mező) hozzáadása (ha szükséges)

Jobb oldalon kattints a Címke létrehozása nevű legördülő menüre, majd válaszd ki a használni kívánt címke típusát. Ezután megjelennek a címke részletes beállításai. Miután elvégezted a finomhangolást (például meghatároztad a beviteli mezők szélességét), a kapott rövid kódot illeszd be az űrlap törzsébe a bal oldali ablakban.

3. lépés: Az e-mail beállítások elvégzése

Az e-mail nevű dobozban beállíthatod azt, hogy hogyan küldje el Neked a rendszer a kitöltött űrlapot.

Az E-mail (2) nevű jelölődoboz bejelölésével egy második e-mail címre is elküldheted a kitöltött űrlapot, tehát így például másolatot küldhetsz a feladónak vagy értesítheted az üzenetről a munkatársadat is.

Contact Form 7

4. lépés: Az üzenetek megváltoztatása, további beállítások megadása

Az Üzenetek nevű dobozban kedved szerint átírhatod a képernyőn megjelenő visszaigazoló szövegeket. A További beállítások nevű dobozban pedig egyedi (css) kódokkal testreszabhatod űrlapod kinézetét.

Contact Form 7

Contact Form 75. lépés: Az elkészült űrlap mentése

Ha elkészültél az űrlappal, görgess fel a lap tetejére, és mentsd el az elkészült űrlapot. A mentés után kapott kódot másold vágólapra (CTRL+C). Az űrlapot a rövid kódja segítségével kedved szerint beillesztheted (CTRL+V) egy oldalba, egy bejegyzésbe, vagy egy widgetbe is. Ez utóbbi esetben figyelj arra, hogy a mezők ne legyenek szélesebbek, mint az oldalsáv (lásd 2/a. lépés, a mezők finomhangolása).

 

A következő bejegyzésben részletesen bemutatom, hogy hogyan hozhatsz létre egy megrendelő űrlapot, ha terméket vagy szolgáltatást szeretnél eladni a weboldaladon, de csak néhány van, így nem érdemes rá egy komplett webáruházat felhúzni.
(A bejegyzés csak WP-Suli Klub tagok számára lesz elérhető.)

 

Oszd meg Te is:

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ezek is érdekesek lehetnek számodra: 

Ne maradj le semmiről, iratkozz fel hírlevelünkre!

Javasolt eszközök:

Banner250x250.png
Elementor Pro
Generatepress Logo White Asset
GeneratePress
Divi 4.0
Divihello
Prémium támogatás és ajándék Divi licence
Adatvedelem.png
ADATVÉDELEM minta
Aszf.png
Webshop ÁSZF minta

“Contact Form 7 – nagy tudás egy kis bővítményben” bejegyzéshez 42 hozzászólás

  1. Miért van az, hogy nekem nem küldi el az üzenetet? A Tárhelyszolgáltatóm jelzi, hogy email ment ki a gmail címemre de mégsem, hisz nincs sehol (se spam, se kuka se semmi).

    Ha felrakom a Flamingo kiegészítőt, oda bekerül az email, de ez ugye nem megy el a postafiókba.

    • Rengeteg szemből áll ez a lánc, sok helyen lehet az elakadás. A php mail() funkciónak engedélyezve kell lenni a szervereden, ellenőrizni kell a GMail beállításait, a feladót hozzáadni a megbízható címekhez, stb.

  2. Szia!

    Nekem az a gondom van, hogy a wordpress oldalam magyar, de ezt a plugint valamiért csak angolul jeleníti meg, magyart ki se tudok választani a listából. :S mi lehet az oka? nagyon fontos lenne pedig.

    előre is köszi a választ!

    • Szia! Küldj nekem légyszíves egy ideiglenes admin hozzáférést az oldaladhoz az info [@] wp-suli [.] hu címre, hogy belenézhessek, mert elvileg “ilyen állat nincs” 🙂 (…mondta az egyszeri székely ember, amikor meglátta a zsiráfot 🙂 ), azaz ez fura és így kívülről nem tudom, miért csinálja.

  3. Szia Móni!

    Nagyon klassz bejegyzés, de sajnos nekem nem sikerül beállítanom az üzenet törzsét, nevezetesen, hogy pl a plusz mezőként felvett telefonszám átmenjen az üzenetben. Mit csinálhatok rosszul?

    Köszönettel:

    B

    • Szia!
      Mindig van egy barna és egy zöld csík a jobb oldalon, ahol létrehozod az új mezőt (címkét). Lásd a második képen. A barna tartalmát az űrlapba, a zöldét a levélbe kell bemásolni.

      • Sajnos sehogy sem működik.

        Bemásolgattam sorban az összes mezőbe, de a telefonszám sehogy sem megy át.

        Persze nagyon vacak, hogy nem tudom szerkeszteni a már beillesztett címkét. Ezt sem értem.

        Balázs

      • Ezt én sem értem. Mármint, hogy mit értesz azalatt, hogy nem tudod szerkeszteni a már beillesztett címkét. Hogyne tudnád: írd át benne, amit át kell írni. Vagy töröld és hozz létre egy újat, ha nem látod még át a logikáját.

        Valamit elírsz, szerintem, azért nem megy át az az adat. Talán kimarad egy szögletes zárójel, vagy ilyesmi. Látatlanban nem tudom megmondani.

  4. Szia Móni!
    Jelölőmezőt szeretnék betenni az űrlapba, de úgy, hogy kötelező legyen kijelölni. Azaz adjon hibaüzenetet, ha nem jelölik be.
    A címke létrehozása lenyitása után, kijelölve az “elfogadás” címkét, itt nincs “kötelező” lehetőség mint pl. a “jelölődoboz” esetében. Hogyan lehetne mégis megoldani?

  5. Szia Móni!

    Segítségedet kérném, én még csak ismerkedem wpvel, de rám hagytak egy wp oldalt, kérdésem az lenne, hogy Conctac From programmal, használunk ami tökéletesen megy is, nem tudom az beállítható-e rajta, hogy amikor kitöltöm mezőket át kéne irányítani elküld gomb megnyomásával egy köszönő oldalra, mert a adwords figyelőnk arra van rákötve.
    Válaszodat előre is köszönöm

    • Kedves Szilvia!
      Sajnos a Contact Form ilyet nem tud, keresni kell egy másik űrlapkitöltő bővítményt, ami ezt tudja. Most így kapásból nem tudok, mert erre a célra hírlevélküldőt szoktam használni, nem űrlapkitöltőt. A cFormsII tudta, de az már nem elérhető. De biztosan van másik. Itt tudsz keresni a bővítmények között: https://wordpress.org/plugins/
      Sok sikert!
      Moni

    • A fent bemutatott Contact Form 7 erre tökéletesen alkalmas. De ha gondolod, nézd meg a másikat, a Fast Secure-t is, amelyről a cikk elején teszek említést, ott van a link is arra a bejegyzésre, amely róla megjelent.

  6. Szia Móni,

    Olyan problémám lenne, hogy én is ezt a bővítményt szeretném használni a kapcsolatok fülön. De gyakran mikor kitöltve elküldök egy próba e-mailt magamnak nem az oldalra tér vissza, a köszönöm…. kiírásával hanem egy “halandzsa” szöveget ír ki.
    Erre mi lehet a megoldás?
    Az érdekes az, hogy ha más ilyen célre kifejlesztett bővítményt teszek fel, azzal is ugyan ezt csinálja.
    De ennek ellenére az e-mailt meg szoktam kapni.

    Köszönöm a segítséget.

    Üdvözlettel:
    Kiss Tamás

    • Kedves Tamás!
      Erre így látatlanban sajnos nem tudok válaszolni – én még sosem tapasztaltam ilyesmit. Remélem, nincs valami vírus a weboldaladon…

  7. Kedves Móni!

    Még kzdő WP-es vagyok, kísérletezgetek.
    Beépítettem a Contact Form 7-et az oldalamra.
    Annyi lenne a kérdésem, hogy hogyan tudnám az üzenetmezőt valahogy nagyobbra állítani, mert csak egy sor jelenik meg és olyan rövid, mint pl a név mező…?
    Így adódik a másik kérdés, hogy hogyan lehet akár a többi mező méretét (hosszát) állítani?

    Válaszodat előre is köszönöm!

    Attila

    • Kedves Attila!

      Az egysoros (text formátumú) mezőknél így:
      [text* vendegek 5/2] – ezzel egy 5 egység széles mezőt készítesz, amelybe max 2 karaktert fogad el a rendszer.

      Vagy a szövegterület típusnál így:
      [textarea uzenet 10×5] – ezzel egy 10 egység széles, 5 sor magas dobozt készítesz.

      Ezek nem pixelek, nem cm-ek, hanem egységek, ki kell próbálgatni, hogy Nálad mekkora lesz jó.

      Sok sikert!

      • Köszönöm Kedves Móni!

        Kipróbáltam.

        Valamiért semmi változás nincs akármit írtam be:
        Üzenet
        [textarea your-message 5*3]

        vagy
        Üzenet
        [textarea your-message 40*7]

        stb.

        Ugyanaz az eredmény mintha semmit nem írtam volna be:
        Üzenet
        [textarea your-message]

        Egy sor kb 30-35 karakter hosszú.

        A sima text-nél működik, amit leírtál, a textarea-nál valamiért nem…

      • Igen, valószínű, hogy a sablon okozza (Graphene), mert más sablonban működik.
        A hosszát engedi állítani, de a sort azt nem.

        Valahogy ki kellene deríteni, miért van ez…

        Szerencse, hogy manuálisan állítható a mérete.

    • Szia!
      Csak html-kóddal. b a félkövér, i a dőlt, u az aláhúzás, kacsacsőrök közé kell tenni, és ahol már nem kell, oda /b vagy /i vagy /u kell. (Nem tudom beírni ide, hogy hogyan, mert a böngésző “lejátssza”, és nem fogod látni a kódot.)

  8. Kedves Moni!

    Már régóta, a te sugallatodra használom ezt a plugint.

    Egy frissítés után ezt írta ki a bővítménynél:
    “Ez a kapcsolati űrlap egy beállítási hibát tartalmaz.”

    Miután bemegyek a szerkesztésbe, ezt írja:

    “Másoljuk ki az alábbi rövidkódot és illesszük be a kívánt bejegyzésbe, oldalra, vagy szöveg-widget tartalomba. (Rákattintás, majd Ctrl+C és a kívánt helyen Ctrl+V)
    [contact-form-7 id=”1920″ title=”1 kapcsolati űrlap”]”

    És én nem tudom, hova is kéne ezt a kódot beillesztenem.
    Bocs a kissé tompika kérdésért 🙂

    • Ez igazából két kérdés, mert nem függenek össze 🙂

      Az első egy bugyuta üzenet, nem tudom, miért tették ezt bele. Azt akarja ugyanis a szerencsétlen bővítmény, hogy az e-mail feladója (amit kapsz a weboldaltól) olyan legyen, hogy valami@domainneved.hu. Tehát ha Te úgy állítottad be annak idején a Contact Form 7-et, ahogy logikus, hogy a feladó a your-name (your-email), azaz annak az embernek a neve és e-mail címe, aki kitöltötte az űrlapot, akkor a bővítmény új verziója hibát jelez. Pedig ez nem hiba. Pont így a jó, mert így egy sima Válasz gombbal tudsz válaszolni a kérdezőnek.

      A másik, amit kérdezel, az az általános használata a bővítménynek. Ha azt akarod, hogy az űrlap megjelenjen mondjuk a Kapcsolat nevű oldalon, akkor másold ki ezt a shortcode-ot (a szögletes zárójelet a tartalmával), és illeszd be a Kapcsolat oldalba szerkesztés üzemmódban. (Nem kell átváltani HTML nézetbe, jó a Grafikusban is.

      Ez így segít Neked?

  9. Kedves Móni!

    Nagyon szépen köszönöm a sok hasznos infót, amit itt adsz a bővítménnyel kapcsolatosan. Nekem egy olyan kérdésem lenne, hogy ha email-be a fájlmellékletbe én szeretnék egy doksit betenni, amit kiküld a rendszer azoknak akik regisztrálnak, azt hogyan kell csinálni, nem sikerült rájönnöm 🙁
    Hálás köszönettel!

    • Kedves Kriszta!
      Erre a feladatra hírlevélküldő bővítmény (vagy külső rendszer) kell, a kapcsolat űrlap nem jó rá. A kapcsolat űrlappal nem lehet regisztrálni, az csak egyszerűen küld a honlap tulajdonosának egy e-mailt.

  10. Kedves Moni!
    kapcsolati ürlap elüldésének problémájával küzdök.Contact Form 7-et használok,jelentkezési lapnak gyerek táborokhoz.Az ürlap küldésénél a küldő azt tapasztalja, hogy csak pörög a küldés és nem zár le fisszaigazolással hogy sikerült a küldés.Ez után többször probálkozik mert nem látja, hogy a küldés sikeres volt-e vagy sem.
    köszönettewl : istván

  11. Szia Moni ! Beteg voltam és nem tudtam a gép közelébe kerülni.A probléma a mobil telefonról történő jelentkezésnél van.A saját gépemnél normális minden.Ha lecserélem a contact form-7.akkor ez a hiba nem áll fenn.De ha ezt kell csinálnom(vagyis lecserélni a contact form 7-et)akkor melyiket használhatom ami tud válasz e-mailt küldeni.
    köszönettel: istván

  12. Szia!

    Az lenne a kérdésem, hogy mi van akkor, ha a tárhely szolgáltatóm letiltotta a mail() parancsot.
    Próbáltam már sok programot, de egyszerűen semmi sem működik. Hozzáteszem sokat olvasgattam itt is ott is, és odáig eljutottam, hogy kell egy smtp-s alternatíva, de bármit próbálok egyszerűen nem működik semmi.
    Ezeket próbáltam: easy-wp-smtp, gmail smtp, wp mail smtp. 100 fajta beállítással több féle email címmel próbálkoztam és semmi! Nem megy ki levél. Esetleg egy jó pulgin, szájbarágós és MŰKÖDŐ beállításokkal van a tarsolyodban? 🙂
    Előre is köszönöm!

    • Nos, most megfogtál… Én eddig mindig olyan tárhelyszolgáltatónál voltam, ahol nem tiltották le alapból a mail() függvényt (ameddig nem léptem túl egy kritikus mennyiséget, pl hírlevélküldéssel – márpedig olyat sosem tettem). Így aztán sosem volt szükségem másra, mindig jól tudtam működni a Contact Form 7-tel.

      Másrészt az én tárhelyszolgáltatóm, a Profitárhely (ez egy affiliate link) ingyen SMTP-vel kényezteti az ügyfeleit, így egyszerűen azt használom, ha kell.

      Ha valamit ajánlanék, akkor ezt: https://wordpress.org/plugins/pirate-forms/ – csak az a baj, hogy saját tapasztalatom nincs róla…

Szólj hozzá!

Ez a weboldal az Akismet szolgáltatását használja a spam kiszűrésére. Tudjunk meg többet arról, hogyan dolgozzák fel a hozzászólásunk adatait..