Wordpressi hüpikvorm. Blokeeri "Vormi nimi". Hüpikaknaga reageeriva kontakti tagasiside vormi loomine WordPressis

Tervitused, sõbrad. Tänane õpetus aitab teie WordPressi saidil saada kena ja funktsionaalse vormi. tagasisidet. Teeme seda kontaktvormi 7 plugina abil. Omal ajal kulutasin palju aega tavalise kontaktivormi otsimisele ja väärt alternatiiv Ma pole seda pluginat veel leidnud.

Plugina funktsioonid

Tuletan teile veel kord meelde, et töötame pistikprogrammiga, nii et kui vajate tagasisidet ilma pistikprogrammita, siis külastage artiklit selle kohta, seadistamine on veidi keerulisem, kuid valik on universaalsem (sobib igal saidil) ja koormab servereid vähem.

Kontaktivormi 7 kontaktvormi peamine eelis on selle kohandamise lihtsus, peaaegu piiramatu funktsionaalsus ja automaatne disaini kohandamine mis tahes WordPressi malliga. Selle abiga saate saidilt sõnumite saatmiseks luua mitte ainult vormi. Pluginat saab kasutada tellimisnupu loomiseks, tagasi helistada või kompleksne küsimustik koos märkeruutude ja ripploenditega. Samuti on võimalik edastamiseks faile lisada.

Ühesõnaga plugin on megafunktsionaalne.

Kui olete endiselt mures küsimuse pärast "kas teha või mitte täita kontaktivormi?" (Saate hakkama, postitades lihtsalt kontaktandmed aadressile õiged lehed), siis ütlen ühemõtteliselt – seda tasub teha.

Esiteks on sõnumi saatmine otse saidilt mugavam kui avamine postiprogramm ja täitke kõik käsitsi. Aja säästmine ei tee kellelegi halba.

Teiseks kontaktivorm saab kohandada ja see võimaldab teil saada standardvormingus kirju - nendes on lihtsam navigeerida. Näiteks saate määrata standardse päise sõnumile “Tellimus” ja kõik tellimuste lehelt tulevad kirjad saabuvad selle päisega.

Kolmandaks võimaldab kontaktivormi kasutamine peita oma aadressi meili ja seeläbi vabaneda võimalikust rämpspostist, mis paratamatult ilmub, kui meilikast muutub avalikult kättesaadavaks.

Neljandaks on see lihtsalt stiilne ja kaasaegne.

Kontaktvormi 7 pistikprogrammi installimine ja konfigureerimine

Pistikprogramm on üldiselt Wordpressi andmebaas, seega pole vaja selle faile kuskilt otsida, need endale alla laadida ja seejärel hostimisse üles laadida. Kõik on tehtud lihtsamaks - minge WordPressi administraatori kaudu pistikprogrammide jaotisesse, tippige otsinguväljale "Kontaktvorm 7" ja installige see. Kui te pole kunagi pistikprogramme installinud, siis üksikasjalikud juhised kuidas pistikprogrammi installida.

Kontaktvormi 7 pistikprogrammi seadistamine

Pistikprogrammi seadistamine koosneb kahest etapist.

Esimene on konkreetse vormi loomine. Erinevaid vorme võib olla palju, igaüks neist võib sisaldada oma väljade komplekti. Ühesõnaga saate iga ülesande ja saidi iga lehe jaoks eraldi luua tagasisidevormi, Wordpress lubab seda - nende loend salvestatakse pistikprogrammide andmebaasi.

Teine etapp on vormi sisestamine saidi lehtedele. Igal pistikprogrammi sees loodud vormil on oma ainulaadne lühikood. Selle lehele sisestamiseks peate selle lihtsalt sisestama.

Niisiis, lähme.

Alustuseks leiame administraatori paneeli vasakpoolses menüüs vahekaardi Kontaktvorm 7. Selle alla ilmub menüü kahe elemendiga - "Vormid" ja "Lisa uus".

Meil pole veel valmis vorme, seega läheme jaotisse „Lisa uus”. Seal avaneb leht, mis palub teil valida keele ja seal kuvatakse ka vaikekeel. Klõpsake lihtsalt sinist nuppu "Lisa uus".

Vormi seaded on jagatud eraldi plokkideks. Ma kaalun neid järjekorras.

Blokeeri "Vormi nimi"

Esimene plokk vastutab teie vormi nime eest - asetage kursor pealdisele "Pealkirjata" ja sisestage vajalik nimi. Seda nime kuvatakse teile ainult pistikprogrammi kontaktvormide loendis, nii et tehke see teile selgeks, et mitte tulevikus paljudest erinevatest segadusse sattuda.

Blokeeri "Vormi mall"

Esialgu sisaldab see plokk standardset väljakonfiguratsiooni. See sisaldab kirja saatja nime, tema meiliaadress, meili teema, meili sisu ja saatmisnupp.

Kohustuslikud väljad on tähistatud tärnidega. Kui see väli tühjaks jätta, siis sõnumit ei saadeta.

Väljade paigutust saab kohandada kasutades tavaline html märgistused.

Mis puutub väljade endi seadistamisse, siis saate eemaldada mittevajalikud ja lisada need, mida vajate. Kui te ei soovi, et kirja teema käsitsi sisestataks, kustutage lihtsalt vastav plokk.

Väljade lisamine on samuti väga lihtne. KOOS parem pool Seal on nupp sildi loomiseks. Sellel klõpsates näete kõigi võimalike väljade loendit, mida see pistikprogramm toetab.

Valige soovitud üksus ja konfigureerige selle sätted. Pistikprogramm on vene keeles, nii et kõik seaded on intuitiivsed.

Esimene märkeruut näitab, kas väli on kohustuslik või valikuline (lisab tärni).

Pärast välja seadistamist on teil kaks lühikoodi:

  • “Kopeeri see kood ja kleebi vasakpoolsesse vormimalli” – see kood sisestatakse vormikoodi samamoodi nagu kõik teised;
  • "Ja kleepige järgmine kood allolevasse tähemalli" - vajame seda koodi järgmises plokis oleva tähe vormindamiseks.

Nii saate vormile lisada suvalise arvu välju, märkeruutusid, rippmenüüd, elemente failide manustamiseks jne.

Plokk "kiri"

Nüüd on meie ülesanne kohandada meile saadavat kirja. Kiri ei mõjuta mingil moel tagasiside vormi funktsionaalsust, see on mõeldud ainult vormi sisestatud teabe edastamiseks.

Meie ülesanne on lisada kirja kogu teave.

Esimese sammuna tuleb märkida e-posti aadress, millele sõnum saadetakse (see võib olla ükskõik milline).

Teine punkt näitab meili, kust sulle kiri saadetakse. Ma ei muudaks siin midagi, see on vaikimisi loetletud postkasti oma ajaveebi ja lisasid sildi sõnumi saatja nimega.

Järgmisena märgime kirja teema. Tavapäraselt võetakse aine sellelt väljalt, mis vormis täidetakse. Kuid saate selle elemendi vormilt eemaldada ja sisestada väljale konkreetse teema, mis määratakse igas tähes automaatselt. Tegin seda teenuseid ja reklaami käsitlevate lehtede tagasisidevormide jaoks. Sealt tulevad sõnumid alati sama teemaga “Teenuste tellimine” või “Reklaami tellimine” – lihtne ja selge.

Täiendav päiste väli sisaldab märgendit “Reply-To:”, nii et kui vastate oma blogist saadud kirjale, saadate sõnumi blogile ja aadressile, mille kirja saatja vormiväljal märkis. Seda välja pole vaja muuta.

Väli "Kirja mall" vastutab saadud sõnumi sisemise sisu eest. Vaikimisi sisaldab see teavet saatja, teema ja väljale sisestatud sõnumi teksti kohta.

Lõpus on märgitud sait, kust kiri saadeti.

Kui sisestasite vormile teabe täiendavad väljad, pole vaikimisi installitud, siis ärge unustage lisada kirjamalli vastavat silti. See anti teile plokis „Vormimall“, kus genereerisite vastava sildi (väli „Ja kleepige järgmine kood allolevasse meilimalli“).

Ma armastan seda tekstiteave Seda plokki (v.a sildid) saab oma äranägemise järgi muuta. Samuti saate lisada kirjeldusi ja silte vahetada, korraldades need endale sobivas järjekorras.

Plokk "täht 2"

Kui soovite, et teile saadetud sõnumi saaks keegi teine, võite selle ruudu märkida.

See plokk on konfigureeritud sarnaselt eelmisele. Vaikimisi on kõik selles olevad väljad täidetud nii, et kiri läheks ankeedi täitjale (ilmselt, et ta ei unustaks).

Saate seadistada koopia, mis saadetakse näiteks oma juhile või raamatupidajale.

Blokeeri "Teavitused vormi esitamisel"

Selles plokis saate konfigureerida sõnumeid, mida kasutaja näeb pärast sõnumi saatmise nupu klõpsamist. Kui soovite midagi muuta, palun, ma jätsin kõik nii, nagu see on.

Vormi aktiveerimine

Pärast kõigi väljade täitmist naaske ploki "Vormi nimi" algusesse ja klõpsake paremal asuvat nuppu "Salvesta".

Pistikprogramm asetab teie loodud vormi aktiivsete loendisse ja määrab selle spetsiaalne kood midagi sellist:

[ kontakt - vorm - 7 id = "5464" title = "Verification" ] !}

Kui kleepite selle koodi kõikjale oma saidile, saate selle valmis vorm oma potentsiaalsete klientidega suhtlemiseks.

Rämpspostitõrje – Akismet ja Captcha

Rämpspostitajad tekitavad veebisaitide omanikele palju probleeme ja iga uus vorm, mis lubab midagi kirjutada, suurendab rämpspostirobotite arvu.

Kui jätate kontaktvormi plugina selle põhiversiooni, siis mõne aja pärast pommitatakse teid hulga tühjade ja mõttetute kirjadega.

Rämpspostitajatest vabanemiseks on kaks võimalust:

  1. Asetage kohustuslik captcha (seda saab teha lisapluginaga – Really Simple CAPTCHA).
  2. Kasutage WordPressi rämpspostivastast pistikprogrammi – Akismet.

Esimene võimalus on ebamugav, kuna sunnib külastajaid käsitsi lisamärke sisestama. See pole nii raske, kuid mõnele inimesele see ei meeldi.

Akismeti pistikprogrammi kasutamine on mugavam, kuna see analüüsib iseseisvalt sisestatud andmeid (nimesid, meiliaadressid, lingid) ja teeb kogutud andmebaasi põhjal järeldusi kirja rämpsposti või mitterämpsposti kohta.

Lisaks on enamikele WordPressi saitidele installitud akismet, et kaitsta artiklite kommentaarides rämpsposti eest. See tähendab, et selle kasutamisel ei pea te installima täiendavaid pistikprogramme ega looma saidile tarbetut koormust.

Rämpsposti kaitse Akismetiga

1. Installige oma saidile pistikprogramm Akismet ja aktiveerige see – .

2. Lisage kontaktivormi siltidele täiendavaid andmeid:

  • lisage väljale autori nimi akismet:autor
  • põllul koos saatja email kirju akismet:author_email
  • saidi aadressi väljal akismet:author_url

See peaks välja nägema selline:

Pärast salvestamist peaks kontaktivorm blokeerima kõik rämpsposti saatjate saadetud kirjad. Filtri tööd saate kontrollida spetsiaalse testinime "viagra-test-123? – selle sisestamisel peaks ilmuma veateade.

Kinnitamise leebemaks muutmiseks saate kontrollida ainult mõnda välja, näiteks nime ja e-posti aadressi, ning jätta veebisaidi aadressi märkimata. Sel juhul suureneb tõenäosus, et rämpspostid jõuavad läbi, kuid teil on väiksem tõenäosus kaotada vajalikke sõnumeid.

Rämpspostikaitse tõeliselt lihtsa CAPTCHA-ga

Kui leiate, et Akismet teile ei sobi (laseb läbi palju rämpsposti või blokeerib vajalikud kirjad), saate lubada captcha. Selleks installige Really Simple CAPTCHA pistikprogramm.

Avage redigeerimiseks soovitud kontaktivorm

Valige siltide loendist Captcha. Sildi seadetes saab valida sümbolitega pildi suuruse, muidu pole vaja midagi muuta. Seadete akna allosas kuvatakse 2 silti, üks vastutab pildi kuvamise eest, teine ​​kuvab selle pildi andmete sisestamise välja.

Captcha töö alustamiseks peate kopeerima ja kleepima mõlemad sildid vormimalli vasakpoolsesse aknasse ning seejärel salvestama muudatused.

Tagasisidevormi paigutamine hüpikaknasse

Kontaktivorm ei pea alati asuma saidi konkreetses jaotises, kliendil peaks olema sellele juurdepääs ressursi igalt lehelt.

Sellistel juhtudel ei ole täisvormi postitamine alati mugav. Palju lihtsam on asetada nupp silmapaistvasse kohta, mis tõmbab tähelepanu. Sellel nupul klõpsamine peaks juba viima vormi avamiseni.

Seega saab inimene saidilt sõnumeid saata ilma vajalikult lehelt lahkumata.

Seda tehakse teise pistikprogrammiga - Easy FancyBox.

1. Installige pistikprogramm

Kõigepealt installime pistikprogrammi enda, see on sees ühine alus pistikprogrammid, seetõttu sisestage pistikprogrammide otsimiseks lihtsalt selle nimi oma ajaveebi administraatoripaneelile. Pärast pistikprogrammi installimist kuvatakse jaotises "Seaded" vahekaart "meediumifailid".

Sellelt vahekaardilt peate leidma sisutüüpide loendi, mis tuleks kuvada hüpikaknas. Vaikimisi on ainult pildid, peate lisama tekstisisest sisu.

Nüüd, kui pistikprogrammi seadistamine on lõpetatud, jätkame tagasiside nupu seadistamisega.

2. Kleepige kood saidile

Põhimõtteliselt saab kasutada tavalist tekstilinki, kuid pildinupp näeb parem välja.

Sisestage oma saidile, kuhu soovite kontaktivormi nuppu kuvada (päises, jaluses või külgribal), järgmine kood:

< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "kontaktivorm" alt = "kontaktivorm" src = "http://link pildile"> < / a >

< div style = "display:none" class = "fancybox-hidden" >

< div id = "contact_form_pop" >

[ kontakt - vorm - 7 id = "teie vormi ID" title = "teie vormi nimi"]

< / div >

< / div >

Koodis peate märkima tagasiside nupuna kasutatava pildi aadressi ja muutma vormi enda lühikoodi - sisestage oma ID ja pealkiri.

3. Eemaldage külgribalt lühikoodide piirang

See üksus on vajalik, kui soovite installida nupu külgribale. WordPressi külgriba ei luba alati lühikoode.

Selle funktsiooni lubamiseks peate redigeerimiseks avama faili function.php (otse saidilt WordPressi administraator) ja sisestage järgmine kood enne sulgevat sulgu "?>":

add_filter("vidina_tekst", "do_shortcode");

add_filter ("vidina_tekst" , "do_shortcode" ) ;

See annab teile võimaluse käivitada kõik külgribal olevad lühikoodid.

Sain selle kena hüpikvormi:

Mitu erinevat hüpikvormi ühel lehel

Mõnikord on vaja veebisaidile paigutada mitu vormi erinevate seadistuste ja väljadega.

Näiteks üks nupp viib nime ja telefoninumbriga vormile ning seda kasutatakse saidilt tagasihelistamise tellimiseks ning teine ​​peaks avama teise vormi, kus on üksikasjalik tellimistaotlus (koos aadressi, kirjelduse väljaga, faili manustamise võimalus jne). Kontaktvormi 7 pistikprogrammis saate teha lõputult palju vormivalikuid, kuid kuidas neid sobitada erinevad nupudüks leht?

Selleks tuleb kohandada eelmisest lõigust pärit nupu koodi. Esimene nupp kasutab ülaltoodud valikut. Teises muutuvad kaks väärtust:

  1. Link muutub, määrake parameetrile href väärtus #contact_form_pop_2
  2. Muutke ID samale väärtusele #contact_form_pop_2

Tere pärastlõunast sõbrad! Selles õpetuses õpetan teile, kuidas luua pistikprogrammide abil WordPressis kontaktivormi. Töötab WordPressi tagasisidevorm ideaalne lahendus neile, kes soovivad hoida kontakti oma publikuga või saada e-posti teel taotlusi teenuste tellimiseks. Õpime tegema modaalaknas hüpikakna vormi. Pärast selle artikli lugemist saate vormi ise oma veebisaitidele manustada. Niisiis, lähme.

Miks vajate WordPressi kontaktivormi?

Teil võib tekkida küsimus, miks mul on vaja WordPressi saidi jaoks tagasisidevormi? Miks mitte lisada saidile lihtsalt e-posti aadress, et inimesed saaksid mulle lihtsalt kirjutada?

See on kõige levinum küsimus algajatelt, kes pelgavad ilma programmeerimisalaste teadmisteta veebisaidile vormikoodi lisada. Tõde on see, et te ei vaja WordPressis kontaktivormi loomisel koodi. Selles õpetuses koostame samm-sammult kontaktivormi, et seda saaks teha ka kõige täielikum algaja.

Allpool on kolm peamist põhjust, miks vormi kasutamine on parem kui lihtsalt e-posti aadressi lisamine saidile.

  • – kadestusväärse regulaarsusega rämpspostirobotid kasutavad oma parsereid, et korjata e-posti aadresse, kus on mainitud meili domeen ja lisage see oma andmebaasi, et nad saaksid teile seejärel soovimatut kirjavahetust saata. Teisest küljest, kui kasutate WordPressi tagasisidevormi, saate lahti probleemist, et rämpsposti e-kirjad teie postkasti üle koormavad.
  • Teabe täielikkus – e-kirjade saatmisel ei saada inimesed alati kogu vajalikku teavet. Kontaktvormi abil saate otsustada, milliseid välju vajate, et kasutajatel oleks lihtsam teile meilisõnumeid saata (nimi, e-posti aadress, telefoninumber, kommentaar ja muu).
  • Säästke aega – WordPressi kontaktvorm aitab teil aega säästa. Lisaks teabe täielikkusele, mida kasutajalt küsisite ja ta teile saadab, saate ka märkida, mis järgmises etapis ootab, näiteks "Teie taotlus vaadatakse läbi 24 tunni jooksul" või vaadake videot ja palju muud kasulikku.

Allpool on näide kontaktivormist, mille me selles õpetuses loome.

Alustame sellest, härrased.

1. samm: WordPressi parima kontaktivormi pistikprogrammi valimine

Sees see samm Peame otsustama sobiva vormi pistikprogrammi kasuks. Neid on väga palju, nii tasuta kui ka tasulisi. Selles õpetuses räägin teile erinevatest pistikprogrammidest, et teil oleks lai valik. Esimesel juhul kasutatakse WPFormsi pistikprogrammi.

Allpool on toodud põhjused, miks WPForms on parim pistikprogramm tagasiside:

  1. Esiteks on see kõige algajasõbralikum pistikprogramm. Vajalikke plokke lihtsalt lohistades saate mõne klõpsuga luua kontaktivormi.
  2. WPForms Lite on täiesti tasuta.
  3. Kui olete valmis võimsamaks funktsionaalsuseks ja kui see on teile tõesti oluline, saate minna üle Pro versioonile.

Suurepärane, kui need põhjused osutusid piisavaks ja ma teid veensin, siis liigume edasi.

2. samm: installige WordPressi kontaktivormi pistikprogramm

Selle õpetuse jaoks kasutame Lite versiooni, kuna see on tasuta ja hõlpsasti kasutatav. Saate selle installida, logides sisse ajaveebi ja minnes jaotisesse Pluginad - Lisa uus.

Tippige otsinguribale meie pistikprogrammi nimi ja klõpsake nuppu Installi kohe.

Pärast pistikprogrammi installimist aktiveerige see kindlasti. Seda näidatakse siin:

3. samm: looge WordPressis kontaktivorm

Niisiis, pärast pistikprogrammi aktiveerimise edukat lõpetamist on aeg luua meie tagasisidevorm. Selleks klõpsake ajaveebi administraatori paneelil vahekaarti WPForms Menu ja minge Add New.

See avab teile Wpformsi kujundaja, kus lihtne pukseerimine Vajalike plokkidega saad luua WordPressi tagasiside kontaktivormi. IN tasuta versioon Lite'il on saadaval kaks eelseadistatud malli (tühi ja lihtne vorm). Saate neid koos kasutada, et luua teile vajalik ja mugav. Selles näites oleme valinud teie jaoks teise võimaluse, st lihtsa kontaktivormi. Lisame sellele nime, e-posti aadressi ja tekstivälja.

Saate iga välja redigeerimiseks klõpsata. Samuti saate hiirt kasutades vormivälju lohistada ja ümber järjestada.

Kui soovite lisada uue välja, valige lihtsalt vasakpoolsest loendist vajalik välja ja lohistage see tööalale.

Kui kõik on tehtud, klõpsake lihtsalt nuppu Salvesta.

4. samm: seadistage märguanded ja kinnitused

Kui olete WordPressis kontaktivormi edukalt loonud, on väga oluline teavitus- ja kinnitusvormid õigesti konfigureerida.

Kinnitusvorm on see, mida teie kasutajad näevad, kui nad teile vormipäringu esitavad. See võib olla tänusõnum või suunata nad teisele erilehele.

Teavitusvorm on sõnumid, mille saate, kui saate a uus rakendus või meili kiri teie WordPressi saidilt.

Saate kohandada mõlemat välja, minnes WPFormsi foorumi koostaja pistikprogrammi jaotisesse Seaded.

Vaikimisi ei määranud me seda puudutama ja jätsime kinnitusvormi välja sõnumiga "Täname teid taotluse eest" nii nagu see on. Siiski on teil õigus muuta see mõneks muuks tekstiks või suunata kasutaja aadressile eraldi leht.

Parim asi selle pistikprogrammi juures on see, et vaikesätted sobivad suurepäraselt algajatele. Nad ei pea välja mõtlema, mida teha või mida muuta. Kõik on väga intuitiivne ja lihtne. Kui lähete teavitusseadetesse, eeltäidetakse kõik väljad dünaamiliselt.

Märguanded saadetakse vaikimisi seadetes määratud meilile. Kui soovite muuta teadete saatmise adressaati, saate seda ka lihtsalt muuta. Kui soovid märkida mitu meiliaadressi (eraldatuna komadega), siis palun kaardid käes, nagu öeldakse :)

Meili teema väli täidetakse automaatselt teie vormi nimega. Nimeväli võetakse kasutajanimest (teie nimi). Kui vastate kirjale, saadetakse see kirja kontaktvormi täitnud kasutaja nimega.

5. samm: WordPressi kontaktivormi lisamine lehele

Selles etapis, kui olete tagasisidevormi üles ehitanud ja seadistanud, peate selle jaoks looma eraldi lehe "Kontaktid", kuhu saate selle paigutada. Kas loote uue või muudate seda juba olemasolevat lehte, kuhu saate selle lisada.

Vormi lehele manustamiseks kasutame lihtsat lühikoodi. Lihtsalt klõpsake nuppu "Lisa vorm" ja valige oma vormi nimi, et see lehele sisestada.

Suurepärane. Nüüd salvestage leht ja avage muudatuste nägemiseks eelvaade.

Vorm näeb umbes selline välja: lihtne WordPress leht:

Kui soovite lehele lihtsalt vormi lisada, siis palju õnne. Kõik sammud on edukalt lõpule viidud. Kui soovite selle vidina külgribale lisada, jätkake allpool.

6. samm: WordPressi kontaktivormi lisamine külgribale

WPFormsi pistikprogrammiga on kaasas sisseehitatud kontaktivormi vidin, mille saate lisada oma külgribale või mõnele muule saidi alale (nt jalusele).

Selleks peame minema jaotisse "Välimus" -> Vidinad. Seal näete vasakul küljel eelinstallitud vormi plugina vidinat. Me lihtsalt võtame selle ja määrame kuvamisjärjestuse tavalises lohistamises soovitud ala külgribal.

Järgmine samm on määrata vidina nimi ja salvestada. Minge saidile ja vaadake tulemust.

See lõpetab meie WPFormsi tagasisidevormi pistikprogrammi ülevaatuse. Kuid just teie jaoks olen koostanud veel ühe ülevaate tasuta pistikprogramm, millega saame teha hüpikakna tagasisidevormi ja kõik samad funktsioonid, mis eelmises. Selle nimi on Kontaktivorm 7. See on tõesti väga võimas ja selle trump on see, et see on täiesti TASUTA!

Seda saab muuta ka adaptiivseks, st tagasiside vorm kohandub teie seadme ekraani suurusega.

Nii et igaks juhuks teaksite, et nad on olemas.

Kuidas koostada kontakti tagasiside vormi kasutades kontaktivormi 7

Mõistame jätkuvalt teie veebisaidilt avalduste vastuvõtmise vormide loomise probleemi. Meil on ees veel üks WordPressi kontaktivormi pistikprogramm nimega Contact Form 7. Installime selle oma ajaveebi ja aktiveerime, nagu me teame, kuidas seda teha.

See on juba installitud minu veebisaidile, mitte siia blogisse. Protseduur on standardne. Nüüd peame minema ajaveebi administraatori paneelile ja looma uus vormiriietus, mis kogub meile rakendusi ja muud kasulikku teavet. Minge jaotisse "Kontaktvorm 7" -> Lisa uus.

Suurepärane! Nüüd paneme sellele sobiva nime, minu puhul on neid kontaktivorme palju. Valime ühe, näiteks „Veebisaidi reklaamimise tellimisvorm”

Ma ütlen teile lühidalt, mida me siin vajame. Kõigepealt peame otsustama, kui palju vormivälju tahame teha. Ütlen kohe, et 100 500 välja pole vaja luua ja see on mõttetu sel lihtsal põhjusel, et inimesed sulgevad teie saidi ega jäta taotlust. Nad peavad selle sammu lihtsamaks tegema. See tähendab, et kui järele mõelda, siis inimeselt vajame:

  1. Tema nimi tema poole pöördumiseks (isiklik aadress)
  2. Meiliaadress (tagasiside, kuhu talle pakkumine saata)
  3. Telefoninumber, millele kohe helistada (kui see juhtub kiiresti, saab temast nagunii teie klient)
  4. Tegelik nupp "Esita".

Need on põhiandmed, teisi saab juba kirjavahetuse käigus või telefonivestlus. Loogiline? ma arvan küll. Liigume edasi.

Kontaktivormi väljade loomine kontaktivormi 7 pistikprogrammis

Niisiis, oleme väljade arvu üle otsustanud, nüüd peame need väljad looma. Meile on saadaval järgmised vahelehed:

  • Tekst (mis tahes tekstiväli, nt "Nimi", "Küsi küsimus" või mis tahes muu pealkiri, mida selle välja kaudu kogute)
  • E-post (eesmärk on siin kasutajal sisestada )
  • URL (sellele väljale sisestatakse saidi aadress, muud väärtused ei ole vastuvõetavad ja kuvatakse tõrge)
  • Tel (väli koos telefoninumber meie WordPressi tagasisidevormi jaoks on vastuvõetavad arvväärtusi, annab tekst veateate)
  • Arv (Väärtuste arvuline vahemik, mida saab rakendada näiteks hinnale: "kui palju olete nõus saidi eest maksma? 23 000 kuni 120 000 rubla")
  • Kuupäev (Märkige kuupäev, mis kuupäevast millise kuupäevani. Näide: "Auto broneerimine 13.04.2016-25.04.2016")
  • Tekstiala (tekstiala, siin saate sisestada teksti kommentaarina)
  • Rippmenüü. Minu blogis rakendatud, näete seda. Iga artikli lõpus soovitan kasutajatel luua kas lihtne veebisait või veebipood. Just seda funktsiooni pakub see valik.
  • Märkeruudud (mitme valikuga, näiteks: veebisait + logo loomine + reklaam + kontekstuaalne reklaam)
  • Raadionupud (Ühe kauba valimine, näiteks: “Tellid või kontekstuaalne reklaam või sihitud")
  • Nõustumine (nõustuge lepingu tingimustega, st kasutajateabega, nagu avalik pakkumine)
  • Viktoriin (Viktoriin on lühikeste küsimuste sari, mille saab sisestada ka kontaktivormi).
  • reCaptcha (kinnitus, et te ei ole robot ega saada rämpsposti.) Hea kaitse rämpspostist. Märkus: see valik töötab, kui olete ühendanud Really Simple Captcha plugina.
  • Fail (Kui soovite lubada kasutajatel endale faili üles laadida, näiteks: "Manustage veebisaidi arendamise lähtetingimused").
  • Esita (saata andmed meili teel)

Niisiis, oleme väljad otsustanud, teate ka nende tähendust. Alustame oma kontaktivormi loomist WordPressis.

Allolevas näites kasutasin kahte välja: nimi, e-post. Seetõttu vajate neid vahekaarte:

Klõpsates vahekaardil tekst (Tekst), jõuame dialoogiboksi:

Siin peame klõpsama märkeruutu Välja tüüp – nõutav. Seda tehakse nii, et kui kasutaja sellesse nime ei sisesta, ei saa ta teile avaldust saata, mis näitab, et kõik väljad pole õigesti täidetud.

Seejärel näete selle välja ja selle kõrval sisestamiseks lühikoodi sinine nupp"Insert tag." See lisab ühe uue kontaktivormi välja.

Et te segadusse ei jääks, tõstsin selle stiiliga esile. Kood allpool:

< div class = "col-md-4" > < label class = "sr-only" >Täisnimi< / label >[ tekst* tekst - 658 klass : vorm - kontrollkohahoidja "Teie nimi" ] !}< / div >

Ja siin on ekraan:

Sarnase toimingu teostame väljale „E-post”. Klõpsame vastaval vahekaardil ja siseneme sellesse dialoogiboksi.

See ei erine absoluutselt eelmisest, me lihtsalt kordame oma tegevusi. Minu meiliväljal on ka stiil. Annan alloleva koodi:

< div class = "col-md-4" > < label class = "sr-only" >Täielik e-kiri< / label >[ email* meil - 447 klass : vorm - kontrolli kohahoidja "Teie e-post" ] !}< / div >

Ja siin on ekraan:

Ja lõpuks nupp "Esita". Ta on kõik minu stiilis.

< div class = "col-md-4" >[ esita klass : btn - korter klass : veerg - xs - 12 "Tellimus" ]< / div >

< / div >

Oluline märkus: Head sõbrad, selles näites kasutan WordPressis kontaktivormi loomiseks reageerivaid stiile, st see võib olla mis tahes ekraanisuuruses.

Näete paremal olevat nuppu ülemine nurk. Kindlasti ei jää te sellest ilma. 🙂

Oleme osa tööst ära teinud, nüüd liigume järgmisse etappi.

Rakenduste vastuvõtmiseks e-posti aadressi seadistamine

Selles etapis peame tegema mõned seadistused, et kirjad saadetaks meile meie postkasti. Kuidas seda saavutada, räägin teile allpool.

Peame klõpsama suur vahekaart"Kiri". See on vormimalli järel teine.

Esimene asi, mida näete, on teie lisatud sildid, peame need sisestama kirja sisusse, need asendavad andmed, mille kasutaja vormilt sisestab. Ma arvan, et selgitasin seda selgelt.

Nüüd põldude kohta:

  • Adressaat (Kuhu avaldus saadetakse, minu puhul on see minu meiliaadress, saate määrata mitu aadressi, kuhu avaldusi saata)
  • From (väli From, st väärtus asendatakse sellega, et rakendus pärineb minu stuudio veebisaidilt)
  • Teema (Selle määramiseks, milliselt vormilt taotlus pärineb, meie puhul on see saidi reklaamivormi taotlus).
  • Täiendavad päised (täiendavad päised, me ei puuduta neid, neid on vaja vormi korrektseks esitamiseks)
  • Sõnumi sisu (Sõnumi sisu, siin märgite, kellelt kiri tuli ja mis aadressilt, näiteks: "Saatja: Ivan" "Postiaadress: vasya@mail. ru »)
  • Failimanused (faili manused, ärge puudutage)

Nüüd peame konfigureerima teated WordPressi kontaktivormilt e-kirja eduka või ebaõnnestunud saatmise kohta.

Need on sõnumid, mida kuvatakse kasutajale vastusena tema tegevusele vormiga. Vaikimisi lähevad nad aadressile inglise keel. Olen tõlkinud teile kõige vajalikumad asjad vene keelde. Neid saab olema rohkem kui küll ja kui mitte, siis aitab teid Google'i tõlkija. Nii et alustame.

  • Kui sõnumi saatmine õnnestus: „Teie sõnum saadeti edukalt. Aitäh."
  • Kui sõnum saadetakse vormilt valesti: “Sõnumi saatmisel ilmnes viga. Proovige hiljem uuesti või võtke ühendust saidi administraatoriga."
  • Täitmisviga: „Täitmisvead. Kontrollige kõiki välju ja esitage uuesti."
  • Saadetud andmed tuvastatakse rämpspostina: „Viga sõnumi saatmisel. Proovige hiljem uuesti või võtke ühendust saidi administraatoriga."
  • Mõne tingimustega tuleb nõustuda: "Jätkamiseks nõustuge tingimustega."
  • Mõned väljad tuleb täita: "Palun täitke kohustuslik väli."
  • Väljal olevate märkide pikkus on ületatud: "Määratud on liiga palju andmeid."
  • Väljal on ebapiisav tähemärkide pikkus: „Määratud liiga vähe andmeid.”
  • Sobimatu kuupäevavorming: "Kuupäeva vorming on vale."
  • Varajane kuupäev miinimumlimiidiga: "Määratud kuupäev on liiga varajane."
  • Hilinenud kuupäev maksimumlimiidiga: "Määratud kuupäev on liiga hiline."
  • Faili allalaadimine ebaõnnestus: "Faili ei saanud alla laadida."
  • Lubamatu failitüüp: "See failitüüp pole lubatud."
  • Laadimine ka suur fail: "See fail on liiga suur."
  • Faili üleslaadimine ebaõnnestus põhjusel PHP vead: "Faili üleslaadimine ebaõnnestus. Ilmnes viga."
  • Saatja sisestatud numbrivorming on vale: "Numbrivorming on vale."
  • Arv on väiksem kui miinimumpiir: "See arv on liiga väike."
  • Arv, mis on suurem kui maksimumpiir: "See arv on liiga suur."
  • Saatja ei sisestanud õiget vastust küsimusele: "Sisestasite vale vastuse."
  • Saatja sisestatud e-posti aadress on vale: "Vigane e-kiri."
  • Saatja sisestatud URL on vale: "Vigane URL."
  • Saatja sisestatud telefoninumber on vale: "Vale telefoninumber."

Väga hea. Oleme vormi seadistamisega valmis, nüüd peame selle saidile sisestama. Juba sel eesmärgil tuntud tehnoloogia, minge olemasolevale lehele või looge uus. Oma näites näitan teile näidet olemasolev vorm WordPressi saidi lehel.

Kuna meie vorm kogub veebisaidi reklaamimise taotlusi, läheme sarnasele lehele.

Kontaktvormi sisestamiseks peame kopeerima pistikprogrammi poolt sellele määratud lühikoodi. See on saadaval teie vormi nime all.

Pärast külastamist kopeerime ja kleepime oma lehele tekstiredaktor(mitte visuaalne). Näidatud alloleval ekraanipildil:

Salvestame oma lehe ja vaatame, milleni me brauseris jõuame:

Super! Nüüd proovime saata vormi midagi täitmata. Ja seda me näeme.

Ilmnes vormi esitamise viga, kuna kasutaja ei esitanud väljadele nõutavaid andmeid. Nüüd sisestame õiged andmed ja vaatame, mida me sel juhul saame.

Klõpsake nuppu Esita ja meie vorm ütleb järgmist:

Nüüd vaatame, kuidas meie rakendus välja näeb. Nad tulevad minu meilile. Kontrollime kohaletoimetamist:

Lähme sisse, et veenduda kodeeringu ja kõigi andmete õigsuses.

Kõik on lihtsalt hästi. Vorm töötab hästi ja esitab andmed. Nüüd saame koguda rakendusi, mis jõuavad teieni, kui alustate, kui räägime piirkondlikust reklaamimisest.

Niisiis, me rääkisime teile, kuidas veebisaidi lehel WordPressis kontaktivormi luua. Nüüd ma ütlen teile, kuidas seda teha hüpikakna adaptiivne tagasiside vorm kasutades meie kontaktvormi 7 pistikprogrammi.

Hüpikaknaga reageeriva kontakti tagasiside vormi loomine WordPressis

Selleks, et meie vorm muutuks adaptiivseks, s.t “vedelikuks”, peame ühendama kontaktivormiga 7 veel ühe pistikprogrammi või pigem selle lisa – seda nimetatakse Bootstrap Contact Form 7-ks. Installime ja lihtsalt aktiveerime ning kõik – see töötab. Te ei pea sellega seadistusi tegema. Seadke see ja unustage see.

Järgmises etapis räägin teile, milliseid muudatusi peame tegema, et muuta vorm hüpikaknaks ja tundlikuks. Tegin sarnase teostuse avaleht teie stuudio veebisait. Selleks minge index.php mallile, mis asub jaotises „Välimus – toimetaja”. Töötame ainult koodiga käsitsi.

Meie hüpikaken ilmub sellises modaalses dialoogis:

Selle tulemuse saavutamiseks vajate järgmist koodi, esitan selle täielikult väljavõttena:

Telli

< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" >Telli< / 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" >Sule< / span > < / button >

< h4 class = "modal-title black" id = "myModalLabel" >Jäta taotlus< / h4 >

< / div >

Väga sageli tuleb luua tagasisidevorm ja see peita. See vorm peaks ilmuma, kui klõpsate valguskasti hüpikaknas saidil oleval nupul või pealdisel. Selles artiklis kirjeldame: Kuidas luua WordPressi hüpikaknas tagasisidevormi. Feedburneri tellimisvormi väljund. Kuidas helistada mitmele vormile ühel lehel. Kuidas panna tagasisidevormiga (fancybox) aken pärast saatmist sulguma ja vaatame kõik üle võimalikud vead ja nende otsused.

CMS WP veebisaidile tagasisidevormi või muude vormide loomiseks soovitab disainistuudio "Engine" kontaktvormi 7 pluginat ning valguskasti efektiga hüpikakna jaoks kasutame Easy FancyBoxi.

Kõige populaarsem, kvaliteetseim ja hõlpsamini seadistatav ning kasutatav pistikprogramm on Kontaktivorm 7 – selle abil saate luua mis tahes kontaktivorme ja palju muud. Kuna pistikprogrammil on suur hulk erinevaid vorme ja väljad, saab seda kasutada paljude ülesannete jaoks.

IN antud juhul mitme vormi kutsumiseks pöörake tähelepanu järgmistele koodiosadele:

6. Feedburneri tellimisvormi väljund

TELLI

TELLI:

Saate seda koodi kasutada oma tellimisvormi jaoks, muutes ainult voo aadressi https://feedburner.google.com/fb/a/mailverify?uri=Cms-info enda omaks.

Lisage järgmine kood, kui kasutate fancyboxiga pistikprogrammi, näiteks Easy Fancybox:
on_sent_ok: $.fancybox.close();
ploki juurde Lisaseaded teie vorm.

Kui see annab veateate: soovitud sisu ei saa laadida. Proovige hiljem uuesti

See viga võib olla sisse lülitatud uusimad versioonid WordPressi mootor, on soovitatav lingil klassi muuta:
Tagasiside
muuda vastu:
Tagasiside

Muutsime fancyboxi väljamõeldud box-inline'iks.

Esile tulnud probleemid ja lahendused:

1. Kui lingile vajutasin, siis vormiga ei juhtunud midagi – sisse aadressiriba ilmus http://site/#contact_form_pop.
Probleem lahendati pistikprogrammi väljavahetamisega Lihtne FancyBox WordPressi FancyBoxis

2. Kui teil on ühendatud galerii (näiteks NextGEN Gallery) või teema, millele on juba installitud valguskasti efekt, juhtub järgmine: fotod avatakse sisseehitatud valguskastiga ja ka EasyFancy Boxi valguskastiga, mis siis peate need kaks korda sulgema.
Selle vältimiseks tühjendage EasyFancy Boxi seadetes märge Pildid ja hüpikakna vormikoodi ülaosas asendage klass fancybox klassiga fancybox-inline . Teie kood näeb välja selline:.

Tagasiside

See on kõik, kui soovite meid "tänata", on teil see võimalus: paremal on portaali arendamiseks annetamise võimalused. Või jagage artiklit oma sotsiaalmeedias, kasutades allolevaid teenuseid.

Hiljuti paluti mul ühe saidi jaoks luua modaalaknas WordPressi tagasisidevorm. See tähendab, et lingile “kirjuta meile” klõpsates peaks kasutaja vastavale lehele mineku asemel avama uue hüpikakna, kus asub kirja saatmise funktsioon. See on interaktiivsem lahendus, kuigi kõigile see ei meeldi. Mina isiklikult eelistan klassikalist teostust kontaktlehega, kuid saitide vormid on erinevad - seega on kasulik kaaluda selle probleemi lahendust. Oma töös kasutasin WordPressis modaalakna loomiseks 2 pluginat: tuntud Contact Form 7 ja Easy Modal moodulit.

Värskendus 18.05.2017: Hoidla viimaste arvustuste põhjal võib mõnel juhul esineda probleeme selle toimimisega. Kui see puudutab ka teid, proovige arendajate uut lahendust nimega Popup Maker. Võib kaaluda teist alternatiivi.

Ma ei käsitle kontaktivormi 7 installimist ja konfigureerimist, kogu teave selle kohta on siin. Blogis oli ka artikkel sellest, millest võiks kasu olla.

Liigume otse mooduli Easy Modal juurde. Sa leiad ta. Arendajad väidavad, et see parim lahendus modaalakende loomine saidil koos erinevate huvitavate sisu esitamise võimalustega.

Üle 10 tuhande allalaadimise, reiting 4,6. 3.4 kehtivad versioonid on 4.0.8, kuigi ma käivitasin selle edukalt WP 4.3.1-s. Vaatamata sellele, et plugin on nüüdseks muudetud uueks Popup Maker lahenduseks, leiab veebilehelt wordpress.org ja admin paneeli seest pluginaid otsides siiski tavapärase Easy Modal versiooni 2.0.17. Tema näitel räägin teile modaalse tagasiside akna loomisest WordPressis.

Pärast installimist ilmub sama nimega jaotis, kus on mitu üksust. Meil on vaja neist kõige esimest - Modaalid. Klõpsake seal nuppu Lisa uus.

See toiming loob teie WordPressi saidi jaoks uue modaalse akna. Elemendi sätetel on 4 vahekaarti:

  • Üldine — üldised parameetrid.
  • Kuvavalikud – kuvavalikud.
  • Sulgemisvalikud - akna sulgemise seaded (klõpsu või Esc-nupu abil).
  • Näited – kasutatava koodi näited.

Üldsätted sisaldavad akna nime (saidil ei kuvata), selle pealkirja, sisu ja allalaadimise tüüpi. Sisuplokis, lülitudes HTML-režiimile, lisage modaalaknas oma tagasisidevormi lühikood.

Tüüp Laadige Tüübil on 2 valikut:

  • Laadi kogu saidile (kogu saidi jaoks).
  • Lehe/postituse kohta (teatud postituste ja lehtede jaoks).

Väga huvitav variant. Kui vajate hüpikakent, mida kuvatakse saidi kõigil lehtedel (link asub näiteks külgribal), valige esimene valik. Teisel juhul ilmub redigeerimisel saidi lehtedele/postitustele vastav seadete plokk:

Saate aktiveerida ja valida konkreetse lehe jaoks oma hüpikakna. Kui te seda ruutu ei märgi, siis elementi saidile ei laadita.

Mooduli parameetrite teine ​​sakk on Kuvavalikud.

Siin märgite:

  • akna suurus - automaatne, keskmine, adaptiivne, väike, suur jne;
  • taust - saate kasutada vormi tausta või kuvada seda ilma selleta;
  • hüpikakende animatsioon;
  • asend (asukoht) - üleval keskel, all paremal jne; fikseeritud või mitte;
  • taane ekraani ülaosas.

Näiteid modaalakna väljundi kuvamiseks WordPressis Easy Modali pistikprogrammi abil leiate viimaselt vahekaardilt.

Peate selle koodi sisestama külgribal või tekstiredaktoris oleva vidina kaudu. See ei erine ühestki teisest HTML-koodist, ainus asi on see, et siin on märgitud konkreetse modaalakna klass (eModal-1). Teise loodud elemendi jaoks on klass eModal-2 jne. Koodi sisestamisel vea vältimiseks on lihtsaim viis sellelt lehelt kopeerida.

Modaalse akna teema redigeerimine

Easy Modal pistikprogrammis lisaks seadetele konkreetne element Saate määrata hüpikakende teemasid (Theme). Mooduli tasuta põhiversioonil on ainult üks mall, kuid see on enam kui piisav.

IN seda tööriista 6 järjehoidjat:

  • Üldine - märkige teema nimi;
  • Overlay — taust (siin saab valida vormi tausta värvi ja läbipaistvuse);
  • Konteiner erinevad seaded modaalaken ise (polster, raam, vari);
  • Pealkiri — hüpikakna pealkirja parameetrid (font, vari);
  • Sisu — ploki tekstide font ja värv;
  • Sulge - vormi sulgev element (tekst ja kujundus).

Nagu näete, saab välimust kohandada vastavalt teie vajadustele. Sain selle lihtsa WordPressi vorm modaalaknas:

Pärast kõigi sätete määramist ärge unustage neid salvestada (klõpsake nuppu Salvesta).

Video kontaktivormi 7 lisamisest Easy Modali hüpikaknas

Muide, leidsin Easy Modali pistikprogrammiga töötamise video, mis demonstreerib WordPressis modaalse tagasiside akna loomise protsessi. Seal on mooduli liides veidi vananenud (mõned seaded näevad välja erinevad), kuid üldise olemuse saate kätte. Ehk on kellelgi lihtsam aru saada see küsimus kasutades videot.

Kokku umbes WordPressi modaalakende kohta

Nagu eespool mainitud, on nüüd pistikprogramm Easy Modal (otsustades ametlik leht) teisendati Popup Makeriks. Mul õnnestus leida hoidlast samanimeline moodul, kuid ma ei testinud seda. Räägin teile sellest, et teaksite, mida otsida, kui WordPressi Easy Modal järgmistes versioonides äkki töötamast lakkab.

Mõlemad lahendused on tasuta, kuigi neil on tasulised lisandmoodulid. Need võimaldavad teil kohandada sihtimist, lisada rohkem kujundusteemasid, sisaldada analüüsi ja mõningaid muid funktsioone. Kui vajate täiustatud modaalakna mehhanismi, saate neid laiendusi lähemalt uurida.

Mis puutub ülesandesse avada hüpikaknas tagasisidevorm Kontaktivorm 7, siis seda on piisavalt põhilised võimalused Lihtne modaal. Pealegi see otsus saab kasutada ka muude WordPressi modaalakende kuvamiseks – kasulikud näpunäited, lisateavet jne. Arvestades toimetaja olemasolu HTML-i lisad koodi, saate kuvada videoid, vorme jms hüpikaknas. Üldiselt kasulik plugin. Kui teil on selle kohta küsimusi, kirjutage kommentaaridesse.

(Viimane värskendus: 08.07.2016)

Tere kõigile! See olen jälle mina, kasuliku postitusega - WordPressi hüpikaken- algajatele ja mitte ainult WordPressi kasutajatele. Kui olete huvitatud hüpikakende pistikprogramm WordPressi aknad , seda nimetatakse ka modaalakna pluginaks, siis olete, sõbrad, jõudnud täpselt õigesse kohta.

Allpool esitatud pistikprogrammi saate kasutada: Kontaktvorm 7 modaalaknas; mis tahes kontakti (tagasiside) vorm modaalses (hüpik-) aknas; video modaalaknas; pildid hüpikaknas; majutus kasulikku teavet linkidega; posti teel tellimisvorm uute artiklite jaoks modaalaknas ja nii edasi, ja nii edasi, kõike ei jõua loetleda. Pistikprogramm on väga lihtne, ilma keerukate seadeteta ega tekita saidile peaaegu mingit lisakoormust.

Lihtne modaalne pistikprogramm – WordPressi hüpikaken/modaalne aken


WordPressi modaalakna pistikprogramm – Easy Modal

Saate selle pistikprogrammi installida standardsel viisil, läbi administraatori paneeli - Pluginad - Lisa uus ja väljale Otsi pluginaid sisesta nimi Easy Modal, vajuta Enter. See peaks olema nimekirjas esimene. Installige ja aktiveerige see nagu tavaliselt. Ja siis saate edasi liikuda uue modaalakna loomise juurde.

Selleks klõpsake kuvataval uuel jaotisel Easy Modal ja valige Modals:

Easy Modal – uue modaalakna loomine

Pärast seda klõpsake lehe ülaosas nuppu Lisa uus:


Lisa uus aken

Ja siin on kõik lihtne:


Video hüpikakna loomine

IN üldseaded(vahekaart Üldine) andke uue akna nimi (seda ei kuvata, see on teie jaoks, kui loote näiteks mitu modaalset akent); koormuse tüüp Load Sitewide (kogu saidi jaoks); akna pealkiri ja lõpuks kleepige vajalik kood redaktorisse (tekstirežiim). Oma näites olen sisestanud YouTube'i videokoodi.


Modaalse akna seadistamine

Parameetrites saate valida akna suuruse; kas kasutada tausta või mitte; animatsiooni tüüp modaal-/hüpikakna jaoks; akna asukohta ja saate ka akna parandada (märkige ruut ja märkige kaugus ekraani ülaosast).

Vahekaardilt Näited leiate koodinäiteid hüpikakna kuvamiseks WordPressis:

Kood modaalakna kuvamiseks WordPressis

Siin saate valida lihtsa tekstilingi, nupu või ikooni. Pange tähele, et igale vastloodud aknale on määratud eModal - klass. Esimeses loodud aknas on klass eModal - 1, teise eModal - 2 ja nii edasi. Peate ainult asendama numbri pärast - allkirja ise. Selle koodi saab kleepida oma artiklisse või kuhugi sinna. Loomulikult saate koodi kirjutada mis tahes teksti. Jah, ma peaaegu unustasin, et pärast lehe paremas servas modaalakna loomist ärge unustage klõpsata nuppu Avalda.

Sisestasin nupuna küljeribale videoga modaalakna koodi:

Blogi külgriba nupp

Külastaja klõpsab sellel ja avaneb videoga aken:


Modaalne aken koos videoga

Loodan, sõbrad ja seltsimehed, üldpõhimõte Saate aru, kuidas Easy Modal pistikprogrammiga töötada. Lisan lihtsalt, et saate seejärel või kohe kohandada modaalakna välimust, klõpsates üksusel Teema. Kahjuks on pistikprogrammi tasuta versioonis disaini jaoks ainult üks teema, kuid saate selle kujundada nii, nagu soovite, seadeid on piisavalt. Seadistamisel välimus modaalaknast näete kohe paremal kujunduse eelvaadet:


Teema redigeerimine – modaalne/hüpikakna kujundus

Pärast kõigi akna välimuse sätete määramist klõpsake paremal asuvat nuppu Salvesta. Ja lõpuks, daamid ja härrad, näitan teile näidet kontaktandmete väljastamise kohta Kontaktvormid Vorm 7 modaalaknas.

Looge uus modaalne aken, nagu ülal näidatud, ja kleepige lihtsalt tekstiredaktorisse kontaktivormi 7 lühikood (kui see pistikprogramm on installitud, kui mitte):


Looge hüpikaknas kontaktivorm 7
Nupp, mille abil saate pärast sõnumit autorile kirjutada

Kui lugeja soovib teiega ühendust võtta, siis vajutab ta nuppu ja kontaktivorm avaneb modaalaknas:

Vorm autoriga ühenduse võtmiseks modaalaknas

Siin see on, midagi sellist. Samuti kuvatakse lehel (üksus Modaalid) kõik teie loodud hüpikaknad, kus, muide, on märgitud iga modaalakna klassid:


Loodud modaalsed aknad WordPressis