Web design și optimizare pentru motoarele de căutare

Bună ziua, dragi cititori ai site-ului blogului. Astăzi vreau să vorbesc despre modalități de a crea formulare părere, comandă, contact și alte tipuri de care un webmaster ar putea avea nevoie pentru a organiza o comunicare convenabilă cu vizitatorii sau clienții săi.

Este clar că atunci când utilizați Joomla și WordPress, problema feedback-ului sau a comenzii poate fi rezolvată folosind diverse extensii sau plugin-uri, dar există metode care sunt potrivite pentru absolut orice proiect construit pe ambele HTML pur, și folosind (scripturi, cms, constructori și generatori de formulare de feedback).

Deși, există soluții care nu necesită suport PHP și vor fi menționate și în acest articol. Nu vor exista descrieri deosebit de detaliate ale instalării și configurării în acest articol, deoarece aceasta este doar o prezentare generală a opțiunilor disponibile care pot fi găsite acum pe Internet.

Aș fi extrem de recunoscător dacă ați furniza în comentarii exemplul dvs. de creare a sistemelor de feedback (de preferință originale, frumoase și funcționale) cu un link către descriere și pagina cu un exemplu (sunt încă în proces de a găsi soluția ideală).

Formulare de feedback pentru Joomla și WordPress

Să vedem cum poți organiza feedback-ul în Joomla și WordPress mijloace standard sau folosind extensii.

Joomla are deja o opțiune implicită care implementează această funcționalitate, despre setările căreia puteți citi la link-ul furnizat. De regulă, distribuția acestui motor include implicit cele mai stabile extensii, dar nu întotdeauna pe cele mai funcționale. Iar dezvoltatorii nu dorm, iar soluții noi, mai funcționale apar periodic.

Deci, puteți descărca un modul separat de feedback pentru Joomla numit Contact rapid, care vă poate oferi noi caracteristici și funcționalități (vezi demonstrația). Puteți citi despre configurarea și capabilitățile acestui modul. In afara de asta, componenta standard Joomla nu are suficientă flexibilitate pentru a implementa feedback și nu permite utilizarea protecției împotriva spamului (captcha) și, de asemenea, nu vă permite să creați mai multe formulare de contact diferite pe site.

Aceste probleme sunt rezolvate prin utilizarea unei componente alternative pentru acest motor numită aiContactSafev, care vă permite să creați orice număr de formulare de feedback pe site (le puteți conecta la diferite Adresa de e-mail am) și are capacitatea de a adăuga un câmp de încărcare a fișierelor, precum și orice alte tipuri de câmpuri.

Verifică completarea corectă a câmpurilor și afișează mesaje de eroare și, de asemenea, aiContactSafev stochează o arhivă a tuturor datelor trimise și vă permite să o vizualizați din .

Această componentă include un captcha foarte flexibil (introducerea unui cod la trimiterea datelor pentru a vă proteja împotriva spam-ului). Poate fi descărcat gratuit pentru versiuni diferite Jumla, a.

Acum să vorbim despre WordPress. Personal, nu m-am hotărât încă în acest sens și am un e-mail obișnuit pe pagina mea de contacte, care în general nu este foarte tare, pentru că a fost de mult în baza de date de spam și dacă nu aș fi putut leagă-l la unul obișnuit, apoi potopul de spam m-ar fi copleșit cu mult timp în urmă.

Dar tăierea spam-ului mailului Google funcționează bine și chiar prea bine, pentru că scrisorile voastre, dragi cititori, cad uneori sub mâna lui fierbinte, pentru care, luând acest moment, îmi cer scuze.

În general, acesta este principalul avantaj al formularului de feedback - vă permite să vă păstrați adresa postala pentru spammeri. Ei bine, de asemenea, este de obicei conceput într-o carcasă destul de plăcută, ceea ce poate adăuga un plus atitudinii utilizatorilor față de proiectul dvs., acest lucru este valabil mai ales pentru resursele comerciale, când o comandă convenabilă sau un formular de feedback poate crește conversia (venitul).

De fapt, despre WordPress. Există un plugin foarte popular și foarte puternic numit Formularul de contact 7. Popularitatea lui este pur și simplu în afara topurilor, ceea ce înseamnă că există ceva special la el. Adevărat, pentru a implementa funcția captcha va trebui să instalați un plugin suplimentar Really Simple CAPTCHA.

Formularul de feedback poate fi inserat în orice pagină sau postare a blogului dvs. WordPress, precum și într-un widget. De fapt, acesta este un fel de constructor pentru WordPress care vă permite să actualizați informațiile din formular fără a reîmprospăta pagina (pe tehnologii ajax). Personal, am testat acest plugin pentru site acum câțiva ani și apoi mi s-a părut foarte greu și nepotrivit de greoi pentru a-mi atinge obiectivele (feedback).

Este clar că în acest timp Formular de contact 7 ar putea deveni mult mai potrivit pentru implementarea sarcinilor cu care ne confruntăm și, prin urmare, vă sugerez să îl încercați singur, bazându-vă pe destul de descriere detaliata. Dacă utilizați orice alt plugin bun și ușor, vă rugăm să scrieți câteva cuvinte despre el în comentarii.

Deci, am vorbit despre implementarea feedback-ului în Joomla și WordPress folosind extensiile corespunzătoare.

Dar există și cateva cai:

    Creați singur formularul. Pentru a face acest lucru, va trebui să-i scrieți codul și să-i proiectați aspectul folosind Stiluri CSS, și, de asemenea, scrieți un handler pentru acesta în Php (în principiu, cunoștințele acumulate din cursul video al lui Popov despre Php vor fi suficiente) și apoi, verificați dacă câmpurile sunt completate corect și altceva. Permiteți-mi să vă spun imediat că acest lucru nu va fi ușor.

    Pentru a descrie procesul de instalare și configurare a acestui scenariu va trebui să scrieți un articol separat, așa că vă sugerez să descărcați și urmăriți un tutorial video detaliat pe această temă, care va descrie și procesul de integrare a scriptului în designul site-ului dvs.

    Feedback de la proiectanți și generatori

    Sunt destul de multe constructor online ov și generatoare de formulare de feedback. De exemplu, acest serviciu îți oferă un serviciu destul de convenabil și interfata functionala pentru a crea structuri de aproape orice complexitate. În primul pas, vi se va cere să alegeți o schemă de culori:

    După care trebuie să selectați câmpurile necesare pentru formularul viitor din partea stângă a ferestrei și apoi, făcând clic pe ele, să le faceți mai multe reglaj fin(setați etichetele câmpurilor în rusă, selectați lățimea câmpului, schimbați tipul și introduceți textul preliminar):

    Câmpurile adăugate pot fi schimbate prin simpla glisare a mouse-ului, șterse și reeditate:

    În general, interfața acestui designer online este foarte, foarte modernă și convenabilă. După ce ați plasat toate câmpurile de care aveți nevoie În ordinea corectăși furnizați toate setările de care au nevoie, puteți face clic pe butonul de salvare (situat mai jos). Pe pagina următoare vi se va solicita să vizualizați și să descărcați scriptul de feedback sau să reveniți la editare:

    Feedback pentru site-urile HTML (fără PHP)

    Mânca servicii on-line, oferind gratuit propriile lor manere PHP, care vor fi localizate pe serverele lor. Acest tip include:

    Nu o fântână, bineînțeles, din punct de vedere al rafinamentului designului, dar un astfel de formular poate fi creat în cinci secunde și într-un alt minut plasat pe absolut orice site, chiar și situat pe o găzduire fără suport PHP.

    După configurare aspectși adăugând câmpurile necesare, faceți clic pe butonul „Vizualizare”, apoi pe butonul „Configurat” și copiați codul. Lipiți-l în pagina de contacte și faceți clic pe butonul „Inserați” aflat sub cod.

    După aceasta, introduceți adresa paginii site-ului dvs. unde ați introdus codul și adresa de e-mail la care ar trebui să fie trimise mesajele utilizatorului trimise prin acest formular.

    Există un alt generator de formulare de feedback care este foarte asemănător ca funcționalitate. Modelele create cu acesta pot fi plasate și pe site-uri de găzduire fără suport PHP (doar să specificați adresa paginii și e-mailul către care vor fi trimise mesajele). Nu voi vorbi prea mult despre asta, pentru că în esență este foarte asemănător cu constructorul descris mai sus.

    Multă baftă! Inainte de pe curând pe paginile site-ului blogului

    Puteți viziona mai multe videoclipuri accesând
    ");">

    S-ar putea să fiți interesat

    Formulare Google - cum să creați un sondaj online pe un site web în Formulare Google
    SendPulse- Notificări pentru site și opțiune gratuită conexiunile lor de la SandPulse Pe net Editore HTML- vizual, IDE si editori pentru instalare pe site
    Accelerează și protejează-ți site-ul serviciu cloud Airi.rf

Astăzi vom lucra la creare HTML frumos formular de feedback pentru site, rulând pe PHP și având încorporată protecție antispam. Nici unul cunoștințe speciale nu ai nevoie, 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 să facă 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.

Puteți comanda instalarea și configurarea formularului finit pentru 500 de ruble aici (aceasta este pentru cei care sunt prea leneși să lucreze cu mâinile sau au abilități insuficiente).

Cum funcționează formularul de feedback HTML

Formularul nostru va avea 5 câmpuri pentru introducerea datelor - nume, Adresa de e-mail, numărul 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 efectua o verificare obligatorie a corectitudinii 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. Acesta stabilește ce, unde și sub ce formă să trimiți după ce butonul de trimitere este apăsat. Pentru implementare este folosit PHP special scenariu.

Al treilea este responsabil de aspect. Setează dimensiunea și locația câmpurilor de introducere a datelor, adaugă diferite culori și efecte. Toate acestea sunt stabilite de stilurile CSS.

Versiunea demo a formularului

Vă vom ghida pas cu pas prin configurarea fiecăruia dintre aceste elemente.

Crearea unui layout HTML

Pentru 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.

Eticheta este folosită pentru a desemna formulare în HTML

, în interiorul căruia sunt completați parametrii necesari.

Format corect "[email protected]"

Formatul corect este „+7-123-4567890”

Formatul corect este „http://someaddress.com”

"Introdu numele tau" necesar />

„Introduceți adresa dvs. de e-mail” necesar />

"Introduceti numarul de telefon" necesar />

Formatul corect este „+7-123-4567890”

„Introduceți adresa site-ului dvs. web” model = "(http|https)://.+" />

Formatul corect este „http://someaddress.com”

Să începem cu prima linie.

class="contact_form"– specificați clasa pentru a seta stiluri CSS în viitor.

action="contact-form.php"– indicaț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 care se stabilesc următoarele caracteristici:

Tip– este responsabil pentru tipul de date introduse, text – text simplu, e-mail – adresa de email, astfel de câmpuri sunt verificate automat pentru corectitudine (@ trebuie să fie prezente), tel – număr de telefon, url – adresa site-ului web.

Nume– 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– acesta 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.

model="(http|https)://.+”– această construcție servește la verificarea corectitudinii câmpului site-ului, indicând faptul că adresa trebuie să conțină http://text sau https://text, în caz contrar va apărea o eroare.

Unele câmpuri au un sfat explicativ care apare atunci când selectați un articol. E rănită , unde form_hint este clasa elementului (proprietățile sale sunt scrise în CSS). Puteți seta orice text în sfatul cu instrumente pentru fiecare câmp al formularului de contact. Dacă nu aveți nevoie de o astfel de caracteristică, eliminați întreaga etichetă.

Câmpurile pentru introducerea mesajului în sine sunt marcate cu eticheta



După cum puteți vedea, întregul formular este creat de etichetă

cu atribute action=mail.php(indicarea paginii site-ului unde se află scriptul de prelucrare a datelor introduse) și metoda=post(metoda de trimitere a datelor către server). Liniile individuale create de etichetă cu atribute complet inteligibile. Locația elementelor individuale de formular, text, fonturi etc. îl puteți schimba în conformitate cu designul site-ului dvs. În etichetă