Ahojte všetci! V tomto článku sa dozviete, ako vytvoriť vyskakovací formulár. spätná väzba pre stránky html a wordpress. Po prvé, takéto formuláre budú potrebné pre internetové obchody, vstupné stránky a jednoduché stránky s vizitkami, pretože je to pre používateľa skutočne pohodlné.

Napríklad návštevník prišiel na vašu stránku, prezrel si informácie, ktoré potreboval, zdá sa, že je pripravený objednať si váš produkt alebo službu, ale nechce volať do iného mesta a míňať veľké peniaze. Práve v takýchto chvíľach prichádza na pomoc vyskakovací formulár spätnej väzby.

Vytvorte html kontaktný formulár

Povedzme teda, že už máte webovú stránku a chcete vytvoriť formulár, po vyplnení ktorého bude môcť používateľ od vás získať spätnú väzbu. Na tento účel je v prvom rade vytvorený samotný rám.

Vložte nasledujúci kód na správne miesto na stránke:

Online aplikácia

Voliteľne môžete pridať ďalšie polia na zadávanie informácií alebo odstrániť existujúce. Dôrazne neodporúčam používať captcha alebo inú ochranu proti botom v takýchto formulároch, ktoré používateľovi sťažia vyplnenie formulára.

Kód je vložený, čo vidíme?

Formulár sa objavil, ale je potrebné dať mu formulár. Ak to chcete urobiť, pridajte nasledujúce štýly:

/* Kontaktný formulár */ #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:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; ) .txtarea ( display:inline-block; color: # 676767; width:617px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; height:80px; ) .txt:focus, . txtarea:focus ( border-style:solid; border-color:#bababa; color:#444; ) input.error, textarea.error ( border-color:#973d3d; border-style:solid; background:#f0bebe; color :#a35959; ) input.error:focus, textarea.error:focus ( border-color:#973d3d; color:#a35959; ) #send ( color:#FFFFFF; display:block; kurzor:ukazovateľ; padding:5px 11px ; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; margin-bottom:20px; ) #send:hover ( background:#9797 97; ) /* Forma spätnej väzby */

Už oveľa lepšie. V každom prípade si budete musieť prispôsobiť formulár celkový dizajn stránky, takže vaša skončí inak ako moja.

Vyzerá to takto:

Čo sa stane? Návštevník klikne na pole a skript mu nahradí hotovú masku s kódom krajiny. Celkom pohodlne.

Ak to chcete urobiť, musíte pripojiť skript masky. Môžete si ho stiahnuť na samom konci článku spolu so zdrojovým kódom.

Skript pripojíme pred uzatváraciu značku. Nezabudnite zmeniť cestu k súboru na vlastnú. Dobre, formulár spätnej väzby bol vytvorený, štýly sú nastavené, teraz naň musíte umiestniť obslužný nástroj, aby vám do pošty chodili upozornenia.

Ak to chcete urobiť, vložte pred uzatváraciu značku nasledujúci skript:

Ako tento skript funguje?

1. Vykoná overenie zadaného e-mailu.
2. Určuje polia, s ktorými sa má pracovať.
3. Overí tieto polia na dokončenie. Ak nie sú zadané povinné polia, zobrazí sa hlásenie, že je potrebné ich vyplniť.
4. Spracuje zadané informácie a iniciuje odoslanie upozornenia na e-mail.
5. Dáva používateľovi správu, že jeho požiadavka bola prijatá pomocou Ajaxu.

Posledná vec, ktorú musíte urobiť, je vytvoriť súbor sendmessage.php a vložiť doň nasledujúce php kód a nahrajte ho do koreňového adresára svojho webu.

Nová správa\r\n"; $msg .="

Názov:".$username."

\r\n"; $msg .="

Telefónne číslo:".$userphone."

\r\n"; $msg .="

Mail:".$usermail."

\r\n"; $msg .="

Správa:".$obsah."

\r\n"; $msg .= " "; // odoslať správu if(@mail($sendto, $predmet, $msg, $headers)) ( echo "true"; ) else ( echo "false"; ) ?>

To je všetko, jednoduchý formulár spätnej väzby pre html stránku je pripravený. Nezabudnite len zmeniť e-mail v súbore sendmessage.php na svoj vlastný.

Pridanie vyskakovacieho formulára spätnej väzby na stránku

Sú chvíle, keď potrebujete vyskakovací formulár, ktorý sa otvorí po kliknutí na tlačidlo. Je veľmi jednoduché ho vyrobiť. Ako príklad si zoberme formulár, ktorý sme vytvorili predtým a pracujme s ním.

Najprv musíme pripojiť jqury fancybox, ktorý si môžete stiahnuť na konci článku.

Pridajte tieto riadky pred koncovú značku tela, stačí zmeniť cestu k súboru na vlastnú.

A my tomu dávame štýly.

Modalbox ( farba:#FFFFFF; display:block; kurzor:ukazovateľ; padding:10px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; text -decoration:none; text-align:center; margin:0 auto 20px; ) .modalbox:hover ( background:#979797; )

Upozorňujeme, že po kliknutí na tlačidlo sa zobrazí vyskakovacie okno, musí mať priradenú triedu modalbox a cestu href="#inline". Bez toho sa kontextový formulár na stránke neotvorí.

Potom skryjeme formulár, ktorý sme vytvorili predtým, aby sa otvoril vo vyskakovacom okne. Aby ste to dosiahli, musíte nahradiť #inline štýly zo starých na nové.

#inline ( display:none; margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; )

V dôsledku toho dostaneme takéto tlačidlo.

Kliknutím naň sa otvorí vyskakovacie okno so spätnou väzbou.

Opäť platí, že štýly, usporiadanie polí a prvkov je možné meniť podľa potreby. Napríklad pre spätné volanie zo stránky bude stačiť ponechať iba 2 polia - meno a telefónne číslo a ostatné polia odstrániť.

Nezabudnite, že na to, aby formulár fungoval, budete musieť pridať obslužný program, ktorý je zverejnený vyššie na konci webu a nahrať súbor do koreňového adresára webu odoslať správu.php.

Formulár spätnej väzby pre wordpress

Ak váš web používa wordpress, môžete použiť špeciálne doplnky na pridanie kontaktného formulára. Jeden z najlepšie pluginy Kontaktný formulár 7. Môžete si ho stiahnuť z oficiálnej stránky, alebo cez admin panel v sekcii Pluginy.

Po aktivácii pluginu sa v ľavom menu objaví nová karta. Otvorte ho a kliknite na Pridať nový.

Zadajte meno nový formulár, vyberte polia, ktoré majú byť vo formulári. Väčšinou stačia štandardné, ktoré sa pridávajú automaticky. Ostať vo forme.

Po uložení sa na obrazovke objaví krátky kód, ktorý je potrebné vložiť na stránku, kde sa má zobrazovať kontaktný formulár, napríklad na stránke Kontakty.

Skopírujte tento kód, prejdite na požadovanú stránku, vo vizuálnom editore vyberte formát "Text", vložte tento krátky kód a uložte stránku.

Následne skontrolujeme, či sa formulár na stránke zobrazuje a funguje správne. Na tento účel bude stačiť prejsť na stránku, kde bol kód vložený. Mali by ste mať takýto formulár:

Teraz vás budú môcť návštevníci vašej stránky kontaktovať prostredníctvom vytvoreného kontaktného formulára na wordpress engine.

Vytvorenie vyskakovacieho formulára spätnej väzby pre wordpress

Sám nerád pridávam do tohto motora ďalšie pluginy, pretože načítavajú stránku a spomaľujú ju. Preto pre vyskakovací formulár zvyčajne používam 2 možnosti.

1. Vyskakovací formulár popísaný vyššie v článku jednoducho pripevníme nie k html stránke, ale k motoru.
2. Formulár vytvorený pomocou kontextového doplnku Contact Form 7 s niekoľkými menšími úpravami.

Prvý spôsob už bol popísaný vyššie, prejdime teda k druhému.

Najprv prilepte nasledujúci kód hneď za úvodnú značku tela.

X

Pozrime sa, čo je čo:

• Odkaz s id="callme-open" po kliknutí sa otvorí náš formulár. Upozorňujeme, že tento odkaz by sa nemal vkladať za otvorený štítok, ale na miesto, kde chcete toto tlačidlo umiestniť. Zvyčajne sa pridáva do pravého rohu hlavičky vedľa telefónneho čísla vašej spoločnosti.
• Blok bg-b vytvorí pri otvorení kontextového formulára tmavé pozadie lokality.
• Callme blok bude obsahovať samotný formulár spätnej väzby.
• X - toto bude náš krížik v rohu formulára, po kliknutí na ktorý sa formulár zatvorí.
• No, php kód, v ktorom sa spustí krátky kód pluginu Contact Form 7.

Upozorňujeme, že vaše ID a názov formulára sa môžu líšiť od môjho. Nový kód pridané, teraz tomu dávame štýly.

Bg-b ( pozícia:absolútna; šírka:100%; výška:100%; vľavo:0; hore:0; pozadie:rgba(51,51,51,0,55); z-index:1000; ) telo ( poloha: relatívne; ) .callme ( pozícia:pevná; hore:30%; vľavo:50%; šírka:300px; ľavý okraj:-150px; z-index:1100; pozadie:#fff; padding:20px 20px 10px; okraj- radius:4px; ) .callme small ( position:absolútna; pravá:10px; top:10px; font-size:15px; kurzor:ukazovateľ; )

Uložte kód a skontrolujte. Formulár by mal byť teraz umiestnený v strede obrazovky s priesvitným tmavým pozadím za ním. Všetko je v poriadku, ale zostáva pridať poslednú vec - skript, ktorý sa otvorí a skryje tento formulár kliknutím na požadované tlačidlá.

Tento skript musí byť vložený do súboru päty pred koncovú značku tela.

Zostávajú posledné úpravy a vyskakovací formulár na wordpresse bude pripravený. Dajte triedam .callme a .bg-b štýl display:none. Je to potrebné, aby sa formulár nezobrazil na obrazovke pri spustení stránky.

Diskutovali sme s vami o niekoľkých možnostiach vytvorenia formulára spätného volania. Dúfam, že s implementáciou formulára na vašej stránke nebudete mať žiadne problémy. Ak máte nejaké problémy alebo otázky, vždy sa môžete poradiť v komentároch.

AKTUALIZÁCIA 06.06.2018

V nedávnej verzie WordPress Skripty jQuery nefungujú so symbolom $, takže to treba vziať do úvahy a nahradiť $ jQuery

Pomerne často sa vyskytuje taký problém, pri ktorom sa formulár na stránke prestane odosielať interné stránky. Aby ste tomu zabránili, zadajte úplnú cestu k súboru sendmessage.php v obslužnom programe. Napríklad takto:

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

A môžete si stiahnuť zdrojové kódy prvých dvoch formulárov

AKTUALIZÁCIA 07.04.2018

Na základe dopytu verejnosti bol formulár spätnej väzby modernizovaný. Teraz berie do úvahy zaškrtávacie políčko pre súhlas so zasielaním údajov v súlade s legislatívou Ruskej federácie č. 152-FZ „O osobných údajoch“, zlepšila sa prispôsobivosť na akékoľvek rozlíšenie obrazovky, súbory js a css boli komprimované.

Teraz si môžete pozrieť príklad, ako aj stiahnuť zdroje aktualizovaného formulára spätnej väzby a kontextového formulára online pomocou odkazov.

Viete, že až 80 % používateľov opustí váš web bez vyplnenia žiadosti, pretože formulár spätnej väzby na vašom webe nie je ani zďaleka ideálny? Alebo ste si istý, že vaša žiadosť je dokonalá a má maximálnu konverziu?

Naši noví klienti, ktorí kontaktujú naše štúdio pri diskusii o vytvorení a propagácii stránky, sa čoraz častejšie zaujímajú o konverziu. Toto je úplne správna otázka kedy rozprávame sa o internetovom marketingu, pretože ak stránka neprináša zákazníkov, tak nemá zmysel do nej investovať čas a peniaze. V dnešnom blogu si povieme o jednom z faktorov, ktorý vo veľkej miere ovplyvňuje počet zákazníkov zo stránky spoločnosti. Týmto faktorom sú formy spätnej väzby, alebo, ako sa tiež nazývajú, „formy zachytávania“. Aká je ideálna forma spätnej väzby.

Hneď si všimneme, že v závislosti od obchodného segmentu sa táto forma môže líšiť, pretože každý podnik má svoje vlastné úlohy, svoje vlastné formáty na interakciu so zákazníkmi. Je to formulár, ktorý „komunikuje“ s klientom, zatiaľ čo váš manažér volá ostatným kontaktom a čaká na nové aplikácie.

Formulár spätnej väzby na stránke je dôležitý. Kupujúceho vediete k nákupu alebo objednaniu služby nenápadne a diskrétne. Využite všetko, čo môžete, od užívateľsky príjemného rozhrania až po vynikajúce predajné podmienky. Keď sa ale klient dostane k objednávkovému formuláru, odchádza. Všetka práca ide dole vodou. Je nepravdepodobné, že sa k vám ešte niekedy vráti. Tomu sa dá predísť jednoduchou zmenou formulára spätnej väzby.

Na čo slúži formulár spätnej väzby?

Nielen pri objednávke/nákupe. Pomocou formulára spätnej väzby od používateľov zisťujete, čo sa im páči/nepáči, aké sú „záseky“ v práci firmy a dokonca dostanete hotové rady, ako ju zlepšiť. Konverzácia s používateľmi je:

a) zvýšiť lojalitu k vašej spoločnosti;

b) schopnosť rýchlo reagovať na požiadavku, znížiť negatívne a udržať si klienta;

c) možnosť zlepšiť produkt alebo službu;

d) spôsob, ako zvýšiť predaj.

Hlavnou chybou, ktorú robia neskúsení majitelia stránok, je preťažený formulár spätnej väzby. Používateľov odrádza veľký počet polí, ktoré musia byť vyplnené, aby ste mohli podať žiadosť vašej spoločnosti. Nechcú o sebe poskytovať zbytočné informácie, aj keď im sľúbite mlčanlivosť. Zozbierali sme pre vás niekoľko pravidiel pre návrh ideálnej formy.

Pravidlo číslo 1. Udržujte svoj formulár čo najjednoduchší

Ktorý z týchto formulárov by ste radšej vyplnili?

Alebo také

Ponechajte len najdôležitejšie polia. Návštevníci väčšiny stránok neradi vypĺňajú veľké množstvo poliach

Ak sa dodrží pravidlo zjednodušenia formulára, potom by sme mali očakávať zvýšenie konverzie o 30 – 60 %.

Poradenstvo. Odstráňte všetky nepotrebné polia, ponechajte 2-3 polia alebo dokonca 1. Zvyčajne je to „Meno“, „telefónne číslo alebo e-mail“. Ak máte internetový obchod a vytvárate objednávkový formulár, bude tam o niečo viac polí: „Meno“, „Telefónne číslo alebo E-mail“, „Možnosť doručenia“, „Množstvo tovaru“, „Adresa“ . Zistite, na aké účely vytvárate formulár spätnej väzby, a čo najviac ho zjednodušte.

Pravidlo číslo 2. Formulár musí byť viditeľný

Spätná väzba alebo formulár žiadosti zo stránky musia byť viditeľné, inak si to návštevník jednoducho nevšimne a nevyplní. Môžete dokonca umiestniť nejaký druh animovaného prvku, ktorý vám umožní ďalšie zaostrenie.

Pravidlo číslo 3. Minimálne „povinné polia“

Jedno povinné pole – telefón

Na webových stránkach spoločností je často možné pozorovať nielen formulár preplnený kolónkami navyše, ale aj povinnosť tieto polia vypĺňať. Formulácia „povinné pole“ sa nachádza na 99 % stránok. Chcete zvýšiť konverziu? Odstráňte povinné vyplnenie všetkých polí okrem telefónneho čísla. Ak človek chce, sám vyplní polia, ktoré považuje za potrebné, ale hlavným poľom je telefónne číslo, ktoré vám umožní zavolať klientovi späť a objasniť všetky ostatné informácie. Hlavnou vecou je nezabudnúť na písanie správnych skriptov pre manažérov.

V akých prípadoch spadá konverzia z formulárov:

• Ak požiadate o pole veku, pokles konverzií o 3 %.
• Pokles konverzií 10%, ak potrebujete zadať svoje celé meno
• Pokles konverzií 2% ak vás zaujíma, v ktorej lokalite návštevník býva
• Pokles konverzií 4% ak ​​potrebujete vyplniť adresu bydliska

Ak sa v internetovom obchode nachádzajú polia o doručení, adrese a celom mene, používateľ ich samozrejme vyplní a nemá to vplyv na konverziu. Ak ale chcete, aby vyplnil údaje, aby vám poslal žiadosť, tak konverzia určite padne.

Pravidlo číslo 4. Odkazy vo formulári (kontaktné podmienky)

Ak potrebujete poslať návštevníka, aby si prečítal podmienky kontaktu, spracovanie žiadostí, objednávok a pod., urobte tieto odkazy priamo v bloku formulárov. Pri kliknutí na takýto odkaz je lepšie zobraziť vyskakovacie okno s informáciami, ktoré sa dá ľahko zavrieť a prejsť k vyplneniu formulára.

Príklad takéhoto formulára:

Pokúste sa minimalizovať množstvo textu a podmienok vo formulári, pretože používateľ bude príliš lenivý, aby si všetko znovu prečítal a formulár jednoducho zatvoril bez toho, aby vám poslal svoje údaje. Aj chyby v tomto formulári – príliš veľa povinných polí.

Pravidlo číslo 5. Súhlas so spracovaním údajov

Aj keď údaje vo formulári môžu byť nesprávne vyplnené a nejde o osobné údaje, toto políčko je potrebné zaškrtnúť. Už sa objavili žalobcovia, ktorým museli obžalovaní zaplatiť pokutu za nesplnenie povinnosti túto požiadavku Legislatíva.

Pravidlo číslo 6. Rozbaľovacie zoznamy by nemali byť

Ak je váš formulár kalkulačka, potom je rozbaľovací zoznam prijateľný. Ale ak prinútite človeka, aby si vybral, na ktoré oddelenie vašej spoločnosti sa chce prihlásiť, potom to zníži konverziu, pretože používatelia chcú rýchlo vyplniť formulár bez premýšľania o zbytočných informáciách.

Pravidlo číslo 7. Odstráňte captcha z formulára

Zadanie captcha môže znížiť konverzie až o 40 %. Je to spôsobené tým, že často sa captcha vôbec neprečíta, prípadne pri zadávaní údajov hlási nesprávne zadanie znakov. Ak bola skoršia captcha odôvodnená tým, že bez nej by mohlo prísť veľa spamu, teraz existujú technológie, ktoré chránia formulár pred zadaním údajov spamovými robotmi bez zadávania captcha.

V štúdiu artcell používame práve takúto technológiu. Ako vidíte, v našich formulároch nie sú žiadne captcha a nedostávame SPAM.

Pravidlo číslo 8. Automatické upozornenie, že formulár bol odoslaný

Po vyplnení a odoslaní formulára sa musí objaviť správa o odoslaní údajov a manažér vám čo najskôr zavolá späť. Ak takéto upozornenie neexistuje, používateľ nerozumie, či boli údaje odoslané alebo nie, či očakávať hovor od spoločnosti alebo nie. Toto upozornenie vás ochráni pred duplikovaním aplikácií od rovnakého používateľa.

Pravidlo číslo 9. SMS notifikácia

Pošlite automatické upozornenie na číslo návštevníka, ak váš formulár obsahoval pole na zadanie telefónneho čísla. To vám umožní personalizovať vašu správu a používateľovi sa opäť pripomenie názov vašej spoločnosti.

Aká je teda ideálna forma spätnej väzby?

Zvýraznené v ráme alebo farbe, čo umožňuje, aby bolo zreteľnejšie na pozadí ostatných informácií na stránke

Minimálny počet polí na vyplnenie

Jedno alebo dve povinné polia

Chýbajúce rozbaľovacie polia

Prítomnosť zaškrtávacieho políčka pre súhlas so spracovaním prijatých údajov

Prítomnosť odkazov a dodatočných podmienok ihneď vo formulári bez zbytočných prechodov na iné stránky webu

Žiadne captcha

Máte ideálnu žiadosť, ale stále málo zákazníkov? Prečítajte si tento blog v našom časopise a nájdete v ňom odpoveď na svoju otázku. Ak vaša stránka nedosahuje dobrú výkonnosť v vyhľadávače potom sa vám tieto informácie budú hodiť.

Ak sa vám nedarí vytvoriť ideálny kontaktný formulár a chcete sa obrátiť na profesionálov o pomoc, vyplňte nižšie uvedenú žiadosť a náš manažér vám čo najskôr zavolá späť.

10.08.2019 Viktar Haurylavets

Na poskytnutie spätnej väzby návštevníkom stránky sa používajú rôzne typy formulárov na odoslanie kontaktných údajov administrácii stránky. Môže to byť telefónne číslo, e-mailová adresa alebo len správa.

Základné princípy organizácie spätnej väzby

Spätná väzba môže byť implementovaná pomocou rôznych technológií, ale základný princíp zostáva rovnaký. Na Bloková schéma vyzerá to takto.

Schéma usporiadania spätnej väzby na stránke.

Pozastavíme sa len pri teoretických bodoch, implementáciu nájdete v iných článkoch na našom webe, odkaz je vyššie.

Formulár

Samotná forma je súčasťou HTML dokument, takže používateľovi stačí ukázať príslušný formulár a v značkách je to jednoduchšie

, ktoré obsahujú tlačidlo Odoslať alebo Požiadať, kliknutím na ktorý sa formulár ďalej spracúva.

Je veľmi dôležité správne a zreteľne označiť povinné polia, ktoré sú často označené symbolom * . V princípe je možné do tagov napísať aj samotný formulár

, ale je v tom rozdiel. Ak

vytvorí požiadavku POST špecifikovanú v atribúte action, ktorú je vhodné použiť na ďalšie spracovanie na serveri pomocou PHP, Pytonu, Java atď., v prípade div je potrebné použiť JavaScript. Pomocou JavaScriptu môžete tiež odosielať údaje prostredníctvom požiadaviek Ajax, v takom prípade sa stránka nebude aktualizovať v riadku prehliadača.

Princíp je však rovnaký – niektoré údaje posielame na server.

Aké údaje sa musia vyžadovať?

Ide buď o telefónne číslo pre spätné volanie, resp Email pre spätnú väzbu. Niekedy je pole mena povinné, ale je cieľom získať kontaktné informácie na komunikáciu?

Spracovanie požiadavky na serveri

Konečná implementácia závisí od použitej technológie a programovacieho jazyka. Môžete buď poslať list o tom, že sa objavila nová aplikácia z formulára spätnej väzby, alebo vytvoriť vedenie v CRM (systém riadenia vzťahov so zákazníkmi, kde sú zaznamenaní všetci zákazníci spoločnosti). Musíte sa však uistiť, že listy sú odoslané zo servera a doručené rýchlo.

Odpoveď zo servera

Po spracovaní na serveri pošleme odpoveď, či bolo možné poslať list alebo bola zaregistrovaná požiadavka, aby používateľ vedel počkať, či odpovie alebo nie. Spravidla sa realizuje buď cez vyskakovacie okno so správou, alebo je tu presmerovanie na samostatnú stránku so správou o úspešnom odoslaní požiadavky.

Pre priamu analýzu kódu do HTML a PHP pozri.

1. Plugin na vytváranie online formulárov "jFormer"

Tvorba kontaktných formulárov: spätná väzba, komentovanie, prihlasovací formulár, registračný formulár s kontrolou správnosti zadaných údajov.

2. Registračný formulár krok za krokom pomocou jQuery

Úhľadná forma s postupným plnením. Nižšie je uvedený indikátor dokončenia formulára.

3. Formulár krok za krokom

Vyplnenie formulára v niekoľkých krokoch s kontrolou správnosti vyplnenia.

4. Kontaktný formulár pre stránku

Kontrola správnosti vstupných informácií sa vykonáva „za behu“ pred odoslaním správy pomocou javascriptu.

5. Animované prepínanie medzi formulármi na jQuery

Animované prepínanie pomocou jQuery medzi prihlasovacím formulárom, registračným formulárom a poľom na obnovenie hesla. Na ukážkovej stránke kliknite na žltý odkaz, aby ste videli efekt.

6. Pop-up PHP kontaktný formulár

Takéto riešenie možno použiť na to, aby návštevník mohol rýchlo kontaktovať vlastníka stránky z ktorejkoľvek stránky. Na ukážkovej stránke kliknutím na šípku nižšie otvoríte formulár.

7. PHP registračný formulár pomocou jQuery a CSS3

Formulár s overením zadaných informácií.

8. Registračný formulár PHP v štýle Facebooku

Pekný registračný formulár implementovaný pomocou CSS, PHP a jQuery.

9. Kontaktný formulár jQuery "SheepIt".

Implementovaná možnosť pridania nových polí pred odoslaním správy.

10. Efektný kontaktný formulár AJAX

roztomilý úhľadný PHP formulár spätnú väzbu s kontrolou správnosti zadaných informácií. Technológie: CSS, PHP, jQuery.

11. Autorizačný/registračný systém na stránke

12. Formulár na odoslanie

S overením správnosti plnenia.

13. Plugin jQuery "Contactable".

Implementovať formulár odchádzajúcej spätnej väzby na rýchle odoslanie správy.

Každá stránka by mala mať formulár spätnej väzby, takže skôr či neskôr sa nad jej vývojom zamyslí každý z nás. V sieti je veľa možností, niekto používa obľúbené pluginy, niekto má vlastnú osobnú skúsenosť, no väčšina hľadá hotové riešenia. V každom prípade náš formulár spätnej väzby na webovú stránku budú funkčné a funkčné a to všetko v poriadku.

HTML

Začnime teda, ako vždy, s obvyklou medzerou - html . Najprv potrebujeme formulár s niekoľkými poľami. Vezmeme 3 polia pre prehľadnosť a štandard všetkých formulárov. Tie. bude to Meno, Email a Telefón.

Každý vstup, ktorý máme, má svoj vlastný jedinečný názov, ktorý budeme neskôr potrebovať na odosielanie správ. Môžete tiež voľne pridávať svoje vlastné polia a nielen zadávať, ale aj vyberať textovú oblasť. Len nezabudnite dať každému z nich svoje vlastné mená, ktoré použijeme pri odosielaní informácií poštou. Pre pohodlie som pridal do každého poľa povinný atribút, vďaka čomu prehliadač nedovolí používateľovi zadávať prázdne hodnoty a upozorniť ho na potrebu ich vyplnenia.

css

Keď je formulár pripravený, môžete ho trochu zmeniť. Všetko závisí aj od vašich potrieb a fantázie. Pre prehľadnosť som pre každý prvok načrtol niekoľko štýlov, aby všetko nepôsobilo tak plocho. Ale ak ste príliš leniví alebo neviete, ako na to, môžete použiť moju verziu:

Form( max-width: 400px; width: 100%; margin: 0 auto; ) input( box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0,11); padding: 10px 20px; width: 100%; margin: 10px 0; obrys: žiadny; ) input( background: red; border: none; box-shadow: 0px 2px 0 1px #C50909; border- polomer: 5px; farba: biela; transformácia textu: veľké písmená; váha písma: 600; šírka: 200px; kurzor: ukazovateľ; prechod: 0,3 s; ) input:hover( pozadie: čierna; tieňový rámček: 0px 2px 0 1px čierna;)

Strana klienta

Tu už stojí za to pochopiť podrobnejšie, je presnejšie vybrať si vhodnú možnosť pre seba. Na odosielanie správ na mail potrebujeme použiť jazyk php, t.j. vytvoriť samostatný súbor, do ktorej prenesieme všetky tieto údaje. Ale my tadiaľto nebudeme to tu uvažovať, pretože je oveľa krajšie, keď sa všetko deje bez opätovného načítania stránky. Preto zvážime odosielanie dát cez ajax .

Ak chcete robiť veci staromódnym spôsobom, budete musieť mierne upraviť horný html a nastaviť hodnotu atribútu metódy formulára (post alebo get). Všetko závisí od toho, ako chcete odoslať údaje z formulára. A tiež nezabudnite napísať akciu , ktorá naznačí cestu k php súbor.

A pôjdeme s pokročilejšou metódou a odosielame údaje bez opätovného načítania stránky a po prijatí odpovede zo servera dáme používateľovi správu o úspešnej operácii alebo chybe. Potrebujeme však aj 2 súbory, povedzme kontakt.php a custom.js.

V prvom rade nezabudnite zahrnúť knižnicu Jquery, s jeho pomocou niekoľkokrát zredukujeme kód a budeme môcť jednoducho vykonávať akékoľvek akcie pomocou hotových riešení.

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( typ: "POST", url: "contact.php", údaje: str, success : function(msg) ( if(msg == "ok") ( alert("E-mail odoslaný"); ) else ( alert("Chyba! Možno ste vyplnili polia nesprávne."); ) ) )); vrátiť nepravda ;) );

Teraz sa pozrime na schému akcií a na to, prečo potrebujeme všetky tieto knižnice a súbory. Keď používateľ klikne na tlačidlo odoslať, máme udalosť odoslať, ktorú zapíšeme do custom.js a na základe ktorej získame všetky údaje z formulára a odovzdáme ich do súboru contact.php. Tu ešte raz skontrolujeme, či sú polia prázdne (aby sme sa vyhli ďalšej možnosti spamu), pošleme správu na email a upozorníme užívateľa na výsledky, ktoré sú odovzdané ako odpoveď custom.js.

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail "]); $txtphone = trim($_POST["mfbPhone"]); // od koho $fromMail = " [e-mail chránený]"; // Sem zadajte svoj e-mail $emailTo = " [e-mail chránený]"; $subject = "Spätná väzba"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "From: Príklad formulára<$fromMail>\n"; $headers .= "Typ obsahu: text/obyčajný; charset="utf-8"\r\n"; $headers .= "MIME verzia: 1.0\r\n"; $headers .= "Dátum: ". dátum("D, d M Y h:i:s O") ."\r\n"; // telo správy $body = "E-mail prijatý zo stránky ".$site." \n\nMeno: ".$txtname."\nTelefón: ".$txtphone."\ne-mail: ".$txtemail."\nSpráva: ".$txtmessage; mail($emailTo, $subject, $body, $headers); echo "ok";)

Toto je najzákladnejší príklad toho, ako funguje kontaktný formulár. Existuje veľa možností, ako upraviť kontrolný súbor php, vytvoriť si vlastné triedy atď. Našou úlohou však bolo vytvoriť jednoduchý a funkčný príklad, ktorý môžete použiť na svojej stránke.

demo

súbory

Pripravené pluginy

Keďže ste na blogu WordPress, pravdepodobne ste pripravení a túžite používať všetky druhy doplnkov, najmä ak ste úplný lamer v programovaní a rozložení. A neobviňujem vás za to a dokonca vám na jeden z nich môžem dať pozor, aby bolo jasné. Účelom tohto odseku nie je odporúčanie, ale iba príklad, keďže som plugin použil Kontaktný formulár 7 vo viacerých projektoch.

Je veľmi jednoduché nastaviť a takmer vždy funguje bezchybne. Ak potrebujete vytvoriť svoj vlastný jedinečný dizajn, môžete to urobiť. Stačí pridať potrebné polia v konštruktore, preložiť a zmeniť upozornenia o chybách a úspešnom odoslaní vlastným spôsobom a máte hotovo. Potom skopírujte skrátený kód a vložte ho na správne miesto výstupu formulára.

S pluginom som nikdy nemal žiadne problémy a ak potrebujete rýchle a pohotové riešenie, tak toto je ono. Ak máte vlastné funkčné a dizajnové požiadavky na formulár, potom je lepšie použiť prvú možnosť, ktorá si vyžaduje znalosti v tomto odvetví.