Sziasztok! Ebből a cikkből megtudhatja, hogyan hozhat létre előugró űrlapot. Visszacsatolás html és wordpress oldalakhoz. Mindenekelőtt ilyen űrlapokra lesz szükség az online áruházakhoz, a céloldalakhoz és az egyszerű névjegykártya-oldalakhoz, mivel ez valóban kényelmes a felhasználó számára.

Például egy látogató felkereste az Ön webhelyét, átnézte a szükséges információkat, úgy tűnik, készen áll az Ön termékének vagy szolgáltatásának megrendelésére, de nem akar egy másik várost felhívni és nagy pénzt költeni. Ilyen pillanatokban jön a segítség a felugró visszajelzési űrlap.

Hozzon létre egy html kapcsolatfelvételi űrlapot

Tehát tegyük fel, hogy már van egy weboldala, és szeretne létrehozni egy űrlapot, amelynek kitöltésekor a felhasználó visszajelzést kaphat Öntől. Ehhez először maga a keret jön létre.

Illessze be a következő kódot a megfelelő helyre a webhelyen:

Online alkalmazás

Opcionálisan hozzáadhat további mezőket az információk megadásához, vagy eltávolíthatja a meglévőket. Határozottan nem javaslom, hogy az ilyen űrlapokon captcha vagy más bot elleni védelmet használjon, ami megnehezíti a felhasználó számára az űrlap kitöltését.

A kód be van helyezve, mit látunk?

A forma megjelent, de meg kell nézni. Ehhez adja hozzá a következő stílusokat:

/* Kapcsolatfelvételi űrlap */ #inline ( margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; ) .txt ( display:inline-block; color:#676767; width:190px; margin-bottom:10px; border: 5 margin-bottom:10px; border:c-xpxpx; px! fontos :focus, .txtarea:focus ( border-style:solid; border- color:#bababa; color:#444; ) input.error, textarea.error ( border-color:#973d3d; border-style:solid; background:#f0bebe; color:#a359959,-area: border.r-orre):infocusputcus.r; #973d3d; color:#a35959; ) #send ( color:#FFFFFF; display:block; cursor:pointer; pad ding:5px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C2-smargin; width):#70C261Btom :hover ( háttér:#979797; ) /* Visszajelző űrlap */

Sokkal jobb már. Mindenesetre igazítani kell az űrlapot, hogy illeszkedjen általános kialakítás oldalon, így a tiéd végül más lesz, mint az enyém.

Ez így néz ki:

Mi történik? A látogató rákattint a mezőre, és a szkript egy kész maszkot helyettesít neki, az országkóddal. Elég kényelmes.

Ehhez csatlakoztatnia kell a maszk szkriptet. A cikk legvégén letöltheti a forráskóddal együtt.

A szkriptet a záró tag előtt kapcsoljuk össze. Ne felejtse el megváltoztatni a fájl elérési útját a sajátjára. Oké, a visszajelzési űrlap elkészült, a stílusok beállítva, most kezelőt kell rá rakni, hogy az értesítések megérkezzenek a leveledre.

Ehhez illessze be a következő szkriptet a záró címke elé:

Hogyan működik ez a szkript?

1. Elvégzi a beírt e-mail érvényesítését.
2. Meghatározza azokat a mezőket, amelyekkel dolgozni kell.
3. Érvényesíti ezeket a mezőket a kitöltéshez. Ha a kötelező mezők nincsenek megadva, akkor megjelenik egy üzenet, hogy ki kell tölteni.
4. Feldolgozza a bevitt információkat, és kezdeményezi a postára küldött értesítés küldését.
5. Üzenetet küld a felhasználónak, hogy kérését elfogadták az Ajax használatával.

Utolsó teendő, hogy létrehozza a sendmessage.php fájlt, és illessze be a következőket php kódés töltse fel webhelye gyökérkönyvtárába.

Új üzenet\r\n"; $msg .= "

Név:".$felhasználónév."

\r\n"; $msg .= "

Telefonszám:".$felhasználói telefon."

\r\n"; $msg .= "

Levél:".$usermail."

\r\n"; $msg .= "

Üzenet:".$tartalom."

\r\n"; $msg .= " "; // üzenet küldése if(@mail($sendto, $subject, $msg, $headers)) ( echo "true"; ) else ( echo "false"; ) ?>

Ez minden, készen áll egy egyszerű visszajelzési űrlap a html oldalhoz. Ne felejtse el megváltoztatni a sendmessage.php fájl e-mail címét a sajátjára.

Előugró visszajelzési űrlap hozzáadása a webhelyhez

Vannak esetek, amikor szüksége van egy előugró űrlapra, amely akkor nyílik meg, amikor egy gombra kattint. Nagyon könnyű elkészíteni. Példaként vegyük a korábban elkészített űrlapot, és dolgozzunk vele.

Először is csatlakoztatnunk kell a jqury fancyboxot, amelyet a cikk végén tölthet le.

Adja hozzá ezeket a sorokat a záró body címke elé, csak módosítsa a fájl elérési útját a sajátjára.

És stílusokat adunk neki.

Modalbox ( color:#FFFFFF; display:block; cursor:pointer; padding:10px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; text-dalalign:centobox;0margin.xnone;0text-decoration:centobox; lebeg (háttér:#9797 97;)

Kérjük, vegye figyelembe, hogy a gombra kattintva felugró ablak jelenik meg, hozzá kell rendelni a modalbox osztályt és a href="#inline" elérési utat. E nélkül a felugró űrlap nem nyílik meg az oldalon.

Ezután elrejtjük a korábban készített űrlapot, hogy az egy felugró ablakban nyíljon meg. Ehhez le kell cserélni a #inline stílusokat a régiekről az újakra.

#inline ( megjelenítés: nincs; margó bal: 30 képpont; szélesség: 80%; margó: 0 automatikus; háttér: #fff; kitöltés: 10 képpont 20 képpont; )

Ennek eredményeként egy ilyen gombot kapunk.

Ha rákattint, megnyílik egy felugró ablak a visszajelzésekkel.

Ismét a stílusok, a mezők és az elemek elrendezése igény szerint módosítható. Például a webhelyről történő visszahíváshoz elegendő csak 2 mezőt hagyni - név és telefonszám, és eltávolítani a többi mezőt.

Ne felejtse el, hogy az űrlap működéséhez hozzá kell adnia a fent közzétett kezelőt a webhely végén, és fel kell töltenie a fájlt a webhely gyökerébe. üzenet küldése.php.

Visszajelzési űrlap a wordpresshez

Ha webhelyét a wordpress üzemelteti, speciális bővítményeket használhat kapcsolatfelvételi űrlap hozzáadásához. Az egyik legjobb pluginok kapcsolatfelvételi űrlap 7. Letöltheti a hivatalos webhelyről, vagy a Bővítmények részben található adminisztrációs panelről.

A bővítmény aktiválása után egy új lap jelenik meg a bal oldali menüben. Nyissa meg, és kattintson az Új hozzáadása gombra.

Adjon meg egy nevet új forma, válassza ki azokat a mezőket, amelyeknek szerepelniük kell az űrlapon. Általában elegendőek a szabványosak, amelyek automatikusan hozzáadódnak. Formában tartani.

Mentés után egy rövid kód jelenik meg a képernyőn, amelyet arra az oldalra kell beilleszteni, ahol a kapcsolatfelvételi űrlapot meg kell jeleníteni, például a Kapcsolatok oldalon.

Másolja ki ezt a kódot, menjen ide kívánt oldalt, válassza ki a "Szöveg" formátumot a vizuális szerkesztőben, illessze be ezt a rövid kódot, és mentse az oldalt.

Ezután ellenőrizzük, hogy az űrlap megjelenik-e az oldalon, és megfelelően működik-e. Ehhez elegendő csak arra az oldalra menni, ahol a kódot beszúrták. Ilyen űrlapot kell készítenie:

Mostantól webhelyének látogatói felvehetik Önnel a kapcsolatot a wordpress motoron létrehozott kapcsolatfelvételi űrlapon keresztül.

Felugró visszajelzési űrlap készítése a wordpresshez

Én magam nem szeretek plusz beépülő modulokat hozzáadni ehhez a motorhoz, mivel ezek betöltik az oldalt, lelassítva azt. Ezért egy felugró űrlapnál általában 2 lehetőséget használok.

1. A cikkben fentebb leírt felugró űrlapot egyszerűen nem a html oldalra, hanem a motorra rögzítjük.
2. A Contact Form 7 felugró beépülő modullal létrehozott űrlap, néhány kisebb módosítással.

Az első módszert már fentebb leírtuk, ezért térjünk át a másodikra.

Először illessze be a következő kódot közvetlenül a nyitó body címke mögé.

x

Lássuk, mi is az:

• Az id="callme-open" hivatkozásra kattintva megnyílik az űrlapunk. Kérjük, vegye figyelembe, hogy ezt a hivatkozást nem a nyitott címke után kell beszúrni, hanem arra a helyre, ahol ezt a gombot szeretné elhelyezni. Általában a fejléc jobb sarkában, a cég telefonszáma mellett található.
• A bg-b blokk elsötétített webhely hátteret hoz létre az előugró űrlap megnyitásakor.
• A callme blokk magát a visszajelzési űrlapot fogja tartalmazni.
• X - ez lesz a keresztünk az űrlap sarkában, erre kattintva bezáródik az űrlap.
• Nos, az a php kód, amiben a Contact Form 7 plugin rövid kódja elindul.

Felhívjuk figyelmét, hogy az Ön azonosítója és űrlapneve eltérhet az enyémtől. Új kód hozzá, most stílusokat adunk neki.

Bg-b ( pozíció: abszolút; szélesség: 100%; magasság: 100%; bal: 0; felül: 0; háttér: rgba(51,51,51,0,55); z-index: 1000; ) törzs ( pozíció: relatív; ) .callme ( pozíció: rögzített; felső: 30%; bal: 50%lefelé; szélessége: 50%xpx; : 1100; háttér: #fff; kitöltés: 20 képpont 20 képpont 10 képpont; szegélysugár: 4 képpont; )

Mentse el a kódot és ellenőrizze. Az űrlapot most a képernyő közepén kell elhelyezni, mögötte áttetsző, sötétített háttérrel. Minden rendben van, de hozzá kell tenni az utolsó dolgot - egy szkriptet, amely megnyílik és elrejti ez a forma a kívánt gombokra kattintva.

Ezt a szkriptet a láblécfájlba kell beilleszteni, a záró body címke elé.

Az utolsó simítások hátravannak, és elkészül a felugró űrlap a wordpressen. Adja meg a .callme és a .bg-b osztályoknak a display:none stílust. Erre azért van szükség, hogy az űrlap ne jelenjen meg a képernyőn az oldal indításakor.

Több lehetőséget is megbeszéltünk Önnel a visszahívási űrlap létrehozására. Remélem, hogy nem lesz problémája az űrlap implementálásával a webhelyén. Ha bármilyen problémája vagy kérdése van, mindig kaphat tanácsot a megjegyzésekben.

FRISSÍTÉS 2018.06.06

BAN BEN legújabb verziói WordPress A jQuery szkriptek nem működnek a $ szimbólummal, ezért ezt figyelembe kell venni, és a $-t jQuery-re cserélni

Gyakran előfordul olyan probléma, hogy a webhelyen lévő átmenő űrlap leáll a címre belső oldalak. Ennek elkerülése érdekében adja meg a sendmessage.php fájl teljes elérési útját a kezelőben. Például így:

URL: "http://site.ru/sendmessage.php"

Az első két űrlap forráskódját pedig letöltheti

FRISSÍTÉS 2018.07.04

Közkívánatra korszerűsítettük a visszajelzési űrlapot. Most figyelembe veszi az adatok elküldéséhez szükséges jelölőnégyzetet az Orosz Föderáció 152-FZ „A személyes adatokról” törvényével összhangban, javult a képernyő bármely felbontásához való alkalmazkodóképesség, a js és css fájlokat tömörítették.

Most már megtekintheti a példát, valamint letöltheti a frissített visszajelzési űrlap és a felugró űrlap forrásait a hivatkozások követésével.

Tudja, hogy a felhasználók akár 80%-a jelentkezés kitöltése nélkül hagyja el webhelyét, mert a webhelyén található visszajelzési űrlap messze nem ideális? Vagy biztos abban, hogy a jelentkezési lapja tökéletes és a maximális konverziót biztosítja?

A stúdiónkat megkereső új ügyfeleink egyre gyakrabban fordulnak elő az oldal létrehozásának, népszerűsítésének megvitatása során az átalakításon. Ez teljesen helyes kérdés, hogy mikor beszélgetünk az internetes marketingről, mert ha nem hoz vásárlókat az oldal, akkor nincs értelme időt és pénzt fektetni bele. Mai blogunkban az egyik olyan tényezőről lesz szó, amely nagyban befolyásolja a cég honlapjáról érkező ügyfelek számát. Ez a tényező a visszacsatolási formák, vagy ahogy más néven „elfogó formák”. Mi a visszajelzés ideális formája.

Rögtön megjegyezzük, hogy az üzleti szegmenstől függően ez a forma eltérő lehet, mivel minden vállalkozásnak megvannak a saját feladatai, saját formátumai az ügyfelekkel való interakcióhoz. Ez az az űrlap, amely „kommunikál” az ügyféllel, miközben a menedzser felhívja a többi kapcsolattartót, és új jelentkezésekre vár.

Fontos az oldalon található visszajelzési űrlap. Ön észrevétlenül és diszkréten rávezeti a vevőt a vásárlásra vagy a szolgáltatás megrendelésére. Használjon mindent, amit csak lehet, a felhasználóbarát felülettől a kiváló értékesítési feltételekig. De amikor az ügyfél a megrendelőlaphoz ér, elmegy. Minden munka a lefolyóban van. Nem valószínű, hogy valaha is visszatér hozzád. Ez elkerülhető a visszajelzési űrlap egyszerű megváltoztatásával.

Mire való a visszajelzési űrlap?

Nem csak rendelés/vásárlás esetén. A visszajelzési űrlap segítségével megtudhatja a felhasználóktól, hogy mit szeretnek/nem szeretnek, mik a "jamb"-ok a cég munkájában, sőt kész tanácsokat is kaphat a fejlesztéshez. A felhasználókkal folytatott beszélgetés a következő:

a) növelje cége iránti lojalitását;

b) a kérések gyors megválaszolása, a negatív visszaszorítás és az ügyfél megtartása;

c) a termék vagy szolgáltatás fejlesztésének lehetősége;

d) az eladások növelésének módja.

A tapasztalatlan webhelytulajdonosok fő hibája a túlterhelt visszajelzési űrlap. A felhasználókat elriasztja a mezők nagy halmaza, amelyeket ki kell tölteni ahhoz, hogy kérést intézhessenek a cégéhez. Nem akarnak felesleges információkat adni magukról, még akkor sem, ha bizalmas kezelést ígérnek nekik. Összegyűjtöttünk Önnek néhány szabályt az ideális forma kialakításához.

1. számú szabály. Legyen az űrlap a lehető legegyszerűbb

Az alábbi űrlapok közül melyiket töltené ki szívesebben?

Vagy ilyen

Csak a legfontosabb mezőket hagyja meg. A legtöbb webhely látogatói nem szeretnek kitölteni nagyszámú mezőket

Az űrlap egyszerűsítési szabály betartása esetén 30-60%-os konverziónövekedésre kell számítanunk.

Tanács. Távolítson el minden szükségtelent, hagyjon 2-3 mezőt, vagy akár 1-et is. Általában ez a „Név”, „telefonszám vagy e-mail cím”. Ha van webáruháza és megrendelőlapot készít, akkor egy kicsit több mező lesz: „Név”, „Telefonszám vagy e-mail”, „Szállítási lehetőség”, „Áru mennyisége”, „Cím”. Nézze meg, milyen célból készít visszajelzési űrlapot, és egyszerűsítse azt, amennyire csak lehetséges.

2. számú szabály. Az űrlapnak láthatónak kell lennie

Az oldalról érkező visszajelzésnek vagy jelentkezési lapnak észrevehetőnek kell lennie, különben a látogató egyszerűen nem veszi észre, és nem tölti ki. Akár valamilyen animált elemet is elhelyezhet, amely lehetővé teszi a további fókuszálást.

3. számú szabály. Minimális "kötelező mezők"

Egy kötelező mező - telefon

A cégek weboldalain gyakran nem csak egy plusz mezőkkel túlterhelt űrlapot lehet megfigyelni, hanem ezen mezők kitöltésének kötelezettségét is. A „kötelező mező” felirat az oldalak 99%-án megtalálható. Növelni szeretné a konverziót? Törölje az összes mező kötelező kitöltését, kivéve a telefonszámot. Ha valaki akarja, ő maga tölti ki az általa szükségesnek tartott mezőket, de a fő mező a telefonszám, amely lehetővé teszi az ügyfél visszahívását és az összes többi információ tisztázását. A legfontosabb dolog az, hogy ne felejtsük el megírni a megfelelő szkripteket a vezetők számára.

Milyen esetekben esik a formákból való átalakítás:

• 3%-os csökkenés a konverziókban, ha életkor mezőt kér
• A konverziók csökkenése 10%, ha meg kell adnia a teljes nevét
• A konverziók csökkenése 2%, ha érdekel, hogy melyik településen lakik a látogató
• A konverziók csökkenése 4%, ha a lakcímet kell kitölteni

Ha a webáruházban a szállítás, cím és teljes név mezők szerepelnek, akkor ezeket természetesen a felhasználó tölti ki, és ez nem befolyásolja a konverziót. De ha azt akarja, hogy kitöltse az adatokat, hogy elküldje Önnek a jelentkezést, akkor az átalakítás biztosan el fog esni.

4. számú szabály. Linkek az űrlapon (kapcsolatfelvételi feltételek)

Ha látogatót kell küldenie, hogy elolvassa a kapcsolatfelvételi feltételeket, jelentkezéseket, rendeléseket stb., akkor ezeket a hivatkozásokat közvetlenül az űrlapblokkban kell elhelyeznie. Ha egy ilyen hivatkozásra kattint, jobb, ha egy felugró ablakot jelenít meg olyan információkkal, amelyeket könnyen be lehet zárni és folytatni az űrlap kitöltésével.

Példa egy ilyen formára:

Próbálja minimalizálni a szöveg és a feltételek mennyiségét az űrlapon, mert a felhasználó lusta lesz mindent újraolvasni, és egyszerűen bezárja az űrlapot anélkül, hogy elküldené az adatait. Ezen az űrlapon is vannak hibák – túl sok kötelező mező.

5. számú szabály. Hozzájárulás az adatkezeléshez

Bár előfordulhat, hogy az űrlapon szereplő adatok hibásan vannak kitöltve, és nem személyes adatok, ezt a jelölőnégyzetet be kell jelölni. Voltak már olyan bírósági kérelmezők, akiknek elmulasztása miatt az alpereseknek pénzbírságot kellett fizetniük ezt a követelményt Jogszabályok.

6. számú szabály. A legördülő listáknak nem szabad

Ha az űrlap egy számológép, akkor a legördülő lista elfogadható. De ha arra kényszeríti az embert, hogy válassza ki a cég melyik részlegére kíván jelentkezni, akkor ez csökkenti az átváltást, mert a felhasználók gyorsan szeretnék kitölteni az űrlapot, anélkül, hogy felesleges információkra gondolnának.

7. számú szabály. Távolítsa el a captchát az űrlapból

A captcha beírása akár 40%-kal is csökkentheti a konverziók számát. Ennek az az oka, hogy gyakran a captcha egyáltalán nem kerül beolvasásra, vagy adatbevitelkor hibás karakterbevitelt jelez. Ha korábban a captcha-t az indokolta, hogy enélkül rengeteg spam jöhetne, most már léteznek olyan technológiák, amelyek megvédik az űrlapot a spamrobotok általi adatbeviteltől anélkül, hogy a captcha beírása volna.

Az artcell stúdióban éppen ilyen technológiát használunk. Amint látja, űrlapjainkon nincsenek captchák, és nem kapunk SPAM-et.

8. számú szabály. Automatikus értesítés az űrlap elküldéséről

Az űrlap kitöltése és elküldése után egy üzenetnek kell megjelennie arról, hogy az adatok elküldésre kerültek, és a vezető a lehető leghamarabb visszahívja Önt. Ha nincs ilyen értesítés, akkor a felhasználó nem érti, hogy az adatot elküldték-e vagy sem, várjon-e hívást a cégtől vagy sem. Ez az értesítés megóvja Önt attól, hogy ugyanazon felhasználó alkalmazásait duplikálja.

9. számú szabály. SMS értesítés

Automatikus értesítés küldése a látogató számára, ha az űrlapon volt telefonszám megadására szolgáló mező. Ezzel személyre szabhatja üzenetét, és a felhasználót ismét emlékeztetni fogja a cége neve.

Tehát mi a visszajelzés ideális formája?

Kerettel vagy színnel kiemelve, amely lehetővé teszi, hogy jobban észrevehető legyen a webhely többi információjának hátterében

Minimálisan kitöltendő mezők

Egy vagy két kötelező mező

Hiányzó legördülő mezők

Egy jelölőnégyzet megléte, amely hozzájárul a kapott adatok feldolgozásához

A hivatkozások és a további feltételek azonnali jelenléte az űrlapon, anélkül, hogy szükségtelen átmenetek történnének a webhely más oldalaira

Nincs captcha

Van egy ideális jelentkezési lapja, de még mindig kevés az ügyfele? Olvassa el ezt a blogot magazinunkban, és megtalálja a választ kérdésére. Ha webhelye nem teljesít megfelelően kereső motorok akkor ez az információ hasznos lesz az Ön számára.

Ha nem tudja ideálissá tenni a kapcsolatfelvételi űrlapot, és szeretne szakemberekhez fordulni segítségért, akkor töltse ki az alábbi jelentkezési lapot és menedzserünk a lehető leghamarabb visszahívja Önt.

2019.08.10 Viktar Haurylavets

Az oldal látogatóinak való visszajelzés érdekében különféle típusú űrlapokat használnak az elérhetőségi adatok elküldésére az oldal adminisztrációjának. Ez lehet telefonszám, e-mail cím vagy csak üzenet.

A visszacsatolás megszervezésének alapelvei

A visszacsatolás különféle technológiákkal valósítható meg, de az alapelv változatlan marad. Tovább blokk diagramm ez így néz ki.

Az oldalon való visszajelzés megszervezésének sémája.

Csak az elméleti pontoknál fogunk kitérni, a megvalósítást honlapunk más cikkeiben találja, a link fent.

Forma

Maga a forma is része HTML dokumentum, így a felhasználónak csak meg kell mutatnia a megfelelő űrlapot, és ezt könnyebben megteheti címkékben

, amelyek a Beküldés vagy Kérelem benyújtása gombot tartalmazzák, amelyre kattintva az űrlap további feldolgozása történik.

Nagyon fontos a kötelező mezők helyes és egyértelmű feltüntetése, amelyeket gyakran a * szimbólum jelöl. Elvileg magát az űrlapot is meg lehet írni címkékbe

, de van különbség. Ha

az action attribútumban megadott POST kérést generál, amivel kényelmesen használható a szerveren történő további feldolgozáshoz PHP használatával, Python, Java és így tovább, akkor div esetén JavaScriptet kell használni. Továbbá JavaScript használatával Ajax kéréseken keresztül is küldhet adatokat, ebben az esetben az oldal nem frissül a böngésző sorában.

Az elv azonban ugyanaz - néhány adatot elküldünk a szervernek.

Milyen adatokra van szükség?

Ez vagy egy telefonszám a visszahíváshoz, vagy Email visszajelzésért. Néha kötelezővé teszik a név mezőt, de vajon a kapcsolattartási adatok megszerzése a cél?

Kérelem feldolgozása a szerveren

A végső megvalósítás a használt technológiától és programozási nyelvtől függ. A visszajelzési űrlapról küldhet egy levelet, hogy új alkalmazás jelent meg, vagy leadhat a CRM-ben (ügyfélkapcsolat-kezelő rendszer, ahol a cég összes ügyfelét rögzítik). Gondoskodnia kell azonban arról, hogy a leveleket a szerverről küldjék és azonnal kézbesítsék.

Válasz a szervertől

A szerveren történő feldolgozás után választ küldünk, hogy lehetett-e levelet küldeni, vagy kérést regisztráltak, hogy a felhasználó tudja, hogy várja-e a válaszát vagy sem. Általános szabály, hogy vagy egy üzenetet tartalmazó felugró ablakon keresztül valósul meg, vagy egy külön oldalra való átirányítás történik a sikeres kérés elküldéséről szóló üzenettel.

A kód HTML-be és PHP-be történő közvetlen elemzéséhez lásd.

1. Beépülő modul online űrlapok létrehozásához "jFormer"

Kapcsolatfelvételi űrlapok készítése: visszajelzés, hozzászólás, bejelentkezési űrlap, regisztrációs űrlap a megadott adatok helyességének ellenőrzésével.

2. Lépésről lépésre regisztrációs űrlap a jQuery használatával

Letisztult forma, lépésről lépésre tölthető. Az alábbiakban az űrlap kitöltésének mutatója látható.

3. Lépésről lépésre űrlap

Az űrlap több lépésben történő kitöltése a kitöltés helyességének ellenőrzésével.

4. Kapcsolatfelvételi űrlap a webhelyhez

A bemeneti információk helyességének ellenőrzése "menet közben" történik, mielőtt üzenetet küldene javascript használatával.

5. Animált váltás az űrlapok között a jQuery-n

Animált váltás a jQuery használatával a bejelentkezési űrlap, a regisztrációs űrlap és a jelszó-helyreállítási mező között. A bemutató oldalon kattintson a sárga linkre a hatás megtekintéséhez.

6. Előugró PHP kapcsolatfelvételi űrlap

Egy ilyen megoldással a látogató bármely oldalról gyorsan kapcsolatba léphet az oldal tulajdonosával. A bemutató oldalon kattintson az alábbi nyílra az űrlap megnyitásához.

7. PHP regisztrációs űrlap jQuery és CSS3 használatával

Űrlap a megadott adatok érvényesítésével.

8. Facebook Style PHP regisztrációs űrlap

Szép regisztrációs űrlap CSS, PHP és jQuery segítségével.

9. jQuery "SheepIt" kapcsolatfelvételi űrlap

Megvalósította az új mezők hozzáadásának lehetőségét az üzenet küldése előtt.

10. Fancy AJAX kapcsolatfelvételi űrlap

aranyos ügyes PHP űrlap visszajelzést a megadott adatok helyességének ellenőrzésével. Technológiák: CSS, PHP, jQuery.

11. Engedélyezési / regisztrációs rendszer az oldalon

12. Benyújtási űrlap

A kitöltés helyességének ellenőrzésével.

13. jQuery "Contactable" beépülő modul

Kimenő visszajelzési űrlap megvalósítása az üzenet gyors elküldéséhez.

Minden oldalnak rendelkeznie kell egy visszajelzési űrlappal, így előbb-utóbb mindannyian elgondolkodunk a fejlesztésén. Rengeteg lehetőség van a hálózaton, valaki népszerű pluginokat használ, valakinek saját személyes tapasztalata van, de a legtöbben kész megoldásokat keresnek. Mindenesetre a miénk weboldal visszajelzési űrlapot működőképes és működőképes lesz, és mindez rendben van.

HTML

Kezdjük tehát, mint mindig, a szokásos üres - html -vel. Először egy több mezőt tartalmazó űrlapra van szükségünk. 3 mezőt veszünk az áttekinthetőség és az összes forma színvonala érdekében. Azok. ez lesz a név, e-mail cím és telefonszám.

Minden bemenetünknek megvan a maga egyedi neve, amire később szükségünk lesz az üzenetek küldéséhez. Ön is szabadon hozzáadhat saját mezőket, és nem csak beírhat, hanem kiválaszthat szövegterületet is. Csak ne felejtse el megadni mindegyiküknek a saját nevét, amelyet az információk levélben történő elküldésekor fogunk használni. A kényelem kedvéért minden mezőt hozzáadtam kötelező attribútum, aminek köszönhetően a böngésző nem engedi meg a felhasználónak, hogy üres értékeket küldjön el, és értesítse őket a kitöltés szükségességéről.

css

Ha készen van a forma, egy kicsit módosíthatod. Mindez az Ön igényeitől és fantáziáitól is függ. Az érthetőség kedvéért minden elemhez felvázoltam néhány stílust, hogy ne tűnjön olyan laposnak minden. De ha túl lusta vagy, vagy nem tudod, hogyan kell csinálni, akkor használhatod az én verziómat:

Form (max. szélesség: 400 képpont; szélesség: 100%; margó: 0 auto; ) input (dobozméret: keret-doboz; megjelenítés: blokk; keret: nincs; box-shadow: beszúrás 0px 0px 4px 1px rgba(0, 0, 0, 0.10px; szélesség: 0,11px; 0% margó: 0,11px); px 0; körvonal: nincs; ) bemenet ( háttér: piros; szegély: nincs; box-shadow: 0px 2px 0 1px #C50909; szegélysugár: 5px; szín: fehér; szövegátalakítás: nagybetűs; font-súly: 600; szélesség: 200px; kurzor:--ver box; 0 in.hotters: átmenet hadow: 0px 2px 0 1px fekete;)

Ügyfél oldal

Itt már érdemes részletesebben megérteni, pontosabb kiválasztani magának a megfelelő lehetőséget. Az üzenetek levélre küldéséhez a php nyelvet kell használnunk, pl. teremt külön fájl, amelyre ezeket az adatokat továbbítjuk. De mi ez a módszer itt nem vesszük figyelembe, hiszen sokkal szebb, ha minden az oldal újratöltése nélkül történik. Ezért megfontoljuk az adatok ajaxon keresztüli küldését.

Ha a dolgokat a régimódi módon szeretné elvégezni, akkor kissé módosítania kell a felső html-t, és be kell állítania az űrlap metódus attribútuma értékét (post or get). Minden attól függ, hogy hogyan kívánja elküldeni az adatokat az űrlapról. És ne felejtse el beírni a műveletet, amely jelzi a php fájl elérési útját.

És haladunk egy fejlettebb módszerrel, és az oldal újratöltése nélkül küldünk adatokat, és a szervertől választ kapva üzenetet adunk a felhasználónak a sikeres műveletről vagy hibáról. Viszont 2 fájl is kell mondjuk contact.phpÉs custom.js.

Először is ne felejtse el mellékelni a könyvtárat Jquery, segítségével többszörösre csökkentjük a kódot, és kész megoldások segítségével könnyedén végrehajthatunk bármilyen műveletet.

[ ));

Most nézzük meg a műveletek sémáját, és hogy miért van szükségünk ezekre a könyvtárakra és fájlokra. Amikor a felhasználó rákattint a küldés gombra, akkor van egy beküldési eseményünk, amit custom.js-ben írunk be, és ez alapján minden adatot megkapunk az űrlapról és továbbítjuk a contact.php fájlba. Itt még egyszer ellenőrizzük, hogy a mezők üresek-e (hogy elkerüljük az újabb spam lehetőségét), üzenetet küldünk e-mailre, és értesítjük a felhasználót az eredményekről, amelyeket válaszként a custom.js-nek továbbítunk.

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail"]); $txtphone = trim($_POST["]m); [e-mail védett]"; // Ide írja be e-mail címét $emailTo = " [e-mail védett]"; $subject = "Visszajelzés"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "Feladó: Űrlappélda<$fromMail>\n"; $headers .= "Tartalom típusa: szöveg/sima; charset="utf-8"\r\n"; $headers .= "MIME-verzió: 1.0\r\n"; $headers .= "Dátum: ". date("D, d M Y h:i:s O") ."\r\n"; // üzenet törzse $body = "E-mail érkezett innen: ".$site." \n\nNév: ".$txtname."\nTelefon: ".$txtphone."\ne-mail: ".$txtemail."\nÜzenet: ".$txtmessage; mail($emailTo, $subject, $body, $headers); echo "ok"; )

Ez a legelemibb példa a kapcsolatfelvételi űrlap működésére. Számos lehetőség van a php check fájl módosítására, saját osztályok létrehozására stb. A mi feladatunk azonban az volt, hogy készítsünk egy egyszerű és működő példát, amelyet felhasználhat a webhelyén.

demó

fájlokat

Kész pluginek

Mióta be van kapcsolva WordPress blog, akkor valószínűleg készen állsz és szívesen használsz mindenféle bővítményt, különösen, ha teljesen béna vagy a programozásban és az elrendezésben. És nem hibáztatom ezért, sőt az egyértelműség kedvéért fel is tudom hívni valamelyiket. Ennek a bekezdésnek a célja nem egy ajánlás, hanem csak egy példa, mivel a plugint használtam Kapcsolatfelvételi űrlap 7 több projektben.

Nagyon könnyű beállítani, és szinte mindig hibátlanul működik. Ha saját egyedi dizájnt kell létrehoznia, megteheti. Csak hozzá kell adnia a szükséges mezőket a konstruktorban, le kell fordítania és módosítania kell a hibákról és a sikeres beküldésekről szóló értesítéseket a maga módján, és már kész is. Ezután másolja ki a rövid kódot, és illessze be az űrlap kimenetének megfelelő helyére.

Soha nem volt problémám a bővítménnyel, és ha gyors és kész megoldásra van szüksége, akkor ez az. Ha saját funkcionális és tervezési követelményei vannak az űrlaphoz, akkor jobb az első opciót használni, amely tudást igényel ebben az iparágban.