Telefoni tagasiside vorm. Loome PHP-s tagasiside vormi. Seitse nõuannet, mida meeles pidada

Igal veebisaidil peab olema tagasisidevorm, nii et varem või hiljem mõtleb igaüks meist selle väljatöötamise peale. Internetis on üsna palju võimalusi, mõni kasutab populaarseid pluginaid, mõni kasutab oma isiklikke arendusi, kuid enamik otsib valmislahendusi. Igal juhul töötab meie saidi tagasisidevorm ja räägime sellest kõigest järjekorras.

Niisiis, alustame, nagu alati, tavalise malliga - html. Kõigepealt vajame mitme väljaga vormi. Selguse ja kõigi vormide standardsuse huvides võtame 3 välja. Need. see on nimi, e-post ja telefon.

Igal sisendil on oma kordumatu nimi, vajame seda hiljem sõnumite saatmiseks. Samuti saate vabalt lisada oma välju ja mitte ainult sisestada, vaid ka valida tekstiala. Lihtsalt ärge unustage määrata igaühele oma nimed, mida kasutame meili teel teabe saatmisel. Mugavuse huvides lisasin igale väljale nõutava atribuudi, tänu millele ei luba brauser kasutajal tühje väärtusi saata ja teavitab neid nende täitmise vajadusest.

Kui vorm on valmis, saate seda veidi muuta. Siin sõltub kõik ka teie vajadustest ja fantaasiatest. Selguse huvides visandasin iga elemendi jaoks mõned stiilid, et kõik ei näeks nii tasane. Aga kui olete laisk või ei tea, kuidas seda teha, võite kasutada minu valikut:

Vorm (maksimaalne laius: 400 pikslit; laius: 100%; veeris: 0 auto 0, 0, 0,11); polster: 10px 20px; laius: 100%; veeris: 10px 0; piirjoon: puudub; ) input (taust: punane; ääris: puudub; kasti vari: 0px 2px 0 1px #C50909; ääris- raadius: 5 pikslit; värv: valge; teksti teisendus: suurtähed; fondi kaal: 600; laius: 200 pikslit; kursor: kursor; üleminek: 0,3 s; ) input:hover (taust: must; kasti vari: 0px 2px 0 1px must ;)

Siin tasub üksikasjalikumalt mõista või pigem valida endale sobiv valik. Meili teel sõnumite saatmiseks peame kasutama php keelt, st. looge eraldi fail, kuhu me kõik need andmed edastame. Kuid me ei käsitle seda meetodit siin, kuna see on palju ilusam, kui kõik juhtub ilma lehte uuesti laadimata. Nii et vaatame andmete saatmist ajaxi kaudu.

Kui soovite teha kõike vanaviisi, peate veidi ülemist html-i muutma ja määrama vormi meetodi atribuudi väärtuse (postita või hanki). Kõik sõltub sellest, kuidas soovite vormilt andmeid edastada. Ja ärge unustage ka kirjutada toimingut, mis näitab php-faili teed.

Ja me kasutame täpsemat meetodit ja saadame andmeid ilma lehte uuesti laadimata ning serverilt vastuse saamisel anname kasutajale teate õnnestunud toimingu või vea kohta. Siiski vajame ka kahte faili, oletame, et contact.php ja custom.js.

Esiteks ärge unustage ühendada Jquery teek, selle abiga vähendame koodi mitu korda ja saame valmislahenduste abil hõlpsalt mis tahes toiminguid teha.

$(".vorm").submit(function() ( var str = $(this).serialize(); $.ajax(( tüüp: "POST", url: "contact.php", andmed: str, edu : function(msg) ( if(msg == "ok") ( alert("Sõnum saadetud"); ) else ( alert("Viga! Võimalik, et olete täitnud väljad valesti."); ) ) )); return vale; ) );

Nüüd mõistame tegevuskava ja miks me vajame kõiki neid teeke ja faile. Kui kasutaja vajutab esitamisnupule, on meil esitamissündmus, mille kirjutame custom.js-s ja mille põhjal saame vormilt kõik andmed kätte ja edastame need faili contact.php. Siin kontrollime veel kord, kas meie väljad on tühjad (et vältida järjekordset rämpsposti võimalust), saadame meili teel sõnumi ja teavitame kasutajat tulemustest, mis saadetakse vastusena custom.js-le.

If (trim($_POST["mfbPhone"]) == "") ( kaja "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail" "]); $txtphone = trim($_POST["mfbPhone"]); // kellelt $fromMail = " [e-postiga kaitstud]"; // Sisestage siia oma e-posti aadress $emailTo = " [e-postiga kaitstud]"; $subject = "Tagasiside"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "Saatja: Näidisvorm\n"; $päised . = "Sisutüüp: tekst/lihtne; charset="utf-8"\r\n"; $headers .= "MIME-versioon: 1.0\r\n"; $headers .= "Kuupäev: ". date("D, d M Y h:i:s O") ."\r\n"; // tähe keha $body = "Saadud kirja saidilt ".$site." \n\nNimi: ".$txtname."\nTelefon: ".$txtphone."\ne-post: ".$txtemail."\nSõnum: ".$txtmessage; mail($emailTo, $subject, $body, $headers); kaja "ok";)

See on kõige elementaarsem näide kontaktivormi toimimisest. PHP-s kontrollfaili muutmiseks, oma klasside loomiseks jne on palju võimalusi. Kuid meie ülesanne oli luua lihtne ja toimiv näide, mida saate oma veebisaidil kasutada.

demo

failid

Kuna olete WordPressi ajaveebis, olete tõenäoliselt valmis ja innukalt valmis kasutama igasuguseid pluginaid, eriti kui olete programmeerimise ja paigutuse osas täielik lamer. Ja ma ei süüdista teid selles ja võin selguse huvides isegi ühele neist teie tähelepanu pöörata. Selle lõigu eesmärk ei ole soovitus, vaid ainult näide, kuna olen kasutanud kontaktivormi 7 pistikprogrammi mitmes projektis.

Seda on väga lihtne seadistada ja see töötab peaaegu alati laitmatult. Kui teil on vaja luua oma unikaalne disain, saate seda teha. Piisab, kui lisada konstruktoris vajalikud väljad, tõlkida ja muuta teateid vigade ja eduka saatmise kohta omal moel ning ongi valmis. Järgmisena kopeerige lühikood ja kleepige see vormi soovitud kohta.

Mul pole kunagi pistikprogrammiga probleeme olnud ja kui vajate kiiret ja valmis lahendust, siis see on see. Kui teil on vormile funktsionaalsuse ja disaini osas oma nõuded, siis on parem kasutada esimest võimalust, mis nõuab selles valdkonnas teadmisi.

Tere, kallid sõbrad ja blogikülalised! Veebisaidi tagasiside on üks olulisemaid funktsioone, mis võimaldab blogijal oma külastajatega suhelda. Kuid on üks konks – saidi tagasisidet kuvavad pistikprogrammid kaaluvad palju!

Olen juba mõnda aega tegelenud oma ajaveebi kergemaks muutmisega ja otsustasin vabaneda tarbetutest pistikprogrammidest, mis kaaluvad seda oma kaaluga ja takistavad lehtede kiiret laadimist. Ja esiteks langes minu valik tagasiside vormile või õigemini pistikprogrammile, mis seda minu veebisaidil “Kontaktvorm 7” kuvas, ja see vajas ka teist pluginat, mis kuvas captcha “reCaptcha”. Nii otsustasin vabaneda korraga kahest üsna olulisest pistikprogrammist, kasutades tagasisidevormi, mis ei vaja pluginaid ja mida on lihtne saidile installida. Nüüd räägin teile sellest ja loomulikult lasen teil failid alla laadida, et saaksite oma saidile sarnast tagasisidet luua...

Ja nii, olles lõpuks oma saidilt tagasisidevormi loomiseks mõeldud pistikprogrammid eemaldanud, hakkasin looma lihtsat ja usaldusväärset tagasisidevormi ilma pistikprogramme kasutamata. Ja selle ma sain:

Saate vaadata ja kontrollida minu saidi tagasisidevormi funktsionaalsust lehel " ". Kirjuta minu kodulehel olevasse kontaktivormi ja ma vastan sulle!

Liigume nüüd kõige olulisema juurde ja loome saidi kohta oma tagasiside, sõltumata pistikprogrammidest...

Kõik, mida selleks vajame: minu ajaveebisait koos artikliga “Saidi tagasiside”, tekstiredaktor ja loomulikult teie soov luua saidil oma kontaktivorm, et hõlbustada tarbetutest ja rasketest pistikprogrammidest vabanemist!

Siin on saidi tagasisidevormi HTML-kood, mille saate oma saidile või ajaveebi kõikjale kleepida, minu jaoks on see kontaktileht:

Tagasiside vorm

Mis su nimi on

Meil

Sõnumi teema

saada sõnum

Pange tähele mõningaid olulisi asju, mida peate selles koodis tegema:

Peate selle faili oma hostimisse üles laadima saidimootori juurkausta! Kuid kõigepealt kontrollige, kas olete selle parandanud või mitte!

Rida, kuhu on kirjutatud tekst “TEIE MAJUTUSMESTI AADRESS”! ", peate selle parandama oma e-posti aadressile, mis on teie hostimises. Kui teil pole oma hostimises e-posti kontot, looge see kindlasti. See ei ole raske!

Nüüd peate meie saidi tagasisidesüsteemi korrektseks toimimiseks ühendama skripti, mis ühendab saidil jQuery teegi. Esmalt kontrollige oma veebisaiti, kas see skript on juba installitud, kui te ei tea, kuidas seda teha, esitage oma hostimise toele küsimus.

Siin on skript:

Või saate selle funktsiooni lisada oma WordPressi funktsioonid.php faili:

Funktsioon 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" ;)

See asendab skripti ja sisaldab ka WordPressi saidi jQuery teeki.

Nüüd ühendame oma veebisaidil skripti, mis töötab koos failiga mail.php, saates teie kirju. Selleks peame looma js-faili nagu contact.js ja saatma selle teie veebisaidile kaustas koos teie aktiivse teema skriptidega, mida nimetatakse js-ks. Kui teie veebisaidil seda pole, looge see!

Siin on skript:

JQuery(document).ready(function($) ( $("#contact").submit(function() ( var str = $(this).serialize(); $.ajax(( tüüp: "POST", url : "TEIE DOMEEN/wp-content/themes/YOUR THEME/mail.php", andmed: str, edu: function(msg) ( if(msg == "OK") ( result = "Sõnum saadetud"; $(" #fields").hide(); ) else (result = msg;) $("#note").html(tulemus); ) )); return false; )); ));

Peaaegu valmis! Nüüd peame laadid üles laadima meie hostimisse teie CSS-faili, mis vastutab saidi teema stiilide eest. Kui seda ei tehta, ei ole meie äsja loodud tagasiside saidile ilus ja ühevärviline.

Siin on saidi tagasiside vormi stiilikood:

Vorm#kontakt ( ääris:1px solid #e5e5e5; polster:10px; background:#e9ffd0; border-radius:5px; ) #contact label ( fondi suurus: 14px; ) #contact input:required:valid ( kasti vari: 0 0 3px #BCEF89; äärise värv: #BCEF89!tähtis; taust: #fff url(images/valid.png) kordusvaba 98% keskel; ) #kontakt tekstiala:required:valid ( kasti vari: 0 0 3px #BCEF89; äärise värv: #BCEF89!tähtis; ) #kontakti sisend:fookus:kehtetu ( kasti vari: 0 0 3px #FFDF97; äärise värv: #FFDF97!tähtis; taust: #ffff url(pildid/vale. png) no-repeat 98% center; ) #contact textarea:focus:invalid ( kasti vari: 0 0 3px #FFDF97; äärise värv: #FFDF97!important; ) .err (ääris: 1px solid #ff8c00; polsterdus: 10px; taust: #FFDF97; teksti joondus: vasakule; äärise raadius: 3px; ) .ok (ääris: 1px #BCEF89 ühtlane; veeris-alumine: 15px; polsterdus: 10px; taust: #f5f9fd; teksti joondus: keskel ; äärise raadius: 3 pikslit; ) #autor, #e-post, #url (laius: 30%; polsterdus: 5px; äärise raadius: 5px; ääris: 1px tahke #e5e5e5; ) #kommentaar ( täidis: 5 pikslit; äärise raadius: 5 pikslit; ääris: 1px ühtlane #e5e5e5; ületäitmine: automaatne; ) #submit ( fondi kaal: 400; taust: #393; fondi suurus: 15 pikslit; värv: #fff ; polster: 10px 50px; ääris: puudub; kursor: kursor; )

Lihtsalt kopeerige need ja saatke need saidi aktiivse teema faili style.css. Kui soovite seejärel värve ja kuju muuta, kuid see on ainult kogenud kasutajatele!

Nüüd on meie tagasiside saidi kohta täielikult kasutamiseks valmis. Testige seda ja nautige selle tööd!

See on kõik!

Kui teile see materjal meeldis? Seejärel klõpsake sotsiaalsetel nuppudel, tellige ajaveebi värskendused ja kirjutage oma kommentaar allpool!

Tere, kallis lugeja, täna valmistasin teile ette maitsva html-i tagasiside vormi, mis töötab ilma Ajaxi tehnoloogia abil lehte uuesti laadimata + võimas päästik, mis motiveerib teie külastajaid vormi kasutama. Minu ajaveebi lugejad arutasid väga aktiivselt minu eelmist artiklit sihtlehel, nüüd hindame ja vaatame valmis uut vormi. Kõik vajalik artiklile lisatud lähtekood ja demo, analüüsime ka töö ja ühenduse struktuuri.

UPD: teemareal on nimekodeeringu viga parandatud. Nüüd kuvatakse kõik õigesti. Täname lugejat (Ekaterina Karacheva)

Vormi enda vorming sisaldab ka PHP-s käitleja faili, lisaks on tööks vaja jquery teeki ja skripte, aga esiteks, ma ei laadi seda liiga kauaks - liigume edasi ülevaate juurde ja meie tagasiside analüüs.

Meie vorm näeb välja selline:

Mis mõtet siin on? Paremal pool on selline vorm, aga vasakusse serva tegin spetsiaalse ploki, mis julgustab Sinu külastajat oma kontaktandmed kohe sisestama! Saladus on lihtne: kas näete vasakpoolses plokis kuupäeva ja kellaaega? Kogu aeg kuvatakse tänane kuupäev, aja jooksul arvutatakse nende kahe tunni vahemik praegusest tunnist, oletame, et kui teie kell on praegu 13:14, siis on tunnivahemik: 12-14. Vaata, kuidas see töötab)))

Külastaja näeb: vau, täna on allahindlus ja ma olin just õigel ajal, on ka allahindlus! Peab kohe võtma! - See on meie päästik.

Laadisin alla html-i tagasiside vormi lähtekoodi, vaatasin demo - arvan, et olen piisavalt mänginud)) Nüüd kõige olulisemast, tööpõhimõttest:

Sisestusvormi väljad kontrollitakse failis contact.php Hander failis Allpool programmi koodi nimekirjas on näha, et vigade ja kirja eduka saatmise kohta ilmub teade vormile endale, selline näeb välja peale saatmist:

Sisestage oma e-kiri reale 52, nii et kõik kirjad saadetakse määratud e-posti aadressile.