Formular de feedback personalizabil: Cum să creezi online? Cum se face un formular frumos de feedback pop -up HTML și PHP cu un telefon și trimiterea unei comenzi prin e -e -mail?

Instrucțiuni pentru crearea unui formular de feedback pe HTML și CSS, precum și o colecție de forme pregătite și ghid pentru conectarea și configurarea acestora.

Astăzi, orice persoană care nu are nici măcar abilități de programare își poate crea cu ușurință propriul site prin descărcarea unui șablon gata pregătit din rețea și instalarea acestuia pe motorul folosit.

Cu toate acestea, nu fiecare șablon gata pregătit este capabil să satisfacă cerințele utilizatorului. Multe dintre ele sunt reprezentate sub formă de „brânză” și nu au secțiuni și funcții atât de importante, precum, de exemplu, o formă de feedback.

Acest bloc de site -uri este extrem de important pentru proprietarii de magazine online și portaluri de informații mari. În articolul nostru veți găsi informații despre cum să creați în mod independent un formular de feedback, unde să descărcați un șablon finalizat și cum să îl instalați pe site -ul dvs. web.

Figura 1. Ce este o formă de feedback și de ce este atât de necesar?

Ce este o formă de feedback și de ce este atât de necesar?

• Una dintre cele mai importante funcții ale oricărui site decent este forma de feedback. Acesta servește la interacțiune între vizitator și administrarea resurselor. Deci, cu ajutorul său, puteți scrie un apel către asistență tehnică sau puteți trimite datele necesare administrațiilor. De exemplu, detaliile de plată în magazinele online sau numele mărfurilor comandate. Este recomandat să aveți o astfel de formă pe portalul dvs., deoarece contactul constant cu vizitatorii și clienții săi este cheia dezvoltării sale de succes.

Formularul de feedback este o pagină sau un bloc separat (departament), constând din mai multe câmpuri ale intrării textului și a butonului „Trimite”. De regulă, formularul standard are următoarele câmpuri:

• Numele complet
• E-mail (adresă de e-mail)
• numar de telefon mobil
• Adresele site -ului dvs.
• Câmp pentru introducerea mesajului text

Cu toate acestea, câmpurile pot fi la fel de mult ca tine și pot fi semnate după cum doriți. Totul depinde de nevoile și imaginația dvs.

Figura 2. Ce este o formă de feedback și de ce este atât de necesar?

• În plus, unii proprietari adaugă carduri Google sau Yandex la formularul de feedback, forme de intrare a site -ului folosind rețelele de socializare „Vkontakte”, „Facebook”, „Google+” și așa mai departe. Dar vom vorbi despre crearea celei mai simple formă de feedback, pentru care veți avea nevoie de cunoștințe exclusiv despre elementele de bază ale limbajului de marcare Html si nimic mai mult.

Cum se creează cel mai simplu formular de feedback pentru site pe HTML și PHP?

Pentru a nu transforma articolul într -un manual complet plictisitor, vom proveni de la faptul că sunteți deja familiarizați cu elementele de bază ale limbajului de marcare Html Și aveți o idee generală despre cum funcționează. Dacă nu aveți astfel de abilități, înainte de a prelua crearea unei forme, este recomandat să vă strângeți puțin cunoștințele pe o resursă gratuită htmlbook.ru. În caz contrar, nu numai că puteți abandona această aventură, ci și stricați codul site -ului dvs.

Pentru a recrea forma de lucru a feedback -ului, aveți nevoie de trei elemente importante, dintre care unul este responsabil pentru marcarea și structura formei ( Html), al doilea pentru designul său extern ( CSS), și a treia pentru procesarea și transmiterea datelor ( PHP) Să începem în ordine:

Scrierea unui cod HTML pentru feedback

• Pasul 1. Pentru a indica forma în Html Se folosește eticheta ‹Form› ‹/Form›. În interior va fi setat dimensiuni, stiluri și alte proprietăți vitale ale formei. La înregistrarea etichetei în sine, el trebuie să stabilească o clasă pentru a indica, ceea ce va ajuta în continuare la instalarea formularului CSS Stiluri.

Figura 1. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

• Pasul 2. Mai departe pentru a crea primul câmp al formularului nostru în interiorul etichetei \u003cFormă\u003e Trebuie să scrieți eticheta blocului ‹P›care este responsabil pentru crearea unei noi linii.

Figura 2. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

• Pasul 3. Etichetă în interior ‹P› Din noua linie introducem următoarea etichetă: ‹Etichetă pentru \u003d" nume "›Nume \u003c/Eticheta\u003e. El este responsabil pentru numele viitorului câmp de formă.

Figura 3. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

• Pasul 4. Pe noua linie, totul este în aceeași etichetă ‹P› Prescriem eticheta de a crea un câmp cu următoarele valori: ‹INPUT TIP \u003d" text »nume \u003d" name "Placeholder \u003d"Introdu numele tau "Necesar \\\u003e. Parametru " type \u003d "text"" Stabilește tipul de câmp de text și parametrul " placeholder \u003d "Introdu numele tau «» Setează textul inițial în acest câmp chiar text. Parametru " nECESAR»Este clar pentru vizitatorul site -ului că acest câmp este obligatoriu pentru completarea. Drept urmare, ar trebui să obțineți un formular cu un câmp, așa cum se arată în imaginea de mai jos.

Figura 4. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

• Pasul 5. Prin exemplul de mai sus, adăugați câmpurile rămase de care aveți nevoie, de fiecare dată pornind de la etichetă ‹P›. Pentru a instala un câmp cu un mesaj text, utilizați eticheta ‹TextArea Nume \u003d" Mesaj "Cols \u003d" 50 ″ Rows \u003d "6 ″ Obligatoriu› ‹/TextArea›. Opțiuni " cols" și " rânduri»Sunt responsabili pentru lățimea și înălțimea câmpului de text. Puteți seta parametrii care vă plac mai mult. Ar trebui să obțineți ceva de genul acesta afișat în imaginea de mai jos.

Figura 5. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

• Pasul 6. Pentru a vă proteja de bots, care sunt destul de multe pe internet astăzi, creați o altă linie cu etichetă ‹Nume de intrare \u003d" bezspama "type \u003d" text »style \u003d" display: none "valoare \u003d" " /›. Datorită parametrului " stil \u003d "Display: Nimeni"»Acest câmp nu va fi vizibil de simpli muritori, dar roboții vor fi completați automat. Astfel, puteți distinge întotdeauna o persoană vie de program.

Figura 6. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

• Pasul 7. Etapa finală a marcajului va fi crearea butonului de trimitere. Eticheta este folosită pentru asta \u003cButon\u003e. Creați un bloc nou ‹P› Și în interiorul acestuia, introduceți codul butonului cu următorii parametri: ‹Buton class \u003d" Trimite "type \u003d" Trimite "›Trimite un mesaj \u003c/Buton\u003e. Un rezultat similar ar trebui să se dovedească, așa cum se arată în captura de ecran.

Figura 7. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

Lucrul cu stiluri în cascadă (CSS)

• Așa cum ați observat deja în procesul de marcare, ne -am dovedit ceva foarte strâmb, nescris și dezgustător. Pentru a da feedback -ului formularului un aspect mai mult sau mai puțin îngrijit, o limbă Html Nu va fi suficient. În acest scop, va trebui să recurgeți la utilizarea stilurilor CSS.
• În cazul în care ați profitat de sfaturi pentru a vă consolida abilitățile de bază pe resursă htmlbook.ru, apoi setați anumiți parametri de proiectare pentru toate părțile formularului folosind CSS Nu vă va fi dificil. Dacă nu aveți o dorință sau timp să vă încurcați cu toate acestea, atunci vă vom oferi un cod gata pregătit și vă vom spune cum să îl conectați.

Figura 8. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

Conectați stiluri CSS la Html Puteți două moduri:

• Copiați codul din tabelul nostru în cascadă în partea de jos a fișierului stil.csscare este prezent la găzduirea site -ului
• Mutați fișierul nostru de stiluri la găzduirea dvs. și conectați -l

Fişier stil.css Se conectează în interiorul etichetei ‹Head› ‹/Head› Folosind un script ‹Link Rel \u003d" Stylesheet "media \u003d" ecran "href \u003d" style.css "›. În cazul în care un fișier cu stiluri nu se află în același folder cu fișierul HTML principal, atunci trebuie să specificați calea către acesta. În fișierul nostru cu stiluri, fiecare element are o desemnare. Dacă doriți, puteți schimba parametrii pentru dvs., ghidat doar prin abilități de programare de bază.

Conexiune de fișiere PHP și setarea acesteia

După cum am menționat anterior, scenariul PHP este responsabil pentru executarea formularului de feedback. Cu toate acestea, pentru a înțelege mai mult sau mai puțin principiul muncii limbajului PHP, trebuie să citiți un volum mare de literatură și să petreceți un număr decent de ore pentru practică. Prin urmare, ca în cazul CSS, vă vom oferi un fișier pregătit cu un script PHP, care va trebui să atașați doar documentul cu formularul.

Spre deosebire de fișier stil.css, un fișier cu un script PHP este atașat în proprietățile formularului în sine. Să începem în ordine:

• Pasul 1. Deschideți codul scris anterior și găsiți o linie cu o etichetă de formular deschis. Adăugați proprietăți la acesta " acțiune \u003d "contact-formă.php"" și " metodă \u003d "post"". Urmăriți un exemplu în captura de ecran.

Figura 9. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

• Pasul 2. Descărcați fișierul nostru PHP și plasați -l pe găzduire în același folder în care se află documentul HTML. Astfel, fișierele PHP și HTML vor interacționa între ele.

Figura 10. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

• Pasul 3. În continuare, trebuie să configurați scriptul pentru dvs. Deschideți fișierul și setați variabilele, alocându -le aceleași nume ca în scriptul HTML. Dacă ați adăugat câmpuri suplimentare la formular, adăugați -le în scriptul PHP exact așa cum se arată în captura de ecran.

Figura 11. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

• Pasul 4. În continuare, trebuie să adăugați încă două variabile cu adresa e -mailului dvs. și subiectul scrisorii care va fi afișată pe caseta dvs. Într -o linie cu o variabilă " Adresa $"Indicați e-mailul și în linie" $ sub»Tema scrisorii este prezentată în captura de ecran.

Figura 12. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

• Pasul 5. Într -o linie cu o variabilă " $ ms»Este configurat formatul scrisorii pe care le veți primi prin poștă. Puteți să -l rescrieți neschimbat sau să vă editați propriul gust.

Figura 13 Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

• Pasul 6. Toate celelalte linii sunt responsabile de trimiterea mesajului și conțin setările de protecție împotriva roboților, astfel încât acestea trebuie lăsate neschimbate. Drept urmare, codul complet ar trebui să arate ceva de genul cel prezentat în imaginea de mai jos.

Figura 14. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

Descărcați fișierele CSS și PHP pentru feedback

După efectuarea tuturor acțiunilor la ieșire, veți primi un formular de feedback atât de simplu

Figura 15. Cum se creează cea mai simplă formă de feedback pentru site pe HTML și PHP?

O selecție de forme frumoase de design de feedback cu privire la HTML și CSS în scopuri diferite

• Pe baza instrucțiunilor de mai sus, puteți „desena” cu ușurință formularul de feedback după propriul gust. Cu toate acestea, dacă nu aveți timp sau dorință de a crea un formular de la zero, puteți găsi formulare de design gata pregătite pe internet și să aveți abilități de bază Html Editează -le pentru tine.

Figura 1. O selecție de forme frumoase de design de feedback cu privire la HTML și CSS în scopuri diferite

• După ce am căutat puțin, am găsit pentru tine o selecție de 35 Frumoase forme de design pop -up de feedback, care sunt scrise pe Html și CSS. Aceste forme sunt potrivite pentru motoare precum WordPress și JoomlaAu setări simple și ușoare de la panoul de control și sunt, de asemenea, perfecte pentru site -uri fără motor.

Descărcați o selecție de forme de feedback pentru designer pentru site -uri

VIDEO: Feedback feedback ReadPress Repramed Feedback