Hello. Sa tutorial na ito gagawa kami ng buong form puna, at lalabas ito sa isang modal window kapag nag-click ka sa isang button sa page. Ginawa ko ang araling ito sa aking sarili, mula sa simula, gamit lamang ang jQuery framework at isang maliit na JavaScript Ang aralin ay napaka-interesante, kaya't mangyaring huwag itong ipasa sa ibaba maaari mong tingnan ang isang demonstrasyon ng form na ginawa ko, at mag-download din kinakailangang mga file para sa trabaho:

Hakbang 1. Pangkalahatang paglalarawan at kung paano gumagana ang form ng feedback:

Una, sasabihin ko sa iyo kung anong mga file ang kakailanganin namin at, sa katunayan, kung bakit kailangan ang mga ito:

• mga imahe - ang folder kung saan naka-imbak ang lahat ng mga larawan ng aming form;
• index.html - ang pangunahing "index" na file kung saan matatagpuan ang pindutan para sa pagtawag sa form ng feedback;
• contact.html ay ang file na naglalaman ng mismong form. Ito ang file na ito na isasama sa modal window;
• send.php - isang file ng handler na responsable sa pagpapadala ng mga liham;
• jquery.js - ang pangunahing jQuery framework;
• style.css ay isang file na may mga cascading style sheet para sa aming form.

Kaya, magpatuloy tayo at sa pagkakasunud-sunod... Ang form ay gagana tulad ng sumusunod: Ang gumagamit ay pumunta sa pahina kung saan mayroong isang pindutan upang tawagan ang modal window, pinindot ito, pagkatapos ay lilitaw ang form, kung saan ipinasok ng bisita ang lahat ang data at teksto ng mensahe at ipinapadala, pagkatapos ay ire-redirect ito sa isang pahina na may mensahe tungkol sa matagumpay o hindi matagumpay na pagpapadala ng liham. Iyon lang, ngayon simulan na nating ilagay ang ating form...

Hakbang 2. Button para tawagan ang form.

Kaya iyon, ang aming modal window lumitaw kasama ang form, kailangan mong pilitin ito na gawin ito. Para magawa ito, kailangan lang naming maglagay ng regular na button sa page. Ang code para sa naturang button ay ipinapakita sa ibaba, kasama ang mga istilong inilapat dito:

Sumulat ng mensahe sa administrator

Hakbang 3. Ang form mismo + mga setting para dito

Ngayon, alamin natin kung saan matatagpuan ang aming form ng feedback. At ito ay matatagpuan sa file na contact.html, na matatagpuan na sa source code ng aralin. Ang form na ito Ito ay medyo maliit, kaya ilalagay ko ang code nito sa ibaba:

Pagpapadala ng Mensahe sa Administrasyon:

*Pangalan: *E-mail: Paksa: *Mensahe:

Tulad ng nakikita mo, sa pamamagitan ng code, kahit na sa mata ay makikita mo na upang maipakita ang form nang mas mahusay, gumamit ako ng isang layout ng talahanayan. Ito ay lubhang kapaki-pakinabang para sa akin na ipantay ang lahat ng mga patlang ng form.

Hakbang 4. Ang processor na responsable sa pagpapadala ng mga liham

Dito mabilis kong sasabihin sa iyo ang tungkol sa pangunahing processor para sa pagpapadala ng mga liham. Hindi ko ibibigay ang code nito dito, dahil nasa source code ito. I-download at tingnan ang mga nilalaman nito. Kung alam mo ang PHP sa isang lugar sa isang intermediate na antas, tulad ko, pagkatapos ay madali mong mai-parse ang buong code ng handler na ito nang mag-isa. Kung handa na ang lahat, pagkatapos ay magpatuloy...

Hakbang 5. "Screwing in" ang pangunahing jQuery framework

Ngayon, tulad ng sa anumang aralin sa jQuery, dapat nating "i-screw in" ang pangunahing jQuery framework. Upang gawin ito, bumalik tayo ng kaunti, kung saan matatagpuan ang ating button, at sa pagitan ng mga tag at ipasok ang sumusunod na code:

Hakbang 6: Pag-istilo ng Form

Tulad ng nakikita mo, ang mga estilo para sa aming form ay inilalagay nang hiwalay sa style.css file, dahil ang mga istilong ito ay tumatagal ng masyadong maraming espasyo. Kailangan lang naming i-link ang code sa ibaba sa aming index file:

Hakbang 7. Mga pagpapabuti ng jQuery

Ngayon para sa ganap na gawain Sa modal window ng form, dapat nating ipasok ang sumusunod na jQuery code:

$(function() ($("a").overlay(function() ( var wrap = this.getContent().find("div.wrap"); if (wrap.is(":empty")) ( wrap.load(this.getTrigger().attr("href"));

Konklusyon.

Ang aming kawili-wiling form ng feedback ay handa na. Ang landas ay mahaba at mahirap, kaya kung sinuman ang hindi nakakaintindi ng anuman, papakinggan ko ang iyong mga tanong sa mga komento sa ang araling ito. At iyon lang para sa akin, magkita-kita tayong muli, mga kaibigan!

Sa taos-pusong paggalang, ang iyong gabay sa jQuery - M.K.

Mayroong maraming mga plugin ng WordPress para sa paglikha ng mga form ng contact sa iyong blog o website. ang pinaka-kapansin-pansin sa kanila, pinapayagan ka nitong mag-embed contact form direkta sa recording at Mga pahina ng WordPress(habang maraming mga plugin ang pinipilit kang gamitin custom na template sa pahina, sa gayo'y nililimitahan ang pag-edit nito).

Karaniwang sapat ang pag-embed ng form sa page, ngunit paano kung gusto mong lumabas ang form sa isang popup kapag na-click ng user ang link na Makipag-ugnayan sa Amin? Upang mapagtanto ang gayong pagnanais, kailangan mong gumamit ng dalawa WordPress plugin sa parehong oras: Easy FancyBox

1. Una sa lahat, mag-install ng mga plugin at Easy FancyBox.

2. Para sa pagiging simple ay gagamitin natin Form sa pakikipag-ugnayan Form 7, na nilikha ng plugin mismo sa panahon ng pag-install para sa halimbawa. Sa pahina ng mga setting ng Contact Form, kunin ang form code, na kailangan mong kopyahin at i-paste WordPress editor upang lumikha ng isang form.

3. Lumikha bagong pahina sa WordPress. Upang magdagdag ng contact form kailangan mong i-paste ang code sa mga square bracket mula sa pahina ng mga setting ng Contact Form 7 sa iyong page. Tiyaking i-paste nang tama ang code, nang eksakto kung paano ito ipinapakita ng plugin.

4. Ang iyong WordPress ay mayroon na ngayong contact form. Napagpasyahan naming gawin itong pop up sa isang modal window pagkatapos mag-click ang user sa link. Naglalaro ang Easy FancyBox plugin. Sa tulong nito, maaari mong ipakita ang anumang elemento ng page sa isang pop-up. Buksan ang page edit, i-click ang TEXT tab at idagdag ang sumusunod na HTML code:

Makipag-ugnayan sa Amin

5. Iyon lang, mayroon na kaming link na "naglulunsad" ng contact form sa isang pop-up window. Binabati kita! Malamang na kakailanganin mong i-tweak ang CSS ng iyong mga email form upang ipakita ang tamang lapad, taas, at mga mensahe ng mensahe. posibleng mga pagkakamali kapag pinupuno. Dapat sapat na ito para makapagsimula ka.

Kamakailan, para sa isang site, hiniling sa akin na gumawa ng feedback form para sa WordPress sa isang modal window. Iyon ay, kapag nag-click sa link na "sumulat sa amin", sa halip na pumunta sa kaukulang pahina, dapat magbukas ang user ng bagong pop-up window, kung saan matatagpuan ang function ng pagpapadala ng mensahe. Ito ay isang mas interactive na solusyon, kahit na hindi lahat ay gusto ito. Personal kong ginusto ang klasikong pagpapatupad na may isang pahina ng contact, ngunit ang mga form sa mga site ay naiiba - kaya magiging kapaki-pakinabang na isaalang-alang ang solusyon sa problemang ito. Sa aking trabaho gumamit ako ng 2 plugin: ang kilalang Contact Form 7 at ang Easy Modal module upang lumikha ng modal window sa WordPress.

Update 05/18/2017: Sa paghusga sa pamamagitan ng pinakabagong mga pagsusuri sa repositoryo, sa ilang mga kaso ay maaaring may mga problema sa pagpapatakbo nito. Kung apektado ka rin nito, sumubok ng bagong solusyon mula sa mga developer na tinatawag na Popup Maker. Maaaring isaalang-alang ang isa pang alternatibo.

Hindi ko na idedetalye ang tungkol sa pag-install at pag-configure ng Contact Form 7 dito. Ang blog ay mayroon ding isang artikulo tungkol sa kung ano ang maaaring maging kapaki-pakinabang.

Dumiretso tayo sa Easy Modal module. Hahanapin mo siya. Sinasabi ng mga developer na ito pinakamahusay na solusyon paglikha ng mga modal window sa site na may iba't ibang mga kagiliw-giliw na pagpipilian para sa pagpapakita ng nilalaman.

Higit sa 10 libong pag-download, rating 4.6. Ang mga wastong bersyon ng 3.4 ay 4.0.8, bagama't matagumpay kong pinatakbo ito sa WP 4.3.1. Sa kabila ng katotohanan na ang plugin ay nabago na ngayon sa isang bagong solusyon sa Popup Maker, sa website na wordpress.org at kapag naghahanap ng mga plugin sa loob ng admin panel ay mahahanap mo pa rin ang karaniwang Easy Modal na bersyon 2.0.17. Gamit ang kanyang halimbawa, sasabihin ko sa iyo ang tungkol sa paggawa ng modal feedback window sa WordPress.

Pagkatapos ng pag-install, lilitaw ang isang seksyon ng parehong pangalan, kung saan mayroong ilang mga item. Kakailanganin natin ang pinakauna sa kanila - Mga Modals. Mag-click sa Add New button doon.

Ang pagkilos na ito ay lilikha ng bagong modal window para sa iyong WordPress site. Ang mga setting ng elemento ay magkakaroon ng 4 na tab:

• Pangkalahatan—pangkalahatang mga parameter.
• Mga Opsyon sa Pagpapakita - mga opsyon sa pagpapakita.
• Isara ang Opsyon - mga setting para sa pagsasara ng window (gamit ang isang pag-click o ang Esc button).
• Mga halimbawa - mga halimbawa ng code na gagamitin.

Ang mga pangkalahatang setting ay naglalaman ng pangalan ng window (hindi ipinapakita sa site), pamagat nito, nilalaman at uri ng pag-download. Sa block ng nilalaman, lumipat sa HTML mode, idagdag ang shortcode ng iyong form ng feedback sa modal window.

Uri Magkarga May 2 pagpipilian ang uri:

• I-load ang Sitewide (para sa buong site).
• Bawat Pahina/Post (para sa mga partikular na post at pahina).

Isang napaka-kagiliw-giliw na pagpipilian. Kung kailangan mo ng pop-up window na ipapakita sa lahat ng pahina ng site (halimbawa, ang link ay matatagpuan sa sidebar), pagkatapos ay piliin ang unang opsyon. Sa pangalawang kaso, ang kaukulang block ng mga setting ay lilitaw sa mga pahina/post ng site kapag nag-e-edit:

Maaari mong i-activate at piliin ang iyong sariling pop-up window para sa isang partikular na page. Kung hindi mo lalagyan ng check ang kahon, hindi mai-load ang elemento sa site.

Ang pangalawang tab ng mga parameter ng module ay Display Options.

Dito mo ipahiwatig:

• laki ng window - awtomatiko, katamtaman, adaptive, maliit, malaki, atbp.;
• background - maaari kang gumamit ng background para sa form o ipakita ito nang wala ito;
• pop-up window animation;
• posisyon (lokasyon) - itaas na gitna, kanang ibaba, atbp.; naayos o hindi;
• indentation sa tuktok ng screen.

Ang mga halimbawa ng pagpapakita ng output ng isang modal window sa WordPress gamit ang Easy Modal plugin ay matatagpuan sa huling tab.

Kailangan mong ipasok ang code na ito sa pamamagitan ng isang widget sa sidebar o sa isang text editor. Ito ay hindi naiiba sa anumang iba pang HTML code, ang tanging bagay ay ang klase ng isang partikular na modal window (eModal-1) ay ipinahiwatig dito. Para sa pangalawang elementong ginawa mo, ang klase ay magiging eModal-2, atbp. Upang maiwasang magkamali sa paglalagay ng code, ang pinakamadaling paraan ay kopyahin ito mula sa pahinang ito.

Pag-edit ng tema ng isang modal window

Sa Easy Modal plugin, bilang karagdagan sa mga setting para sa tiyak na elemento Maaari mong tukuyin ang mga tema para sa mga pop-up window (Tema). Sa basic libreng bersyon Ang module ay mayroon lamang isang template, ngunit ito ay higit pa sa sapat.

SA kasangkapang ito 6 na bookmark:

• Pangkalahatan - ipahiwatig ang pangalan ng paksa;
• Overlay — background (dito maaari mong piliin ang kulay at transparency ng background ng form);
• Lalagyan iba't ibang mga setting ang modal window mismo (padding, frame, shadow);
• Pamagat—mga parameter ng pamagat ng popup window (font, anino);
• Nilalaman — font at kulay ng mga teksto sa block;
• Isara - bumubuo ng pagsasara ng elemento (teksto at disenyo).

Tulad ng nakikita mo, ang hitsura ay maaaring ipasadya upang umangkop sa iyong mga pangangailangan. Natapos ko ang simpleng form na ito ng WordPress sa isang modal window:

Pagkatapos itakda ang lahat ng mga setting, huwag kalimutang i-save ang mga ito (i-click ang pindutang I-save).

Video ng pagdaragdag ng Contact Form 7 sa Easy Modal popup

Sa pamamagitan ng paraan, nakakita ako ng isang video sa pagtatrabaho sa Easy Modal plugin, na nagpapakita ng proseso ng paglikha ng modal feedback window sa WordPress. Doon, ang interface ng module ay bahagyang luma (iba ang hitsura ng ilang mga setting), ngunit maaari mong makuha ang pangkalahatang kakanyahan. Marahil ay magiging mas madali para sa isang tao na maunawaan ang isyung ito gamit ang video.

Kabuuan tungkol sa mga modal windows para sa WordPress

Tulad ng nabanggit sa itaas, ngayon ang Easy Modal plugin (paghusga sa pamamagitan ng opisyal na pahina) na-convert sa Popup Maker. Nagawa kong makahanap ng isang module na may parehong pangalan sa imbakan, ngunit hindi ko ito sinubukan. Sinasabi ko sa iyo ang tungkol dito upang malaman mo kung ano ang hahanapin kung ang Easy Modal sa WordPress sa mga susunod na bersyon ay biglang tumigil sa paggana.

Ang parehong mga solusyon ay libre, kahit na sila ay may bayad na mga add-on. Nagbibigay-daan sa iyo ang mga ito na i-customize ang pag-target, magdagdag ng higit pang mga tema ng disenyo, naglalaman ng analytics at ilang iba pang feature. Kung kailangan mo ng mas advanced na mekanismo ng modal window, maaari mong tingnang mabuti ang mga extension na ito.

Tulad ng para sa gawain ng pagbubukas ng form ng feedback sa Contact Form 7 sa isang pop-up window, sapat na mga pangunahing kakayahan Madaling Modal. At saka ang desisyong ito ay maaari ding gamitin upang ipakita ang iba pang mga modal window sa WordPress - kapaki-pakinabang na mga tip, karagdagang impormasyon atbp. Dahil sa pagkakaroon ng isang editor Mga pagsingit ng HTML code, maaari kang magpakita ng mga video, form, atbp. sa isang pop-up window. Sa pangkalahatan, isang kapaki-pakinabang na plugin. Kung mayroon kang anumang mga katanungan tungkol dito, sumulat sa mga komento.

Magandang hapon mga kaibigan! Sa tutorial na ito ituturo ko sa iyo kung paano gumawa ng contact form sa WordPress gamit ang mga plugin. Ang form ng feedback sa WordPress ay nagsisilbi perpektong solusyon para sa mga gustong mapanatili ang pakikipag-ugnayan sa kanilang madla o makatanggap ng mga aplikasyon sa email upang mag-order ng anumang mga serbisyo. Matututunan natin kung paano gumawa ng pop-up form sa isang modal window. Pagkatapos basahin ang artikulong ito, magagawa mong i-embed ang form sa iyong mga website mismo. So, tara na.

Bakit kailangan mo ng isang form sa pakikipag-ugnayan sa WordPress?

Maaaring nagtataka ka kung bakit kailangan ko ng feedback form para sa isang WordPress site? Bakit hindi na lang magdagdag ng email address sa site para sumulat lang sa akin ang mga tao?

Ito ang pinakakaraniwang tanong mula sa mga baguhan na natatakot na magdagdag ng form code sa isang website na walang kaalaman sa programming. Sa katunayan, hindi mo na kailangan ng anumang code kapag lumilikha ng isang contact form sa WordPress. Sa tutorial na ito, gagawa kami ng isang contact form nang hakbang-hakbang upang kahit na ang pinakakumpletong baguhan ay magagawa ito.

Nasa ibaba ang 3 pangunahing dahilan kung bakit ang paggamit ng isang form ay mas mahusay kaysa sa pagdaragdag lamang ng isang email address sa site.

• – Ang mga spam bot na may nakakainggit na regularidad ay gumagamit ng kanilang mga parser upang kunin ang mga email address kung saan may nabanggit domain ng mail at idagdag ito sa kanilang database para makapagpadala sila sa iyo ng mga hindi gustong sulat. Sa kabilang banda, kapag gumagamit ng feedback form para sa WordPress, inaalis mo ang problema ng mga SPAM na email na bumabaha sa iyong mailbox.
• Pagkakumpleto ng Impormasyon – Kapag nagpapadala ng mail, hindi palaging ipinapadala ng mga tao ang lahat ng impormasyong kailangan mo. Sa pamamagitan ng isang form sa pakikipag-ugnayan, magpapasya ka kung aling mga field ang kailangan mo upang gawing mas madali para sa mga user na magpadala sa iyo ng email (pangalan, email, numero ng telepono, komento, at higit pa).
• Makatipid ng oras – Tutulungan ka ng WordPress contact form na makatipid ng oras. Bilang karagdagan sa pagkakumpleto ng impormasyong hiniling mo mula sa user at kung saan ipapadala niya sa iyo, maaari mo ring isaad kung ano ang naghihintay sa susunod na hakbang, halimbawa, "Ang iyong aplikasyon ay susuriin sa loob ng 24 na oras" o Panoorin ang video at marami pang ibang kapaki-pakinabang na bagay.

Nasa ibaba ang isang halimbawa ng contact form na gagawin namin sa tutorial na ito.

Magsimula tayo, mga ginoo.

Hakbang 1: Pagpili ng Pinakamahusay na Contact Form Plugin para sa WordPress

Naka-on hakbang na ito Kailangan nating magpasya sa naaangkop na plugin ng form. Mayroong isang mahusay na pagkakaiba-iba ng mga ito, parehong libre at bayad. Sa tutorial na ito sasabihin ko sa iyo ang tungkol sa iba't ibang mga plugin upang magkaroon ka ng malawak na pagpipilian. Sa unang kaso, gagamitin ang WPForms plugin.

Nasa ibaba ang mga dahilan kung bakit ang WPForms ay pinakamahusay na plugin feedback:

Una, ito ang pinaka-beginner-friendly na plugin. Sa pamamagitan lamang ng pag-drag at pag-drop ng mga kinakailangang bloke, maaari kang lumikha ng isang contact form sa ilang mga pag-click.

Ang WPForms Lite ay ganap na libre.

Kapag handa ka na para sa mas malakas na functionality at kung talagang mahalaga ito sa iyo, maaari kang mag-upgrade sa Pro na bersyon.

Mahusay, kung ang mga kadahilanang ito ay naging sapat at nakumbinsi kita, pagkatapos ay sumulong kami.

Hakbang 2: I-install ang contact plugin Mga form ng WordPress

Para sa tutorial na ito kami ay gumagamit ng Lite bersyon dahil ito ay libre at madaling gamitin. Maaari mong i-install ito sa pamamagitan ng pag-log in sa blog at pagpunta sa Mga Plugin - Magdagdag ng Bago.

Sa search bar, i-type ang pangalan ng aming plugin at i-click ang I-install ngayon.

Pagkatapos i-install ang plugin, siguraduhing i-activate mo ito. Ito ay ipinapakita dito:

Hakbang 3: Gumawa ng Contact Form sa WordPress

Kaya, pagkatapos na matagumpay na makumpleto ang pag-activate ng plugin, oras na para gawin ang aming form ng feedback. Upang gawin ito, sa panel ng admin ng blog, mag-click sa tab na Menu ng WPForms at pumunta sa Magdagdag ng Bago.

Bubuksan nito ang taga-disenyo ng Wpforms para sa iyo, kung saan simpleng drag at drop Gamit ang mga kinakailangang bloke, maaari kang lumikha ng isang form ng contact sa feedback ng WordPress. Sa libre Mga Lite na bersyon Dalawang pre-built na template ang available (blangko at simpleng anyo). Maaari mong gamitin ang mga ito nang magkasama upang gawin ang kailangan mo at maginhawa para sa iyo. Sa halimbawang ito, pinili namin ang pangalawang opsyon para sa iyo, ibig sabihin, isang simpleng contact form. Magdaragdag kami ng pangalan, email at isang text field dito.

Maaari kang mag-click sa bawat field para i-edit ito. Maaari mo ring i-drag at muling ayusin ang mga field ng form gamit ang iyong mouse.

Kung gusto mong magdagdag ng bagong field, piliin lang ang kailangan mo mula sa listahan sa kaliwa at i-drag ito sa lugar ng trabaho.

Kapag tapos na ang lahat, i-click lamang ang pindutang I-save.

Hakbang 4: I-set up ang Mga Notification at Kumpirmasyon

Kapag matagumpay kang nakagawa ng contact form sa WordPress, napakahalagang i-configure nang tama ang notification at confirmation form.

Ang form ng kumpirmasyon ay ang nakikita ng iyong mga user kapag nagsumite sila ng kahilingan sa form sa iyo. Ito ay maaaring isang mensahe ng pasasalamat o maaari mong i-redirect ang mga ito sa isa pang espesyal na pahina.

Ang form ng notification ay ang mga mensaheng natatanggap mo kapag nakatanggap ka ng a bagong aplikasyon o liham ng email mula sa iyong WordPress site.

Maaari mong i-customize ang pareho sa mga field na ito sa pamamagitan ng pagpunta sa Mga Setting sa loob ng WPForms odds builder plugin.

Bilang default, hindi namin ito itinakda na hawakan at iniwan ang field ng Confirmation Form na may mensaheng "Salamat sa iyong kahilingan" kung ano man. Gayunpaman, may karapatan kang baguhin ito sa isa pang text o i-redirect ang user sa hiwalay na pahina.

Ang pinakamagandang bagay tungkol sa plugin na ito ay ang mga default na setting ay perpekto para sa mga nagsisimula. Hindi nila kailangang malaman kung ano ang gagawin o kung ano ang dapat baguhin. Ang lahat ay napaka-intuitive at simple. Kapag pumunta ka sa mga setting ng notification, dynamic na mapupunan ang lahat ng field.

Ang mga notification ay ipinapadala bilang default sa email na iyong tinukoy sa mga setting. Kung gusto mong baguhin ang tatanggap para sa pagpapadala ng mga notification, madali mo rin itong mababago. Kung gusto mong magpahiwatig ng ilang email address (tinukoy na pinaghihiwalay ng mga kuwit), mangyaring, mga card sa kamay, gaya ng sinasabi nila :)

Ang field ng Email Subject ay awtomatikong pupunan ng iyong pangalan ng form. Ang field ng pangalan ay kukunin mula sa username (iyong pangalan). Kapag tumugon ka sa isang liham, mapupunta ito sa mail na may pangalan ng user na nagpunan ng contact form.

Hakbang 5: Pagdaragdag ng isang WordPress Contact Form sa Pahina

Sa hakbang na ito, kapag binuo at na-configure mo ang form ng feedback, kailangan mong gumawa ng hiwalay na pahina ng "Mga Contact" para dito, kung saan mo ito mailalagay. Alinman sa gumawa ka ng bago o i-edit na ito umiiral na pahina, kung saan maaari mo itong idagdag.

Gagamit kami ng simpleng shortcode para i-embed ang form sa page. I-click lamang ang pindutang "Magdagdag ng form" at piliin ang pangalan ng iyong form upang ipasok ito sa pahina.

Mahusay. Ngayon i-save ang pahina at buksan ang preview upang makita ang mga pagbabago.

Ito ang magiging hitsura ng form: simpleng WordPress pahina:

Kung gusto mo lang magdagdag ng form sa isang page, congratulations. Ang lahat ng mga hakbang ay matagumpay na nakumpleto. Kung gusto mong idagdag ito bilang isang widget sa sidebar, pagkatapos ay magpatuloy sa ibaba.

Hakbang 6: Pagdaragdag ng isang WordPress Contact Form sa Sidebar

Ang WPForms plugin ay may kasamang built-in na contact form na widget na maaari mong idagdag sa iyong sidebar o anumang iba pang lugar ng iyong site (tulad ng footer).

Upang gawin ito kailangan nating pumunta sa seksyon " Hitsura» (Hitsura)-> Mga Widget (Mga Widget). Doon ay makikita mo ang isang pre-installed form na plugin widget sa kaliwang bahagi. Kinukuha lang namin ito at itinakda ang pagkakasunud-sunod ng pagpapakita sa karaniwang pag-drag at pag-drop gustong lugar sa sidebar.

Ang susunod na hakbang ay tukuyin ang pangalan ng widget at i-save. Pumunta sa site at tingnan ang resulta.

Kinukumpleto nito ang pagsusuri ng aming WPForms feedback form na plugin. Ngunit, lalo na para sa iyo, naghanda ako ng isa pang pagsusuri ng isa libreng plugin, kung saan makakagawa kami ng pop-up na form ng feedback at lahat ng parehong feature tulad ng sa nauna. Ito ay tinatawag na Contact Form 7. Ito ay talagang napakalakas at ang trump card nito ay ganap na LIBRE!

Maaari rin itong gawing adaptive, ibig sabihin, ang feedback form ay iaangkop sa laki ng screen ng iyong device.

So, kung sakali, para malaman mo na nandiyan sila.

Paano gumawa ng contact feedback form gamit ang Contact Form 7

Patuloy naming nauunawaan ang isyu ng paglikha ng mga form para sa pagtanggap ng mga aplikasyon mula sa iyong website. Mayroon kaming isa pang plugin ng WordPress contact form sa unahan na tinatawag na Contact Form 7. I-install natin ito sa aming blog at i-activate ito ayon sa alam namin kung paano gawin.

Naka-install na ito sa aking website, hindi sa blog na ito. Ang pamamaraan ay pamantayan. Ngayon kailangan nating pumunta sa admin panel ng blog at lumikha bagong uniporme, na mangongolekta ng mga aplikasyon para sa amin at iba pa kapaki-pakinabang na impormasyon. Pumunta sa seksyong "Contact Form 7" -> Magdagdag ng bago.

Mahusay! Ngayon bigyan natin ito ng angkop na pangalan, sa aking kaso ay marami itong mga form sa pakikipag-ugnayan. Pumili tayo ng isa, halimbawa "Form ng order sa pag-promote ng website"

Sa madaling sabi, sasabihin ko sa iyo kung ano ang kailangan natin dito. Una sa lahat, kailangan nating magpasya kung gaano karaming mga field ng form ang gusto nating gawin. Sasabihin ko kaagad na hindi na kailangang lumikha ng 100,500 na mga patlang at ito ay walang kabuluhan, sa simpleng dahilan na isasara ng mga tao ang iyong site at hindi mag-iiwan ng kahilingan. Kailangan nilang gawing mas madali ang hakbang na ito. Ibig sabihin, kung iisipin mo, ang kailangan natin sa isang tao ay:

Ang kanyang pangalan upang tawagan siya (personal na address)

Mail address (feedback, kung saan ipapadala sa kanya ang isang alok)

Numero ng telepono na tatawagan kaagad (kung mabilis itong mangyari, magiging kliyente mo pa rin siya)

Ang aktwal na "Isumite" na buton

Ito ang pangunahing data, maaari mo nang malaman ang iba sa panahon ng pagsusulatan o pag-uusap sa telepono. Lohikal? sa tingin ko. Mag-move on na tayo.

Paglikha ng mga field ng contact form sa Contact Form 7 na plugin

Kaya, nagpasya kami sa bilang ng mga patlang, ngayon kailangan naming lumikha ng mga patlang na ito. Ang mga sumusunod na tab ay magagamit sa amin:

• Teksto (Anumang field ng text, gaya ng "Pangalan", "Magtanong", o anumang iba pang pamagat na kokolektahin mo sa field na ito)
• Email (ang layunin dito ay para makapasok ang user )
• URL (ang address ng site ay ilalagay sa field na ito, ang iba pang mga halaga ay hindi katanggap-tanggap at isang error ang ipapakita)
• Tel (patlang na may numero ng telepono para sa aming form ng feedback sa WordPress, ay katanggap-tanggap mga numerong halaga, ang teksto ay magbibigay ng error)
• Numero (Numerical na hanay ng mga halaga, maaaring ilapat, halimbawa, sa presyo: "magkano ang gusto mong bayaran para sa site? Mula 23,000 hanggang 120,000 rubles")
• Petsa (Isaad ang petsa, mula sa anong petsa hanggang anong petsa. Halimbawa: “Pagpapareserba ng sasakyan mula 04/13/2016 hanggang 04/25/2016”)
• Lugar ng Teksto (Lugar ng teksto, dito maaari kang maglagay ng teksto bilang komento)
• Drop-Down na Menu. Ipinatupad sa aking blog, makikita mo ito. Sa dulo ng bawat artikulo, iminumungkahi ko ang mga gumagamit na lumikha ng alinman sa isang simpleng website o isang online na tindahan. Ito ay eksakto ang pag-andar na nagbibigay pagpipiliang ito.
• Mga checkbox (multiple choice, halimbawa: Website + Paggawa ng logo + promosyon + contextual advertising)
• Mga radio button (Pagpili ng isang item, halimbawa: “Mag-order ka o advertising sa konteksto o naka-target")
• Pagtanggap (Tanggapin ang mga tuntunin ng kasunduan, ibig sabihin, impormasyon ng user, tulad ng isang pampublikong alok)
• Pagsusulit (Ang pagsusulit ay isang serye ng mga maiikling tanong na maaari ding ipasok sa contact form).
• reCaptcha (Pagkumpirma na hindi ka robot at hindi mag-spam.) Magandang proteksyon mula sa SPAM. Tandaan: gumagana ang opsyong ito kung ikinonekta mo ang Really Simple Captcha plugin.
• File (Kung gusto mong payagan ang mga user na mag-upload ng file sa iyo, halimbawa: "Mag-attach ng mga teknikal na detalye para sa pagbuo ng website").
• Isumite (Ipadala ang data sa pamamagitan ng email)

So, we have decided on the fields, alam mo rin ang kahulugan ng bawat isa. Magsimula tayo sa pagbuo ng aming contact form sa WordPress.

Sa halimbawa sa ibaba gumamit ako ng 2 field: Pangalan, Email. Alinsunod dito, kakailanganin mo ang mga tab na ito:

Sa pamamagitan ng pag-click sa tab na teksto (Text) napupunta tayo sa dialog box:

Dito kailangan nating mag-click sa Uri ng Field - Kinakailangan na checkbox. Ginagawa ito upang kung ang gumagamit ay hindi magpasok ng isang pangalan sa loob nito, pagkatapos ay hindi siya makakapagpadala sa iyo ng isang aplikasyon ay magkakaroon ng isang error sa pagpapadala, na nagpapahiwatig na hindi lahat ng mga patlang ay napunan nang tama.

Pagkatapos ay makakakita ka ng shortcode upang ipasok ang field na ito at sa tabi nito asul na pindutan"Ipasok ang tag." Magdaragdag ito ng isang bagong field ng contact form.

Para hindi ka malito, I highlighted it with style. Code sa ibaba:

Buong Pangalan

< div class = "col-md-4" > < label class = "sr-only" >Buong Pangalan< / label >[ text* text - 658 class : form - control placeholder "Your name" ] !}< / div >

At narito ang screen:

Nagsasagawa kami ng katulad na operasyon para sa field na "Email". Nag-click kami sa kaukulang tab at pumasok sa dialog box na ito.

Ito ay ganap na walang pinagkaiba sa nauna, inuulit lang namin ang aming mga aksyon. May istilo din ang field ng email ko. Ibinibigay ko ang code sa ibaba:

Buong Email

< div class = "col-md-4" > < label class = "sr-only" >Buong Email< / label >[ email* email - 447 class : form - control placeholder "Iyong Email" ] !}< / div >

At narito ang screen:

At sa wakas, ang "Isumite" na buton. Lahat siya nasa style ko.

< div class = "col-md-4" >[ isumite ang klase : btn - flat class : col - xs - 12 "Order" ]< / div > < / div >

Mahalagang Paalala: Mga minamahal, sa halimbawang ito, gumagamit ako ng mga istilong tumutugon upang lumikha ng isang form sa pakikipag-ugnayan sa WordPress, ibig sabihin, maaari itong magkaroon ng mga anyo ng anumang laki ng screen.

Makikita mo ang button sa kanan itaas na sulok. Siguradong hindi mo ito palalampasin. 🙂

Nagawa na namin ang ilan sa mga gawain, ngayon kami ay lumipat sa susunod na yugto.

Mga setting postal address para sa pagtanggap ng mga aplikasyon

Sa hakbang na ito, kailangan naming gumawa ng ilang mga setting upang maipadala sa amin ang mga titik sa aming mailbox. Sasabihin ko sa iyo kung paano makamit ito sa ibaba.

Kailangan nating mag-click malaking tab"Liham". Ito ay magiging pangalawa pagkatapos ng Form Template.

Ang unang makikita mo ay iyong mga tag na idinagdag mo, kailangan nating ipasok ang mga ito sa katawan ng liham, papalitan nila ang data na ipinasok ng gumagamit mula sa form. Sa tingin ko ay ipinaliwanag ko ito nang malinaw.

Ngayon para sa mga patlang:

• Sa (Kung saan ipapadala ang aplikasyon, sa aking kaso, ito ang aking email address, maaari mong tukuyin ang ilang mga address kung saan magpapadala ng mga aplikasyon)
• Mula sa (Field From, ibig sabihin, ang halaga ay papalitan na ang application ay mula sa aking studio website)
• Paksa (Nagsisilbi upang matukoy kung saang form nagmula ang aplikasyon, sa aming kaso ito ay isang aplikasyon mula sa form ng promosyon ng site).
• Mga Karagdagang Header (Mga karagdagang header, hindi namin sila hinawakan, kailangan ang mga ito para sa tamang pagsusumite ng form)
• Katawan ng Mensahe (Katawan ng mensahe, dito mo ipahiwatig kung kanino nanggaling ang liham at mula sa anong address, halimbawa: "Mula kay: Ivan" "Mail address: vasya @ mail. ru")
• Mga Attachment ng File (Mga Attachment sa file, huwag hawakan)

Ngayon ay kailangan naming i-configure ang mga abiso tungkol sa matagumpay o hindi matagumpay na pagpapadala ng isang email mula sa form ng contact sa WordPress.

Ito ay mga mensahe na ipapakita sa user bilang tugon sa kanyang mga aksyon kasama ang form. Bilang default, pupunta sila sa Ingles. Isinalin ko sa Russian ang mga pinakakailangan na bagay para sa iyo. Magkakaroon ng higit sa sapat sa kanila, at kung hindi, tutulungan ka ng Google translator. Kaya simulan na natin.

• Kapag matagumpay na nagpadala ng mensahe: “Matagumpay na naipadala ang iyong mensahe. Salamat."
• Kung ang isang mensahe ay naipadala nang hindi tama mula sa form: "May naganap na error habang ipinapadala ang mensahe. Pakisubukang muli sa ibang pagkakataon o makipag-ugnayan sa administrator ng site."
• Error sa pagpuno: "Mga error sa pagpuno. Pakisuri ang lahat ng field at isumite muli."
• Ang ipinadalang data ay kinilala bilang spam: “Error sa pagpapadala ng mensahe. Pakisubukang muli sa ibang pagkakataon o makipag-ugnayan sa administrator ng site."
• Dapat tanggapin ang ilang kundisyon: "Pakitanggap ang mga kundisyon para magpatuloy."
• Ang ilang mga field ay dapat punan: "Mangyaring punan ang isang kinakailangang field."
• Ang haba ng mga character sa field ay nalampasan: "Masyadong maraming data ang tinukoy."
• Hindi sapat na haba ng mga character sa field: "Masyadong maliit na data ang tinukoy."
• Di-wastong format ng petsa: "Mali ang format ng petsa."
• Maagang petsa sa minimum na limitasyon: "Ang petsang tinukoy ay masyadong maaga."
• Late na petsa sa maximum na limitasyon: "Ang petsang tinukoy ay huli na."
• Nabigo ang pag-download ng file: "Hindi ma-download ang file."
• Hindi pinapayagang uri ng file: "Ang uri ng file na ito ay hindi pinapayagan."
• Naglo-load din malaking file: "Masyadong malaki ang file na ito."
• Nabigo ang pag-upload ng file dahil sa Mga error sa PHP: "Nabigo ang pag-upload ng file. May naganap na error."
• Ang format ng numero na ipinasok ng nagpadala ay hindi tama: "Ang format ng numero ay hindi tama."
• Ang bilang ay mas mababa sa minimum na limitasyon: "Ang bilang na ito ay masyadong maliit."
• Mas mataas ang numero sa maximum na limitasyon: "Masyadong mataas ang bilang na ito."
• Ang nagpadala ay hindi naglagay ng tamang sagot sa tanong na: "Naglagay ka ng maling sagot."
• Ang e-mail address na ipinasok ng nagpadala ay hindi tama: "Di-wastong e-mail."
• Ang URL na inilagay ng nagpadala ay hindi tama: "Di-wastong URL."
• Ang numero ng telepono na ipinasok ng nagpadala ay hindi tama: "Di-wastong numero ng telepono."

Napakahusay. Tapos na kami sa pagse-set up ng form, ngayon kailangan naming ipasok ito sa site. Para sa layuning ito na kilalang teknolohiya, pumunta sa isang umiiral na pahina o lumikha ng bago. Sa aking halimbawa ay magpapakita ako sa iyo ng isang halimbawa umiiral na anyo sa pahina ng WordPress site.

Dahil ang aming form ay nangongolekta ng mga aplikasyon para sa pag-promote ng website, pumunta tayo sa isang katulad na pahina.

Upang ipasok ang aming contact form, kailangan naming kopyahin ang shortcode na itinalaga dito ng plugin. Available ito sa ilalim ng pangalan ng iyong form.

Kinopya at i-paste namin sa aming pahina, pagkatapos pumunta sa text editor(hindi visual). Ipinapakita sa screenshot sa ibaba:

I-save natin ang aming pahina at tingnan kung ano ang napunta sa browser:

Super! Ngayon subukan nating ipadala ang form nang walang pinupunan. At ito ang makikita natin.

Nagkaroon ng error sa pagsusumite ng form dahil hindi ibinigay ng user ang kinakailangang data sa mga field. Ngayon ipasok natin ang tamang data at tingnan kung ano ang makukuha natin sa kasong ito.

I-click ang isumite at ito ang sinasabi ng aming form:

Ngayon tingnan natin kung ano ang hitsura ng aming application. Dumating sila sa aking email. Tingnan natin ang paghahatid:

Pumasok tayo sa loob upang matiyak na tama ang pag-encode at lahat ng data.

Ayos lang ang lahat. Ang form ay gumagana nang maayos at nagsusumite ng data. Ngayon ay maaari na kaming mangolekta ng mga application na darating sa iyo kapag nagsimula ka, kung pinag-uusapan natin ang tungkol sa rehiyonal na promosyon.

Kaya, sinabi namin sa iyo kung paano gumawa ng contact form sa WordPress sa isang pahina ng website. Ngayon sasabihin ko sa iyo kung paano gumawa ng pop-up adaptive na anyo feedback gamit ang aming Contact form 7 na plugin.

Gumagawa ng pop-up na tumutugon na form ng feedback sa pakikipag-ugnayan sa WordPress

Upang ang aming form ay maging adaptive, ibig sabihin, "likido", kailangan naming ikonekta ang isa pang plugin, o sa halip ang pagdaragdag nito sa Contact Form 7 - ito ay tinatawag na Bootstrap Contact Form 7. Nag-i-install kami at nag-activate lamang at iyon na - ito ay gumagana. Hindi mo kailangang gumawa ng anumang mga setting dito. Itakda ito at kalimutan ito.

Sa susunod na hakbang, sasabihin ko sa iyo kung anong mga pagbabago ang kailangang gawin para gawing pop-up at tumutugon ang aming form. Gumawa ako ng katulad na pagpapatupad sa home page website ng iyong studio. Upang gawin ito, pumunta tayo sa template ng index.php, na matatagpuan sa seksyong "Appearance - Editor". Gagawa lang kami ng code, nang manu-mano.

Ang aming popup form ay lilitaw sa isang modal dialog tulad nito:

Upang makamit ang resulta na ito kakailanganin mo ang sumusunod na code, ipapakita ko ito nang buo sa isang snippet:

Order ×Isara Mag-iwan ng kahilingan

< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" >Umorder< / a > < ! -- Modal -- > < div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" >×< / span > < span class = "sr-only" >Isara< / span > < / button > < h4 class = "modal-title black" id = "myModalLabel" >Mag-iwan ng kahilingan< / h4 > < / div >

Hi sa lahat. Kami ay binomba ng mga tanong tungkol sa kung paano ipatupad ang isang form na lalabas sa isang modal window pagkatapos mag-click sa isang pindutan, at pagkatapos magsumite, isang mensahe tungkol sa tagumpay o pagkabigo ay ipapakita.

Sa tingin ko maraming katulad na bagay sa Internet, ngunit dahil nagtatanong ang mga tao, nagpasya akong gawin ito. Bukod dito, ang naturang pag-andar ay dapat na naroroon sa halos bawat landing page upang ipatupad ang isang pindutan tumawag ulit. At sa katunayan, ngayon ay parami nang parami ang mga resulta ng pagsubok sa AB na nagpapakita na ang mga bukas na form ay gumagana nang mas malala kaysa sa mga nakatago sa isang modal window at binuksan pagkatapos ng pag-click sa isang pindutan.

Ang ilan ay nagtatalo na ito ay dahil sa ang katunayan na ang mga tao ay dahan-dahang "nagkakaroon ng kaligtasan sa sakit" at ang bukas na anyo ay isang agresibong pagbebenta. Kumbaga, ngayon ang oras kung kailan ang gumagamit, nang makakita ng isang bukas na form, ay naniniwala na sinusubukan nilang "ibenta" ang isang bagay sa kanya. Hindi ako lubos na sumasang-ayon sa teoryang ito, ngunit mayroong isang butil ng katotohanan. Maaaring totoo ito sa ilang uri ng negosyo. Buweno, ngayon ay bumaba tayo sa pagpapatupad ng form.

Tandaan! Hindi ko ilalarawan ang bawat aksyon nang detalyado, ngunit nag-aalok sa iyo ng isang handa na bersyon sa source code. Kung mayroon kang anumang mga katanungan, sumulat sa mga komento. Aalamin natin :)

Ngayon magsisimula tayo hindi sa jQuery, ngunit sa layout ng button at form. Isasama namin ang lahat ng mga script sa dulo ng pahina.

Ang isang pindutan na, kapag na-click, ay magbubukas ng isang modal window:

Mag-iwan ng kahilingan

Maaari kang magtakda ng anumang klase, ngunit sa href isulat ang #modal - ito ang magiging id ng container na may shading at contact form.

Ngayon ay ibibigay ko ang code para sa form at ang bloke kung saan matatagpuan ang form:

Iwanan ang iyong mga detalye sa pakikipag-ugnayan at makikipag-ugnayan sa iyo ang aming consultant. Gusto ko ang form na ito para sa aking website

Pagkatapos magdagdag ng mga istilo, ganito ang hitsura:

Para gumawa ng modal window, ginamit ang Remodal library. Ito ay isang hanay ng mga css at js file, para lamang sa paglikha ng mga animated na modal windows. Maaari mong i-download ito mula sa link o sa aking mga pag-edit sa dulo ng artikulo.

sa pagitan ng mga tag sa ulo ikonekta ang mga istilo:

At bago ang closing body tag, magdagdag ng mga script:

Ang Script.js ay isang script para sa pagproseso ng form. Ang parehong Ajax na nagbibigay-daan sa amin na isagawa ang buong pamamaraan nang hindi nire-reload ang pahina:

$(document).ready(function () ($("form").submit(function () ( // Kunin ang form ID var formID = $(this).attr("id"); // Magdagdag ng hash sa pangalang ID var formNm = $("#" + formID(( type: "POST", url: "mail.php", data: formNm.serialize(), success: function (data) ( // Output text ng pagpapadala ng resulta $(formNm).html(data); );

Hindi ko ibibigay ang orihinal css code at js mula sa mga file na responsable para sa modal window at form, dahil sila ay medyo malaki. Kung gayon, tingnan ang pinagmulan. Ngunit ang tagapangasiwa ng PHP ay higit na karaniwan (kung maaari kong sabihin ito):

Mangyaring huwag kalimutang palitan ang iyong mga email address sa iyong sarili.

Ito ang ajax form na nakuha namin. Paumanhin sa hindi pagtatangkang ipaliwanag nang detalyado kung paano ginawa ang bawat elemento. Nais ko lang magbigay ng natapos na resulta, ngunit walang saysay na ilarawan ang lahat ng mga animation at pagpapakita. I-download ang pinagmulan at ipatupad ito sa iyong website. At iyon lang para sa araw na ito. Good luck sa lahat!

Guys, I urge you to test the form on a real or virtual server(pagho-host). Pakitiyak na ang iyong server ay sumusuporta sa php, mayroon ka bayad na taripa at hindi panahon ng pagsubok. Kung hindi, sa 90% ng mga kaso ang form ay hindi gagana.

Huwag maghintay ng sulat sa iyong lugar mailbox, kung binuksan mo lang index file sa browser at i-click ang "Isumite" na buton. Ang Php ay isang server-side na wika!

Kung ikaw ay masyadong tamad upang malaman ito at gawin ang form sa iyong sarili, pagkatapos ay inirerekomenda ko ang pagbibigay pansin sa.

Na-update na bersyon matatagpuan ang artikulo