Kontakty

Ajax pop-up formulár spätnej väzby. Kontaktný formulár WordPress: vytvárame rýchlo a efektívne

  • 28.07.2019

Ahojte všetci. Boli bombardovaní otázkami, ako implementovať formulár, ktorý sa po kliknutí na tlačidlo zobrazí v modálnom okne a po odoslaní sa zobrazí správa o úspechu alebo neúspechu.

Myslím, že na internete je toho už veľa, ale keďže sa ľudia pýtajú, rozhodol som sa to urobiť. Okrem toho by takáto funkcia mala byť prítomná na takmer každej vstupnej stránke, aby bolo možné implementovať tlačidlo spätného volania. Teraz sa skutočne objavuje čoraz viac výsledkov AB testov, ktoré hovoria, že otvorené formuláre fungujú horšie ako tie, ktoré sú skryté v modálnom okne a otvárajú sa po kliknutí na tlačidlo.

Niektorí tvrdia, že je to spôsobené tým, že ľudia si pomaly „vyvíjajú imunitu“ a otvorená forma je agresívny predaj. Vraj teraz nastal čas, keď si používateľ, keď vidí otvorený formulár, myslí, že sa mu snaží niečo „predať“. S touto teóriou celkom nesúhlasím, ale zrnko pravdy je v nej prítomné. V niektorých typoch podnikania to môže byť pravda. Zatiaľ sa pustíme do implementácie formulára.

Poznámka! Nebudem podrobne popisovať každú akciu, ale ponúkam vám hotovú verziu v zdroji. Ak máte nejaké otázky, píšte do komentárov. Vymyslíme :)

Dnes začneme nie s jQuery, ale s rozložením tlačidla a formulára. Všetky skripty sú zahrnuté na konci stránky.

Kliknutím na tlačidlo, na ktoré sa otvorí modálne okno:

Odošlite žiadosť

Môžete nastaviť ľubovoľnú triedu, ale do href napíšte #modal - toto bude id kontajnera s tieňovaním a kontaktným formulárom.

Teraz dám kód formulára a blok, na ktorom bude formulár umiestnený:

Po pridaní štýlov to vyzerá takto:


Na vytvorenie modálneho okna bola použitá knižnica Remodal. Toto je sada súborov css a js, len na vytváranie animovaných modálnych okien. Môžete si ho stiahnuť z odkazu alebo už s mojimi úpravami na konci článku.

Zahrňte štýly medzi značky hlavy:

A pred koncovú značku tela - pridajte skripty:

Script.js je skript na spracovanie formulára. Rovnaký Ajax, ktorý nám umožňuje vykonať celý postup bez opätovného načítania stránky:

$ (dokument) .ready (funkcia () ($ ("formulár")). odoslať (funkcia () (// Získať ID formulára var formID = $ (this) .attr ("id"); // Pridať hash do ID názvu var formNm = $ ("#" + ID formulára); $ .ajax ((typ: "POST", adresa URL: "mail.php", údaje: formNm.serialize (), úspech: funkcia (údaje) (/ / Výstupný text výsledku odoslania $ (formNm) .html (data);), chyba: funkcia (jqXHR, text, chyba) (// Výstup textu chyby odoslania $ (formNm) .html (chyba);)) ); návrat false;) ;));));

Nebudem citovať zdrojový kód css a js zo súborov zodpovedných za modálne okno a formulár, pretože sú dosť veľké. Ak niečo, pozrite sa na zdroj. Ale obslužný program php je do značnej miery štandardný (ak to môžem povedať):

Meno odosielateľa:$ meno Telefón:$ phone "; $ send = mail ($ komu, $ predmet, $ správa, $ hlavičky); if ($ send ==" true ") (echo"

Ďakujeme za odoslanie správy!
";) inak (echo"
Chyba. Správa nebola odoslaná!
";)) else (http_response_code (403); echo" Skúste znova ";)?>

Prosím, nezabudnite zmeniť e-mailové adresy na svoje vlastné.

Tu je ajaxový formulár. Ospravedlňujeme sa, že som sa nesnažil podrobne vysvetliť, ako bol každý prvok vyrobený. Chcel som len dať hotový výsledok, ale nemá zmysel popisovať všetky animácie, vzhľady. Stiahnite si zdroj a vložte ho na svoju stránku. A to je na dnes všetko. Veľa šťastia všetkým!

Chlapci, žiadam vás otestovať formulár na reálnom alebo virtuálnom serveri (hosting). Uistite sa, že váš server podporuje php, že máte platený plán a nie skúšobné obdobie. V opačnom prípade v 90% prípadov formulár nebude fungovať.

Nečakajte na list vo svojej poštovej schránke, ak ste práve otvorili indexový súbor vo svojom prehliadači a klikli na tlačidlo „Odoslať“. PHP je jazyk na strane servera!

Ak ste príliš leniví na to, aby ste zistili a urobili formulár sami, potom odporúčam venovať pozornosť.

Nachádza sa aktualizovaná verzia článku

V tomto článku vás naučím, ako vytvoriť formulár spätnej väzby na wordpress v troch typoch. Dlho som nepísal na technické témy, ťahalo ma to. Poďme sa pozrieť na to, aké metódy existujú a ako ich implementovať.

Toto je veľmi dobrý nástroj pre blogera, pridáva k funkcionalite WordPressu nielen komentovanie, ale aj poskytovanie spätnej väzby cez e-mail. Môj kontaktný formulár sa nachádza. Popíšem, ako to urobiť tromi spôsobmi:

  1. Podľa kódu, pre pokročilých.
  2. Zapojiť.
  3. Používanie služby.
  4. Pop-up spätná väzba

Kontaktný formulár WordPress s kódom bez pluginu

Formulár spätnej väzby, ktorý vyvinul wordpress, bude v šablóne stránky. Za výstup je zodpovedný súbor page.php v priečinku témy.

Okamžite vás varujem, šablóny sú pre každého iné, takže výstup stránok môže byť vykonaný cez iný súbor.

Nachádza sa v priečinku s vašou aktívnou témou, treba si ju otvoriť v ľubovoľnom editore, tu to názorne ukážem. Najprv vám ukážem obsah mojej stránky.php.

strana:

()

Na samom vrchu tohto kódu umiestnime nasledujúcu sadu príkazov.

"." \ r \ n "." Odpoveď: ". $ email; $ hlavičky =" Typ obsahu: text / obyčajný; charset = \ "utf-8 \" "; mail ($ emailTo, $ predmet, $ telo, $ hlavičky); $ emailSent = true;))?>

Teraz je to už zložitejšie, treba v prvom príklade nájsť miesto, kde sa zobrazuje obsah, väčšinou je za túto funkciu zodpovedný riadok.

Namiesto toho vložíme tieto príkazy.

Ďakujeme, vaša správa bola odoslaná.
Ľutujeme, vyskytla sa chyba.
  • "class =" requiredimya requiredField "/>
  • "class =" requiredemail requiredField email "/>

  • tvoja správa

Teraz uložíme súbor s názvom feedback.php a dáme ho do priečinka s aktívnou témou.

A toto dokončí túto metódu bez doplnkov. Okrem toho môžem povedať, že triedy pre elementy formulára sú už napísané, ak sa s CSS veľmi nevyznáte, tak vám viem pomôcť a prispôsobiť.

Krásny formulár spätnej väzby pre webovú stránku s doplnkom

Plugin sa volá Contact Form 7. Zo všetkých existujúcich je podľa mňa najlepší. Najprv si ho musíte nainštalovať, môžete cez administračný panel WordPress (je v oficiálnom úložisku), alebo stiahnutím odtiaľto oficiálna stránka... Myslím, že s inštaláciou a aktiváciou nebudú žiadne problémy. Takto to bude vyzerať pri vyhľadávaní z administračného panela.

Teraz prejdime k samotnému pluginu. Snímka obrazovky nižšie zobrazuje všetky aspekty a funkcie doplnku, schéma je jednoduchá.


Potom doplnok zobrazí krátky kód.

Skopírujeme ho a v textovom režime vložíme do ľubovoľného príspevku alebo stránky, či už priamo do kódu šablóny alebo do widgetu. Urobil som stránku, nazval som ju kontaktný formulár a vložil som tento krátky kód.

A tu je výsledok, páči sa mi, ešte viac ma teší, že plugin je v ruštine a voľne šírený. Zmena externého nie je náročná, ak aspoň trochu ovládate CSS.

Pohrabte sa v kontaktnom formulári 7, je tam veľa zaujímavých vecí, napríklad funkcia s prílohou súboru.

Používanie služby

Hľadal som veľa služieb, takmer všetky platené, ostatné sa mi nepáčili samé. A tento zaujal svojou jednoduchosťou a ľahkosťou a okrem toho bol ruský. Nazýva sa to formm.ru, prejdite naň a okamžite sa nám zobrazí okno s nastaveniami formulára.

Malo by to fungovať, skontrolujte to, vyskúšal som to, na WordPress to funguje dobre. Čo sa mi páčilo na akejkoľvek konfigurácii, je vstavaná captcha.

Easy FancyBox Popup Feedback Plugin

Nechcel som recenzovať, ale ľudia hľadajú tieto informácie, na to si musíte nainštalovať plugin Easy FancyBox, tu je jeho stránka, dá sa nainštalovať aj cez admin panel vo WordPress, cez vyhľadávanie.

Plugin funguje na princípe zväčšovania obrázkov a vyskakovacích okien, no o tom to teraz nie je. Ak ju chcete aktivovať a použiť na vyskakovací formulár spätnej väzby, musíte túto kombináciu vložiť buď na stránku alebo do samotného kódu lokality.

Napísať list

Na miesto, kde je napísaný „shortcode“, prilepte kód, ktorý ste skopírovali do Kontaktného formulára 7. Malo by to vyzerať takto.

To znamená, že sme vytvorili vyskakovací odkaz na spätnú väzbu ako odkaz, ak ho pripojíte k tomuto CSS, môžete to urobiť kliknutím na tlačidlo alebo obrázok, ale toto sú lekcie rozloženia. Všetko mi fungovalo. Výsledkom je, že po kliknutí získate odkaz, na ktorý sa zobrazí kontextové okno.


Takže váš prvý kontaktný formulár wordpress bol vytvorený bez námahy. Osobne som si vybral plugin, ale ten môj bol urobený kódom, tak som to nechal, a čo sa vám páči. Ak vám to nefunguje, kontaktujte ma v komentároch.

Dobrý deň, milí čitatelia! Keď som už písal o modálnych oknách, bol tu článok. V tomto článku vám ukážem spôsob, ako vytvoriť kontextové okno na ľubovoľnej webovej lokalite. Budeme používať jQuery plugin fancybox... A aby sme článku dodali sémantickú záťaž, do modálneho okna vložíme formulár na odoslanie listu. Chcem si len všimnúť, že modálne okná tohto doplnku fungujú vo všetkých prehliadačoch. Začnime!

Čo potrebujeme ?! nie veľmi:

značkovanie

Aktuálnu verziu pluginu si môžete stiahnuť z vyššie uvedeného odkazu. Čo sa týka doplnok fancybox, veľmi dobrý nástroj na vytváranie okien na webovej stránke. Do okien môžete zahrnúť ľubovoľný videoobsah, obrázky (jednotlivo aj v galérii), text, plávajúce rámy, plugin má kopu nastavení (viac o nich nižšie) + fakt, že funguje rovnako korektne vo všetkých prehliadačoch je veľmi potešujúce.

Značenie nebudem komplikovať, stačí kliknúť na odkaz a otvorí sa okno s formulárom na odoslanie správy:

<a class = "modalbox" href = "#inline"> poslať správu</ a>

Ak sa hodnota atribútu href zhoduje s ID bloku div, v ktorom sa nachádza e-mailový formulár:

1
2
3
4
5
6
7
8
9
10
11
12
13


Odosielanie správy