Telefona atsauksmju veidlapa. Mēs izveidojam atsauksmju veidlapu PHP. Septiņi padomi, kas jāatceras

Jebkurā vietnē ir jābūt atsauksmju veidlapai, tāpēc agri vai vēlu katrs no mums domā par tādas izstrādi. Internetā ir diezgan daudz iespēju, daži izmanto populārus spraudņus, daži izmanto savas personīgās izstrādes, bet lielākā daļa meklē gatavus risinājumus. Jebkurā gadījumā mūsu atsauksmju veidlapa vietnei darbosies un funkcionēs, un parunāsim par to visu secībā.

Tātad, sāksim, kā vienmēr, ar parasto veidni - html. Vispirms mums ir nepieciešama veidlapa ar vairākiem laukiem. Skaidrības labad un visu veidlapu standartam mēs izmantosim 3 laukus. Tie. tas būs vārds, e-pasts un tālrunis.

Katrai ievadei ir savs unikālais nosaukums, tas mums būs vajadzīgs vēlāk, lai nosūtītu ziņojumus. Varat arī brīvi pievienot savus laukus un ne tikai ievadīt, bet arī atlasīt teksta apgabalu. Tikai neaizmirstiet piešķirt katram savu vārdu, ko izmantosim, sūtot informāciju pa e-pastu. Ērtības labad es katram laukam pievienoju nepieciešamo atribūtu, pateicoties kuram pārlūkprogramma neļaus lietotājam sūtīt tukšas vērtības un informēs viņus par nepieciešamību tās aizpildīt.

Kad forma ir gatava, varat to nedaudz pārveidot. Šeit viss ir atkarīgs arī no jūsu vajadzībām un fantāzijām. Skaidrības labad es katram elementam ieskicēju dažus stilus, lai viss neizskatītos tik plakans. Bet, ja esat slinks vai nezināt, kā to izdarīt, varat izmantot manu iespēju:

Forma (maksimālais platums: 400 pikseļi; platums: 100%; piemale: 0 automātiski; ) ievade (kastes izmērs: apmales lodziņš; displejs: bloks; apmale: nav; lodziņa ēna: ielikts 0px 0px 4px 1px rgba(0, 0, 0, 0,11); polsterējums: 10 pikseļi 20 pikseļi; platums: 100%; piemale: 10 pikseļi 0; kontūra: nav; ) ievade (fons: sarkans; apmale: nav; lodziņa ēna: 0px 2px 0 1px #C50909; apmale- rādiuss: 5 pikseļi; krāsa: balta; teksta pārveidošana: lielie burti; fonta svars: 600; platums: 200 pikseļi; kursors: rādītājs; pāreja: 0,3 s; ) ievade: kursors (fons: melns; lodziņa ēna: 0 pikseļi 2 pikseļi 0 1 pikseļi melns ;)

Šeit ir vērts izprast sīkāk vai drīzāk izvēlēties sev piemērotāko iespēju. Lai nosūtītu ziņas pa e-pastu, mums būs jāizmanto php valoda, t.i. izveidojiet atsevišķu failu, kurā mēs pārsūtīsim visus šos datus. Bet mēs šo metodi šeit neapskatīsim, jo ​​tas ir daudz skaistāk, ja viss notiek bez lapas atkārtotas ielādēšanas. Tāpēc apskatīsim datu sūtīšanu, izmantojot ajax.

Ja vēlaties visu darīt vecmodīgi, jums būs nedaudz jāpielāgo augšējais html un jāiestata veidlapas metodes atribūta vērtība (post or get). Tas viss ir atkarīgs no tā, kā vēlaties pārsūtīt datus no veidlapas. Un arī neaizmirstiet uzrakstīt darbību, kas norādīs ceļu uz php failu.

Un mēs izmantosim progresīvāku metodi un nosūtīsim datus, nepārlādējot lapu, un, saņemot atbildi no servera, mēs dosim lietotājam ziņojumu par veiksmīgu darbību vai kļūdu. Tomēr mums būs nepieciešami arī 2 faili, teiksim, contact.php un custom.js.

Pirmkārt, neaizmirstiet pieslēgt Jquery bibliotēku, ar tās palīdzību mēs vairākas reizes samazināsim kodu un varēsim viegli veikt jebkuras darbības, izmantojot gatavus risinājumus.

$(.form").submit(function() ( var str = $(this).serialize(); $.ajax(( tips: "POST", url: "contact.php", dati: str, panākumi : function(msg) ( if(msg == "ok") ( alert("Ziņojums nosūtīts"); ) else ( alert("Kļūda! Iespējams, esat nepareizi aizpildījis laukus."); ) ) )); return nepatiesi; ) );

Tagad sapratīsim rīcības plānu un to, kāpēc mums ir vajadzīgas visas šīs bibliotēkas un faili. Kad lietotājs noklikšķina uz pogas Iesniegt, mums ir iesniegšanas notikums, kuru mēs ierakstīsim custom.js un pamatojoties uz kuru mēs saņemsim visus datus no formas un nodosim to contact.php failam. Šeit mēs vēlreiz pārbaudām, vai mūsu lauki ir tukši (lai izvairītos no vēl vienas surogātpasta iespējas), nosūtām ziņojumu uz e-pastu un ziņojam lietotājam par rezultātiem, kas tiek nosūtīti kā atbilde uz custom.js.

If (trim($_POST["mfbPhone"]) == "") ( atbalss "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail" "]); $txtphone = trim($_POST["mfbPhone"]); // no kura $fromMail = " [aizsargāts ar e-pastu]"; // Šeit ievadiet savu e-pastu $emailTo = " [aizsargāts ar e-pastu]"; $subject = "Atsauksmes"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "No: Piemēra veidlapa\n"; $headers . = "Satura veids: teksts/vienkāršs; charset="utf-8"\r\n"; $headers .= "MIME versija: 1.0\r\n"; $headers .= "Datums: ". date("D, d M Y h:i:s O") ."\r\n"; // burta pamatteksts $body = "Saņemta vēstule no vietnes ".$site." \n\nVārds: ".$txtname."\nTālrunis: ".$txtphone."\ne-pasts: ".$txtemail."\nZiņojums: ".$txtmessage; pasts($emailTo, $subject, $body, $headers); echo "ok";)

Šis ir visvienkāršākais piemērs tam, kā darbojas saziņas veidlapa. Ir daudz iespēju, kā modificēt čeku failu PHP, izveidot savas klases utt. Bet mūsu uzdevums bija izveidot vienkāršu un praktisku piemēru, ko varat izmantot savā vietnē.

demo

failus

Tā kā izmantojat WordPress emuāru, jūs, iespējams, esat gatavs un ļoti vēlaties izmantot visu veidu spraudņus, it īpaši, ja esat pilnīgs programmēšanas un izkārtojuma speciālists. Un es jūs par to nevainoju, un skaidrības labad varu pat vienu no tiem piedāvāt jūsu uzmanībai. Šīs rindkopas mērķis nav ieteikums, bet tikai piemērs, jo vairākos projektos esmu izmantojis kontaktformas 7 spraudni.

Tas ir ļoti viegli konfigurējams un gandrīz vienmēr darbojas nevainojami. Ja jums ir nepieciešams izveidot savu unikālo dizainu, varat to izdarīt. Viss, kas jums jādara, ir jāpievieno nepieciešamie lauki konstruktorā, jāiztulko un jāmaina paziņojumi par kļūdām un veiksmīgu nosūtīšanu savā veidā, un viss. Pēc tam nokopējiet īskodu un ielīmējiet to vajadzīgajā veidlapas vietā.

Man nekad nav bijušas problēmas ar spraudni, un, ja jums ir nepieciešams ātrs un gatavs risinājums, tad tas ir tas. Ja jums ir savas prasības formai funkcionalitātes un dizaina ziņā, tad labāk izmantot pirmo iespēju, kas prasa zināšanas šajā nozarē.

Sveiki, dārgie draugi un emuāra viesi! Atsauksmes par vietni ir viena no nozīmīgākajām funkcijām, kas ļauj emuāru autoram sazināties ar saviem apmeklētājiem. Taču ir viens āķis — spraudņi, kas parāda atsauksmes par vietni, sver daudz!

Jau kādu laiku esmu aizņemts, lai padarītu savu emuāru vieglāku, un nolēmu atbrīvoties no nevajadzīgiem spraudņiem, kas to noslogo ar savu svaru un neļauj lapām ātri ielādēties. Un, pirmkārt, mana izvēle krita uz atsauksmju veidlapu, vai drīzāk uz spraudni, kas to rādīja manā vietnē “Saziņas veidlapa 7”, un tam bija nepieciešams arī otrs spraudnis, kas rādīja captcha “reCaptcha”. Tā es nolēmu atbrīvoties no diviem diezgan nozīmīgiem spraudņiem uzreiz, izmantojot atsauksmju veidlapu, kurai nav nepieciešami spraudņi un kuru ir viegli instalēt vietnē. Tagad es jums par to pastāstīšu un, protams, ļaušu lejupielādēt failus, lai jūs varētu izveidot līdzīgas atsauksmes savai vietnei...

Un tā, beidzot no savas vietnes noņēmu spraudņus atsauksmju veidlapas izveidei, es sāku izveidot vienkāršu un uzticamu atsauksmju veidlapu, neizmantojot spraudņus. Un tas ir tas, ko es saņēmu:

Varat skatīt un pārbaudīt manas atsauksmju veidlapas funkcionalitāti vietnē “ ” lapā. Raksti manā kontaktformā mājaslapā un es tev atbildēšu!

Tagad pāriesim pie vissvarīgākās lietas un izveidosim savas atsauksmes par vietni neatkarīgi no spraudņiem...

Viss, kas mums tam nepieciešams: mana emuāra vietne ar rakstu “Atsauksmes par vietni”, teksta redaktors un, protams, jūsu vēlme vietnē izveidot savu kontaktformu, lai atvieglotu to atbrīvošanos no nevajadzīgiem un smagiem spraudņiem!

Šeit ir vietnes atsauksmju veidlapas HTML kods, kuru varat ielīmēt savā vietnē vai emuārā jebkurā vietā. Man šī ir kontaktu lapa:

Atsauksmes forma

Kāds ir tavs vārds

E-pasts

Ziņojuma tēma

Nosūtīt ziņu

Lūdzu, ņemiet vērā dažas svarīgas lietas, kas jums jādara šajā kodā:

Šis fails ir jāaugšupielādē savā mitināšanā vietnes programmas saknes mapē! Bet vispirms pārbaudiet, vai esat to salabojis vai nē!

Rindā, kurā ir rakstīts teksts “JŪSU HOSTINGA E-PASTA ADRESE”! “, jums tas ir jālabo uz jūsu e-pasta adresi, kas atrodas jūsu mitināšanas tīklā. Ja jūsu mitināšanā nav e-pasta konta, noteikti izveidojiet to. Tas nav grūti!

Tagad jums ir jāpievieno skripts, kas savieno vietnes jQuery bibliotēku, lai pareizi darbotos mūsu “atsauksmju par vietni” sistēma. Vispirms pārbaudiet savā vietnē, iespējams, šis skripts jau ir instalēts, ja nezināt, kā to izdarīt, uzdodiet jautājumu atbalstam savā mitināšanā.

Šeit ir skripts:

Vai arī varat pievienot šo funkciju savam WordPress functions.php failam:

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

Tas aizstāj skriptu un ietver arī jQuery bibliotēku WordPress vietnē.

Tagad mēs savā vietnē savienojam skriptu, kas darbosies kopā ar mail.php failu, nosūtot jūsu vēstules. Lai to izdarītu, mums ir jāizveido js fails, piemēram, contact.js, un jānosūta tas uz jūsu vietni mapē ar jūsu aktīvā motīva skriptiem, ko sauc par js. Ja jūsu vietnē tā nav, izveidojiet to!

Šeit ir skripts:

JQuery(document).ready(function($) ( $("#contact").submit(function() ( var str = $(this).serialize(); $.ajax(( tips: "POST", url : "YOUR DOMAIN/wp-content/themes/YOUR THEME/mail.php", dati: str, panākumi: function(msg) ( if(msg == "OK") ( rezultāts = "Ziņojums nosūtīts"; $(" #fields").hide(); ) else (result = msg;) $("#note").html(rezultāts); ) )); return false; )); ));

Gandrīz pabeigts! Tagad mums tikai jāaugšupielādē stili jūsu CSS failā, kas ir atbildīgs par vietnes motīva stiliem, mūsu mitināšanā. Ja tas nav izdarīts, mūsu jaunizveidotās atsauksmes par vietni nebūs skaistas un vienkrāsainas.

Šeit ir vietnes atsauksmju veidlapas stila kods:

Veidlapa 0 0 3px #BCEF89; apmales krāsa: #BCEF89!svarīgi; fons: #fff url(images/valid.png) bez atkārtošanas 98% centrā; ) #contact textarea:required:valid ( box-shadow: 0 0 3px #BCEF89; apmales krāsa: #BCEF89!svarīgi; ) #kontakta ievade:fokuss:nederīgs ( kastītes ēna: 0 0 3px #FFDF97; apmales krāsa: #FFDF97!svarīgi; fons: #ffff url(attēli/nederīgs. png) no-repeat 98% center; ) #contact textarea:focus:invalid ( box-shadow: 0 0 3px #FFDF97; apmales-color: #FFDF97!important; ) .err ( apmale: 1px solid #ff8c00; polsterējums: 10 pikseļi; fons: #FFDF97; teksta līdzinājums: pa kreisi; apmales rādiuss: 3 pikseļi; ) .ok (apmale: 1px #BCEF89 cieta; mala-apakšā: 15px; polsterējums: 10px; fons: #f5f9fd; teksta līdzināšana: centrā ; apmales rādiuss: 3 pikseļi; ) #autors, #e-pasts, #url (platums: 30%; polsterējums: 5px; apmales rādiuss: 5px; apmale: 1px ciets #e5e5e5; ) #komentārs ( polsterējums: 5 pikseļi; apmales rādiuss: 5 pikseļi; apmale: 1px ciets #e5e5e5; pārpilde: auto; ) #iesniegt ( fonta svars: 400; fons: #393; fonta izmērs: 15 pikseļi; krāsa: #fff ; polsterējums: 10 pikseļi 50 pikseļi; apmale: nav; kursors: rādītājs; )

Vienkārši nokopējiet tos un nosūtiet uz vietnes aktīvā motīva failu style.css. Ja pēc tam vēlaties mainīt krāsas un formu, bet tas ir paredzēts tikai pieredzējušiem lietotājiem!

Tagad mūsu atsauksmes par vietni ir pilnībā gatavas lietošanai. Izmēģiniet to un izbaudiet tā darbu!

Tas ir viss!

Ja jums patika šis materiāls? Pēc tam noklikšķiniet uz sociālajām pogām, abonējiet emuāra atjauninājumus un rakstiet savu komentāru zemāk!

Sveicināts, dārgais lasītāj, šodien esmu jums sagatavojis garšīgu html atsauksmju veidlapu, kas darbojas bez lapas atkārtotas ielādēšanas, izmantojot Ajax tehnoloģiju + spēcīgu trigeri, kas motivēs jūsu apmeklētājus izmantot formu. Mana emuāra lasītāji ļoti aktīvi apsprieda manu iepriekšējo rakstu par galveno lapu, tagad mēs izvērtējam un skatāmies pabeigto jauno formu. Viss nepieciešamais rakstā pievienots pirmkods un demonstrācija, mēs arī analizēsim darba un savienojuma struktūru.

UPD: kļūda ar nosaukuma kodējumu tēmas rindā ir novērsta. Tagad viss tiek parādīts pareizi. Mēs pateicamies lasītājai (Jekaterina Karačeva)

Pati veidlapas formātā ir iekļauts arī apdarinātāja fails PHP, turklāt darbam būs nepieciešama jquery bibliotēka un skripti, bet vispirms es to nelādēšu pārāk ilgi - pāriesim uz apskatu un mūsu atsauksmju analīze.

Mūsu veidlapa izskatās šādi:

Kāda te jēga? Labajā pusē ir tāda forma, bet kreisajā pusē izveidoju īpašu bloku, kas mudinās Jūsu apmeklētāju nekavējoties ievadīt savu kontaktinformāciju! Noslēpums ir vienkāršs: vai kreisajā blokā redzat datumu un laiku? Šodienas datums tiks rādīts visu laiku, laika gaitā šo divu stundu diapazons tiek aprēķināts no pašreizējās stundas, pieņemsim, ja jūsu laiks tagad ir 13:14, tad stundu diapazons būs: no 12 līdz 14. Paskaties, kā tas strādā)))

Apmeklētājs redzēs: oho, šodien ir atlaide, un es biju tieši laikā, ir arī atlaide! Tas jāņem nekavējoties! – Tas ir mūsu sprūda.

Es lejupielādēju html atsauksmju veidlapas pirmkodu, apskatīju demonstrāciju - domāju, ka esmu spēlējis pietiekami)) Tagad par vissvarīgāko lietu, darbības principu:

Lauki ievades formā tiek pārbaudīti kontakt.php apdarinātāja failā.Zemāk programmas koda uzskaitījumā var redzēt, ka pašā formā parādās ziņojums par kļūdām un veiksmīgu vēstules nosūtīšanu, tā izskatās pēc nosūtīšanas:

Ievietojiet savu e-pastu 52. rindā, lai visas vēstules tiktu nosūtītas uz norādīto e-pastu.