Pagina de pornire a codului anti-spam html. Un exemplu simplu de generare a unui formular. Protectie spam. Beneficiile pluginului KAMA
Crearea unui formular părere Formular de feedback și spam prin e-mailDupă ce ați postat formularul de feedback pe site, adresa dvs. de e-mail Cutie poștală destul de curând începe să se umple nu numai mesaje utile, dar și o varietate de spam. Protecția împotriva acestui scandal a fost descrisă în articolul „Capcha în formularul de feedback”. Deoarece, în opinia mea, forțarea unui vizitator al site-ului să rezolve o combinație de litere și cifre distorsionate, adică un captcha, este nedreaptă sau, așa cum este la modă să spunem acum, o încălcare a drepturilor sale, vom lua în considerare alte modalități de a protejați-vă împotriva spam-ului provenit din formularul de feedback de pe site.
Metoda unu.
După cum știți, spam-ul dintr-un formular de feedback nu începe să sosească imediat, ci după un timp, numai după ce un spammer (un robot spammer) scanează site-urile de pe Internet și găsește pagina dvs. cu formularul. După aceasta, pagina este introdusă în baza de date și începe un atac sistematic asupra căsuței dvs. poștale. Prin urmare, trebuie să faceți dificil pentru spammeri să vă găsească pagina de formular. Cel mai simplu și mod eficient- schimba-i regulat numele. Și pentru a face și mai dificil pentru spammer, puteți organiza acest proces după cum urmează.
Deoarece programele de spam dezactivează de obicei execuția Scripturi JavaScript, atunci ne vom schimba pagina cu formularul de feedback astfel încât să nu aibă formularul în sine, dar s-ar deschide într-o fereastră mică separată cu folosind JavaScriptși, prin urmare, va fi inaccesibil robotului de spam:
textul linkului.
Puteți trimite un mesaj completând formularul de feedback.
Astfel, formularul de feedback în sine este conținut pe pagina mess.html și se deschide într-o fereastră separată cu lățime=500, înălțime=350 în stânga colțul de sus ecran. Apropo, acolo se va deschide și o pagină PHP cu rezultatul trimiterii unui mesaj (vezi articolul „Crearea unui formular de feedback pe site)”. Acum, când primiți spam din formularul de feedback, va trebui să redenumiți pagina mess.html și să schimbați linkul în javascript. Deoarece, de obicei, apariția spam-ului în e-mail începe la aproximativ 1-2 luni de la postarea unui formular de feedback pe site, nu va trebui să depui mult efort pentru a schimba adresele. Pentru a afișa formularul de feedback mai eficient într-o fereastră separată, puteți utiliza Pluginuri jQuery. Pentru a vedea cât de ușor este să faceți acest lucru, consultați articolul „Utilizarea jQuery pentru un formular de feedback”. Metoda a doua.
Permiteți-mi să vă reamintesc un alt mod de a reduce spamul, care a fost menționat mai devreme. Creați un câmp obișnuit de introducere a textului în formularul de feedback, dar îl faceți ascuns (style="display:none" ). Utilizatorii nu văd acest câmp și nu îl completează, dar roboții îl pot completa, deoarece încearcă să completeze toate câmpurile. Într-un program PHP, trebuie să verificați acest câmp înainte de a trimite un mesaj. Dacă este plin, atunci este un robot dacă este gol, atunci este un vizitator „în direct”. Astfel, nu solicităm vizitatorului site-ului să rezolve captcha, ci să analizăm comportamentul robotului spammer. Această tehnică oferă mai mult protectie eficienta decât primul, iar utilizarea lui sub formă de feedback nu va fi niciodată de prisos.
Pentru a implementa această metodă, adăugați oriunde în interiorul etichetei... un câmp ascuns cu un nume, de exemplu, spam:
.
În programul PHP, vom verifica acest câmp folosind constructul if. Dacă câmpul este gol, atunci se execută blocul de trimitere a scrisorii, cuprins între acolade, evidențiat cu roșu aldine. În caz contrar, acest bloc este omis și programul este părăsit fără a trimite o scrisoare (ieșire):
De asemenea, ar trebui să țineți cont de faptul că roboții spammer scanează în primul rând paginile care au de obicei un formular de feedback. Astfel de pagini au cel mai adesea numele contacts, kontakt, zakaz și altele similare. Prin urmare, este recomandabil să evitați astfel de nume „spunătoare” pentru paginile cu formular.
Metodele luate în considerare se pot reduce semnificativ spam prin e-mail, provenind de pe site-ul dvs. Desigur, aceste metode nu protejează împotriva spamului trimis direct către dvs Adresa de e-mail, mai ales dacă este inclus în baza de date spammer. Deoarece adresa din formularul de feedback este ascunsă într-un fișier PHP separat, este destul de dificil de determinat. Prin urmare, creați o cutie poștală separată pentru scrisorile de pe site și nu folosiți adresa acesteia în altă parte.
Bună, dragi prieteni. După cum știți, nu prea îmi place să îmi încarc blogul cu pluginuri, despre care am scris de mai multe ori. Și astăzi vom vorbi despre crearea unui formular de feedback fără un plugin și chiar cu protecție împotriva spamului.
Cred că nu este nevoie să vorbim despre motivul pentru care aveți nevoie de un formular de feedback. Fiecare decide singur dacă un astfel de formular este necesar pe site-ul/blogul său sau nu. Și scopul său este deja clar din nume. Dar vă voi spune cum să creați un astfel de formular pe un site web sau blog fără un plugin.
Ce este bun la acest formular?În primul rând, este ușor de instalat și configurat.
În al doilea rând, nu încarcă serverul deloc. De ce să păstrați un plugin suplimentar de dragul unui formular de feedback.
În al treilea rând, formularul are încorporat protecție SPAM.
Cum este organizată protecția anti-spam?După cum vă amintiți, am publicat recent un articol în care vorbeam despre cum să faceți un câmp ascuns în formularul de comentarii și să configurați un filtru. Deci, același principiu este implementat sub formă de feedback. Există un câmp ascuns, atunci când o persoană decide să trimită un mesaj, completează doar câmpurile vizibile și mesajul este trimis. Când un spambot completează un formular, completează toate câmpurile din formular, inclusiv cele ascunse, iar mesajul nu este trimis. Filtrul este configurat pentru a verifica dacă un câmp ascuns este completat.
Cum se instalează un formular de feedback pe un site webPasul 1: Creați un fișier de gestionare.
Acest fișier va fi responsabil pentru trimiterea mesajelor de pe site. Deci, să deschidem Editor de notepad++ sau cel puțin un blocnotes. Și introduceți-l în fișier nou- aici este codul:
Indicați linkul în care persoana va fi redirecționată după trimiterea mesajului și, de asemenea, nu uitați să indicați adresa de e-mail, i se vor trimite scrisori. Salvați fișierul în format php. Puteți folosi propriul nume pentru fișier, dar am numit fișierul message.php . Acest nume de fișier și calea către acesta vor trebui introduse în formularul propriu-zis în viitor.
Odată creat fișierul, acesta trebuie să fie încărcat pe serverul pe care este stocat site-ul dvs. Puteți încărca fișierul în folderul rădăcinăși atunci nu va trebui să schimbați nimic, chiar dacă schimbați tema.
Sau puteți încărca fișierul în folderul cu tema și apoi îl puteți edita direct din panou Administrare WordPress, dar dacă schimbați tema și setările va trebui să le schimbați.
Deci, să ne uităm la un exemplu de încărcare a unui fișier în folderul cu teme:
/wp-content/themes/TEMA DVS./message.php
Puteți face acest lucru folosind manager de fișiere hosting sau prin .
Pasul 3. Creați un formular pe pagină.
Am creat partea invizibilă, să trecem la partea vizibilă. Acum trebuie să creați un formular de feedback pe pagină. Pentru a instala formularul, trebuie să selectați o pagină și să inserați codul de mai jos în ea. De regulă, aceasta este pagina de contact, dar poate fi orice altă pagină.
Se deschide panoul administrativ WP – „Pagini” – selectați sau creați o pagină pentru a găzdui formularul.
Deschideți pagina în modul editor de textși lipiți-l în locul potrivit - acesta este codul:
Formular de feedback Numele tău E-mail Subiectul mesajului Textul mesajului:
Asigurați-vă că schimbați calea către fișierul handler. Acest cod nu aplică niciun stil de design, există doar câteva dintre cele mai necesare. Acest formular va arăta astfel:
Pasul 4: Aplicați un stil formei.
Clasele de design sunt implementate în toate elementele de formular și puteți personaliza designul pentru a se potrivi oricărui design. Dar acest lucru va necesita cunoștințe de bază despre CSS și HTML.
Ca exemplu, voi da stilurile pe care le-am folosit pentru design. Copiați aceste stiluri și lipiți-le în fișierul Foaia de stil (style.css).
/*stil pentru întregul formular*/ .form_kontact( background-color: rgba(0, 120, 201, 0.6); /*culoarea fundalului pentru un formular cu transparență*/ chenar: 1px solid #1576D3; /*culoarea chenarului pentru formularul* / border-radius:5px;) /*rotunjirea colțurilor formularului*/ /*stil pentru câmpurile de contact*/ .input_kontact(width: 29%; /*field width*/ padding: 5px; /*inner padding*/ border-radius : 5px /*rotunjirea colțurilor câmpului*/ margine: 1px solid #1576D3 /*culoarea marginii câmpului*/ margine: 5px; marginea*/ ) /*stil pentru textul mesajului text*/ .kontakt (marja: 5px; /*marja externă pentru text*/ ) /*stil pentru câmpul text al mesajului*/ .text_kontakt(lățime: 96% /*lățimea câmpului */ înălțime: 100% /*înălțime de câmp*/ padding: 5px; obiect bloc, barele de defilare apar dacă este necesar*/ margin-left: 5px /*marginea din stânga exterioară*/ ) /*stil pentru butonul*/ .submit_kontact(background: #0E71F4; /*button color* / padding: 5px; /*inner padding*/ border: none /*disable borders*/ border-radius: 5px /*rounding corners*/ box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 5px 0 rgba(0); ,0,0,.15); /*parametrii de umbră*/ margin-left: 5px; :hover(background:#0671BE; /*buton color*/ padding: 5px; /*padding*/ chenar: niciunul; /*dezactivați chenarele*/ raza-chenar: 5px; /*colțuri rotunjite*/ box-shadow: inset 0 6px 3px rgba(120,200,230,.5),0 3px 4px rgba(0,0,0,.15); /*parametri de umbră*/ culoare: #fff; /*culoarea fontului*/ text-decor: niciuna; /*fără subliniere pe link*/ margin-left: 5px; /*marginea stângă*/ cursor: pointer; /*cursor de mână*/ )Ca rezultat, formularul va arăta astfel:
Dacă săpați mai adânc în codul formularului, puteți face formularul să arate astfel:
Aceasta completează crearea unui formular de feedback fără un plugin și cu protecție împotriva spamului. Tot ce trebuie să faci este să urmezi instrucțiuni pas cu pasși încorporați acest formular pe blogul dvs.
Si pentru exemplu clar Vă sfătuiesc să urmăriți tutorialul video unde vă arăt cum se instalează formularul și cum funcționează.
De asemenea, prieteni, pentru a ușura sarcina, vă sugerez să descărcați fișierele sursă.
Asta e tot pentru azi, iti doresc mult succes! Și ține minte, mă bucur mereu să te văd pe blogul meu :) Ne vedem în articole și videoclipuri noi.
Astăzi vom lucra la creare HTML frumos formular de feedback pentru site, rulând pe PHP și având încorporată protecție antispam. Nu aveți nevoie de cunoștințe speciale, va fi suficient elementele de bază ale htmlși logica elementară. Vă voi furniza fișiere gata făcute pe care le puteți introduce în site fără modificări sau adaptați nevoilor dumneavoastră.
Am scris recent un articol despre cum să faci unul folosind pluginul Contact Form 7. De asemenea, poți face cu ușurință un formular de feedback pe Joomla și alte CMS populare.
Dar ce ar trebui site-urile care nu folosesc CMS popular? – Rămâne doar să faci totul manual.
În plus, utilizarea feedback-ului fără pluginuri este posibilă și pentru WordPress. Pluginurile inutile creează o sarcină semnificativă pe servere, iar eliminarea acestora vă permite să accelerați site-ul.
Comanda de instalare și configurare formă gata făcută pentru 500 de ruble puteți aici (aceasta este pentru cei care sunt prea leneși să lucreze cu mâinile lor sau nu au suficientă îndemânare).
Cum funcționează formularul de feedback HTMLFormularul nostru va avea 5 câmpuri pentru introducerea datelor - nume, adresa de e-mail, număr de telefon, adresa site-ului web, textul mesajului (le puteți șterge sau modifica singur).
Toate câmpurile, cu excepția adresei site-ului web, vor fi obligatorii (puteți configura acest lucru singur).
Pentru câmpurile cu Adresa de e-mail iar site-ul va avea loc verificare obligatorie corectitudinea introducerii datelor.
Forma finală de comunicare va arăta astfel:
Pentru munca Formular de contact, creat în html, necesită 3 elemente.
Primul este responsabil pentru structura formularului în sine, tipul și numărul câmpurilor de introducere a datelor. Asta este normal cod html.
Al doilea este responsabil de prelucrarea datelor pe care utilizatorul le introduce în câmpurile formularului. Stabilește ce, unde și sub ce formă să se trimită după ce butonul de trimitere al mesajului este apăsat. Pentru implementare este folosit un script PHP special.
Al treilea este responsabil pentru aspect. Setează dimensiunea și locația câmpurilor de introducere a datelor, adaugă diverse culori si efecte. Toate acestea sunt stabilite de stilurile CSS.
Versiunea demo a formularului
Vă vom ghida prin configurarea fiecăruia dintre aceste elemente pas cu pas.
Crearea unui layout HTMLPentru a nu face articolul prea lung și pentru a nu adăuga fiecare element separat, voi furniza html complet cod, iar mai jos voi descrie fiecare bloc și posibilele modificări.
Pentru a desemna formularele în HTML, se folosește o etichetă, în interiorul căreia sunt completați parametrii necesari.
Nume:
E-mail: Format corect "[email protected]"
Telefon: format corect „+7-123-4567890”
Site: format corect „http://someaddress.com”
Mesaj text:
Trimite un mesaj
Nume:
E-mail:
Telefon:
Formatul corect este „+7-123-4567890” Site:
Formatul corect este „http://someaddress.com” Mesaj text:
Trimite un mesaj
|
Să începem cu prima linie.
class="contact_form" – specificați clasa pentru a seta stiluri CSS în viitor.
action=”contact-form.php” – specificați numele fișierului cu scriptul care va procesa datele formularului și va trimite mesajul. Dacă fișierul se află în același folder cu pagina cu formularul, atunci este suficient să indicați doar numele fișierului dacă se află într-un folder diferit, atunci va trebui să indicați calea către fișier.
Urmează 4 blocuri
Responsabil pentru afișarea câmpurilor pentru introducerea datelor, numele indică clar cine este responsabil pentru ce. Câmpurile în sine sunt afișate folosind etichete, în cadrul cărora sunt setate următoarele caracteristici:
Tip – responsabil pentru tipul de date introduse, text – text simplu, e-mail – adresa de e-mail, astfel de câmpuri sunt verificate automat pentru corectitudine (@ trebuie să fie prezente), tel – număr de telefon, url – adresa site-ului web.
Nume este numele propriu al elementului în sine, este necesar ca scriptul să știe să folosească datele fiecărui câmp. Dacă creați mai multe câmpuri de același tip, atunci trebuie să atribuiți fiecărui câmp propriul nume.
Substituent este un tooltip situat în interiorul câmpului, text care înlocuiește câmpul gol al elementului. Poate fi schimbat sau șters, nu afectează funcționarea formularului.
Necesar – acest parametru indică faptul că câmpul este obligatoriu. Puteți decide singur ce elemente sunt necesare și care nu.
pattern="(http|https)://.+” – această construcție este folosită pentru a verifica corectitudinea câmpului site-ului, indicând faptul că adresa trebuie să conțină http://text sau https://text, în caz contrar va exista eroare.
Unele câmpuri au un sfat explicativ care apare atunci când selectați un articol. Este afectat de , unde form_hint este clasa elementului (proprietățile sale sunt scrise în CSS). Puteți seta orice text în sfatul explicativ pentru fiecare câmp al formularului de contact. Dacă nu aveți nevoie de o astfel de caracteristică, eliminați întreaga etichetă.
Câmpul de introducere a mesajului în sine este marcat cu o etichetă, în care cols specifică numărul de caractere din lățimea câmpului, iar rândurile numărul de linii.
Anti-spam – câmp invizibil numit name=bezspama. Are stilul display:none - asta înseamnă că câmpul este invizibil pentru oameni, dar roboții îl vor completa automat.
Iar elementul final al oricărui formular este butonul trimite mesaj, este specificat de etichetă, care are propria sa clasă de personalizare aspectși tastați „trimite”.
Pentru a adăuga sau elimina câmpuri, eliminați-le pe cele inutile sau introduceți altele noi prin analogie cu cele existente, specificând toate proprietățile și numele pentru acestea.
Decorarea cu stiluri CSSDacă te uiți la rezultatul într-un browser, vei vedea ceva stângaci și neatractiv. Pentru ca noi să reușim formă frumoasă feedback, va trebui să lucrați la stilurile acestuia (html nu va fi suficient).
Dacă cunoașteți CSS, atunci puteți seta designul pentru toate elementele de formular fără probleme, nici măcar nu aveți nevoie de ajutorul meu.
Dacă nu sunteți familiarizat cu stilurile, atunci vă voi oferi pur și simplu un fișier gata făcut în care totul este deja scris în așa fel încât forma dvs. să fie identică cu cea din exemplu.
Puteți conecta stiluri în două moduri:
Fișierele de stil sunt conectate folosind următorul cod plasat în interior. Dacă fișierul cu stiluri (styles.css) nu se află în același folder cu pagina html, apoi scrieți calea completă către acesta.
În fișierul de stil pe care l-am dat, fiecare element este etichetat, astfel încât să puteți face orice modificări - schimbați culorile, dimensiunile, formele, efectele. Având cele mai de bază cunoștințe, le puteți edita cu ușurință.
Configurarea codului PHP (protecție anti-spam adăugată)Ca și în cazul stilurilor, vă voi da codul care se ocupă formular HTML feedback și anti-spam. Acest fișier este personalizat pentru o anumită configurație și dacă doriți să setați câmpuri noi sau să le eliminați pe cele existente, va trebui să-i faceți modificări. Prin urmare, vă voi spune cum funcționează, astfel încât să înțelegeți ce trebuie schimbat.
Pentru site-urile care utilizează codificarea Windows-1251 și versiunea php 5.4+, va trebui să adăugați o adăugare la cod legată de funcția htmlspecialchars. Îl voi arăta mai jos. În caz contrar, câmpurile goale vor apărea în locul alfabetului chirilic.
Amintiți-vă, în proprietățile formularului (în fișier html) am specificat parametrul action=”contact-form.php”. Trebuie să creați un fișier numit contact-form.php și să plasați codul de mai jos în el.
Ultimele note
|
