Tere. Selles õpetuses koostame täieliku vormi tagasisidet, ja see kuvatakse modaalses aknas, kui klõpsate lehel nuppu. Tegin selle õppetunni ise, kasutades ainult jQuery raamistikku ja ühte väikest JavaScripti. Õppetund on väga huvitav, nii et ärge jätke seda mööda. Allpool saate vaadata minu loodud vormi demonstratsiooni ja ka alla laadida vajalikud failid töö jaoks:

Samm 1. üldkirjeldus ja kuidas tagasisidevorm töötab:

Esiteks ütlen teile, milliseid faile me vajame ja miks neid vaja on:

• pildid - kaust, kuhu on salvestatud kõik meie vormi pildid;
• index.html - peamine "indeksi" fail, milles asub tagasisidevormi helistamise nupp;
• contact.html on fail, mis sisaldab vormi ennast. Just see fail lisatakse modaalaknasse;
• send.php - kirjade saatmise eest vastutav töötleja fail;
• jquery.js – peamine jQuery raamistik;
• style.css on meie vormi jaoks kaskaadlaadilehtedega fail.

Niisiis, liigume edasi ja järjekorras... Vorm hakkab toimima järgmiselt: Kasutaja läheb lehele, millel on nupp modaalakna kutsumiseks, vajutab seda, siis ilmub vorm, kuhu külastaja sisestab kõik sõnumi andmed ja tekst ning saadab, siis suunatakse see lehele, kus on teade kirja eduka või ebaõnnestunud saatmise kohta. See on kõik, nüüd hakkame oma vormi paika panema...

2. samm. Vormi helistamise nupp.

Nii et meie modaalne aken ilmus koos vormiga, peate seda kuidagi sundima seda tegema. Selleks peame lihtsalt asetama lehele tavalise nupu. Sellise nupu kood on näidatud allpool koos sellele rakendatud stiilidega:

Kirjutage administraatorile sõnum

Samm 3. Vorm ise + selle seaded

Nüüd selgitame välja, kus asub meie tagasiside vorm. Ja see asub failis contact.html, mis asub juba õppetunni lähtekoodis. See vorm See on üsna väike, nii et panen selle koodi alla:

Sõnumi saatmine administratsioonile:

*Nimi: *E-post: Teema: *Sõnum:

Nagu näete, on koodi läbides isegi palja silmaga näha, et vormi paremaks kuvamiseks kasutasin tabelipaigutust. See oli minu jaoks väga kasulik kõigi vormiväljade võrdsustamiseks.

4. samm. Kirjade saatmise eest vastutav töötleja

Siin räägin teile kiiresti kirjade saatmise põhiprotsessorist. Ma ei anna selle koodi siin, sest see on lähtekoodis. Laadige alla ja vaadake selle sisu. Kui sa tead PHP-d kuskil kesktasemel, nagu mina, siis saad selle töötleja kogu koodi lihtsalt ise parseldada. Kui kõik on valmis, siis liigu edasi...

5. samm. jQuery põhiraamistiku kruvimine

Nüüd, nagu igas jQuery õppetükis, peame "sisse kruvima" peamise jQuery raamistiku. Selleks läheme veidi tagasi meie nupu asukohta ja siltide vahele ning sisestame järgmise koodi:

6. samm: vormi kujundamine

Nagu näete, on meie vormi stiilid failis style.css eraldi paigutatud, kuna need stiilid võtavad liiga palju ruumi. Peame lihtsalt linkima alloleva koodi meie registrifailiga:

7. samm. jQuery täiustused

Nüüd selleks täisväärtuslik töö Vormi modaalaknas peame sisestama järgmise jQuery koodi:

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

Järeldus.

Meie huvitav tagasiside vorm on valmis. Tee oli pikk ja raske, nii et kui keegi millestki aru ei saa, siis kuulan teie küsimusi kommentaarides see õppetund. Ja see on minu jaoks kõik, näeme jälle, sõbrad!

Siira lugupidamisega teie jQuery juhend – M.K.

Teie ajaveebis või veebisaidil kontaktivormide loomiseks on palju WordPressi pistikprogramme. kõige tähelepanuväärsem neist, see võimaldab teil manustada kontaktivorm otse salvestusse ja WordPressi lehed(kuigi paljud pistikprogrammid sunnivad teid kasutama kohandatud mall lehele, piirates sellega selle redigeerimist).

Tavaliselt piisab vormi lehele manustamisest, kuid mis saab siis, kui soovite, et vorm ilmuks hüpikaknas, kui kasutaja klõpsab lingil Võtke meiega ühendust? Sellise soovi realiseerimiseks peate kasutama kahte WordPressi pistikprogramm samal ajal: Easy FancyBox

1. Kõigepealt installige pluginad ja Easy FancyBox.

2. Lihtsuse huvides kasutame Kontaktivorm Vorm 7, mille on näite jaoks installimise ajal juba pistikprogramm ise loonud. Võtke lehel Kontaktivormi seaded vormi kood, mille peate kopeerima ja kleepima WordPressi redaktor vormi loomiseks.

3. Loo uus leht WordPressis. Kontaktivormi lisamiseks peate oma lehele kleepima kontaktivormi 7 seadete lehelt nurksulgudes oleva koodi. Kleepige kood kindlasti õigesti, täpselt nii, nagu pistikprogramm seda kuvab.

4. Teie WordPressis on nüüd kontaktivorm. Otsustasime selle avada modaalaknas pärast seda, kui kasutaja lingil klõpsab. Mängu tuleb Easy FancyBoxi pistikprogramm. Selle abiga saate hüpikaknas kuvada mis tahes lehe elemendi. Avage lehe redigeerimine, klõpsake vahekaarti TEKST ja lisage järgmine HTML-kood:

Võta meiega ühendust

5. See on kõik, nüüd on meil link, mis "käivitab" hüpikaknas kontaktivormi. Palju õnne! Tõenäoliselt peate oma meilivormide CSS-i kohandama, et saada laiuse, kõrguse ja meilisõnumite õiget kuvamist. võimalikud vead täitmisel. Sellest peaks alustamiseks piisama.

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 otsustades võib mõnel juhul selle toimimisega probleeme tekkida. 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 otsus 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 - modaale. 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.
• Close Options - 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 ​​vahekaart on Display Options.

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. Et koodi sisestamisel mitte eksida, on kõige lihtsam see sellelt lehelt kopeerida.

Modaalse akna teema redigeerimine

Easy Modal pistikprogrammis lisaks seadetele konkreetne element Saate määrata hüpikakende teemasid (Theme). Põhimõtteliselt tasuta versioon Moodulil 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, ääris, 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. Selle lihtsa WordPressi vormi leidsin 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 modaalse tagasiside akna loomise protsessi WordPressis. 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 järgmistes versioonides olev Easy Modal äkki lakkab töötamast.

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 Kontaktvorm 7, siis seda on piisavalt põhilised võimalused Lihtne modaal. enamgi veel see otsus saab kasutada ka muude modaalakende kuvamiseks WordPressis – kasulikud näpunäited, Lisainformatsioon ja nii edasi. 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.

Tere pärastlõunast sõbrad! Selles õpetuses õpetan teile, kuidas luua WordPressis pistikprogrammide abil kontaktivormi. Töötab WordPressi tagasisidevorm ideaalne lahendus neile, kes soovivad oma publikuga kontakti hoida või avaldusi saada Meil mis tahes teenuste tellimiseks. Õpime tegema modaalaknas hüpikakna vormi. Pärast selle artikli lugemist saate vormi ise oma veebisaitidele manustada. Nii et 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. Tegelikult ei vaja te WordPressis kontaktivormi loomisel üldse 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 posti 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 teie postkasti ujutavad rämpspostid.
• 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 mille ta teile saadab, saate ka märkida, mis järgmises etapis ees 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

Peal 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:

Esiteks on see kõige algajasõbralikum pistikprogramm. Vajalikke plokke lihtsalt lohistades saate mõne klõpsuga luua kontaktivormi.

WPForms Lite on täiesti tasuta.

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 kontakti pistikprogramm WordPressi vormid

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. Tasuta Lite versioonid Saadaval on kaks eelehitatud 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 oma WordPressi saidilt.

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

Vaikimisi ei seadnud 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 (täpsustada 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» (Välimus)-> Vidinad (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 ülevaatamise. Kuid just teie jaoks olen koostanud ühe teise ü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 ja teistele avaldusi kasulik informatsioon. 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:

Tema nimi tema poole pöördumiseks (isiklik aadress)

Meiliaadress (tagasiside, kuhu talle pakkumine saata)

Telefoninumber, millele kohe helistada (kui see juhtub kiiresti, saab temast nagunii teie klient)

Tegelik nupp "Esita".

Need on põhiandmed, teisi saab juba kirjavahetuse käigus või telefoni vestlus. Kas see on loogiline? Ma arvan, et jah. 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 tehnilised andmed").
• 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 – kohustuslik. 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:

Täisnimi

< 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:

Täielik meil

< div class = "col-md-4" > < label class = "sr-only" >Täielik meil< / 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 tundlikke stiile, mis tähendab, et 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.

Seaded postiaadress avalduste vastuvõtmiseks

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, ma ei puuduta neid)

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 nurjus põhjustel PHP vead: "Faili üleslaadimine ebaõnnestus. Tekkis 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 ilma 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 korras. 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 räägin teile, kuidas hüpikakent teha adaptiivne vorm tagasisidet, 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 × Sulge Jäta päring

< 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" >Sulge< / span > < / button > < h4 class = "modal-title black" id = "myModalLabel" >Esitage oma taotlus< / h4 > < / div >

Tere kõigile. Meid pommitasid küsimused selle kohta, kuidas rakendada vormi, mis kuvatakse pärast nupu klõpsamist modaalaknas ja pärast esitamist kuvatakse teade õnnestumise või ebaõnnestumise kohta.

Ma arvan, et Internetis on palju sarnaseid asju, kuid kuna inimesed küsivad, otsustasin seda teha. Pealegi peab selline funktsioon nupu rakendamiseks olemas olema peaaegu igal sihtlehel helista tagasi. Ja tõepoolest, nüüd on üha rohkem AB-testimise tulemusi, mis näitavad, et avatud vormid töötavad halvemini kui need, mis on peidetud modaalaknas ja avanevad pärast nupu klõpsamist.

Mõned väidavad, et see on tingitud asjaolust, et inimestel tekib aeglaselt "immuunsus" ja avatud vorm on agressiivne müük. Väidetavalt on praegu käes aeg, mil kasutaja jääb avatud vormi nähes uskuma, et ta üritab talle midagi “müüa”. Ma ei nõustu selle teooriaga täielikult, kuid selles on tõetera. See võib teatud tüüpi äritegevuse puhul tõsi olla. Noh, asume nüüd vormi rakendamise juurde.

Märge! Ma ei kirjelda iga toimingut üksikasjalikult, vaid pakun teile lähtekoodis valmis versiooni. Kui teil on küsimusi, kirjutage kommentaaridesse. Eks me selgitame välja :)

Täna alustame mitte jQueryga, vaid nupu ja vormi paigutusega. Lisame kõik skriptid lehe lõppu.

Nupp, millel klõpsamisel avaneb modaalaken:

Esitage oma taotlus

Saate määrata mis tahes klassi, kuid lahtrisse href kirjutage #modal - see on konteineri ID koos varjundiga ja kontaktivorm.

Nüüd annan vormi koodi ja ploki, millel vorm asub:

Jätke oma kontaktandmed ja meie konsultant võtab teiega ühendust. Soovin seda vormi oma veebisaidi jaoks

Pärast stiilide lisamist nägi see välja järgmine:

Modaalse akna loomiseks kasutati Remodali teeki. See on css- ja js-failide komplekt, mis on mõeldud ainult animeeritud modaalakende loomiseks. Saate selle alla laadida lingilt või minu muudatustega artikli lõpus.

vahel peasildidühendage stiile:

Ja enne sulgevat kehamärgendit lisage skriptid:

Script.js on vormi töötlemise skript. Sama Ajax, mis võimaldab meil kogu protseduuri läbi viia ilma lehte uuesti laadimata:

$(document).ready(function () ( $("vorm").submit(function () ( // Hangi vormi ID var formID = $(this).attr("id"); // Lisage räsi nime ID-le var formNm = $("#" + formID $.ajax(( tüüp: "POST", url: "mail.php", andmed: formNm.serialize(), õnnestumine: funktsioon (andmed));); // Saatetulemuse väljundtekst $(formNm).html(data error: function (jqXHR, text, error) ( // Saatevea teksti kuvamine $(formNm).html(error); ) ) ));

originaali ma ei anna css kood ja js failidest, mis vastutavad modaalse akna ja vormi eest, kuna need on üsna suured. Kui jah, siis vaadake allikat. Kuid PHP-käsitleja on suures osas standardne (kui ma võin nii öelda):

Ärge unustage muuta oma e-posti aadresse enda omadeks.

See on ajaxi vorm, mille me saime. Vabandame, et ma ei üritanud üksikasjalikult selgitada, kuidas iga element on valmistatud. Tahtsin lihtsalt anda valmis tulemuse, aga kõiki animatsioone ja esinemisi pole mõtet kirjeldada. Laadige allikas alla ja rakendage see oma veebisaidil. Ja see on tänaseks kõik. Edu kõigile!

Poisid, ma soovitan teil testida vormi päris või virtuaalserver(majutus). Veenduge, et teie server toetab php-d tasuline tariif ja mitte katseperiood. Vastasel juhul 90% juhtudest vorm ei tööta.

Ära oota enda juures kirja postkasti, kui just avasite indeksifail brauseris ja klõpsake nuppu "Esita". Php on serveripoolne keel!

Kui oled liiga laisk, et ise välja nuputada ja vormi teha, siis soovitan sellele tähelepanu pöörata.

Uuendatud versioon artikkel asub