Puhelinpalautelomake. Luomme palautelomakkeen PHP:llä. Seitsemän vinkkiä muistaa

Jokaisella verkkosivustolla on oltava palautelomake, joten ennemmin tai myöhemmin jokainen meistä ajattelee sellaisen kehittämistä. Internetissä on melko paljon vaihtoehtoja, jotkut käyttävät suosittuja laajennuksia, jotkut omaa henkilökohtaista kehitystä, mutta useimmat etsivät valmiita ratkaisuja. Joka tapauksessa palautelomakkeemme sivustolle tulee olemaan toimiva ja toimiva, ja puhutaan tästä kaikesta järjestyksessä.

Joten aloitetaan, kuten aina, tavallisella mallilla - html. Ensin tarvitsemme lomakkeen, jossa on useita kenttiä. Selvyyden ja kaikkien lomakkeiden standardin vuoksi otamme 3 kenttää. Nuo. tämä on nimi, sähköpostiosoite ja puhelinnumero.

Jokaisella syötteellä on oma yksilöllinen nimi, jota tarvitsemme myöhemmin viestien lähettämiseen. Voit myös vapaasti lisätä omia kenttiäsi ja ei vain syöttää, vaan myös valita tekstialueen. Muista antaa jokaiselle omat nimensä, joita käytämme lähettäessämme tietoja sähköpostitse. Lisäsin jokaiseen kenttään mukavuuden vuoksi pakollisen attribuutin, jonka ansiosta selain ei salli käyttäjän lähettää tyhjiä arvoja ja ilmoittaa heille niiden täyttämisen tarpeesta.

Kun lomake on valmis, voit muuttaa sitä hieman. Kaikki täällä riippuu myös tarpeistasi ja fantasioistasi. Selvyyden vuoksi piirtelin kullekin elementille muutaman tyylin, jotta kaikki ei näyttäisi niin tasaiselta. Mutta jos olet laiska tai et tiedä miten se tehdään, voit käyttää vaihtoehtoani:

Muoto( max-leveys: 400 pikseliä; leveys: 100 %; marginaali: 0 auto; ) input( laatikon koko: border-box; näyttö: lohko; reunus: ei mitään; box-shadow: upotettu 0px 0px 4px 1px rgba(0, 0, 0, 0,11); täyte: 10px 20px; leveys: 100%; marginaali: 10px 0; ääriviivat: ei mitään; ) input( tausta: punainen; reunus: ei mitään; laatikkovarjo: 0px 2px 0 1px #C50909; reunus- säde: 5px; väri: valkoinen; tekstin muunnos: isot kirjaimet; fontin paino: 600; leveys: 200px; kohdistin: osoitin; siirtymä: 0,3 s; ) input:hover( tausta: musta; box-shadow: 0px 2px 0 1px musta ;)

Täällä kannattaa ymmärtää tarkemmin, tai pikemminkin valita sopiva vaihtoehto itsellesi. Viestien lähettämiseen sähköpostitse meidän on käytettävä php-kieltä, ts. Luo erillinen tiedosto, johon siirrämme kaikki nämä tiedot. Mutta emme harkitse tätä menetelmää tässä, koska se on paljon kauniimpaa, kun kaikki tapahtuu lataamatta sivua uudelleen. Joten tarkastelemme tietojen lähettämistä ajaxin kautta.

Jos haluat tehdä kaiken vanhanaikaisesti, sinun on säädettävä hieman ylintä html:ää ja asetettava lomakkeen metodi-attribuutin arvo (post or get). Kaikki riippuu siitä, kuinka haluat siirtää tietoja lomakkeesta. Älä myöskään unohda kirjoittaa toimintoa, joka osoittaa polun php-tiedostoon.

Ja käytämme kehittyneempää menetelmää ja lähetämme tiedot lataamatta sivua uudelleen, ja kun saamme vastauksen palvelimelta, annamme käyttäjälle viestin onnistuneesta toiminnasta tai virheestä. Tarvitsemme kuitenkin myös kaksi tiedostoa, esimerkiksi contact.php ja custom.js.

Ensinnäkin, älä unohda yhdistää Jquery-kirjastoa, sen avulla vähennämme koodia useita kertoja ja voimme helposti suorittaa mitä tahansa toimintoja valmiilla ratkaisuilla.

$(.form").submit(function() ( var str = $(this).serialize(); $.ajax(( type: "POST", url: "contact.php", data: str, menestys : function(msg) ( if(msg == "ok") ( alert("Viesti lähetetty"); ) else ( alert("Virhe! Olet ehkä täyttänyt kentät väärin."); ) ) )); return väärä; ) );

Ymmärretään nyt toimintasuunnitelma ja miksi tarvitsemme kaikkia näitä kirjastoja ja tiedostoja. Kun käyttäjä klikkaa Lähetä-painiketta, meillä on lähetystapahtuma, jonka kirjoitamme custom.js:ssä ja jonka perusteella saamme kaikki tiedot lomakkeesta ja välitämme ne contact.php-tiedostoon. Täällä tarkistamme vielä kerran, ovatko kentämme tyhjät (jotta vältytään toiselta roskapostilta), lähetämme viestin sähköpostitse ja ilmoitamme käyttäjälle tuloksista, jotka lähetetään vastauksena custom.js:lle.

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail" "]); $txtphone = trim($_POST["mfbPhone"]); // keneltä $fromMail = " [sähköposti suojattu]"; // Kirjoita sähköpostiosoitteesi tähän $emailTo = " [sähköposti suojattu]"; $subject = "Palaute"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "Lähettäjä: Esimerkkilomake\n"; $headers . = "Sisältötyyppi: teksti/plain; charset="utf-8"\r\n"; $headers .= "MIME-versio: 1.0\r\n"; $headers .= "Päivämäärä: ". date("D, d M Y h:i:s O") ."\r\n"; // kirjaimen runko $body = "Sain kirjeen sivustolta ".$site." \n\nNimi: ".$txtname."\nPuhelin: ".$txtphone."\n-mail: ".$txtemail."\nViesti: ".$txtmessage; mail($emailTo, $subject, $body, $headers); echo "ok";)

Tämä on yksinkertaisin esimerkki yhteydenottolomakkeen toiminnasta. On monia vaihtoehtoja kuinka muokata tarkistustiedostoa PHP:ssä, luoda omia luokkia jne. Mutta tehtävämme oli luoda yksinkertainen ja toimiva esimerkki, jota voit käyttää verkkosivustollasi.

demo

tiedostot

Koska olet WordPress-blogissa, olet luultavasti valmis ja innokas käyttämään kaikenlaisia ​​laajennuksia, varsinkin jos olet täydellinen ohjelmoinnin ja asettelun asiantuntija. En syytä sinua tästä, ja voin jopa esittää yhden niistä huomiosi selvyyden vuoksi. Tämän kappaleen tarkoitus ei ole suositus, vaan vain esimerkki, koska olen käyttänyt Contact Form 7 -laajennusta useissa projekteissa.

Se on erittäin helppo konfiguroida ja toimii lähes aina virheettömästi. Jos haluat luoda oman ainutlaatuisen mallisi, voit tehdä sen. Sinun tarvitsee vain lisätä tarvittavat kentät rakentajaan, kääntää ja muuttaa ilmoitukset virheistä ja onnistuneesta lähetyksestä omalla tavallasi, ja olet valmis. Kopioi seuraavaksi lyhytkoodi ja liitä se haluamaasi paikkaan lomakkeessa.

Minulla ei ole koskaan ollut ongelmia laajennuksen kanssa, ja jos tarvitset nopean ja valmiin ratkaisun, niin tämä on se. Jos sinulla on omat vaatimukset lomakkeelle toiminnallisuuden ja suunnittelun suhteen, on parempi käyttää ensimmäistä vaihtoehtoa, joka vaatii tietoa tällä alalla.

Hei rakkaat ystävät ja blogivieraat! Verkkosivustopalaute on yksi merkittävimmistä ominaisuuksista, jonka avulla bloggaaja voi kommunikoida vierailijoidensa kanssa. Mutta on yksi saalis - lisäosat, jotka näyttävät palautetta sivustosta, painavat paljon!

Olen jo jonkin aikaa pyrkinyt tekemään blogistani kevyemmän ja päättänyt päästä eroon tarpeettomista laajennuksista, jotka painavat sitä painollaan ja estävät sivujen nopean latautumisen. Ja ensinnäkin, valintani putosi palautelomakkeeseen, tai pikemminkin liitännäiseen, joka näytti sen verkkosivustollani "Contact Form 7", ja se tarvitsi myös toisen laajennuksen, joka näytti captcha "reCaptcha". Näin päätin päästä eroon kahdesta melko merkittävästä laajennuksesta kerralla käyttämällä palautelomaketta, joka ei vaadi lisäosia ja on helppo asentaa sivustolle. Nyt kerron sinulle siitä ja tietysti annan sinun ladata tiedostot, jotta voit luoda samanlaista palautetta sivustollesi...

Ja niin, kun vihdoin poistin sivustoltani palautelomakkeen luomiseen tarvittavat lisäosat, aloin luoda helppoa ja luotettavaa palautelomaketta ilman lisäosia. Ja tämän sain:

Voit tarkastella ja tarkistaa sivustolle antamani palautelomakkeen toimivuuden " " -sivulla. Kirjoita sivuilla olevaan yhteydenottolomakkeelleni, niin vastaan ​​sinulle!

Siirrytään nyt tärkeimpään asiaan ja luodaan oma palaute sivustolle, liitännäisistä riippumatta...

Tarvitsemme tähän kaikki: blogisivustoni, jossa on artikkeli "Palaute sivustolle", tekstieditori ja tietysti halusi luoda sivustolle oma yhteydenottolomake helpottamaan tarpeettomien ja raskaiden liitännäisten poistamista!

Tässä on sivuston palautelomakkeen HTML-koodi, jonka voit liittää sivustollesi tai blogiisi minne tahansa, minulle tämä on yhteydenottosivu:

Palautelomake

Mikä sinun nimesi on

Sähköposti

Viestin aihe

Lähetä viesti

Huomaa joitain tärkeitä asioita, jotka sinun tulee tehdä tässä koodissa:

Sinun on ladattava tämä tiedosto isännöintiisi sivustomoottorin juurikansioon! Mutta tarkista ensin, oletko korjannut sen vai et!

Rivillä, jolle on kirjoitettu teksti "SIJOITUSSÄHKÖPOSTIOSOITE"! ", sinun on korjattava se sähköpostiosoitteeseesi, joka on hosting-palvelussasi. Jos sinulla ei ole sähköpostitiliä hosting-palvelussasi, muista luoda sellainen. Se ei ole vaikeaa!

Nyt sinun on yhdistettävä komentosarja, joka yhdistää sivuston jQuery-kirjaston, jotta sivuston palautejärjestelmämme toimisi oikein. Tarkista ensin verkkosivustoltasi, ehkä tämä komentosarja on jo asennettu, jos et tiedä kuinka tehdä tämä, kysy isännöinnin tueksi.

Tässä on käsikirjoitus:

Tai voit lisätä tämän toiminnon WordPress functions.php-tiedostoosi:

Funktio my_jquery() ( wp_deregister_script("jquery"); wp_register_script("jquery", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"); wp_enqueue_script("jquery" ;)

Se korvaa skriptin ja sisältää myös jQuery-kirjaston WordPress-sivustolla.

Nyt yhdistämme verkkosivuillamme skriptin, joka toimii yhdessä mail.php-tiedoston kanssa ja lähettää kirjeesi. Tätä varten meidän on luotava js-tiedosto, kuten contact.js, ja lähetettävä se verkkosivustollesi kansiossa, jossa on aktiivisen teemasi skriptit, jota kutsutaan js:ksi. Jos sinulla ei ole sitä verkkosivustollasi, luo se!

Tässä on käsikirjoitus:

JQuery(document).ready(function($) ( $("#contact").submit(function() ( var str = $(this).serialize(); $.ajax(( tyyppi: "POST", url : "SINUN DOMAIN/wp-content/themes/YOUR THEME/mail.php", data: str, menestys: function(msg) ( if(msg == "OK") ( tulos = "Viesti lähetetty"; $(" #fields").hide(); ) else (tulos = msg;) $("#note").html(tulos); ) )); return false; )); ));

Melkein valmis! Nyt meidän tarvitsee vain ladata tyylit CSS-tiedostoosi, joka vastaa sivuston teeman tyyleistä, isännöintiimme. Jos näin ei tehdä, äskettäin luomamme palaute sivustosta ei ole kaunista ja yksiväristä.

Tässä on sivuston palautelomakkeen tyylikoodi:

Lomake#yhteystieto ( reunus:1px kiinteä #e5e5e5; täyte:10px; tausta:#e9ffd0; reunuksen säde:5px; ) #contact label ( font-size: 14px; ) #contact input:required:valid ( box-shadow: 0 0 3px #BCEF89; reunuksen väri: #BCEF89!tärkeää; tausta: #fff url(images/valid.png) ei toistoa 98 % center; ) #contact textarea:required:valid ( ruutuvarjo: 0 0 3px #BCEF89; reunuksen väri: #BCEF89!tärkeää; ) #contact input:focus:invalid ( box-hadow: 0 0 3px #FFDF97; reunuksen väri: #FFDF97!tärkeää; tausta: #ffff url(images/invalid. png) ei toistoa 98 % keskellä; ) #contact textarea:focus:invalid ( ruutuvarjo: 0 0 3px #FFDF97; reunuksen väri: #FFDF97!tärkeää; ) .err ( reunus: 1px kiinteä #ff8c00; täyte: 10px; tausta: #FFDF97; tekstin tasaus: vasemmalle; reunuksen säde: 3px; ) .ok (reunus: 1px #BCEF89 kiinteä; marginaali-ala: 15px; täyte: 10px; tausta: #f5f9fd; tekstin tasaus: keskellä ; reunuksen säde: 3px; ) #tekijä, #sähköposti, #url (leveys: 30%; täyte: 5px; reunuksen säde: 5px; reunus: 1px kiinteä #e5e5e5; ) #kommentti ( täyte: 5px; reunuksen säde: 5px; reunus: 1px kiinteä #e5e5e5; ylivuoto: automaattinen; ) #lähetä ( fontin paino: 400; tausta: #393; fontin koko: 15px; väri: #fff ; täyte: 10px 50px; reunus: ei mitään; kohdistin: osoitin; )

Kopioi ne ja lähetä ne sivuston aktiivisen teemasi style.css-tiedostoon. Jos haluat sitten muuttaa värejä ja muotoa, mutta tämä on vain edistyneille käyttäjille!

Nyt sivustosta antamamme palaute on täysin käyttövalmis. Testaa ja nauti sen työstä!

Siinä kaikki!

Jos pidit tästä materiaalista? Napsauta sitten sosiaalisia painikkeita, tilaa blogipäivitykset ja kirjoita kommenttisi alle!

Tervehdys, rakas lukija, tänään olen valmistellut sinulle herkullisen html-palautelomakkeen, joka toimii lataamatta sivua uudelleen Ajax-tekniikalla + tehokkaalla laukaisimella, joka motivoi vierailijoitasi käyttämään lomaketta. Blogini lukijat keskustelivat erittäin aktiivisesti edellisestä aloitussivun artikkelistani, nyt arvioimme ja tarkastelemme viimeisteltyä uutta lomaketta. Kaikki tarpeellinen lähdekoodi ja demo liitteenä artikkelissa, analysoimme myös työn ja yhteyden rakennetta.

UPD: Virhe nimien koodauksessa aiherivillä on korjattu. Nyt kaikki näkyy oikein. Kiitämme lukijaa (Ekaterina Karacheva)

Itse lomakkeen muoto sisältää myös PHP:n käsittelijän tiedoston, lisäksi työhön tarvitset jquery-kirjaston ja skriptejä, mutta ensinnäkin, en lataa sitä liian kauan - siirrytään tarkasteluun ja palautemme analysointia.

Lomakkeemme näyttää tältä:

Mitä järkeä tässä on? Oikealla puolella on tällainen lomake, mutta vasemmalle puolelle tein erityisen lohkon, joka rohkaisee vierailijaasi syöttämään yhteystietonsa välittömästi! Salaisuus on yksinkertainen: Näetkö päivämäärän ja kellonajan vasemmassa lohkossa? Tämän päivän päivämäärä näkyy koko ajan, ajan myötä näiden kahden tunnin vaihteluväli lasketaan nykyisestä tunnista, oletetaan, jos kellosi on nyt 13:14, niin tuntiväli on: 12-14. Katso kuinka se toimii)))

Vierailija näkee: vau, tänään on alennus, ja olin juuri ajoissa, siellä on myös alennus! Se on otettava heti! - Tämä on laukaisemme.

Latasin html-palautelomakkeen lähdekoodin, katsoin demoa - mielestäni olen pelannut tarpeeksi)) Nyt tärkeimmästä, toimintaperiaatteesta:

Syöttölomakkeen kentät tarkistetaan contact.php-käsittelijätiedostosta Alla ohjelmakoodiluettelosta näet, että itse lomakkeessa näkyy viesti virheistä ja kirjeen onnistuneesta lähetyksestä, tältä se näyttää lähetyksen jälkeen:

Syötä sähköpostisi riville 52, jotta kaikki kirjeet lähetetään määritettyyn sähköpostiin.