Ebben a leckében szeretném használni kétféle visszajelzést: samopisnaya az Ajax és a Contact Form 7 plugint.
Ideális esetben, megmutatom, hogyan lehet létrehozni egy felugró visszajelzési űrlapot, ő felugró kapcsolati űrlapot 7 vagy bármilyen más tetszőleges visszajelzés formájában a modális ablakot.
Ahhoz, hogy sikeresen működik felugró formában van, szinte nem kell ismerete PHP és a JavaScript, - csak kövesse az alábbi lépéseket.
Mert minden alkalommal WEB - programozó, hoztam létre, és láttam több mint száz pop formája: a samopisnyh alapján és kész modális fancybox ablaktípushoz, albumba, és hasonlók. Eszerint tapasztalatom alapján meg hoztam a legkényelmesebb és egyszerű formája felugró modális ablakok, áttetsző fehér forma a fekete háttér, ők veled, és szeretném megosztani.
Visszajelzés formában egy modális ablak
menük haladó felhasználók számára, én most leírni 3 kódja alkatrészek (javascript, html, SSC) létrehozására és működésének modális ablakot. Ezután megmutatom, hogyan kell integrálni ezt a kódot CMS WordPress felhasználóknak, akik nem nagyon ismerik a programozás. Egyenesen az integráció a pop-up formában egy WordPress honlap a kezdők, akkor kattintson erre a linkre.
Html kód pop-up formában
Ez html kódot beilleszteni egy tetszőleges helyre a szülő a címke szervezetben. A legjobb, hogy helyezze be a végén a lap, a zárás előtt
Még akkor kell hozzá egy linkre kattint, aminek hatására a pop-up formájában visszajelzést. Tájékoztató a maga nemében:
Most írja ide a kódot a modális ablak:
A modális ablak formájában a CSS kódot
Rajta, most itt vagyok, dobja ki a CSS kódot a következő formában:
Itt az út, nincs stílus maga az űrlap és annak hívás gombot. Nem akarom, hogy rendetlenséget fel az oldal kódja. Hozzáteszem azokat a nagyon hozzáadására vonatkozó utasításokat formában modális ablak egy kicsit tovább.
Ebben a rövid útmutató mindazok számára. Ideális esetben meg kellett volna kapnia itt van egy pop-up ablak, mint a bőr alatti:
Lépésről lépésre: a pop-up egy űrlapot wordpress
Továbbá a menüben látod lépésről lépésre létrehozására és hozzá egy pop-up formában a wordpress honlapján. Kezdeni, azt fogja mondani, hogyan lehet egy kapcsolatfelvételi űrlapot 7 pop-up, és akkor hogyan, hogy egy tetszőleges visszajelzés formájában a modális ablakot.
Popup Contact Form 7
Ha jól csinálod, amire szükség van, hogy írja be a kódot fogja hívni CF7 forma egy ilyen terv:
id és title - különbözőnek tűnhet, de általában egy ilyen szerkezet.
Amint azt már a sátorban:
És tartjuk változások kattintva „Update File” gombra.
3) Nyissa meg a style.css stíluslap fájlt és írd ott a következő kódot:
és ismét menteni a stíluslapot. Ebben az összefüggésben a munka befejeződött, továbbra is egy kicsit bonyolultabb, de semmi, azt hiszem, sikerülni fog.
5) A script-forma.js fájlba felvenni kívánt itt a következő információkat:
6) Most nyissa meg az FTP kliens, kinyitom FileZilla, akkor nyissa meg a többi, vagy használja a beépített kliens a tárhely.
És mi megy honlapunkon. A gyökere az oldalon. A nagyon könnyű meghatározni, van legalább 3 mappa: "wp-admin", "wp-content", "wp-includes", valamint a konfigurációs fájl "wp-config.php", és egy csomó más fájlokat.
7) lépés a webhely gyökérkönyvtárába a „wp-content”, stb „téma”, a továbbiakban: adja meg a téma nevét, lehet, hogy több, van ez a „twentysixteen” akkor is különböző lehet. Nyissuk meg a mappát a téma:
8) Töltsük a fájlt ide, hogy úgy a bal oldali ablakban, hogy megtalálja azt, és hogyan lehet a sátor a következő:
9) Nyissa meg a fájlt, és functions.php írja ide a kódot a csúcsra:
mint már a sátorban:
És ne felejtsük el, hogy mentse a változtatásokat.
10) Az utolsó lépés, mi kell hozzá kód, hogy hívja a formában, ahogy nézi nekünk ezt az utat:
Ez lehet önkényes és minden helyen, de jelen kell lennie rel = „form1” és class = „show_form”. Tettem ezt a kódot egy sapkát header.php, mint ez:
11) Élvezze a munkánk eredménye:
Ebben a felugró kapcsolati űrlapot vagy kapcsolati űrlapot 7 7 felugró ablakban befejeződött megnyomásával a hívás gombot a felugró formában meg kell jelennie egy elsötétített képernyő + forma közepén az ablakon.
Random pop-up ablak a visszajelzési űrlap
A menü a helyzet áll elő, hogy mikor kell használni Contact Form 7 plugint nem megfelelő vagy nem lehetséges, például egy szuper egyedi formák vagy kemény orrú ügyfél :). Ha az első lehet megvalósítani CF7, pihent az ügyfél, aki nem szereti, plugins - haszontalan vitatkozni.
Ezután megmutatom, lépésről lépésre telepítési samopisnaya, pop-up formában.
És mint írtam fent, hogy hozzon létre egy pop-up formájában visszajelzést egészen egyszerűen egy darab kód már van utasításra.
1) Új ablak megnyitása itt ezt a bejegyzést: visszacsatolás nélkül wordpress plugint, és olvasd el az elejétől a végéig, + mindent megtesz, hogy meg van írva ott. A cikk bemutatja egy olyan mechanizmus létrehozására irányuló bármilyen formában Ajax. Dob a kódot az oldaladról és vizsgálati munka formái, ahogy a cikkben.
2) Miután elolvasta a fenti cikket a helyszínen meg kell jelennie itt van egy rövid kód:
Remélem vizsgáltassa ki, például ki a poszt, és az űrlap megvan.
3) Találd ki, mi legyen a következő lépés? - helyesen, menj a fenti utasításokat, amely az úgynevezett „felugró Contact Form 7”, és nem az összes elemet a második a végéig. Az egyetlen kikötés van 2. igénypont, mi meg itt ilyen kód:
és most rajta cserélni kell itt van ez:
tovább dob a kódot írt az utasításokat.
Felmászni a használati felugró kapcsolati űrlapot 7 2. igénypont linkre.
Fizetett segítség, hogy hozzon létre egy pop-up visszajelzés formája
kapcsolatteremtésre forma 7 pop - $ 10 (szerkesztési és a kód illeszkedik a stílus)
A pop-up ablak tetszőleges visszajelzést formában Ajax - $ 15
Ezen már az összes, kattints a linkre, hogy megosszák várunk 🙂
Gyors, és van néhány alternatíva a rel attribútum? És ez működik, sőt, csak a Chrome, más böngészők formájában nem nyílik
Jó napot kívánok. Úgy működik minden böngészőben vizsgálni. De ha kell cserélni, akkor az adatok-id helyett rel, csak w változás mindenhol. Vagy akár az is előfordulhat id formában működik, de én nem javaslom
Jó napot kívánok. Köszönöm a forma, ez nagyon hasznos. Az egyik probléma. Amikor be egy lap alján a helyén, nyomja az ablak nyitása során visszatér a csúcsra. Azonnali, hogyan lehet elkerülni azt, ami attribútum kell keresni?
Jó napot kívánok. Itt:
meg kell adni a return false;
Frissítettem a kódot is.
Köszönöm szépen, az egészet! Nos, pontosabban, szinte minden. A gomb nyitás képezi minden rendben van, a stílus létre, hozzá kapcsolódó, úgy néz ki, mint szeretnék. De én nem értem, hogyan lehet összehangolni a szöveget, az egyik, hogy lehet változtatni képest is. Ő, ha jól értem, egy vonalban van a csúszka, amely kerül egy gombot (nem lehet csatolni a képernyőn, bocs) stílus gomb van bejegyezve, mint ez:
show_form határ: 1px szilárd #ffffff; / * Szegély színe * / háttér: # 36abfc; / * A háttér színe * / padding: 1%; display: block; text-align: center; / * Szövegigazítás központú * / szín: #ffffff; / * A szöveg színe * / font-size: 25pt; / * Betűméret * / text-decoration: none; / * Vegye ki a aláhúzás származó linkek * / határ-sugár: 20 képpont; / * * Kerekítése / magasság: 50px; szélesség: 200px; / * Szélessége a gomb * / margin: auto; / * Középre gomb * / margin-bottom: 2%; -WebKit-átmenet: minden 0.5s könnyű; -moz-átmenet: minden 0.5s könnyű; átmenet: minden 0.5s könnyű; >
Elnézést a talán hülye kérdés, én csak a tanulás.
Nem tudok segíteni, mert nem értik, amire szüksége van. Megjelenítése weboldal lehet, hogy valami tanácsot. És még mindig nem értem, hogyan kell igazítani a szöveget?
Maga a forma, I „küldés” gomb tűzött a CSS minden kiderült, de nem tudok rájönni, hogyan csatlakoztass a stílus a gomb megnyitja a visszajelzés formájában? (Az egyik, ahol azt mondja: „szöveget lehet bármilyen”) formájában beállításokat, én még nem találtam meg.
Duck minden csak ha másolja ezt a példát, akkor a gomb már csavarni show_form osztály lehet a stílus az írás: test .show_form