Vsako spletno mesto mora imeti obrazec za povratne informacije, zato vsak od nas prej ali slej razmišlja o njegovem razvoju. Na internetu je veliko možnosti, nekateri uporabljajo priljubljene vtičnike, nekateri uporabljajo svoj osebni razvoj, večina pa išče že pripravljene rešitve. V vsakem primeru bo naš obrazec za povratne informacije o spletnem mestu deloval in deloval, in pogovorimo se o vsem tem po vrsti.

HTML

Torej, začnimo, kot vedno, z običajno predlogo - html. Najprej potrebujemo obrazec z več polji. Zaradi jasnosti in standarda vseh obrazcev bomo vzeli 3 polja. Tisti. to bo ime, e-pošta in telefon.

Vsak vnos ima svoje edinstveno ime, ki ga bomo kasneje potrebovali za pošiljanje sporočil. Prav tako lahko poljubno dodate svoja polja in ne samo vnašate, ampak tudi izberete besedilno polje. Samo ne pozabite vsakemu izmed njih dodeliti svojega imena, ki ga bomo uporabili pri pošiljanju podatkov po elektronski pošti. Za udobje sem vsakemu polju dodal obvezen atribut, zahvaljujoč kateremu brskalnik uporabniku ne bo dovolil pošiljanja praznih vrednosti in bo obvestil, da jih je treba izpolniti.

CSS

Ko je obrazec pripravljen, ga lahko nekoliko spremenite. Tukaj je vse odvisno tudi od vaših potreb in fantazij. Zaradi jasnosti sem za vsak element skiciral nekaj stilov, da ne bi vse izgledalo tako ravno. Če pa ste leni ali ne veste, kako to storiti, potem lahko uporabite mojo možnost:

Form( max-width: 400px; width: 100%; margin: 0 auto; ) input(box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0,11); rob: 10 slikovnih pik; preoblikovanje besedila: 200 slikovnih pik; ozadje: črna 0px 2px 0 1px črna;

Odjemalski del

Tukaj je vredno podrobneje razumeti ali bolje izbrati ustrezno možnost zase. Za pošiljanje sporočil po e-pošti bomo morali uporabiti jezik php, tj. ustvarite ločeno datoteko, v katero bomo prenesli vse te podatke. Vendar te metode tukaj ne bomo obravnavali, saj je veliko lepše, ko se vse zgodi brez ponovnega nalaganja strani. Ogledali si bomo torej pošiljanje podatkov prek ajaxa.

Če želite vse narediti na staromoden način, boste morali rahlo prilagoditi zgornji html in nastaviti vrednost atributa metode obrazca (post ali get). Vse je odvisno od tega, kako želite prenesti podatke iz obrazca. Prav tako ne pozabite napisati dejanja, ki bo pokazalo pot do datoteke php.

Uporabili bomo naprednejšo metodo in poslali podatke brez ponovnega nalaganja strani, ob prejemu odgovora s strežnika pa bomo uporabniku dali sporočilo o uspešni operaciji ali napaki. Potrebovali pa bomo tudi 2 datoteki, recimo contact.php in custom.js.

Najprej ne pozabite povezati knjižnice Jquery, z njeno pomočjo bomo večkrat zmanjšali kodo in zlahka izvajali kakršna koli dejanja z že pripravljenimi rešitvami.

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( tip: "POST", url: "contact.php", podatki: str, uspeh : function(msg) ( if(msg == "ok") ( alert("Sporočilo je bilo poslano"); ) else ( alert("Napaka! Morda ste napačno izpolnili polja."); ) ) ) );

Zdaj pa poglejmo akcijski načrt in zakaj potrebujemo vse te knjižnice in datoteke. Ko uporabnik klikne gumb za oddajo, imamo dogodek za oddajo, ki ga bomo zapisali v custom.js in na podlagi katerega bomo prejeli vse podatke iz obrazca in jih posredovali v datoteko contact.php. Tukaj še enkrat preverimo, ali so naša polja prazna (da se izognemo ponovni možnosti spama), pošljemo sporočilo po e-pošti in uporabnika obvestimo o rezultatih, ki so poslani kot odgovor na custom.js.

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail) "]); $txtphone = trim($_POST["mfbPhone"]); // od koga $fromMail = " [e-pošta zaščitena]"; // Tukaj vnesite svoj e-poštni naslov $emailTo = " [e-pošta zaščitena]"; $subject = "Povratne informacije"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "Od: Primer obrazca\n"; $headers . = "Vrsta vsebine: besedilo/navadno; charset="utf-8"\r\n"; $headers .= "MIME-različica: 1.0\r\n"; $headers .= "Datum: ". date("D, d M Y h:i:s O") ."\r\n"; // telo pisma $body = "Prejeto pismo s spletnega mesta ".$site." \n\nIme: ".$txtname."\nTelefon: ".$txtphone."\ne-pošta: ".$txtemail."\nSporočilo: ".$txtmessage; pošta($emailTo, $subject, $body, $headers); odmev "ok";

To je najosnovnejši primer delovanja kontaktnega obrazca. Obstaja veliko možnosti za spreminjanje kontrolne datoteke v PHP, ustvarjanje lastnih razredov itd. Toda naša naloga je bila ustvariti preprost in delujoč primer, ki ga lahko uporabite na svojem spletnem mestu.

demo

datoteke

Pripravljeni vtičniki

Ker ste na blogu WordPress, ste verjetno pripravljeni in željni uporabe vseh vrst vtičnikov, še posebej, če ste popolni lamer v programiranju in postavitvi. In tega vam ne zamerim in enega od njih vam lahko celo predstavim zaradi jasnosti. Namen tega odstavka ni priporočilo, ampak le primer, saj sem vtičnik Contact Form 7 uporabil v več projektih.

Zelo enostavno ga je konfigurirati in skoraj vedno deluje brezhibno. Če morate ustvariti svoj edinstven dizajn, lahko to storite. Vse kar morate storiti je, da dodate potrebna polja v konstruktorju, prevedete in spremenite obvestila o napakah in uspešnem pošiljanju na svoj način, in končali ste. Nato kopirajte kratko kodo in jo prilepite na želeno mesto v obrazcu.

Nikoli nisem imel težav z vtičnikom in če potrebujete hitro in pripravljeno rešitev, potem je to to. Če imate svoje zahteve glede obrazca glede funkcionalnosti in oblikovanja, potem je bolje uporabiti prvo možnost, ki zahteva znanje v tej panogi.

Torej, začnimo, najprej bomo označili stran in napisali sloge zanjo. Oznaka bo vključevala navaden povratni obrazec z dvema vnosoma (telefon, pošta) in enim tekstovnim poljem, kamor bo po naši zamisli uporabnik vnesel svoje sporočilo. Upravljalnik obrazcev bomo postavili na ločeno stran.

Obrazec za povratne informacije

Vnesite telefon:

Vaša pošta:

Tvoje vprašanje:

Zapišimo sloge:

Html, telo (višina: 100 %; rob: 0; ) html (barva ozadja: #fff; barva: #333; pisava: 12px/14px Verdana, Tahoma, sans-serif; kazalec: privzeto; ) #feedback-form (barva ozadja: #ececec; rob: 50 slikovnih pik samodejno 0; poravnava besedila: sredina; širina: 430 slikovnih pik; oblazinjenje: 15 slikovnih pik; ) #feedback-form h2( margin-bottom: 25px; ) #feedback-form input, #feedback -form textarea( barva ozadja: #fff; obroba: 1px polna #A9A9A9; padding: 1px 5px; širina: 90%; ) #feedback-form input(height: 26px; ) #feedback-form textarea(height: 75px; padding-top: 5px; ) #feedback-form input( margin-top: 15px; background-color: #0B7BB5; border: 1px solid #CCCCCC; color: #FFFFFF; font-weight: krepko; height: 40px; line- višina: 40px; pretvorba besedila: velike črke; širina: 225px;

Kot rezultat vseh teh dejanj boste dobili ta obrazec:

Zdaj je čas, da se lotimo strežnika. Naš scenarij bo vseboval več delov:

• Nastavitev;
• Sekundarne funkcije;
• Obdelava vhodnih podatkov;
• Izhod sporočila.

Vsi ti deli so seveda pogojni, saj nam nihče ne preprečuje, da bi naredili zmešnjavo iz kode ali, nasprotno, premaknili ključne dele v druge datoteke. Ampak mislim, da je bolje, da naredite upravljalnik v eni datoteki, tako da ga je priročno povezati z drugimi projekti.

nastavitve

Na tej stopnji bomo ustvarili tri spremenljivke: $my_email (nabiralnik, v katerega so poslani podatki), $path_log (pot do dnevniške datoteke) in $time_back (čas, ko se uporabnik vrne na spletno mesto).

// Določite svoj nabiralnik $my_email = " [e-pošta zaščitena]"; // Določite, kje bodo dnevniki shranjeni $path_log = "log.txt"; // Čas vrnitve uporabnika na spletno mesto (sek) $time_back = 3;

Sekundarne funkcije

Tukaj opisujemo pet funkcij, ki bodo poenostavile obdelavo podatkov.

Predloge izhodnih sporočil:

Funkcija error_msg($message)( $message = "".$message.""; return $message; ) function success_msg($message)( $message = "".$message.""; return $message; )

Brisanje podatkov, prejetih iz obrazca:

Funkcija clear_data($var)( return trim(strip_tags($var)); )

Pošiljanje pisma:

Funkcija send_mail($email, $subj, $text, $from)( $headers = "Od: ".$from." \r\n"; $headers .= "Različica MIME: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=utf-8 \r\n"; $result = mail($subj, $text, $headers) return true;

In zadnja funkcija, ki bo preverila telefon in pošto za pravilno snemanje njihove oblike.

Funkcija check_format($data, $type)( switch($type)( case "email": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match( $pattern, $data)( return true; ) break; case "phone": $pattern = "/^(\+?\d+)?\s*(\(\d+\))?[\s-] *([\d-]*)$/"; if(preg_match($pattern, $data))( return true; ) break; ) return false; )

Kot lahko vidite, so vse funkcije, ki smo jih napisali, majhne. Lahko bi jih pustili zunaj območja obdelave podatkov, ko pa morate nekaj spremeniti ali razširiti, na primer check_format(), bo to veliko preprostejše in priročnejše.

Obdelava dohodnih podatkov

Najprej ugotovimo, s katere strani je uporabnik prišel. Nato določimo spremenljivke, v katerih bodo shranjena naša sporočila in status pošiljanja pisma.

// Poišči prejšnjo stran $prev_page = $_SERVER["HTTP_REFERER"]; // Naša sporočila $msg = ""; // Status e-pošte $status_email = "";

Zdaj, da bi se izognili težavam s kodiranjem, ga označimo z glavo.

Header("Content-Type: text/html; charset=utf-8");

If($_SERVER["REQUEST_METHOD"] == "POST")( if(isset($_POST["number"], $_POST["email"], $_POST["question"]))( $number = clear_data ($_POST["številka"]); $email = clear_data($_POST["email"]); $question = clear_data($_POST["question"]); check_format($email, "email") && !empty($question))( // Oblikujte pismo $e_title = "Novo sporočilo"; $e_body = ""; $e_body .= ""; $e_body .= "Телефон: ".$number; $e_body .= "!}
"; $e_body .= "Pošta: ".$email; $e_body .= "
"; $e_body .= "Vprašanje: ".$question; $e_body .= ""; $e_body .= ""; // KONEC Oblikujte pismo if(send_mail($my_email, $e_title, $e_body, $prev_page) ) ( $status_email = "uspeh"; $msg = uspeh_msg("Hvala za vaše vprašanje.
Odgovorili vam bomo v najkrajšem možnem času."); )else( $status_email = "error"; $msg = error_msg("Pri pošiljanju e-pošte je prišlo do napake."); ) // Zapiši v datoteko $str = " Čas: ".datum ("d-m-Y G:i:s")."\n\r"; $str .= "Telefon: ".$number."\n\r"; $str .= "Pošta: " .$email." \n\r"; $str .= "Vprašanje: ".$question."\n\r"; $str .= "E-pošta: ".$status_email."\n\r"; str .= "= ===================================\n\r"; ($path_log, $str, FILE_APPEND); )else( $msg = error_msg( "Pravilno izpolnite obrazec!"); ) )else( $msg = error_msg("Prišlo je do napake!"); ) )else( izhod ;)

V napisani kodi ugotovimo, ali je bil obrazec oddan, sicer to datoteko zapremo z izhodno funkcijo. Nato preverimo prisotnost celic z našimi podatki v matriki POST; če so prispele, jih očistimo morebitnega smeti. Po čiščenju preverimo formate pošte in telefona ter prisotnost besedila v spremenljivki vprašanja. Nato generiramo pismo, ga pošljemo in pišemo dnevnike, kjer poleg podatkov shranimo status pošiljanja pisma. Tako lahko spremljamo delovanje funkcije mail() in hkrati ne izgubimo podatkov.

Izhod sporočila

Vse kar moramo storiti je, da uporabnika obvestimo o uspešno ali »ne tako« zaključeni operaciji in ga z obrazcem vrnemo nazaj na stran. Da bi to naredili, uporabljamo označevanje z vključitvijo skripta PHP.

Za preusmeritev uporabnika nazaj na stran bomo uporabili metaoznako refresh, kamor vstavimo PHP kodo z že izdelanimi spremenljivkami. Uporabiti bomo morali tudi malo JavaScripta, da bo stran nekoliko bolj dinamična. Napišemo funkcijo timeBack(), ki bo štela sekunde v obratnem vrstnem redu pred preusmeritvijo.

To je vse, preprost obrazec za povratne informacije za spletno mesto html je pripravljen. Samo ne pozabite spremeniti e-pošte v datoteki sendmessage.php v svojo.

Dodajanje pojavnega obrazca za povratne informacije na spletno mesto

Včasih potrebujete pojavni obrazec, ki se odpre, ko kliknete gumb. To je zelo enostavno narediti. Za primer vzemimo obrazec, ki smo ga ustvarili prej, in delajmo z njim.

Najprej moramo povezati jQury fancybox, ki ga lahko prenesete na koncu članka.

Dodajte te vrstice pred zaključno oznako telesa, samo spremenite pot do datotek na svojo.

In dajemo mu sloge.

Modalbox (barva:#FFFFFF; zaslon:blok; kazalec:kazalec; oblazinjenje:10px 11px; velikost pisave:1,2em; obroba:polna 1px #F9F9F9; polmer obrobe:2px; ozadje:#70C6B9; širina:210px; besedilo -decoration:none; text-align:center; margin:0 auto 20px; .modalbox:hover (background:#979797;)

Upoštevajte, da bo gumb, ko ga kliknete, povzročil pojavno okno, mora biti dodeljen razred modalbox in pot href=”#inline”. Brez tega se pojavni obrazec ne bo odprl na spletnem mestu.

Nato obrazec, ki smo ga ustvarili prej, skrijemo, tako da se odpre v pojavnem oknu. Če želite to narediti, morate sloge #inline zamenjati s starih na nove.

#inline ( display:none; margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; )

Kot rezultat dobimo takšen gumb.

Ob kliku se odpre pojavno okno s povratnimi informacijami.

Ponovno lahko spremenite sloge, postavitev polj in elementov, kot želite. Na primer, če želite poklicati nazaj s spletnega mesta, bo dovolj, da pustite samo 2 polji - ime in telefonsko številko ter odstranite preostala polja.

Ne pozabite, da boste morali obrazec za delovanje dodati na konec mesta, ki je objavljen zgoraj, in naložiti datoteko sendmessage.php v koren mesta.

Obrazec za povratne informacije za WordPress

Če vaše spletno mesto deluje na mehanizmu WordPress, lahko uporabite posebne vtičnike za dodajanje kontaktnega obrazca. Eden najboljših vtičnikov Contact Form 7. Prenesete ga lahko z uradnega spletnega mesta ali prek skrbniške plošče v razdelku Plugins.

Po aktiviranju vtičnika se v levem meniju pojavi nov zavihek. Odprite ga in kliknite Dodaj novo.

Vnesite ime novega obrazca, izberite polja, ki naj bodo v obrazcu. Običajno zadoščajo standardne, ki se samodejno dodajo. Ohranjati formo.

Po shranjevanju se na zaslonu prikaže kratka koda, ki jo je treba vstaviti na stran, kjer naj bo prikazan kontaktni obrazec, na primer na strani Stiki.

Kopirajte to kodo, pojdite na želeno stran, izberite obliko »Besedilo« v vizualnem urejevalniku, prilepite to kratko kodo in shranite stran.

Nato preverimo, ali je obrazec prikazan na strani in ali deluje pravilno. Če želite to narediti, morate le iti na stran, kjer ste vstavili kodo. Morali bi videti tak obrazec:

Sedaj vas bodo obiskovalci vaše strani lahko kontaktirali preko ustvarjenega kontaktnega obrazca v mehanizmu WordPress.

Izdelava pojavnega obrazca za povratne informacije za WordPress

Sam ne maram dodajanja nepotrebnih vtičnikov v ta motor, saj naložijo spletno mesto in upočasnijo njegovo delo. Zato za pojavni obrazec običajno uporabljam 2 možnosti.

Preprosto priložimo pojavni obrazec, opisan zgoraj v članku, ne na spletno mesto html, ampak na motor.

Obrazec, ustvarjen z uporabo vtičnika za pojavni obrazec Contact Form 7 z nekaj manjšimi spremembami.

Prva metoda je bila že opisana zgoraj, zato preidimo na drugo.

Za začetek prilepite naslednjo kodo takoj za začetno oznako body.

X

Ugotovimo, kaj je kaj:

• Povezava z id=”callme-open”, ob kliku se odpre naš obrazec. Upoštevajte, da ta povezava ne sme biti vstavljena za odprto oznako, temveč na mestu, kjer želite, da se ta gumb nahaja. Običajno je dodan v desni kot glave, poleg telefonske številke vašega podjetja.
• Blok bg-b bo ustvaril zatemnjeno ozadje spletnega mesta, ko se odpre pojavni obrazec.
• Blok callme bo vseboval sam obrazec za povratne informacije.
• X – to bo naš križec v kotu obrazca, ko kliknete nanj se obrazec zapre.
• No, koda php, v kateri se bo zagnala kratka koda vtičnika Contact Form 7.

Upoštevajte, da se vaš ID obrazca in ime lahko razlikujeta od mojega. Dodana je bila nova koda, zdaj ji dodajamo sloge.

Bg-b (položaj:absolutno; širina:100%; višina:100%; levo:0; zgoraj:0; ozadje:rgba(51,51,51,0.55); z-indeks:1000; ) telo (položaj: relative; .callme (position:fixed; top:30%; left:50%; width:300px; margin-left:-150px; z-index:1100; background:#fff; padding:20px 20px 10px; border- polmer :4px;) .callme small (position:absolute; right:10px; font-size:15px; cursor:pointer; )

Shranite kodo in jo preverite. Obrazec naj bo zdaj postavljen na sredino zaslona, ​​za njim pa mora biti prosojno zatemnjeno ozadje. Vse je v redu, a zadnja stvar, ki jo je treba dodati, je skript, ki bo odprl in skril ta obrazec, ko kliknete na potrebne gumbe.

Ta skript mora biti vstavljen v datoteko noge pred končno oznako telesa.

Ostajajo še zadnji dodatki in pojavni obrazec na WordPressu bo pripravljen. Dodajte slog display:none razredoma .callme in .bg-b. To je potrebno, da se obrazec ne prikaže na zaslonu, ko se spletno mesto zažene.

Z vami smo razpravljali o več možnostih za ustvarjanje obrazca za povratni klic. Upam, da ne boste imeli težav pri implementaciji obrazca na svoje spletno mesto. Če imate kakršne koli težave ali vprašanja, lahko vedno dobite nasvet v komentarjih.

POSODOBITEV 06.06.2018

V najnovejših različicah WordPressa skripti jQuery ne delujejo s simbolom $, zato morate to upoštevati in zamenjati $ z jQuery

Precej pogosto se pojavi težava, pri kateri obrazec od konca do konca na spletnem mestu preneha pošiljati na notranjih straneh. Če želite preprečiti, da bi se to zgodilo, podajte celotno let v datoteki sendmessage.php v upravljalniku. Na primer takole:

Url: "http://site.ru/sendmessage.php"

Vire prvih dveh oblik lahko prenesete tako

POSODOBITEV 7.4.2018

Zaradi številnih zahtev je bil obrazec za povratne informacije posodobljen. Zdaj upošteva potrditveno polje za soglasje za pošiljanje podatkov v skladu z zakonodajo Ruske federacije št. 152-FZ »O osebnih podatkih«, izboljšana je prilagodljivost kateri koli ločljivosti zaslona, ​​datoteke js in css so stisnjene.

Zdaj si lahko ogledate primer in prenesete vire posodobljenega obrazca za povratne informacije in pojavnega obrazca na spletu s pomočjo povezav.

Obrazec za povratne informacije za spletno mesto, ki vam ga bom pokazal, temelji na uporabi tehnologije Ajax. Ampak ne skrbite, tega vam ni treba vedeti, vse je že pripravljeno, vse kar morate storiti je, da namestite ta obrazec in ga prilagodite sebi!

Fantje, scenarij je že zdavnaj zastarel. Pri nekaterih deluje, pri drugih ne. In sem prelen, da bi to ugotovil, kaj šele posodobil. Torej testirajte po lastni presoji.

PHP obrazec za povratne informacije, poslan po e-pošti

to obrazec za povratne informacije na spletni strani je sam po sebi zelo funkcionalen, nanj je povezanih več vtičnikov, ki ustvarjajo atraktiven videz in preverjajo veljavnost (beri pravilnost) vnesenih podatkov. Ti vtičniki delujejo na veliko in mogočno! In imenujejo se takole:

1. JQTransform– vtičnik, ki vam omogoča, da polepšate naš obrazec za povratne informacije!

2. formValidator– in ta vtičnik preveri kontaktni obrazec za pravilnost vnesenih podatkov in, če se kaj zgodi, prikaže namige!

Za popolno delovanje tega obrazca bo uporabljen razred PHPMailer. Velja za enega najboljših!

Opomba za pametne:

Obrazec za povratne informacije za spletno mesto je mogoče narediti v HTML! Delovati pa bo začel šele s pomočjo PHP-ja! In nič drugega!

To sem jaz za tiste, ki iščejo obrazec za povratne informacije samo v HTML. Saj boš naredil, pa ne bo šlo!

Zato mora vaš podpirati PHP, za ta kontaktni obrazec pa mora biti PHP vsaj različice 5. Upam, da sem bil jasen? Še več, zdaj vsako običajno gostovanje podpira te pogoje!

Ta obrazec za povratne informacije sem izkopal na spletni strani www.tutorialzine.com, povezava vodi neposredno na izvirno stran, tj. spletna stran avtorja tega obrazca!

Vse je v angleščini, zato sva morala s Sašo malo poigravati, da sva rusificirala ta kontaktni obrazec in same vtičnike, ki so z njim povezani.

Bom iskren, dva dni smo se ubadali s tem »formalcem«, ker so se začele pojavljati razne napake in nismo želeli objaviti nedokončanega obrazca za povratne informacije, še posebej tako lepega! Torej, če ste ljubitelj tega, da vse naredite sami, in vam pride na pamet misel - da sami rusificirate to obliko, vam bom dal nekaj nasvetov, saj se ne boste omejili na preprosto prevajanje fraz:

1. Ta obrazec za povratne informacije je prilagojen buržoaziji in je bil prenesen od tam, tako da vam bo poslal krakozyabl namesto običajnih ruskih znakov. Razumeti kodiranje. In na splošno bodo vsi "pečati" povezani s tem!

2. Potrditveni skript na začetku ne razume naših črk, zato jih bo treba zapisati tam!

3. Tudi po teh korakih, če zadevo pisma navedete v ruščini, pismo prispe z zadevo - Brez zadeve (upam, da sem pravilno napisal), to je mogoče odpraviti, če določite kodiranje v datoteki razreda PHPMailer .

4. V izvirni obliki je bilo besedilo v vnosnih poljih stisnjeno na dno in ne na sredino. To je napaka vtičnika JQTransform.

No, zdi se, da je bilo vse napisano in opozorjeno. Gremo naprej!