Blog bejegyzés

Top WP Bővítmények: Contact Form 7

Contact Form 7

A „Top WP Bővítmények” sorozatunk harmadik (első: WordPress SEO by Yoast, második: Google XML Sitemaps) állomásaként a legnépszerűbb űrlapkészítő bővítményt vesszük részletesebben szemügyre.

Felhívjuk a figyelmét arra, hogy leírásunkban az „ingyenes” 4.2.2-es verziójú plugin beállításait részleteztük. Az újabb változat ennél több funkciót tartalmazhat, és előfordulhat, hogy néhány funkció azóta más helyre került.

Kezdés (telepítés és aktiválás):

Az űrlapkészítő bővítményt egyszerűen telepíthetjük úgy, hogy letöltjük a WordPress.org bővítmény kínálatából, majd a rar fájlt az admin felületen a „Bővítmények/Új hozzáadása/Bővítmény feltöltése” alatt csak betallózzuk és feltelepítjük, majd a sikeres telepítést követően aktiváljuk.

Alternatív megoldásként a rar tartalmát feltölthetjük FTP programon keresztül a /wp-content/plugins/ könyvtárba, de utána az admin felületen a „Bővítmények/Telepített bővítmények” alatt ne felejtsünk el a „Bekapcsolás” gombra kattintani.

Létezik még olyan megoldás is, hogy weben a tárhelyszolgáltató Control Panel-én keresztül töltjük fel a bővítményt, de ezt a lehetőséget tárhelyszolgáltató válogatja, hogy engedélyezi-e egyáltalán.

Beállítások:

Miután aktiváltuk a Contact Form 7 bővítményt az alábbi menüpontokkal fogunk találkozni. A fontosabb menüpontokról/beállításokról képernyőképet is készítettünk, melyeket legalul a képgalériában tekinthet meg.

Menüpontok (beállítások, javaslatok):

Az alapértelmezett kapcsolati űrlapot az admin felületen a „Kapcsolat” menüpont „Kapcsolati űrlapok” részén tudjuk elérni, majd az „Űrlap” fül alatt tudjuk tovább szerkeszteni. Az „Email fül alatt az üzenet felépítését tudjuk testre szabni, az „Üzenetek” fül alatt pedig az űrlaphoz tartozó üzeneteket, illetve az űrlap kitöltése során felmerülő hibaüzeneteket tudjuk átírni.

Fontos!
A rendszer automatikusan az admin emailre küldi az üzeneteket. Ezt az email címet, az „Email fül alatt a „Címzett” mezőben tudjuk megváltoztatni.

Tipp:

Ha nem akarjuk a reCaptcha rendszerét használni, akkor válasszuk helyette a Really Simple Captcha-t. A részleteket lásd lejjebb a „Trükk” rész alatt.

Trükk:

A Really Simple Captcha a régebbi Contact Form 7-el is/volt kompatibilis. A WordPress.org alatt a „Developers” fül alól töltsük le a 4.3-nál régebbi verziót (4.2.2), installáljuk fel és aktiváljuk, majd készítsünk vele űrlapot és generáljunk mellé captcha kódot. Miután ezzel megvagyunk, frissítsük nyugodtan a legújabb verzióra a Contact Form 7 plugint. Hogy miért van erre szükség? – Mert a plugin készítője a 4.3-as verziótól fölfelé kivette a Really Simple Captcha kód generálását a pluginból és a reCaptcha megoldást ajánlja inkább helyette.

Átirányítás trükk (köszönöm oldal):

Egyre többen használnak köszönöm oldalt. A Contact Form 7 plugin is képes arra, hogy a kapcsolati űrlap kitöltése után egy másik oldalra (pl.: köszönöm oldalra) átirányítson. Ehhez nem kell mást tennünk, mint a lejjebb látható kódsort beillesztenünk az adott űrlap „További beállítások” fülén látható felületébe.

Kódsor:
on_sent_ok: “location = ‘http://example.com/’;”
Megjegyzés: az example.com weboldal helyére értelemszerűen a saját url-ünket kell beírnunk.
Fontos: a plugin készítője a bővítmény 5.0-ás verziójából eltávolította az “_on_sent_ok:” parancsot. Ettől a verziótól fölfelé nem működik, ezért mindenképpen vagy változtatni kell a bővítmény kódjában vagy pedig külön plugint kell használni a megvalósításához.

Ajánlott bővítmény: Contact Form 7 Redirection

Contact Form 7 - köszönöm oldal

Contact Form 7 – köszönöm oldal beszúrása

Továbbküldés trükk (Cc vagy Bcc):

A Contact Form 7 pluginnak van automatikus továbbküldő (Cc: carbon copy, Bcc: blind carbon copy) funkciója is, amit úgy tudunk aktiválni, hogy a lejjebb látható kódsort beillesztjük az adott űrlap „Email” fülén látható „További fejlécek” felületébe, a Reply-To: [your-email] fölé.

Ennek az eljárásnak a használata annyiban segíti a munkánkat, hogy a kitöltött űrlap plusz 1 másik email címre is elküldésre kerül automatikusan.

Kódsor:
Cc: boss@example.com
Reply-To: [your-email]
Megjegyzés: a boss@example.com email cím helyére értelemszerűen a saját email címünket kell beírnunk.

Konfigurációs hiba javítása:

A Contact Form 7 plugin 4.4-es verziójától belekerült egy konfigurációs hibát ellenőrző funkció is, amelynek lényege, hogy javaslatokat tesz az űrlapjaink konfigurációs beállításainak javítására, a nagyobb hatékonyság, azaz a biztos célba érés érdekében.

Miután lefutattuk az ellenőrzést, a plugin rá fog mutatni a hibákra, amelyek nagy valószínűséggel az adott űrlap „Email” fülén lesznek megtalálhatók. Legtöbb esetben a „Feladó” mezőben található email címmel van a gond (Hibaüzenet: Ez az email cím nem a weboldal domainjéhez tartozik), amelynek helyes kitöltésére lentebb egy mintapéldát is készítettünk, de a könnyebb áttekintés érdekében feltüntettük a helytelen email cím megadását is.

A konfigurációs hiba javításának lényege, hogy a „Feladó” részen a SAJÁT DOMAINÜNK email címét kell feltüntetnünk. Mert ebben az esetben nagyobb hatékonysággal (szinte biztosan) kaphatjuk meg az űrlapot az email címünkre, mintha az űrlap kitöltőjének email címét – [your-email] – tüntetnénk fel azon a részen.

Fontos!
Az új Contact Form 7 már javítja a „Feladó” mezőnél jelölt konfigurációs email hibát úgy, hogy a weboldalunk saját WordPress email címét (wordpress@example.com) tünteti fel. A javítást csak abban az esetben kell elvégeznünk, ha az űrlapunkat, a 4.4-es verziónál korábbi pluginnal készítettük el, vagy abban az esetben, ha le akarjuk cserélni a plugin által feltüntetett email címet.
Helytelen beállítás:
[your-name] <[your-email]>
Helyes beállítások:
[your-name] <wordpress@example.com>

vagy

[your-name] <info@example.com>

vagy

[your-name] <johndoe@example.com>

Megjegyzés: az első esetben a Contact Form 7 plugin által automatikusan megadott email cím szerepel a „Feladó” részen. A második és harmadik esetben pedig az általunk megadott email címek láthatók. Az info@example.com és a johndoe@example.com email cím helyére értelemszerűen a saját email címünket kell beírnunk.
Contact Form 7 - feladó mező

Contact Form 7 – feladó mező

Segédlet (formázási lehetőségek):

Az alábbi mintapéldákban a plugin által generált egyszerű kapcsolati űrlapot (név, email, tárgy, és üzenet szöveges mezők vannak csak benne) egészítjük ki html kódokkal. A formázási lehetőségek között megtalálhatók a mezők neveinek egyedi színű ellátása és kiemelése (H5), illetve a mezőkben a „placeholder” megjelenítése, melynek lényege, hogy segíti a mező kitöltőjét úgy, hogy a mezőben egy általunk előre megírt szöveg látható, ami a mezőbe történő kattintás után eltűnik.

Fontos!
Ha a kódsort változtatás nélkül bemásoljuk a kapcsolati űrlap szerkesztésének felületére és elmentjük, az még nem elegendő ahhoz, hogy az űrlap tökéletesen megjelenjen weboldalunkon, mivel a bővítmény minden egyes mező mellé automatikusan generál azonosító számot.

Ezért a kódsor bemásolása után a piros 1-es számmal megjelölt számokat le kell cserélni azokra a számokra, amiket a bővítmény generál, ha a jobb oldalt lenyíló mezőben kiválasztjuk az adott mező típusát.
Felhívjuk a figyelmét arra, hogy a mezők azonosító számait az „Üzenet” és az „Email” részen is meg kell adnia, hogy az üzenetet tökéletes formában megkaphassa.

Miután elmentettük a kapcsolati űrlapot, csak illesszük be a shortcode-ját, amit könnyedén megtehetünk úgy, hogy az „Oldalak” menüpontban rákattintunk a „Kapcsolat” szerkesztésére, majd a vizuális szerkesztőbe a shortcode-t berakva elmentjük (közzététel, vagy Frissítés gomb) az adott aloldalt.

A Contact Form 7 plugin az alábbi kódsort generálja, az első űrlap kapcsán:

Alapértelmezett kódsor:
<p>Név (kötelező)<br />[text* your-name] </p>

<p>Email cím (kötelező)<br />[email* your-email] </p>

<p>Tárgy<br />[text your-subject] </p>

<p>Üzenet<br />[textarea your-message] </p>

<p>[submit “Küldés”]</p>

Mezők nevei kék színnel és H5-ös kiemeléssel, valamint pluszban telefon mező, és a text tárgy mező lecserélve egy kötelezően kitöltendő drop-down kialakításra, amely egy üres sorral kezdődik, illetve nagyméretű captcha mellékelve:

Módosított kódsor:
<p><h5><span style=”color: #0989D4;”>Név (kötelező)</span></h5><br />[text* your-name] </p>

<p><h5><span style=”color: #0989D4;”>Email cím (kötelező)</span></h5><br />[email* your-email] </p>

<p><h5><span style=”color: #0989D4;”>Telefonszám</span></h5><br />[tel tel-1] </p>

<p><h5><span style=”color: #0989D4;”>Tárgy (kötelező)</span></h5><br />[select* menu-1 include_blank “Tárgy 1” “Tárgy 2” “Tárgy 3” “Tárgy 4” “Tárgy 5” “Tárgy 6” “Tárgy 7” “Tárgy 8” “Tárgy 9” “Tárgy 10″] </p>

<p><h5><span style=”color: #0989D4;”>Üzenet</span></h5><br />[textarea your-message] </p>

<p>Biztonsági kód (kis és nagybetű nem számít)<br />[captchac captcha-1 size:l] </p>[captchar captcha-1] </p>

<p>[submit “Küldés”]</p>

Az előző kapcsolati form kódsora plusz placeholder-el ellátva:

Módosított kódsor (plusz placeholder):
<p><h5><span style=”color: #0989D4;”>Név (kötelező)</span></h5><br />[text* your-name placeholder “Teljes név”] </p>

<p><h5><span style=”color: #0989D4;”>Email cím (kötelező)</span></h5><br />[email* your-email placeholder “Email cím”] </p>

<p><h5><span style=”color: #0989D4;”>Telefonszám</span></h5><br />[tel tel-1 placeholder “Telefonszám egybeírva”] </p>

<p><h5><span style=”color: #0989D4;”>Tárgy (kötelező)</span></h5><br />[select* menu-1 include_blank “Tárgy 1” “Tárgy 2” “Tárgy 3” “Tárgy 4” “Tárgy 5” “Tárgy 6” “Tárgy 7” “Tárgy 8” “Tárgy 9” “Tárgy 10″] </p>

<p><h5><span style=”color: #0989D4;”>Üzenet</span></h5><br />[textarea your-message placeholder “Üzenet szövege”] </p>

<p>Biztonsági kód (kis és nagybetű nem számít)<br />[captchac captcha-1 size:l] </p>[captchar captcha-1] </p>

<p>[submit “Küldés”]</p>

Tipp:

A módosított kódsorok esetében a telefon mezőjét lecserélhetjük (generálhatunk egy újat, mert már van egy sima a „Név” mezőjénél) sima text mezőre is, mert akkor nem fog az űrlap kitöltőjének hibát kiírni, ha ne írja egybe a telefonszámot.

A módosított kódsorok esetében, ha nem akarjuk a „Tárgy” mező kitöltését kötelezővé tenni, akkor csak vegyük ki a kódsorából a „select” mögül a *-ot.

A „Tárgy” mező kódsorában csak értelem szerűen cseréljük le „Tárgy 1-Tárgy 10” szavakat, vagy töröljük ki azokat, amelyekre nincs szükségünk.

Fontos!
A kapcsolati űrlap szerkesztését követően ne felejtsük el elmenteni az űrlapot, mert a változtatások csak azután fognak végrehajtódni!

Kapcsolati űrlap létrehozása (lépésről-lépésre):

  • 1. lépés: töltsük le a plugint a WordPress.org alól vagy keressünk rá az admin felületen a „Bővítmények menüpont „Új hozzáadása” részen
  • 2. lépés: töltsük fel vagy telepítsük a plugint
  • 3. lépés: aktiváljuk a plugint
  • 4. lépés: helyezzük el az űrlap shortcode-ját
  • 5. lépés: szerkesszük tovább az űrlapot, ha nem elegendőek azok a mezők és kialakítások, amit a plugin automatikusan generált

Megjegyzés:

Az űrlapkészítő bővítménnyel korlátlan számban tudunk, az alapértelmezett kapcsolati űrlapnál akár sokkal komolyabb felépítésű űrlapokat is létrehozni, legyen szó megrendelésről (pluszban a „jelölőbox-ot” hozzáadva), vagy éppen asztalfoglalásról (pluszban a dátum opciót használva).

Contact Form 7 Képgaléria:

 

Megjegyzés: néhány képen az egyik referencia munkánk a Favor-Vill Kft. adatai láthatóak.

Letöltés:

https://wordpress.org/plugins/contact-form-7/

https://wordpress.org/plugins/really-simple-captcha/

Hasznos információk a wpSHOP.hu ajánlásával!

Print Friendly, PDF & Email

Komment (11)

  1. Farkasinszky Péter 2017-03-26 | 09:18 Válasz

    Rendkívül hasznos volt számomra, amit leírtatok. Máshol nem is találtam ilyen kézzelfogható megoldást a problémámra. Kérdésem az lenne, hogy a sima contact form 7-ben van-e lehetőség a “Küldés” gomb színének megváltoztatására és ha igen hogyan? Illetve hogyan lehet az egész kapcsolati form köré egy kék keretet tenni? Előre is köszönöm!

    1. WP Shop 2017-03-28 | 08:49 Válasz

      Kedves Péter!

      A kinézet megváltoztatása egyedi CSS kód hozzáadásával vagy plugin használatával lehetséges. Ez a kód szürke hátteret ad a formnak és egy vékony zöld vonallal veszi körbe:

      https://contactform7.com/styling-contact-form/


      .wpcf7
      {
      background-color: #f7f7f7;
      border: 2px solid #0f0;
      }

      A küldés színének megváltoztatása:

      http://kb.cf7skins.com/styling-contact-form-7-forms/


      .wpcf7-form input:hover[type="submit"] {
      background:#4f2a0f;
      cursor:pointer;
      color:#fff;
      }

      vagy

      .wpcf7-form-control .wpcf7-submit{
      background-color: red !important;
      background-image: none !important;
      }

      Utóbbi kódot a WordPress.org. egyik topikjában találtam.

      De van rá plugin, amellyel könnyedén lehet a form minden egyes részének kinézetét megváltoztatni:

      https://wordpress.org/plugins/contact-form-7-style/

      Üdvözlettel,
      Juhász Ákos

  2. Farkasinszky Péter 2017-03-31 | 22:35 Válasz

    Kedves Ákos!

    Nagyon köszönöm a gyors válaszát. Kipróbáltam és már használom is.

    Üdvözlettel: Farkasinszky Péter

  3. Butkáné Kis Regina 2018-01-21 | 10:32 Válasz

    Üdvözlöm,

    Engem a form méretre állítása érdekelne, mert kisebbet szeretnék mint amit magától be tesz az oldalra.

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

    Regina

    1. WP Shop 2018-02-01 | 15:06 Válasz

      Kedves Regina!

      A form egyes paramétereinek megváltoztatására, köztük a méretre (size: paraméter a rövid kódban) az alábbi oldalon talál segédletet:

      https://contactform7.com/text-fields/

      Üdvözlettel,
      Juhász Ákos

  4. Attila 2018-02-14 | 15:34 Válasz

    Üdvözlöm!

    Olyanban kérném a segítséged, hogy szeretném, ha a küldés gombra nyomás utána átirányítana egy másik linkre, amolyan köszönő oldalra! Ez hogyan oldható meg?

    Köszönöm előre is a segítséget.

    1. WP Shop 2018-02-17 | 09:28 Válasz

      Szia Attila,

      A cikkben írtuk az “Átirányítás trükk (köszönöm oldal)” rész alatt, hogy hogyan lehet ezt egyszerűen kivitelezni.

      Üdv,
      Ákos

      1. Attila 2018-02-19 | 15:46 Válasz

        Szia Ákos!

        Azt kipróbáltam, de sajnos nem működik! Szerinted mi lehet az oka? Nálad működik?

        üdv
        Attila

        1. WP Shop 2018-03-30 | 16:09 Válasz

          Szia Attila!

          Ha nem működik a fenti kóddal a “köszönöm oldal”, akkor próbáld meg felrakni a Contact Form 7 mellé az alábbi bővítményt:

          https://wordpress.org/plugins/wpcf7-redirect/

          Utólagos megjegyzés: a készítő a plugin 5.0-ás verziójából eltávolította az “_on_sent_ok:” parancsot. Ettől a verziótól fölfelé nem működik, ezért mindenképpen vagy változtatni kell a bővítmény kódjában vagy pedig külön plugint kell használni a megvalósításához.

          Üdvözlettel,
          Juhász Ákos

  5. Szimics Mihály 2018-02-22 | 21:25 Válasz

    Üdvözlöm.
    Olyan kérdésem lenne,hogy az űrlapon nem megy el az üzenet. Azt írja ki hogy a feladó üzenetének elküldése sikertelen.Tudna segíteni hogy hol rontottam el?
    Köszönöm

    1. WP Shop 2018-03-30 | 15:40 Válasz

      Kedves Mihály!

      Ezt a hibát legtöbbször a szerver (tárhely) konfigurációja okozza. Érdemes lenne felvenni a kapcsolatot a tárhelyszolgáltatóval.

      Ha ezután sem oldódik meg a hiba, akkor fel kellene rakni és beállítani az alábbi bővítményt:

      https://wordpress.org/plugins/wp-mail-smtp/

      Üdvözlettel,
      Juhász Ákos

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.

Hasonló bejegyzések

Cookie Notice
Top WP Bővítmények: Cookie Notice

Cookie figyelmeztetés készítése a süti kezeléséről A „Top WP Bővítmények” sorozatunk mostani állomásaként az egyik

WP Login Lock
Top WP Bővítmények: Login LockDown

Bejelentkezési felület védése a Login LockDown pluginnal A „Top WP Bővítmények” sorozatunk újabb állomásaként az

WP-Optimize
Top WP Bővítmények: WP-Optimize

Adatbázis optimalizálás a WP-Optimize pluginnal A „Top WP Bővítmények” sorozatunk mostani állomásaként a legnépszerűbb adatbázis

BackWPup plugin
Top WP Bővítmények: BackWPup

Biztonsági mentés készítése a BackWPup pluginnal A „Top WP Bővítmények” sorozatunk mostani állomásaként az egyik

WP Smush plugin
Top WP Bővítmények: WP Smush

WP Smush A „Top WP Bővítmények” sorozatunk mostani állomásaként a legnépszerűbb képméret optimalizáló WordPress plugint,

Google XML Sitemaps
Top WP Bővítmények: Google XML Sitemaps

Google XML Sitemaps A „Top WP Bővítmények” sorozatunk második (első: WordPress SEO by Yoast) állomásaként

WP SEO by Yoast
Top WP Bővítmények: WordPress SEO by Yoast

WordPress SEO by Yoast Gondoltunk egy nagyot és útjára indítottuk „Top WP Bővítmények” sorozatunkat, melynek

WooCommerce plugins
Ingyenes WooCommerce bővítmények

Számla Ár Szállítás Áruátvétel Árösszehasonlító Figyelőlista / Kívánságlista TermékTermékkereső Termékszűrő Termék megtekintés

WP plugins logó
Ingyenes WordPress bővítmények

Ajánlott „ingyenes” WordPress bővítmények Hasznos „ingyenes” WordPress bővítményekWordPress bővítmények „Az alábbi listában a teljesség

WooCommerce logó
WooCommerce

Mi a WooCommerce? Demo Azt tudta? WooCommerce alap funkciók és azok előnyei WooCommerce bővített funkciók és azok előnyei WooCommerce