Meg kell értenie, hogy fizetnie kell az ilyen ékszermunkáért, de a díj megéri. Meg kell vitatni a létrehozás összes kérdését, ez hatással lesz a munka költségeire és a céloldal egészére. Létrehozásakor figyelembe kell vennie az összes lehetséges apróságot, amely felkelti az emberek figyelmét: a szépségtől a könnyű használatig. Emellett nem szabad megfeledkeznünk a pszichológiáról és a tudatalattiról sem. Sok döntés tudat alatt születik. És a termék vásárlása sem kivétel. Ha felállítod a megfelelő logikai láncot, amely megoldást fog tartalmazni egy személy problémájára, annak leírását, a meggyőződést, hogy ez a megoldás helyes, és segít neki, koncentrálsz erre a célra, cselekvésre kényszeríted és magát a cselekvést, akkor a legtöbb látogatót vásárlóvá teheti. Ráadásul nem mindegy, hogy mi lesz az oldal célművelete – eladás, hírlevél feliratkozás, a látogató elérhetőségének megszerzése stb.

Különös figyelmet kell fordítani az űrlapra Visszacsatolásügyféllel. Mivel ez kommunikáció az ügyféllel, bár nem közvetlen. Az ügyféllel való kommunikáció rendkívül fontos, hiszen egy weboldal önmagában nem képes teljes mértékben kielégíteni az ügyfél igényeit. Csak szabványos kéréseket tud feldolgozni, amelyek ritkák, mivel az emberek ritkán alkalmaznak szabványos megközelítést a probléma megoldásához. Az ügyféllel való visszajelzés útján történő kapcsolatfelvétellel nem csak az eladások/tranzakciók/előfizetések forgalmát, hanem a cég hírnevét is növelheti.

Mert a személyes kommunikáció és az ügyfelek elégedettsége nagyon fontos a jó hírnév kialakításához. Egy ilyen forma létrehozására mindig is különös figyelmet fordítottak. Olyan sablon használata, amelyre visszajelzés van beállítva, erősen korlátozza az oldal funkcionalitását, mert adott formában mindig kézzel illessze be a fő kódba az összes SEO követelménynek megfelelően. Ennek az űrlapnak van egy speciális megközelítése is: jól látható helyen kell elhelyezni, legyen intuitív és könnyen használható, ne kérjen sok felesleges információt az ügyféltől, elegendő az email és a név. A helyszín befolyásolja azon emberek kategóriáját, akik hozzászoktak ahhoz, hogy gyorsan megkeresik és felhasználják a szükséges információkat. Egyesek számára néhány másodperc az oldalon való tartózkodás is elég ahhoz, hogy felmérje, igénybe veszi-e a szolgáltatásait vagy sem. Ezért a helyszínnek olyannak kell lennie, hogy még az ilyen felhasználóknak is legyen idejük érdeklődni az ajánlat iránt, és kapcsolatfelvételt hagyni.

Nagyon fontos, hogy az oldal könnyen érthető legyen, mert nem minden internetező tapasztalt ebben a kérdésben. A tapasztalt és nem túl tapasztalt közönség eléréséhez intuitívan kell érteni a műveletek végrehajtásának sorrendjét. És nem kevésbé fontos az információ mennyisége. Ez befolyásolja a bizalom tudatalatti szintjét. Ha az oldal sok névjegyet kér: ​​telefonszámot és email, kártyaszám, cím és így tovább. Lehet, hogy az az érzésed, hogy ezt az oldalt csalók készítik. Ez pedig erős ütés a webhely egészének hírnevére nézve. Ezért pontosan annyi információt kell kérnie, amennyi az ügyféllel való kapcsolatfelvételhez, kívánságai tisztázásához és a tranzakció feltételeinek teljesítéséhez elegendő. A céloldal egésze egy egyszerű, összetett módon felépített webhely. A felhasználók számára egyszerű, de a fejlesztők számára nehéz létrehozni. Ez a munka azonban megéri a fáradságot!

Változtassa meg a képet az első képernyőn, vagy "testreszabja" az ügyfél előnyeit, de mi értelme van, ha nincs interakció az űrlappal?
A statisztikák azt mutatják, hogy in az esetek 20%-a a céloldal elégtelen konverziójának oka nem annyira a rossz USP-ben vagy a célzott forgalom hiányában, hanem egy gondatlan és rosszul átgondolt a jelentkezési lap kitöltésével.
A látogató nem akarja elhagyni elérhetőségeit, "ledobja" az űrlapot és elmegy. Potenciális ügyfeleket veszít, és ezáltal bevételt is.
Miért történik ez és hogyan lehet növelni a jelentkezési lap konvertálását?

2 oka a rossz űrlapkitöltésnek:

• hibás jelentkezési lap
• rosszul átgondolt funkcionalitása

A cikk előírja egyszerű ellenőrző lista amellyel könnyen lehet elemezze a nyitóoldalon lévő űrlapokat. Munkavégzéshez 4 eszköz használatát javaslom: kattintás térkép, térkép görgetés, űrlapelemzés és .

A jelentkezési lapnak az első képernyőn láthatónak kell lennie "görgetés" nélkül

Fedezd fel görgetős térkép. Hátha eltalálják alapvető konverziós elemek az oldal megtekintett részein. Ellenőrizze oldalát különböző képernyőméretű eszközökön. Különös figyelmet kell fordítani a mobil verzióra!

Ellenőrizze az összes böngészőt

Ellenőriznie kell, hogyan működik a jelentkezési űrlap minden böngészőben, és érdemes külön is tesztelni! Ha a működés hibás, nem lesz eredmény, elemzéshez szükséges adatok és ajánlások.

A mezők számának meg kell felelnie a feladatnak

2. ábra Példa egy további mezőre, amely megoldja az ügyfél problémáját

A szabály egyszerű - figyeljen a töltés könnyűsége ezek a formák:

• használjon tippeket (például "maszkot" a telefonszámokhoz);
• lehetővé teszi az űrlap beküldését az összes rendelkezésre álló mező kitöltése nélkül;
• tűzz ki megfelelő célokat – például ne kérj telefonszámot az előfizetési oldalon, ha . A látogatók nem töltenek ki 5 mezőt csak azért, hogy bemutatót vagy katalógust kapjanak.

Használjon különböző módokat a kapcsolatfelvételi adatok megszerzésére

Kezdje a termék vagy rés jellemzőiből. Adja meg a lehetőséget, hogy telefonon, e-mailben vagy chaten felvegye Önnel a kapcsolatot konzultáció céljából. Fontolgat vásárlói magatartás– egyszerűbb, ha valaki azonnal felhív és megbeszéli a feltételeket, bizonyos esetekben (ajánlatkérés) nem nélkülözheti az űrlappal való interakciót.

Zárt vagy nyitott forma?

Amikor külföldi oldalakkal dolgozunk, egyre gyakrabban szembesülünk egy zárt jelentkezési lappal - egy egyszerű és érthető gombbal a "Start Now" stílusban. De nincs egyértelmű válasz arra, hogy melyik forma működik a legjobban. Végül minden attól függ, hogy milyen hozzáértően épített logikai "vezér" a dédelgetett gombhoz.

A mezők tervezésének szabályai előugró ablakban ugyanaz lesz:

• Légy következetes. Az űrlap kitöltése a lehető legegyszerűbb legyen.
• Ragaszkodj a rendeléshez. Először helyezze el a legkönnyebben kitölthető mezőket (például „név”).
• Fogalmazzon meg egy egyértelmű előnyt. Magyarázd el miért kell a látogatónak kitöltenie az űrlapotés mit fog kapni.

3. ábra Példa a zárt jelentkezési laphoz vezető jó „levezetésre”.

Ne használjon sablon kifejezéseket!

Például kérjen ingyenes konzultációt. Gondoljon több „egyszerű lépés” lehetőségre, képes felkelteni a felhasználó érdeklődését és interakcióra késztetni az űrlappal.

Jó példa erre az autóeladási rés. A szokásos „Kérjen tanácsot egy autó eladásához” helyett egy klassz trükköt alkalmaztak: a látogatót felkérik, hogy azonnal becsülje meg, mennyit kaphat.

Konkrét cselekvésre szólít fel

Kerülje el a „jelentkezés benyújtása” megfogalmazást. Sokkal jobb, ha csinál egy gombot konkrét eredmény leírásával(például „kérjen árajánlatot” vagy „számítsa ki a költségeket”). Ideális esetben a gomb szövegének részben meg kell másolnia a "szemceruzát".

Vonja fel extra figyelmet

Használat grafikus útmutatók. A legegyszerűbb lehetőség az űrlap körüli teret „felszabadítani”, és a látogató szemét irányítani egy mutatóval vagy nyíllal. Így a forma észrevehetőbbé válik, és erősebben vonzza a figyelmet.

Tegye működőképessé a képet (első képernyőn megjelenő fotó szalaghirdetése) a CTA-hoz

Abban az esetben, ha a formát nem lehet grafikai elemekkel kiemelni, vagy a gombot nagyobbra és kontrasztosabbá tenni, egy képen keresztül „hívja fel” rá a felhasználó figyelmét. Okosan válassza ki a fényképét és irányítsa a látogató tekintetét a kívánt irányba.

7. ábra A lány tekintete a formára irányítja a figyelmet

Ismerje meg, hogyan lépnek kapcsolatba a felhasználók az űrlapokkal

Jelentkezési űrlap elemzése megmutatja, hogy mely mezőket töltötték ki/nem töltötték ki a felhasználók. A Webvisor pedig funkcionalitásának köszönhetően "nagy testvérként" működik, amely figyeli a látogató viselkedését. Ha interakció történt az űrlappal, de az adatok valamilyen okból nem lettek elküldve, akkor megmutatja, mi volt a probléma. Más szóval, segít megérteni, hogy a kitöltés mely szakaszaiban vannak nehézségei a felhasználóknak, mely mezőket lehet eltávolítani, és melyeket kell kiegészíteni egy tippel a helyes kitöltéshez.

Köszönet az ügyfélnek ez fontos

Gondolj a részletekre! Jól megtervezett köszönő oldal nem csak az ügyfél iránti tisztelet jele, hanem konverziós eszköz. Még egyszer – távolodj el a mintáktól! Legyen kreatív – a szokásos „Jelentkezését elfogadtuk” kifejezés helyett írjon valami személyesebbet, ami Önre és cégére vonatkozik. A „köszönöm” oldal, ha jól csinálja, jó hely lehet a kísérletezéshez.

következtetéseket

1. Az űrlappal való interakció a kommunikáció csúcsa a céloldal és az ügyfél között. Mielőtt tesztelné a céloldal konverziós elemeit, elemezze a CTA-űrlapokat ellenőrző listánkra hivatkozva.
2. Ellenőrizze a különböző eszközökről érkező adatokat és különböző böngészőkben. Az egyes verziók helyi hibái sokkal gyakrabban fordulnak elő, mint gondolná.
3. Kötelező végezzen formaelemzést annak érdekében, hogy azonosítsa azokat a mezőket, amelyekről az ügyfelek távoznak, hogy megértsük, miért távoznak, és hogyan javítsák ki.
4. Mielőtt módosítaná és tesztelné az űrlapokat számolja meg a már beérkezett kérelmek számát hogy valós képet kapjunk a fejlesztések elvégzése után elért eredményekről.

Legyen teljesen felszerelt, és maradjon versenytársai előtt. Konverziós céloldalak az Ön számára!

Hello barátok! Szeretném felhívni a figyelmet az univerzálisra szkript adatok küldéséhez az űrlapokról e-mailbe. A szkript ideális olyan webhelyekhez, mint a Nyitóoldal, névjegykártya-oldalak stb. A miénk visszajelzési űrlap szkriptje kiemelkedik az interneten található egyéb szkriptek tömegéből, mivel képes arra korlátlan számú űrlap csatlakoztatása különböző mezőkkel ugyanazon az oldalon, és képes rá több címzettnek küldjön e-mailt.

Így. Kezdjük el. Kezdjük a szkript képességeivel.

1. Korlátlan számú űrlap összekapcsolása egy oldalon.
2. A mezők kitöltésének helyességének ellenőrzése.
3. Értesítési beállítások.
4. Lehetőség betűk használatára az egyes űrlapokhoz.
5. Betűtípus - (ha html címkéket használnak)
6. Korlátlan számú címre küldés.
7. Minden űrlap egyedi testreszabása.
8. A szkript a következőn fut, az oldal újratöltése nélkül.
9. Spam bot védelem.

Kezdeti beállítás.

Forgatókönyv könyvtár alapján működik, ezért első dolgunk az, hogy összekapcsoljuk. Ehhez a Google Hosted Libraries használatát javaslom.

Beszéljünk részletesebben a többi fájlról:

feedback.js- fő szkriptfájl, felelős AJAX űrlap benyújtása.
jquery.arcticmodal.js,
jquery arcticmodal.- lehetővé teszi az űrlapok modális ablakban történő megjelenítését.
jquery.jgrowl.js
jquery.jgrowl.css- lehetővé teszi az értesítések megjelenítését az oldalon (blokkok az oldal felső sarkában).

HTML és kötelező attribútumok.

Az összes űrlapelem kötelező attribútuma az attribútum name=""- szükséges az űrlap későbbi konfigurálásához.
Egy gombhoz (type="button") meg kell adni class="feedback". Szeretném felhívni a figyelmet arra is, hogy bármely „feedback” osztályú html címke gombként működhet.

Űrlap hívása modális ablakban

Űrlap modális ablakban történő meghívásához először meg kell határoznia egy műveletet, amikor egy címkére kattint, például egy div-t az osztállyal modal_btn

Mivel az űrlapnak csak a modális ablakban kell megjelennie, el kell rejteni úgy, hogy div-be helyezi a style="display: none;" attribútummal, és be kell csomagolni néhány szabványos divbe a modális ablak stílusához.

Így kitaláltuk az alapvető beállításokat az űrlapok e-mailbe küldéséhez szükséges szkriptünk csatlakoztatásához. Nézzünk most bele, és foglalkozzunk a mezők beállításával, az értesítésekkel és minden mással, ami ott van.

Példabeállítások egy űrlaphoz

Az összes űrlap beállításai egy fájlban vannak tárolva feedback\index.php
$form["form-1"] = array("fields" => array("name" => array("title" => "Név", "validate" => array("preg" => "%% ", "minlength" => "3", "maxlength" => "35", "messages" => array("preg" => "A [ %1$s ] mező hibát tartalmazhat", "minlength " => "A mező [ %1$s ] minimális hossza kisebb a megengedettnél - %2$s", "maxlength" => "A mező [ %1$s ] maximális hossza nagyobb, mint a megengedett hossz - %2$s",)), "tell " => array("title" => "Telefon", "validate" => array("preg" => "/^((8|\+) )[\- ]?)?(\(?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5" ,), "messages" => array("preg" => "A mező [ %1$s ] hibát tartalmazhat", "minlength" => "A mező [ %1$s ] minimális hossza kisebb mint megengedett - %2$s",)))), "cfg" => array(" charset" => "utf-8", "subject" => "Subject", "title" => "Cím a az e-mail törzse", "ajax" => true, "validate" => true, "from_email" = >" [e-mail védett]", "from_name" => "noreply", "to_email" => " [e-mail védett], [e-mail védett]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77" ", "antispamjs" => "address77", "okay" => "Üzenet elküldve - OK", "fuck" => "Üzenet elküldve - HIBA", "spam" => "Spambot", "notify" => " color-modal-textbox", "usepresuf" => false)); // Következő űrlap $form["form-2"] = array("fields" => array(.....
Egy új űrlap beállításainak hozzáadásához létre kell hoznia egy új tömböt $form[""] a $form["form-1"] tömb példáját követve

Ne feledje, hogy a kötelező tulajdonságról beszéltem name=""?

Minden űrlapelem kötelező attribútuma a name="" attribútum – ez szükséges az űrlap későbbi konfigurálásához.

Ideje tehát elmondani, miért volt még szüksége rá.
name="" egy alfanumerikus kulcs a tömbhöz, egyedinek kell lennie a $form[""] tömbhöz

Példa html kódra az érthetőség kedvéért

Most értsük meg a tömböket és mire valók.

$form["form-1"] = array();
$form["form-2"] = array(); stb.
Ezek a fő tömbök minden új űrlaphoz, amelyek tartalmazzák:

1. "fields" => array();- Űrlapelem-beállítások tömbje.
   • "név" => array();- Űrlapelem-beállítások tömbje (pl input name="name" type="text"), amely számos beállítást tartalmaz.
     • "title" => "Az Ön neve"- az űrlapelem neve, hiba esetén vagy a sablonban jelenik meg
     • "validate" => array();- egy tömb, amely tartalmazza az űrlapelem érvényesítési szabályait
       • "preg" => "%%"- reguláris kifejezés
       • "minlength" => "3"- minimális mezőméret
       • "maxlength" => "35"- maximális mezőméret
       • "substr" => "35"- mindig N karakterre vágja
     • "üzenetek" => array();- egy érvényesítő üzeneteket tartalmazó tömb, nevezetesen:
       • "preg" => "Az űrlapelem nem egyezik a reguláris kifejezéssel"
       • "minlength" => "A mező [ %1$s ] minimális hossza kisebb, mint a megengedett hossz - %2$s"- érvényesítési hiba, a kulcs(preg) nem egyezik az érvényesítési kulccsal
       • "maxlength" => "A mező maximális hossza [ %1$s ] meghaladja a megengedett hosszt - %2$s"- érvényesítési hiba, a kulcs(preg) nem egyezik az érvényesítési kulccsal
2. "cfg" => array();- Űrlapbeállítások tömbje.
   • "charset" => "utf-8"- kódolás
   • "subject" => "Tárgy",- Levél tárgya
   • "title" => "Cím az e-mail törzsében",- Fejléc az e-mail törzsében
   • "ajax" => igaz,- ez egy ajax TODO űrlap (ha nem szükséges, tegye - false)
   • "validate" => igaz,- (true) ha űrlap érvényesítést akarunk a szerveren, cserélje ki a js validációt az "ajax" => true értékre. Ha kikapcsolt (hamis), akkor nem állíthatja be a mezőbeállítások érvényesítését. CSINÁLNI
   • "from_email" => "saját e-mail",- feladó, adja meg a mező nevét (name="myemail"), és ha nincs szüksége e-mailre a felhasználótól, akkor egy csonkot [e-mail védett]
   • "from_name" => "nevem",- feladó, adja meg a mező nevét (name="myname"), és ha nincs szüksége felhasználónévre, akkor a No-reply csonkot
   • "to_email" => " [e-mail védett]", - Címzett email-je. Ha több címre szeretne küldeni, válassza el őket vesszővel. Példa ("to_email" => " [e-mail védett], [e-mail védett], [e-mail védett]",)
   • "to_name" => "noreply1",- A vevő neve. Ha több címre küld, vesszővel elválasztva adja meg a címzettek nevét. Példa ("to_name" => "noreply1, noreply2, noreply3")
   • "geop" => igaz,- találja meg a helyet TODO típus szerint
   • "referer" => false,- adja meg annak az oldalnak az URL-címét, amelyről az űrlapot elküldte
   • "type" => "sima",- betűtípus - sima, html (ha html címkéket használnak)
   • "tpl" => false,- használj levélsablont. Ha igaz, akkor a sablonfájl az űrlapnévnek (name="form-1") megfelelően kapcsolódik a mappából és a fájl (feedback/tpl/form-1.tpl) feldolgozásra kerül, különben minden úgy kerül elküldésre, ahogy van, minden mező egy új sorban
   • "antispam" => "email77",- Anti-spam, a módszer egy rejtett (display:none) mezőn alapul, amelyet csak a robot tölt ki automatikusan, ezzel megszemélyesítve önmagát.
   • "antispamjs" => "cím77",- Anti-spam, a módszer egy eredetileg kitöltött rejtett (display:none) mezőre épül, ami oldalbetöltéskor automatikusan törli a javascriptet, ezt még egy okos robot sem tudja előre látni, majd letiltásra kerül.
   • "oké" => "Üzenet a felhasználónak",- Az űrlap sikeres elküldése esetén üzenet jelenik meg a felhasználónak, használhat html címkéket.
   • "fuck" => "Üzenet a felhasználónak",- Üzenet a felhasználónak, akkor jelenik meg, ha hiba történik az űrlap elküldésekor, használhat html címkéket.
   • "spam" => "Üzenet a felhasználónak",- Egy üzenet a felhasználónak, amely akkor jelenik meg, ha spamrobot gyanúja merül fel, használhat html címkéket.
   • "notify" => "color-modal",- milyen típusú értesítések jelenjenek meg, szövegdoboz - blokkok az oldal felső sarkában, szín - színes kiemelés az űrlapon, modális - modális ablak az oldal közepén, nincs - letiltása. A TODO modális ablakban kombinálhatja például: color-modal - a mezők kitöltésének hibáit kiemeléssel és a küldés szöveges állapotát
   • "usepresuf" => false- Akár a tárgyhoz, akár a levél címéhez használunk egyéni kiegészítést, kisebb változtatás esetén megadhatjuk pl. %%cfg.title.suffix%%, ehhez kell egy rejtett mező. formában, további részletekért lásd a presuf() függvényt

E-mail sablonok beállítása

Így. Most foglalkozzunk üzeneteink tematikájával.
Először is, ahhoz, hogy az űrlapot sablonban küldje el, engedélyeznie kell egy sablonfájl használatát az űrlapbeállításokban - "tpl" => igaz,
Másodszor, létre kell hoznia egy *.tpl kiterjesztésű sablonfájlt a mappában ( visszajelzés/tpl/), az űrlapnév szerint ( name="form-1").

Példa: ( feedback/tpl/form-1.tpl)

Fejléc az e-mail törzsében
%%name.title%%	%%name.value%%
%%tell.title%%	%%mond.value%%

név, mond stb. - Ezek a felhasználó által kitöltött mezők attribútumai (name="").
cím- Az űrlapelem neve, amely az űrlapelem-beállítások tömbjében van beállítva.
érték- Az űrlap elem értéke.

Egyelőre ennyi, de a forgatókönyv biztosan nem tökéletes, ezért szívesen fogadjuk a megjegyzéseket és a hibaleírásokat, amelyeket a későbbi verziókban javítani fognak.

P.S. A forgatókönyvet a csapat fejlesztette ki