Flektor 5
See on kontaktvormide loomise pistikprogramm. See on kasutajate seas ülipopulaarne (alles pärast pistikprogramme ja allalaadimisi), kuna see ühendab edukalt kasutusmugavuse ja võimsad võimalused kontaktivormide kohandamiseks ja kujundamiseks. Püüan võimalikult üksikasjalikult kaaluda kõiki pistikprogrammi funktsioone.
1 Pakkige arhiiv lahti.
2 Kopeerige kaust kontakt-vorm-7 v / wp-content / plugins /.
3 Läheme ajaveebi administraatori paneelile Pluginad"ja aktiveerige pistikprogramm.
Kui see on aktiveeritud, loob pistikprogramm ajaveebi haldusalasse eraldi menüü nimega "" ja loob ka vaikimisi kontaktivormi, mida näete jaotises " Kontaktivorm 7 \ Kujundid":
Kui kasutate soovitatud manustuskoodi, on ajaveebi vorm järgmine:
Muidugi, välimus see kontaktivorm sõltub teie mallis kasutatud stiilidest, kuid üldiselt näeb see välja selline.
Selle väljastamiseks lihtsaim vorm vajate vaid paar minutit. Ja just selle kontaktivormi lisamise lihtsuse tõttu armastavad paljud kasutajad seda pistikprogrammi.
Pistikprogrammil on aga palju võimalusi igasuguse keerukusega täiustatud kontaktivormide loomiseks. Alustame aga lihtsast, luues oma vormi, mis erineb vaid pisut pistikprogrammi sisseehitatud vaikevormist. Klõpsake linki "Lisa uus":
See avaneb algusleht vormi lisamine:
Pistikprogramm tuvastab ajaveebis kasutatava lokaadi automaatselt, seega pole vaja keelt valida, piisab lihtsalt nupu "" vajutamisest. See avab vormi kujundaja lehe. Esimene asi, mida peaksite siin tegema, on vormi pealkirja ümbernimetamine:
Pealkiri ei loe, see on lihtsalt selleks, et te ei satuks oma kujuga segadusse. Määrake oma vormi nimi, klõpsake nuppu " Salvesta"ja sai selle tulemusena" manustuskoodi ":
Nüüd saate soovitatud koodi kleepida ükskõik millisesse oma postitusse või lehele (muidugi režiimis „Tekst”), et kuvada selles kontaktivorm. Siiski ei erine see mingil moel vaikevormist, seega jätkame koostööd vormide kujundajaga. Disainerilehe paremas servas on nupp " Loo silt", klõpsates sellel saate:
Valime näiteks telefoninumbri. Avaneb selline aken:
Tegelikult ei saa siin üldse midagi muuta. Suurused, klassid jms on teisejärgulised valikud ja enamikul juhtudel ei pea te neid muutma. Kuid valik "" võib olla kasulik vihjeks külastajatele selle välja täitmise kohta.
Näiteks määrame järgmised väärtused:
Kontaktivormi kuvamisel näeb väli välja selline:
Sellel väljal klõpsates kaob sinna sisestatud tekst, kuna see on ainult vihje täitmiseks. Kuid ma jätsin vahele punkti, mis pidi lisama valitud sildi kontaktivormile endale. See silt:
Vormi kujundaja lehe vasakusse serva tuleb kleepida, kus asub kontaktivormi kood:
Peate vormi koodi käsitsi looma, st pealkirjad, lõigumärgendid ja reavahed ise korraldama, peaksite saama midagi sellist:
Salvestage vormi kood ja saate järgmise kontaktivormi:
Tegelikult saate samamoodi oma kontaktivormi hõlpsalt paari minutiga lisada mis tahes silt mida pistikprogramm kasutab. Ma ei sunni teid igat märgendit käsitsi proovima, annan kohe nende väljundi:
1 Tekstiväli.
Tavaline tekstikasti, saab kasutada nime, teema jne jaoks.
2 E-post.
Kasutatakse ainult sisendiks e-posti aadressid.
3 URL.
4 Telefoninumber.
Kasutatakse ainult telefoninumbri (numbrid ja sidekriipsud) sisestamiseks.
5 Number (spinbox).
Kasutatakse ainult numbri sisestamiseks (seda saab kasutada vanuse, tellitud kaupade arvu jne näitamiseks).
6 Number (liugur).
See töötab valesti. Selle numbrilise liuguri kuvamiseks kasutatakse HTML5 -d ja see tähendab esiteks seda, et selline liugur näeb erinevates brauserites teistsugune välja ja teiseks ei tööta see ikkagi päriselt. Pistikprogrammide tugifoorumitel nägin lahendusi, mis parandavad selle sildi tööd, kuid need ei aidanud mind - ma ei saanud seda liugurit numbrite kuvamiseks. Soovitan seda märgendit mitte kasutada.
7 Kuupäev.
Kasutatakse ainult kuupäeva sisestamiseks.
8 Tekstiväli.
Vene tõlkes nimetatakse seda silti ka "tekstiväljaks", kuid HTML -i terminoloogias on see tekstiala, mis tegelikult tähendab ainult suurendatud tekstivälja. Kasutatakse sõnumi teksti sisestamiseks.
9 Rippmenüü.
Kasutatakse rippmenüüst üksuse (või mitme üksuse) valimiseks. Seda saab kasutada kõigeks - alates tellitud toote värvi küsimisest kuni inimese soo valimiseni.
10 Märkeruudud.
Kasutatakse ühe või mitme üksuse valimiseks pakutud valikutest.
11 Raadionupud.
Kasutatakse pakutud valikute hulgast ainult ühe üksuse valimiseks.
12 Vastuvõtt.
Kasutatakse tingimustega nõustumiseks.
13 Küsimus.
Kasutatakse määratud küsimustele vastamiseks (küsimus valitakse juhuslikult määratud valikute hulgast). Põhimõtteliselt kasutatakse seda silti rämpsposti eest kaitsmiseks. Ja kui spämmirobotid saavad hõlpsasti vastata arvulisele küsimusele, siis sellised küsimused nagu "mis planeedil me elame?" nad ei oska vastata.
14 CAPTCHA.
Seda kasutatakse täisväärtusliku captcha kuvamiseks. Selle märgendi kasutamiseks peate installima Really Simple CAPTCHA pistikprogrammi. Captcha on üsna loetav ja seetõttu tungivad hõlpsasti sisse arenenud rämpspostirobotid nagu Hrumer.
15 Faili üleslaadimine.
Kasutatakse faili saatmiseks. Saate määrata kehtivate failide maksimaalse suuruse ja vormingu.
16 Esita nupp.
Kasutatakse kontaktivormi andmete esitamiseks. See on kohustuslik silt.
Siltidega, mida kasutatakse otse kontaktivorm, arvasin välja. Nüüd vaatame, kuidas saada samad sildid kontaktivormilt teie e -posti aadressile. Konstruktoris kontaktivormi koodi all on teile saadetud kirja mall ja just selles peate tegema vajalikud muudatused. See on oluline, sest selle malli vale täitmine ei võimalda teil täpselt teada, mida külastaja teie vormi kirjutas. Võtame näiteks telefoninumbri sildi. Oletame, et teie kontaktivormi sisestatakse see järgmiselt:
Niisiis, saadetud kirja mallile peate sisestama järgmise koodi:
Tähendus, ma arvan, on selge. Kontaktivormi koodis , ja kirjas ainult selle välja nimi ... Pistikprogramm loob digitaalsete siltide nimesid nagu , kuid keegi ei takista teil teie nimesid kasutamast. Ja e -posti malli ülejäänud siltide kohta - need on samuti moodustatud sama põhimõtte järgi - asemel kasutatud jne.
Kontaktivormi väljastatavaid tekste saab parandada ka vormi kujundaja jaotises "Sõnumid":
Plugina korduma kippuvad küsimused:
1 Kuva viga " ", kuidas parandada?
See tähendab, et määratud vorm on kustutatud või vormi pealkiri on valesti määratud (pealkiri kutsekoodis on vormi kutsumiseks ülioluline).
2 Kirjas näen silte nagu teksti asemel, kuidas seda parandada?
See tähendab, et külastaja pole seda välja täitnud. Sel juhul märgendit ei asendata, vaid kuvatakse sellisena, nagu see on.
3 Kas märgendile nime valimisel on mingeid piiranguid?
Seal on. Kui silmus WordPress kui kasutatakse nime "nimi", siis ei saa seda märgendi nimena kasutada. Parimal viisil probleemide vältimine on nimede eesliidete lisamine, näiteks sõna "teie". Sildi nimega kindlasti probleeme ei teki.
4 Kas külastajat saab e -posti teel teavitada, et tema vorm on kätte saadud?
Saab. Kasutage vormi konstruktoris valikut "Sihtkoht 2":
Seda suvandit saab kasutada automaatvastajana.
5 Kas täidetud vormi saab saata mitmele aadressile?
Saab. Kasutage suvandi "Sihtkoht" välja "":
Kus [e -post kaitstud] teie täiendav e -kiri, millele saadetakse külastaja täidetud vormi koopia (käsk "cc" saadab pimekoopia).
6 Kas vormi saab kuvada mitte postituses või lehel?
Jah. Kleepige vormi kutsumise kood teksti vidinasse.
7 Kas vormi saab mallfailides otse koodiga renderdada?
Jah. Kasutage sellist koodi:
| "" ) ; ?> |
8 Vormi ei saadeta, kuvatakse viga punases raamis, kuidas seda parandada?
Võtke ühendust oma hostiga, võimalik, et PHP ei luba funktsiooni mail () kutsumist.
9 Vormi esitamisel ilmub oranži raami viga, kuidas seda parandada?
Oranž raam näitab rämpsposti. Vahemällu salvestatud pistikprogrammid võivad rämpspostivastases kaitses põhjustada valepositiivseid tulemusi. Seadistage oma vahemällu salvestamise pistikprogramm vahemälufailide perioodiliseks tühjendamiseks (piisab 24 tunnist).
10 E -posti väli näeb vormi teistest väljadest erinev. Kuidas seda parandada?
Pistikprogramm kasutab e -posti aadressi sisestamiseks HTML5 -koodi ( selle asemel ) ja sellist koodi sageli vanades mallides ei vormindata. Peate muudatusi tegema stiilid.css oma malli, lisades sinna sisendivalija jaoks vajaliku koodi.
11 Kuidas sisestada kasutaja lisatud fail e -kirja?
Selleks kasutage spetsiaalset välja "Manustatud failid:"
Tõesti väärib teie tähelepanu. Erinevalt paljudest teistest populaarsetest pistikprogrammidest ei sunni see neid ostma. Pro versioon - kõik selle võimalused on kohe saadaval. Pistikprogrammi populaarsus (alla 19 miljoni allalaadimise) on igati teenitud - kogu selle funktsionaalsuse tõttu on seda äärmiselt lihtne seadistada ja see on saadaval isegi algajatele mootori kasutajatele WordPress.
Kuid pidage meeles, et see on kontaktivormi pistikprogramm, mitte lihtne vormipistikprogramm. Kõigi võimaluste piires ei võimalda see teil luua mis tahes tingimustel põhinevat täiustatud vormi. Selle peamine eesmärk on luua kontaktivorme ja mitte midagi muud. Loomise eest dünaamilised vormid, postitusvormid jms, kasutage pistikprogramme nagu Ninja Forms, need on selleks sobivamad.
Kui teil on pistikprogrammi seadistamise kohta veel küsimusi - küsige kommentaarides, proovin teid kindlasti aidata.
Pistikprogrammi autor: Takayuki Miyoshi
Kõnealune versioon: 3.9.1
alates 31.07.2014
Praegune versioon: 5.1.4
alates 04.08.2019
Ühildub WordPressi versiooniga: 4.9
ja kõrgem
Aktiivsed pistikprogrammide installid: 5 000 000+
Laadige alla pistikprogrammi versioon 5.1.4(allalaaditud kokku 121 112 956
üks kord)
Kas teile meeldis postitus? Tellige tarkvarauuendused või
Lisab saidile privaatsuspoliitika lehe. Samuti lisab kontaktivormi 7 all nõusoleku isikuandmete töötlemiseks. Pistikprogramm on mõeldud ainult venekeelsetele saitidele. Sisestamisel kuvatakse kasutajatele teade küpsiste kasutamise kohta saidil. Sobib mudelile 152FZ.
Kui teil on pistikprogrammi kohta küsimusi, kirjutage sellele meilile: [e -post kaitstud] Me ei anna nõu meie veebisaidi veebikonsultandi kaudu.
Paigaldamine
- Installige pistikprogramm.
- Täitke nõutavad ettevõtte andmed.
Kaasautorid ja arendajad
„Saidi privaatsuspoliitika. Nõusolek kontaktvormi 7 all ”on avatud lähtekoodiga projekt. Pistikprogrammi väljatöötamisele on kaasa aidanud järgmised kaasautorid:
Muuda logi
1.28 Ühilduvuse kontrollimine WP 5.0 -ga. Lisati pealkirja peitmine eeskirjade teksti eest
1.27 Küpsise olemasolu kontrollimine plaadile, mis ilmub saidilt sisenedes alt üles, tõlgitakse js -ks
1.26 Lisatud rel = nofollow pluginate lingid
1.25 Lisatud lepingu tekst alla standardvorm kommenteerides
1.24 Parandatud viga Java skriptis
1.22 Parandatud väiksemad vead administraatori paneelil ja nupu nime teksti kuvamine lehe kontaktivormi 7 all
1.21 Konteineriklass, millega poliitikatekst on raamitud, on asendatud konteiner-ppcf7
1.2 Klass on märgendile lisatud
p> vormide all
1.1 Lisatud võimalus privaatsuspoliitika lingi kuvamiseks / peitmiseks jaluses
1.01 Eemaldati küpsise sõnumist täiendav p -silt
1.0 Esimene versioon hoidlas
FormGet on lihtne WordPressi pistikprogramm, mis töötab sarnaselt lohistage ja drop, mis võimaldab teil oma saidile luua erinevaid kontaktivorme. Peate lihtsalt klõpsama väljadel, mida soovite vormile ja vormile lisada tagasisidet on mõne sekundi pärast valmis.
Vormid, mida saab selle pistikprogrammiga teha
Selles vinges pistikprogrammis saate teha kontaktivormi, tugivormi, broneerimisvorme, nõustamisteenuseid, kontaktivormi, postitusloendit, küsimustikke, tööavalduste vormi, registreerimisvormi viisardit, tellimisvormide koostajat ja palju muud.
FormGet Kontaktivorm on väga tõhus vahend mis võimaldab teil luua ja manustada oma saidile kontaktivormi mitmesse lihtsaid samme... Valige vormiväljad, kohandage valikuid ja manustage hõlpsalt oma saidile kontaktivorm, lihtsalt paigutades koodi vidinasse või kasutades kohandatud lühikoodi. Soovitud kuju tegemiseks ei vaja te programmeerimisalaseid teadmisi - see on täiendav pluss selliste laienduste valimisel.
Kui saidile on korraga installitud mitu kontaktivormi, saab kõiki nende andmeid jälgida ühes kohas - armatuurlaual. Selle pistikprogrammi olulisem eelis on see, et selle loodud vormid on adaptiivsed, mis võimaldab teil nõutavaid andmeid õigesti kuvada mis tahes seadmes ilma täiendavaid stiile ja klasse kirjutamata.
Plugina toetatud väljade loend:
Nimi, aadress, kontakttelefoninumber, sõnum, makse (integreerimine PayPaliga), kuupäev (formaadi pp-kk-aaa või pp / kk / aaa või aaa-kk-pp toetus), tekstistring, mitmerealine tekst, mitu valik, manused, märkeruut, Vali (valik soovitatud loendist), raadionupud, failide üleslaadimine ja Captcha.
Installimine on tavaline - WordPressi saidi administraatori paneeli kaudu.
Kontaktivormi seadistamine ja loomine
Pärast installimist ja aktiveerimist näete spetsiaalset tervitusvormi:
Klõpsake nuppu "Loo" ja minge seadete juurde ning looge tagasiside vorm. Kõik seaded on jagatud 4 vaheleheks:
- Võtke ühendust vormi koostajaga
- Manusta kood
- Laiendused
Esialgu avaneb esimene vaheleht, kus saate konstruktori abil luua oma esimese tagasiside vormi.
Vaatame lähemalt:
Pistikprogrammi seadistamine ja kasutamine on intuitiivne, nii et installige ja kasutage seda mõnuga!
Paljud saidid seadistavad tagasiside vorme, et kasutajad saaksid saidile lahkumata jätta administraatorile sõnumi. Kõige populaarsem, kvaliteetsem ja mugavam seadistada ja kasutada on pistikprogramm Kontaktvorm 7- selle abiga saate luua mis tahes kontaktivorme ja palju muud. Kuna pistikprogrammil on suur hulk erinevaid vorme ja välju, saab seda kasutada paljude ülesannete täitmiseks. Näiteks kasutasin seda tööandja ja tööotsija profiili loomiseks värbamissaidil, toote tellimisvormi loomiseks saidil, kus müüakse ainult ühte tootesarja, kasutasin seda pistikprogrammi ehitusplatsi jaoks keeruka ja mahuka arvutusvormi loomiseks , mitmesuguste tagasisidevormide ja muude vormide jaoks. Kuid see ei puuduta seda, vaid seda, kuidas panna kontaktivorm ilmuma hüpikaknasse, et saaksite kontaktivormi helistamiseks nupu teha igal lehel, mitte ainult lehel „Kontaktid”?
See pole tegelikult keeruline, kuid vajate teist FancyBoxi efektiga pistikprogrammi, mulle isiklikult meeldivad need kaks pistikprogrammi: Easy FancyBox või FancyBox WordPressile, sarnaseid pistikprogramme on erinevaid, kuid kumbki neist töötab suurepäraselt ja võimaldab teil ka pilte avada hüpikaken.
Üldiselt on installitud kaks pistikprogrammi: Kontaktvorm 7 ja Lihtne FancyBox, kontaktivorm on loodud, jääb alles mallile kood lisada.
Kood sisestatakse saidi malli .php -failidesse!
Hüpikakna kontaktivormi kood on määratud failifaili koodis:
Taotlege helistamist
Kui sisestate vormi helistamise koodi otse visuaalsesse redigeerijasse teksti redigeerimiseks tekstirežiimis, näeb kood välja selline:
Hüpikakna kontaktivormi kood on määratud visuaalne toimetaja kirjed (tekstirežiimis) saidi administraatori paneelil:
Taotlege helistamist
Minu näites on mul vormi "Tagasi helista" vormi kood - vormil on ainult kaks välja - nimi ja telefoninumber, et saidi administraator kliendile tagasi helistaks.
Vaatleme seda koodi.
See on nupu kood, millega helistatakse vormiga aknale, selle nupu jaoks saate määrata mis tahes stiile ja sisestada selle malli mis tahes kohta:
Taotlege helistamist
See on hüpikakna enda kood, võite selle jätta akna kutsumiseks nupu alla või peita selle jalusse, et sisukood oleks puhtam:
Selles koodis kutsub vormi ennast selline funktsioon:
Kus see on kirjutatud - kuvage kontaktvormi lühikood, lühikood on kontaktivormil selle loomisel näidatud:
Mitmele vormile helistamiseks ühel lehel peate vormi kutsumiseks kasutama erinevat ID -d.
Näide kahe tagasiside vormi helistamiseks hüpikaknas:
Helistamisvorm 1
Helistamisvorm 2V sel juhul mitme vormi helistamiseks pöörake tähelepanu järgmistele koodi osadele:
... ja teise vormi puhul: ... jne.
Tagasiside vormi lühikoodi kuvamise asemel saate kuvada mis tahes sisu, näiteks teksti või piltidega plokke või Feedburneri tellimisvormi, nii kuvatakse feedburneri tellimisvorm ühel saidil
Seda koodi saate kasutada oma tellimisvormi jaoks, muutes ainult voo aadressi http://feedburner.google.com/fb/a/mailverify?uri=inoutdigest/feed omaks.
Oluline punkt! Selleks, et vormil oleks ilus välimus, peate selle jaoks määrama oma kuvamisstiilid. Parim on pakkida oma vorm divisse juba CF7 vormi loomise etapis.
Kuidas panna pärast edukat esitamist tagasisidevormiga (fancybox) aken kinni
Lisage see kood, kui kasutate pistikprogrammiga pistikprogrammi, näiteks Easy Fancybox.
Kui vorm asub just lehel, on seal kõik selge - kohe pärast vormi edukat saatmist on veateated ja teade.
Vaatame, millised huvitavad sündmuste variandid võivad olla pärast CF7 vormi esitamist hüpikaknas, see tähendab hüpikaknas. Kuidas sellist vormi teha, kirjeldasin artiklis Kuidas teha tagasiside vormi WordPressi hüpikaknas.
Lisage kood oma vormi lisaseadete plokki.
Pärast sõnumi edukat saatmist
Kuvame hoiatuse „Täname teid rakenduse eest!” - primitiivne ja kole.
On_sent_ok: "alert (" Täname avalduse eest! ");"
Suunake tänulehele
On_sent_ok: "location =" http: //site.tu/thankyou/ ";"
Lihtsalt hüpikakna sulgemine pole parim valik, kasutaja ei pruugi aru saada, kas kõik läks hästi
On_sent_ok: $ .fancybox.close ();
Pärast sõnumi edukat saatmist kuvame hüpikakna "Täname tellimuse eest"
Kuvame hüpikakna „Täname tellimuse eest”, samas kui aken ise on plokis id = "popup_msg", tuleb välimus ja stiilid kujundada vastavalt teie kujundusele, nii et kõik oleks ilus + teha tänamisakna nupp "Sule".
Lisame selle koodi teie vormi CF7 lisaseadete plokki:
On_sent_ok: "$ .fancybox ((href:" #popup_msg ")));"
Aken ise näeb välja selline:
Selle hüpikakna koodi saab paigutada ükskõik kuhu, isegi jalusse, isegi vormi alla, peamine eelis on see, et seda akent saab kutsuda mis tahes muul kujul ja te ei pea iga vormi jaoks omale tegema.
Nupu "Sule aken" jaoks lisage skriptifaili järgmine kood:
$ (". popup-close-btn"). on ("click", function () ($ .fancybox.close ();));
Kuidas alla laadida pdf -fail pärast vormi täitmist, kasutades kontaktvormi 7 pistikprogrammi
Avage kohe pdf samal lehel
On_sent_ok: "location =" http://site.ua/wp-content/uploads/2016/08/catalog.pdf ";"
Ava pdf uuel lehel
On_sent_ok: "window.open (" http://site.ua/wp-content/uploads/2016/08/catalog.pdf "," _blank ");"
Kasutusmeetod on_sent_ok konksu ei soovitata enam. See funktsioon tühistatakse 2017. aasta lõpuks.
Nüüd, pärast vormi edukat esitamist teisele lehele suunamiseks, peate kasutama sündmust wpcf7mailsent
Näiteks see võimalus, et avada modaalaken id = "sentMessage" abil:
Document.addEventListener ("wpcf7mailsent", function (event) ($ ("# sendMessage"). Modal ();), false);
Kui teil on mitu vormi, saate iga vormi ID jaoks luua oma sündmused.
Document.addEventListener ("wpcf7mailsent", function (event) (var id = event.detail.contactFormId; if (id == 4 || id == 44 || id == 45) ($ .magnificPopup.open ((üksused : (src: "#popup_msg"), tüüp: "inline"), 0);)), false);
id on vormi number
$ .magnificPopup.open - see näide kasutab Magnific hüpikakent
Loome sündmuse kindlale vormile pärast sõnumi edukat saatmist (kasutame tavalist Easy Fancyboxi)
Paljudel on selle hetkega raskusi, nii et otsustasin selle artiklisse lisada.
See skript kuvab id = "popup_msg" akna pärast ühe vormi edukat esitamist (id == 17754 või id == 17758 või id == 17757):
Document.addEventListener ("wpcf7mailsent", function (event) (var id = event.detail.contactFormId; if (id == 17754 || id == 17758 || id == 17757) ($ .fancybox ((href: " #popup_msg "));)), vale);
Lihtne koodi parsimine
id == 17754 || id == 17758 || id == 17757 - akent näidatakse ainult nende vormide puhul (kas / või).
Aken koos teatega eduka esitamise kohta (saate selle lisada koodile või paremale näiteks jaluse vidinale, kui te ei soovi malli muuta või veel 100 valikut):
Kui lisate skripti mitte skriptifaili, vaid jaluse- või js-koodi redaktorisse, mähkige see järgmisesse koodi:
JQuery (dokument). Valmis (funktsioon ($) (// kood ...));
