Yksinkertainen yhteydenottolomake Ajaxilla. Ajax-palautelomake modaaliikkunassa Modaalinen ikkuna, jossa on tilauslomakkeen nimi sähköposti

Omistauduin siihen, kuinka voit luoda ponnahdusikkunan, joka näytetään sivustolla kerran ja tietyn ajan kuluttua. Joten vaihtoehtona voit lisätä lomakkeen tähän ikkunaan. Se voi olla tilauslomake tai yhteydenottolomake, yleensä mikä tahansa. On parempi näyttää Ajax-lomakkeet ponnahdusikkunoissa, jotta tiedot lähetetään lataamatta sivua uudelleen.

Artikkelin rakenne

Jos teet verkkosivua moottorilla, esimerkiksi Joomlalla tai WordPressillä, voit tietysti käyttää lomakkeille erilaisia ​​valmiita ratkaisuja, myös suunnittelijoita. Mutta entä jos suunnittelet vain puhtaalla HTML:llä ja asiakas pyytää "elvyttämään" lomakkeet, jotta ne toimivat. Tässä tämä lomake on hyödyllinen.

UPD. 8.2.2018
Artikkeli on kirjoitettu uudelleen ottaen huomioon, että lomake on julkaistu GitHubissa

Joten aloitetaan. Lataa ensin lomakelähteet GitHub-arkistostani.

Kokosin tämän kokoonpanon Gulp-tehtävienhallinnan avulla. Kirjoitin kuinka työskennellä hänen kanssaan, muista lukea.

Lomakkeen liittäminen sivustoon

Pura arkisto lomakkeella. Kopioi seuraavaksi kaikki dist-kansion sisältö sivustomallisi lomakkeet-kansioon (esimerkiksi ajax-form). Seuraavaksi yhdistämme resurssit - tyylit ja skriptit. CSS- ja js-kansioissa on kaksi versiota - pakattu ja tavallinen. Jos aiot tehdä muutoksia koodiin tulevaisuudessa, on parempi yhdistää pakkaamattomat versiot.

Jos sivustollasi on jo jQuery-kirjasto käytössä, sinun ei tarvitse yhdistää sitä. Kiinnitä huomiota .

Lomakkeen alustaminen

Haluan heti huomauttaa, että kentän validointi järjestetään HTML5:llä.

Lomaketta kutsutaan .simpleSendForm()-metodilla, esimerkiksi:

$("#idForm").simpleSendForm();

#idForm sijaan määritämme lomakkeen tunnisteen. Yleensä lomakkeen alustuskoodi löytyy scripts.js-tiedostosta. Laajennuksen kutsukoodi voidaan leikata sieltä pois ja kirjoittaa juuri ennen . Älä unohda jQueryä.(document).ready() .

Lomake voi hyväksyä joitain vaihtoehtoja.

Vaihtoehdot

• successTitle (merkkijono) — Kiitosviestin otsikko, kun lomake lähetetään. Oletusasetus on "Kiitos, että valitsit meidät!"
• successText (merkkijono) - Kiitosviestin otsikon alla oleva teksti. Oletusasetus on "Otamme sinuun yhteyttä pian".
• errorTitle (merkkijono) — lomakkeen lähetyksen virheviestin otsikko. Oletusasetus on "Viestiä ei lähetetty!".
• errorSubmit (merkkijono) — lomakkeen lähetyksen virheviestin teksti. Oletusasetus on "Virhe lähetettäessä lomaketta!".
• errorNocaptcha (merkkijono) — virheteksti, jos captchaa ei täytetty.
• errorCaptcha (merkkijono) — virheteksti, jos tarkistus epäonnistui.
• mailUrl (merkkijono) — polku käsittelijätiedostoon. Oletus on "../form-submit/submit.php". Sinun tulee muuttaa ja määrittää koko polku, jos “form-submit”-kansiosi ei ole sivuston juuressa.
• autoClose (boolean) - Sulkee ikkunan automaattisesti onnistuneen lomakkeen lähetyksen jälkeen (modaaliikkunan lomakkeet). Lomakeikkuna sulkeutuu ja näyttää kiitosviestin 5 sekunnin kuluttua. Tällä kertaa voidaan ohittaa.
• autoCloseDelay (numero) - kiitosviestin näyttöaika (millisekunteina), jonka jälkeen se sulkeutuu. Oletusarvo on 5000 (5 sekuntia).
• debug (boolean) - oletuksena epätosi. Ota virheenkorjaus käyttöön, jos lomakkeessa on ongelmia. Katso virheilmoitukset konsolista.
• captcha (boolean) - oletuksena epätosi. Ota Recaptcha 2.0 käyttöön tai poista se käytöstä.
• captchaPublicKey (merkkijono) — recaptcha julkinen avain.

Lomake modaaliikkunassa

Lomakkeemme voidaan näyttää myös modaaliikkunassa. Modaali on esillä kirjastossa.

HTML-koodi

Painikkeen koodi

Pyydä soitto

Lomakekoodi

Alusta modaaliikkuna ja lomake. Laitetaan ikkuna sulkeutumaan automaattisesti 3 sekunnin kuluttua. lomakkeen onnistuneen lähettämisen jälkeen. Löydät myös Magnific Popup -kutsukoodin scripts.js-tiedostosta.

Lomakkeen kutsuminen modaaliikkunalla // ======= Aloita Magnific Popup ======= $(".modal-popup").magnificPopup(( type: "inline",fixContentPos: false,fixBgPos : true , overflowY: "auto", closeBtnInside: true, preloader: false, midClick: tosi, poistoViive: 300, mainClass: "mfp-top-up" )); // ===== Aloita modaalinen lomake ==== $("#idForm").simpleSendForm (( successTitle: "Hakemuksesi on hyväksytty!", successText: "Työntekijämme ottaa sinuun yhteyttä mahdollisimman pian." , AutoClose : true, AutoCloseDelay: 3000 )); Kuinka ottaa Recaptcha käyttöön?

Jos haluat ottaa recaptchan käyttöön lomakkeessa, sinun on lisättävä tyhjä lohko, jossa on recaptcha-luokka lomakkeen html-koodiin kohtaan, jossa haluat sen näyttää. Seuraavaksi lomakelaajennuksen kutsumiskoodissa välitämme captcha-vaihtoehdon arvolla true, ja välitämme julkisen recaptcha-avaimesi captchaPublicKey-vaihtoehdolle. Voit saada julkisia ja yksityisiä avaimia.

// ===== Aloita captcha muodossa ==== $("#idForm").simpleSendForm(( successTitle: "Hakemuksesi on hyväksytty!", successText: "Työntekijämme ottaa sinuun yhteyttä mahdollisimman pian ." , autoClose: true, autoCloseDelay: 3000, captcha: true, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));

Avaa seuraavaksi lomakkeen käsittelijätiedosto submit.php form-submit -hakemistosta. Etsimme recaptchaOn-muuttujan (noin 7. riviä) ja asetamme sen arvoon true . Etsi seuraavaksi muuttuja $secret (noin rivi 89) ja vaihda yksityinen avain omaksesi.

Periaatteessa kaikki. Näiden manipulointien jälkeen sinun pitäisi nähdä captcha.

Huomaa, että demosivustolla captcha toimii testitilassa, koska Googlen testiavaimet ilmoitetaan.

Katsotaan nyt lomakkeenkäsittelijätiedostoa (submit.php) ja käydään läpi tärkeimmät koodin osat. Käsittelijä toimii PHP:llä, joten jos haluat testata lomaketta, sinun on käytettävä .

Mahdolliset virheet Viestiä lomakkeesta ei lähetetä, esilataaja vain pyörii ja se on siinä. Mikä on ongelma?

Tarkista, onko käsittelijätiedoston polku määritetty oikein lomakkeen alustuksessa:

mailUrl: — polku käsittelijätiedostoon

Tarkista myös, että recaptcha on otettu käyttöön oikein. Eli jos se on poistettu käytöstä, niin alustuskoodin recaptcha-asetukset ja käsittelijätiedoston $recptchaOn-asetukset tulee asettaa arvoon false tai true, jos recaptcha on käytössä.

Ei näytetty Google Recaptcha muodossa

Tarkista, onko recaptcha (recaptcha-kutsu) ja $recaptchaOn (käsittelijätiedosto) -arvot lähetetty - totta. Tarkista myös, oletko määrittänyt avaimet oikein - julkiset ja yksityiset.

Tein kaiken ohjeiden mukaan, mutta lomake ei toimi, mistä voin etsiä vikaa?

Ensinnäkin suosittelen tutustumaan selainkonsoliin ja tarkistamaan virheet. Tarkista myös, onko jQuery-kirjasto käytössä. Tarkista, että scripts.js-tiedosto on sisällytetty oikein. Jos kaikki on kunnossa, yritä ottaa virheenkorjaus käyttöön debug: true -vaihtoehdolla. Kun olet käynnistänyt, katso konsolista virheitä.

Tämä on lomake. Käytä sitä verkkosivustollasi, toivottavasti siitä on sinulle hyötyä. Mitä muuta sanoa? Puhutaan nyt - kommenteissa. Kysy jos jokin jäi epäselväksi. Lisäksi, jos löydät virheen, ilmoita siitä minulle välittömästi, niin korjaamme sen...

Siinä kaikki. Kiitos huomiostasi. Nähdään seuraavissa postauksissa!

Tervehdys lukijoilleni, olen saanut kokemusta ja kerron teille lomakkeen toimintaperiaatteista palautetta php. Näytän sinulle selkeitä esimerkkejä, jotta ymmärrät kuinka kaikki toimii ja kuinka vuorovaikutus tapahtuu itse syöttölomakkeen (sen syöttökenttien) ja PHP:llä kirjoitetun käsittelijätiedoston välillä. Lisäksi voit ladata lähteet ilmaiseksi yhdessä .

Tietysti on hienoa, jos sinulla on edes vähän ymmärrystä HTML:stä/CSS:stä, koska... Sinun on vedettävä koodi sivullesi analogisesti. Emme koske PHP-kieleen, vaan näytän sinulle kaikki tarvittavat muutokset, jotka sinun on tehtävä itse.

PÄIVITYS: Lukijoiden vastausten perusteella tajusin, että tarvitsen jotain kauniimpaa ja toimivampaa, tapaa minut, tsekkaa ja katso. Valitse kumpi pidät eniten)

PÄIVITYS2: Versio 3.0 Adaptive Landing + ajax-lomake UTM-tunnisteiden lähettämisellä, lue ja katso. Tulet pitämään siitä

Muistin itseni, kun yritin ensimmäistä kertaa itse luoda palautelomakkeen PHP:llä, ja rehellisesti sanottuna se oli työlästä, koska... En ymmärtänyt mitä ja miten tapahtui. Kärsivällisyyttä ja sinnikkyyttä, ystävät, niin onnistut.

PHP palautelomake - rakenne

Tutkimme itse palautelomakkeen analysointia esimerkin avulla aloitussivu (Aloitussivu), aiheesta on muuten erillinen artikkeli. Näet kuinka tämä toimii toiminnassa alla olevista painikkeista, liitän tähän yksisivuisen sivun lähteet ja php-käsittelijän päätiedoston (tämä tiedosto käsittelee ja lähettää sähköpostin)

Kun olet ladannut lähteet ja purkanut arkiston, näet seuraavan tiedostorakenteen:

• kuva - kaikki kuvat, joita käytetään itse aloitussivulle, painikkeille jne.
• js - JavaScript-komentosarjat, jotka tarjoavat esimerkiksi ponnahdusikkunan sivulla ja muita visuaalisia tehosteita
• index.html - yksisivuisen sivumme hakemistotiedosto
• index1.php on käsittelijätiedosto, johon lomakkeen arvot siirretään, sitten vastaanotetuista muuttujista luodaan kirje ja lähetetään määritettyyn sähköpostiosoitteeseen. Index1.php toimii myös väliilmoitussivuna onnistuneesta tiedonsiirrosta automaattisella uudelleenohjauksella takaisin index.html-sivullemme (eli yksisivuiselle sivullemme)

On tärkeää, että isäntäsi, jossa sivuston tiedostot sijaitsevat, tukee PHP-käsittelyä, muuten index1.php-tiedostoa ei suoriteta eikä se toimi. Selventääksesi tätä vivahdetta, ota yhteyttä kampanjaan, jossa isännöintisi on rekisteröity, tai vain testaa sitä - se toimii, se tarkoittaa, että tukea on olemassa. Jos ei, ota käyttöön php-kielen tukivaihtoehto

Katso kaaviosta, kuinka kaikki elementit ovat vuorovaikutuksessa (sivu, lomake, käsittelijä)

Lähdekoodi lomakkeen ja käsittelijän kutsumiseen

Katsotaanpa, miten yksi painikkeista toimii, mikä avaa modaalisen ponnahdusikkunan, joka sisältää palautelomakkeen. Tämä annettu lähde- Se ei ole vain yksi, kaksi lisätty sivulle ja se toimii, sinun on mukautettava se itse suunnittelusi ja tarpeidesi mukaan.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Pyydä takaisinsoitto Pyydä takaisinsoittoa

Pyydä takaisinsoitto Pyydä takaisinsoittoa

Alla on index1.php-käsittelijän täydellinen lähdekoodi. Jos haluat määrittää lähettämisen postilaatikkoosi, muuta " [sähköposti suojattu]"omallesi, loput voidaan periaatteessa jättää ennalleen

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Sinuun otetaan yhteyttä

Sinuun otetaan yhteyttä body ( tausta: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Muuta nykyisen sivun osoite 3 sekunnin kuluttua (3000 millisekuntia)*/

Lomakkeen toimivuuden tarkistaminen

Avaa ikkuna ja syötä tiedot lomakkeemme testitarkastusta varten

Muistutan vielä kerran, että isännöintisi on tuettava käsittelyä php-tiedostoja, muuten käsittelijäämme ei yksinkertaisesti suoriteta eikä määritettyyn sähköpostiosoitteeseen lähetetä kirjettä. Onnistuneesti täytetyn palautelomakkeen tulos

Siinä kaikki minulle, yritin välittää käsikirjoituksen merkityksen ja toiminnan parhaalla mahdollisella tavalla. Jos sinulla on kysyttävää, ota minuun yhteyttä kommenteissa tai VK:ssa (katso yhteystiedot). Toivon sinulle helppoa ja tuottavaa työtä.

Hei kaikki. Meitä pommitettiin kysymyksillä lomakkeen toteuttamisesta, joka ilmestyy modaaliikkunaan painikkeen napsautuksen jälkeen, ja lähettämisen jälkeen näytetään viesti onnistumisesta tai epäonnistumisesta.

Luulen, että Internetissä on paljon samanlaisia ​​asioita, mutta koska ihmiset kysyvät, päätin tehdä sen. Lisäksi tällaisen toiminnon on oltava läsnä melkein jokaisella aloitussivulla, jotta takaisinsoittopainike voidaan ottaa käyttöön. Ja todellakin, nyt on yhä enemmän AB-testaustuloksia, jotka osoittavat, että avoimet lomakkeet toimivat huonommin kuin ne, jotka on piilotettu modaaliikkunaan ja avautuvat napin painalluksen jälkeen.

Jotkut väittävät, että tämä johtuu siitä, että ihmiset "kehittävät immuniteettia" hitaasti ja avoin muoto on aggressiivinen myynti. Väitetään, että nyt on aika, jolloin käyttäjä avoimen lomakkeen nähtyään uskoo yrittävänsä "myydä" hänelle jotain. En ole täysin samaa mieltä tämän teorian kanssa, mutta siinä on totuuden siemen. Tämä voi olla totta joissakin liiketoiminnoissa. No, nyt mennään lomakkeen toteuttamiseen.

Huomautus! En kuvaile jokaista toimintoa yksityiskohtaisesti, mutta tarjoan sinulle valmiin version lähdekoodissa. Jos sinulla on kysyttävää, kirjoita kommentteihin. Selvitämme :)

Tänään emme aloita jQuerysta, vaan painikkeen ja lomakkeen asettelusta. Lisäämme kaikki skriptit sivun loppuun.

Painike, jota napsautettuna avautuu modaaliikkuna:

Lähetä hakemuksesi

Voit asettaa minkä tahansa luokan, mutta kirjoita href-kenttään #modal - tämä on säilön tunnus varjostuksen ja yhteydenottolomakkeen kanssa.

Annan nyt lomakkeen koodin ja lohkon, johon lomake tulee:

Jätä yhteystietosi, niin konsulttimme ottaa sinuun yhteyttä Haluan tämän lomakkeen verkkosivustolleni

Tyylien lisäämisen jälkeen se näytti tältä:

Modaalisen ikkunan luomiseen käytettiin Remodal-kirjastoa. Tämä on joukko css- ja js-tiedostoja, jotka on tarkoitettu vain animoitujen modaaliikkunoiden luomiseen. Voit ladata sen linkistä tai muokkauksillani artikkelin lopussa.

Lisäämme tyylejä head-tunnisteiden väliin:

Ja ennen sulkevaa body-tagia, lisää komentosarjat:

Script.js on skripti lomakkeen käsittelyyn. Sama Ajax, jonka avulla voimme suorittaa koko toimenpiteen lataamatta sivua uudelleen:

$(document).ready(function () ( $("lomake").submit(function () ( // Hae lomakkeen tunnus var formID = $(this).attr("id"); // Lisää hash nimeen ID var formNm = $("#" + formID); $.ajax(( tyyppi: "POST", url: "mail.php", data: formNm.serialize(), menestys: function (data) ( // Tulostaa lähetystuloksen tekstiä $(formNm).html(data); ), error: function (jqXHR, teksti, error) ( // Tulostaa lähetysvirheen tekstin $(formNm).html(error); ) )); palauta väärä; ) ); ));

En anna alkuperäistä css-koodi ja js tiedostoista, jotka vastaavat modaalisesta ikkunasta ja muodosta, koska ne ovat melko suuria. Jos on, katso lähdettä. Mutta PHP-käsittelijä on suurelta osin vakio (jos saan sanoa niin):

Muista vaihtaa osoitteita Sähköposti omillasi.

Tämä on ajax-lomake, jonka saimme. Anteeksi, etten ole yrittänyt selittää yksityiskohtaisesti, kuinka jokainen elementti on tehty. Halusin vain antaa valmiin tuloksen, mutta on turha kuvailla kaikkia animaatioita ja esiintymisiä. Lataa lähde ja ota se käyttöön verkkosivustollasi. Ja siinä kaikki tälle päivälle. Onnea kaikille!

Kaverit, kehotan teitä testaamaan lomaketta oikealla tai virtuaalinen palvelin(isännöinti). Varmista, että palvelimesi tukee PHP:tä ja että sinulla on maksullinen sopimus etkä kokeilujaksoa. Muuten 90 %:ssa tapauksista lomake ei toimi.

Älä odota kirjettä kotonasi postilaatikko, jos avasit hakemistotiedoston selaimessa ja napsautit Lähetä-painiketta. Php on palvelinpuolen kieli!

Jos olet liian laiska keksimään sitä ja tekemään lomakkeen itse, suosittelen kiinnittämään siihen huomiota.

Artikkelin päivitetty versio löytyy