Aki WordPress-t használ az valószínűleg találkozott már a Contact Form 7 nevű bővítménnyel. Ha esetleg mégis újdonságként hatna a név, akkor EZEN bemutatónk segíthet megismerkedni az egyik legrugalmasabb és legnépszerűbb kapcsolati űrlap pluginnel. Ahogyan a névből már sejteni lehet egyszerű vagy éppen komplex űrlapokat hozhatunk létre vele, azonban az alap funkciókon túl is nagyon sok apró trükk létezik, amivel még hasznosabbá tehetjük a bővítményt oldalunk számára. Ezekből szemezgetünk most.
1. Google ReCaptcha integráció
Ez mindenki számára kötelező, aki nem szeret naponta kéretlen leveleket (spam) kapni, ugyanis csak idő kérdése amíg egy captcha nélküli űrlapra rá nem bukkannak a spam botok és el nem kezdik bombázni kéretlen üzenetekkel. Erre a legjobb védelem a Google által fejlesztett ReCaptcha, ami szerencsére már jó ideje a Contact Form 7 része is. Korábban a Really Simple Captcha plugin telepítésével tudtunk extra védelmet hozzáadni az űrlapjainkhoz, de ez mára már szükségtelen és kicsit idejétmúlt megoldás is (kevésbé hatékony, felesleges még egy plugint telepíteni).
Ahhoz, hogy az űrlapunk végére hozzá tudjuk adni a ReCaptcha mezőt először meg kell adnunk a nyilvános és titkos API kulcsokat a “Kapcsolat / Integráció” almenüben. Ezeket a google.com/recaptcha oldalon tudjuk ingyenesen igényelni. Felül a “Get ReCaptcha” gombbal indíthatjuk el a folyamatot, majd a “Label” résznél adjuk meg oldalunk nevét, válasszuk ki a V2-es verziót és adjuk meg a domainünket a megfelelő dobozban. A “Register” gombra való kattintás után már másolhatjuk is ki a site/secret key-t. Amint ezek beszúrása megtörtént már tudjuk is szerkeszteni az űrlapunkat és hozzá is lehet adni a ReCaptcha mezőt.
2. Beküldött űrlapok mentése az adatbázisba
Alapértelmezetten csak elküldi a megadott címre a kitöltött űrlapokat a rendszer, azonban sokan szeretnék, ha ezzel egy időben az adatbázisba is mentésre kerülne minden adat és ezek könnyedén visszakereshetők lennének a vezérlőpulton. Szerencsére erre is van egy bevált és jól működő megoldás, mégpedig a “Contact Form 7 Database Addon” plugin. Telepítése után megjelenik egy új menüpont a bal oldali sávban “Contact Forms” néven, itt tudjuk majd megtekinteni a beküldött űrlapok információit és lehetőségünk lesz exportálni is ezeket CSV formátumban.
3. Átirányítás egy köszönő oldalra az űrlap beküldése után
Ez is szinte általános igény és sokan nem tudják, hogy van rá lehetőség. Alapértelmezetten az űrlap beküldése után csak egy mondatos “sikeres küldés” üzenetet jelenít meg a plugin a küldés gomb alatt, de nem irányít át egyéb oldalra. Ahhoz, hogy ez megtörténjen egy kis JavaScript kódrészletet kell elhelyeznünk a <head> és </head> rész közé, mégpedig a következőt:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://oldalad.hu/koszono-oldal';
}, false );
</script> Értelemszerűen ki kell cserélni a fenti kódban a köszönő oldal linkjét a valódi oldalunk linkjére.
Korábban létezett egy másik megoldás is erre a problémára (“on_sent_ok” hook), de ennek használata már nem javasolt, mert rövidesen végleg kikerül a támogatása, ezért ragaszkodjunk a fenti megoldáshoz.
4. Honeypot integrálása
A Honeypot szintén nagyon hatékony védelem a spam botok és regisztrációk ellen, ezért sokan használják itt is. A működési elve azon alapszik, hogy a botok célja, hogy minden általuk feltérképezhető input mezőt kitöltsenek. A Honeypot egy olyan mezőt hoz létre, ami az emberi látogatók számára láthatatlan, a botok számára viszont megjelenik, ennek okán pedig ezt is automatikusan kitöltik. Amint a rendszer észleli, hogy ez a csapda mező kitöltésre került letiltja az űrlap beküldését, tehát nem fog átmenni a kéretlen üzenet, mert tudvalevő, hogy egy bot próbálta meg kitölteni.
A Contact Form 7 Honeypot plugin ezt a védelmi módszert integrálja nagyszerűen a kedvenc kapcsolati űrlap bővítményünkbe.
5. Mezők megjelenítése beírt tartalom vagy kiválasztott korábbi mezők függvényében
Ez is egy nagyon gyakori kérés és természetesen erre is van megoldás. Például ha szeretnénk létrehozni egy többlépcsős űrlapot, amelynek mezői annak függvényében változnak/jelennek meg, hogy mit is adtunk meg vagy választottunk ki korábban. Tehát megjeleníthető más tartalom például más megye kiválasztása esetén.
Ahhoz, hogy ilyen elágazásokat tudjunk létrehozni a Conditional Fields for Contact Form 7-re lesz szükségünk.
6. CSS & JavaScript fájlok betöltése csak azon oldalon, ahol az űrlap megtalálható
Alapértelmezetten a plugin minden oldalon betölti a saját JS & CSS fájljait, azonban a legtöbb esetben erre nincs szükség, hiszen javarészt egy kapcsolat oldalunk létezik egy darab űrlappal. A lenti kis kódrészlet segítségével automatikusan korlátozhatjuk ezen fájlok betöltését csak arra az oldalra/oldalakra, ahol a form is megjelenik. Így gyorsíthatunk a weblapunk betöltési sebességén és a kódunk is kicsit tisztább marad.
Természetesen a functions.php fájl végére kerüljön az alábbi pár sor:
function dvk_dequeue_scripts() {
$load_scripts = false;
if( is_singular() ) {
$post = get_post();
if( has_shortcode($post->post_content, 'contact-form-7') ) {
$load_scripts = true;
}
}
if( ! $load_scripts ) {
wp_dequeue_script( 'contact-form-7' );
wp_dequeue_style( 'contact-form-7' );
}
}
add_action( 'wp_enqueue_scripts', 'dvk_dequeue_scripts', 99 ); 7. A REST API-t hagyjuk bekapcsolva
A Contact Form 7 helyes működéséhez elengedhetetlen, hogy a WordPress REST API bekapcsolva maradjon. Ha használunk valamilyen biztonsági bővítményt (például: Cerber), akkor előfordulhat, hogy ez a funkció letiltásra került. Ha az űrlapok beküldése után 401-es hibaüzenet jelenne meg a fejlesztői konzolban, akkor biztos, hogy ez a probléma és a megoldás mindössze annyi, hogy ismételten engedélyezni kell a REST API-t.
Reméljük hasznosnak bizonyult a fenti kis tippcsokor és ha esetleg bármi kimaradt volna vagy ismersz még hasonló “must have” bővítményeket, akkor jelezd nekünk bátran a kommentekben vagy üzenet formájában.
