Formularul de feedback, sau altfel spus, este unul dintre cele mai importante elemente ale oricărui site web. Și bineînțeles, ca toate celelalte elemente ale interfeței cu utilizatorul, elementele de contact trebuie să fie cumva stilizate și proiectate în exterior pentru a atrage atenția utilizatorilor și a încuraja comunicarea.
Vă ofer în considerare câteva opțiuni pentru stiluri de formulare de feedback, exclusiv prin intermediul a 3, fără a utiliza imagini suplimentare în design. Nimic de prisos, doar fragmente de cod scurt (fragmente) pentru formularele de contact, realizate în culori deschise și închise.

1. Formular de contact în culori închise

În funcție de culoarea fundalului principal al paginii, culoarea de bază de fundal a formularului în sine se va schimba vizual. Mărimea formularului depinde de dimensiunea recipientului în care va fi plasat formularul.

Cadrul de formular Html este standard, câmpurile de introducere necesare și un buton „Trimite” sunt necesare pentru conectarea cu CSS, fiecărui element de formular îi este atribuită o anumită clasă, nimic complicat, nu va fi greu de înțeles.

CSS

Nu voi intra în multe detalii despre stiluri, voi remarca doar un lucru: am folosit câteva proprietăți CSS3 în design, un gradient liniar, un efect de umbră, colțuri ușor rotunjite etc., am încercat să obțin niște încrucișări. -compatibilitatea browserului pentru aceste proprietăți, dar în versiunile mai vechi de browsere, formularul va arăta în continuare puțin diferit ((.

/* Stil formular de bază */ formular ( marjă: 0 automat; lățime maximă: 95%; umplutură: 30px 30px 6px 30px; chenar: 1px solid rgba(0,0,0,.2); -moz-border-radius : 5px -webkit-border-radius: 5px-background-clip: -webkit-background-clip: -moz-box-shadow; 13px 3px rgba(0,0,0,.5) -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0 ,.5); ,0,.5); overflow: ascuns; ) /* Câmp mesaj */ textarea( background: rgba(255, 255, 255, 0.4) ; width: 100%; border: 1px solid rgba(255,255,255,.6); -moz-border-radius: 4px -clip-background-clip: padding-family: "Open Sans": 300 pixeli; -sus:12px; preaplin:ascuns; ) /* Câmpuri de intrare */ de intrare ( lățime: 100%; înălțime: 48px; chenar: 1px solid rgba(255,255,255,.4); -moz-border-radius: 4px; -webkit-border-radius: 4px; border- raza: 4px-clip-background: -webkit-background-clip: blocare: 18px; left:20px; margin-bottom:20px; padding-left:25px ; input.message ( fundal: rgba(255, 255, 255, 0.4); padding-left:25px; )::-webkit-input-placeholder (culoare: #fff; ) :-moz-placeholder( culoare: #fff; ) ::-moz-placeholder ( culoare: #fff; ) :-ms-input-placeholder ( culoare: #fff; ) input:focus, textarea:focus (culoare de fundal: rgba(0, 0, 0, 0.2) ; -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5); -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5); box-shadow: 0 0 5px 1px rgba(255,255,255,.5); preaplin: ascuns; ) /* Stiluri pentru butonul de trimitere */ .btn ( lățime: 138px; înălțime: 44px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; float:right; border : 1px solid #253737: fundal #416b68: -webkit-gradient(liniar, stânga sus, stânga jos, de la (#416b68): -webkit-linear-gradient, # 6da5a3, #416b68: -moz-linear-gradient(sus, #6da5a3, #416b68); -ms-linear-gradient (sus, #6da5a3, #416b68); 416b68); imagine de fundal: -ms-linear-gradient (sus, #6da5a3 0%, #416b68 100%); 5px 21px; -webkit-border-radius: 6px; -moz-border-radius: 6px; chenar-rază: 6px; -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0.1) 0 1px 0, inserat rgba(255,255,255,0.7) 0 1px 0; text-shadow: #333333 0 1px 0; culoare: #e1e1e1; ) .btn:hover (chenar: 1px solid #253737; text-shadow: #333333 0 1px 0; fundal: #416b68; fundal: -webkit-gradient(liniar, stânga sus, stânga jos, de la(#77b2b0), la (#416b68)); fundal: -webkit-linear-gradient (sus, #77b2b0, #416b68); fundal: -moz-linear-gradient (sus, #77b2b0, #416b68); ); fundal: -o-linear-gradient(sus, #77b2b0, #416b68): -ms-linear-gradient (sus, #416b68 100% ); .btn:activ ( margin-top:1px; text-shadow: #333333 0 -1px 0; chenar: 1px solid #333333; fundal: #ffCC00; fundal: -webkit-gradient(liniar , stânga sus, stânga jos, de la (#ffCC00), to(#ff6600)); fundal: -webkit-linear-gradient(sus, #ffcc00, #ff6600): -moz-linear-gradient (sus, #ffcc00, #ff6600); -ms-linear-gradient(sus, #ffcc00, #ff6600); -o-linear-gradient(sus, #ffcc00, #ff6600); -gradient(sus, #ffcc00 0%, #ff6600 100%); culoare: #fff; -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; contur: niciunul; )

Poate asta va fi interesant pentru tine:

2. Formular de contact in culori deschise

A doua opțiune de design pentru formularul de feedback este prezentată în culori deschise dimensiunile formularului (lățime, înălțime), ca și în prima opțiune, nu sunt fixe și se vor potrivi cu ușurință în dimensiunile containerului în care va fi acest formular; situat.

HTML

Ca și în prima opțiune, structura Html a formularului de contact este standard, elemente de formular cu anumite clase corespunzătoare claselor din CSS.

CSS

La formarea dimensiunilor de bază ale formelor și elementelor interne, am folosit valori procentuale pentru lățime, datorită cărora forma poate fi ajustată cu ușurință la dimensiunile containerului în care va fi amplasat. Schema de culori a butonului „Trimite”, dimensiunea și locația acestuia pot fi modificate cu ușurință, doar experimentați cu anumite valori.

/* Stiluri de formular de bază */ form( margin:0 auto; max-width:95%; box-sizing:border-box; padding:40px; border-radius:5px; background:RGBA(255,255,255,1); -webkit -box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); %; border-radius:3px border:rgba(0,0,0,.3) 2px-sizing:border-family: "Open Sans"; ; margin-bottom:30px; .message:focus, .textbox:focus( outline:none; border:rgba(24,149,215,1) 2px solid; color:rgba(24,149,215,1); ) /* Stiluri de câmpuri de text */ .message( fundal: rgba(255, 255, 255, 0,4); lățime: 100%; înălțime: 120px; chenar:rgba(0,0,0,.3 ) 2px solid; box-sizing:border-box; - moz-border-radius: 3px font-family: "Open Sans", sans-serif: 3px padding: hidden */ .button; 50px; latime:100%; chenar-raza:3px; border:rgba(0,0,0,.3) 0px solid; cutie-dimensiune:border-box; umplutură: 10px; fundal:#90c843; culoare:#FFF; familia de fonturi: „Open Sans”, sans-serif; greutate font: 400; dimensiunea fontului: 16pt; tranziție: fundal .4s; cursor:pointer; ) /* Schimbați fundalul butonului la trecerea cursorului */ .button:hover( background:#80b438; )

Există o mulțime de opțiuni de design pentru formularele de contact, principalul lucru este să aveți puțină imaginație și cunoștințe de bază despre CSS. Pe paginile blogului meu, puteți găsi altele și exemple de stilul formularelor de feedback.
Pentru cei care sunt deosebit de neatenți, vreau să explic, încă o dată: formele prezentate în articol sunt doar un înveliș exterior pentru ca formularele să-și îndeplinească efectiv funcțiile, trebuie să le atașați un handler de script, din care; sunt destule împrăștiate pe Internet, așa că este convingător, vă rog să nu scrieți în comentarii că formularele nu funcționează etc., totul funcționează excelent, trebuie doar să înțelegeți ce, unde și de ce))).

Cu tot respectul, Andrew.

Una dintre cele mai comune sarcini în practică este implementarea unui formular de feedback. Adică să-i scrii codul HTML, să-l proiectezi în CSS, să creezi un script PHP care să prelucreze datele primite de la utilizator și să le trimită pe mail-ul nostru, să scrii un script JS care să verifice formularul pentru adecvarea datelor introduse, protejând creația noastră din spam, astfel încât cutia poștală să nu se prăbușească din cauza atacurilor bot.

Toate punctele de mai sus vor fi discutate în recenzia noastră și comentate în detaliu.

Deci, să începem să creăm un formular de feedback:

HTML

În primul rând, scriem cod HTML, care specifică câmpurile pe care utilizatorul le va completa. Acestea vor fi oficializate în viitor. Codul formularului arată astfel:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Nume: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Telefon: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mail: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Mesaj: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Trimite" />

Și vizual acum arată așa:

Sunt de acord, până acum totul este urât și nimic clar, dar tocmai am început.

Să ne uităm la codul de mai sus în detaliu:

• < form method= "post" action= "mail.php" > …

  
  Pentru a crea un formular trebuie să utilizați eticheta de formular. El este cel care determină începutul și sfârșitul formei pentru interpretul de cod. Ea, ca orice etichetă, are un întreg set de atribute, dar sunt necesare doar două pentru ca formularul să funcționeze, acestea sunt metoda (metoda de trimitere a unei cereri către server, postarea este folosită ca standard pentru formulare) și acțiunea ( indică calea către fișierul de gestionare a formularelor, și anume în Acest fișier va conține un script PHP, care ne va trimite apoi valorile introduse de utilizator prin e-mail. În cazul nostru, vedem că acest fișier se numește mail.php și se află în același director de site cu pagina pe care o luăm în considerare).

• < input maxlength= "30" type= "text" name= "name" />

  
  În continuare avem intrări. Acestea sunt de fapt câmpurile de formular în care utilizatorii vor introduce informațiile de care avem nevoie (type="text" indică faptul că acesta va fi text). Atributul maxlength specifică câte caractere poate introduce utilizatorul într-un anumit câmp de formular. Cel mai important atribut este numele - specifică numele unui anumit câmp. Prin aceste nume, scriptul PHP va procesa ulterior informațiile care îl introduc. Dacă doriți, puteți seta și atributul substituent, care afișează text în interiorul câmpului care dispare atunci când cursorul este plasat în interiorul acestuia. Una dintre problemele cu substituentul este că nu este acceptat de unele browsere mai vechi.

• < label for = "name" >Nume:

  
  Folosit dacă avem substituenți abandonați. O semnătură de câmp obișnuită, atributul for indică la ce câmp specific se referă această semnătură. Valoarea indică numele câmpului care ne interesează.

• < textarea rows= "7" cols= "50" name= "message" >

  
  La fel ca intrarea, este destinat ca utilizatorul să introducă informații, doar că de această dată câmpul este adaptat pentru mesaje lungi. Rânduri specifică dimensiunea câmpului în rânduri, cols în caractere. În general, ei stabilesc înălțimea și lățimea câmpului nostru.

• < input type= "submit" value= "Trimite" />

  
  Type="submit" ne spune că acesta este un buton pentru trimiterea unui formular, iar value specifică textul care va fi în interiorul acestui buton.

• < div class = "right" >

  
  sunt utilizate numai pentru proiectarea vizuală ulterioară a formularului.

CSS

Pentru ca formularul nostru de feedback să pară prezentabil, trebuie să fie formatat. Pentru a obține următorul rezultat:

Am folosit acest cod:

formular ( fundal: #f4f5f7; umplutură: 20px; ) formular . stânga, formă . dreapta (afișare: bloc inline; aliniere verticală: sus; lățime: 458px; ) form . dreapta ( padding- stânga: 20px; ) etichetă ( afișare: bloc; dimensiunea fontului: 18px; text- align: center; margine: 10px 0px 0px 0px; ) intrare, textarea ( chenar: 1px solid #82858D; padding: 10px; dimensiunea fontului: 16px; lățime: 436px; ) textarea (înălțime: 98px; marginea jos: 32px; ) input[ type= "submit" ] ( lățime: 200px; float: dreapta; chenar: fundal: #595B5F; culoare: #fff; text- transformare: majuscule;

Nu văd rostul în a descrie CSS în detaliu, vă voi atrage atenția doar asupra punctelor cheie:

1. Nu este nevoie să scrieți un design pentru fiecare etichetă din formular. Încercați să vă construiți selectoarele în așa fel încât să puteți proiecta toate elementele de care aveți nevoie în câteva linii de cod.
2. Nu utilizați etichete de tip inutile pentru a întrerupe linii și pentru a crea indentări < br>, < p> etc. CSS cu afișaj: bloc și margine cu proprietăți de umplutură se descurcă bine acestor sarcini. Mai multe despre de ce nu ar trebui să-l folosești < br> în aspect, în general, puteți citi în articolul Tag br, dar este chiar necesar? .
3. Nu ar trebui să utilizați aspectul tabelar pentru formulare. Acest lucru contrazice semantica acestei etichete, iar motoarele de căutare adoră codul semantic. Pentru a forma structura vizuală a documentului, avem nevoie doar de etichete div și de proprietățile de afișare specificate în CSS: inline-block (aranjează blocurile pe rând) și vertical-align: top (le împiedică împrăștierea pe ecran) , setați-le la înălțimea necesară și voila, nimic de prisos și totul este amplasat așa cum avem nevoie.

Pentru cei care doresc să-și economisească timp în designul site-urilor, le pot recomanda utilizarea cadrelor CSS atunci când creează site-uri web, în ​​special cele scrise de sine stătătoare. Alegerea mea în acest sens este Twitter Bootstrap. Puteți urmări o lecție despre cum să proiectați formulare folosind-o.

PHP

Ei bine, este timpul să ne facem forma să funcționeze.

Mergem în directorul nostru rădăcină al site-ului și creăm acolo fișierul mail.php, căruia i-am specificat anterior calea în atributul action al etichetei form.

În cele din urmă, codul lui va arăta astfel:

\" javascript: history.back()\" >Înapoi

) else ( ecou ; ieșire ; ) ?>

Puteți sări peste discuția despre porțiunile HTML și CSS ale acestui document. În esență, aceasta este o pagină web obișnuită pe care o puteți proiecta în funcție de dorințele și nevoile dvs. Să ne uităm la partea sa cea mai importantă - scriptul PHP pentru procesarea formularului:

\" javascript: history.back()\" >Înapoi

$back = "

Cu această linie creăm un link pentru a reveni la pagina anterioară. Deoarece nu știm dinainte de pe ce pagină va ajunge utilizatorul la aceasta, acest lucru se face folosind o funcție JS mică. În viitor, vom accesa pur și simplu această variabilă pentru a o afișa în locurile de care avem nevoie. dacă (! gol ($_POST [ „nume” ] ) și ! gol ($_POST [ „telefon” ] ) și ! gol ($_POST [ „mail” ] ) și ! gol ($_POST [ „mesaj” ] ) ) (//partea internă a handler-ului ) altfel ( ecou„Pentru a trimite un mesaj, completați toate câmpurile! $back”

; Ieșire ;

)

Aici adăugăm o verificare a formularului pentru a ne asigura că câmpurile sunt pline. După cum ați ghicit, în partea $_POST["nume"], între ghilimele, scriem valoarea atributului name al intrărilor noastre.

Dacă toate câmpurile sunt completate, atunci scriptul va începe să prelucreze datele în partea sa internă, dar dacă cel puțin un câmp nu a fost completat, atunci va fi afișat un mesaj pe ecranul utilizatorului prin care îi va cere să completeze toate câmpurile. câmpurile formularului ecou „Pentru a trimite un mesaj, completați toate câmpurile $back” și un link pentru a reveni la pagina anterioară pe care am creat-o chiar de la prima linie!

Apoi lipim în partea internă a handler-ului de formulare:

Verificările pot fi făcute mai complicate, dar acest lucru este la discreția dumneavoastră. Am instalat deja o protecție minimă pe partea serverului. Vom face restul pe partea clientului folosind JS.

Nu recomand abandonarea completă a protecției formularelor pe partea de server în favoarea JS, deoarece, deși extrem de rare, există unele unice cu JS dezactivat în browser.

După curățarea etichetelor, adăugați trimiterea unui mesaj:

Poștă ( „[email protected]”, „Scrisoare de la adresa_site-ului dvs.”, "Ți-am scris: " . $nume. "
Numărul lui: " . $telefon ."
Poșta lui: „ . $mail . "
Mesajul lui: „. $mesaj „Content-type:text/html;charset=windows-1251”) ;

Această linie este responsabilă pentru generarea și trimiterea mesajului către noi. Se completează după cum urmează:

1. „[email protected]” – aici introduceți adresa de e-mail între ghilimele
2. „Scrisoare de la adresa_site-ului dvs.” este subiectul mesajului care va fi trimis pe adresa dvs. de e-mail. Aici poți scrie orice.
3. „Ți-am scris: „.$name”. < br /> Numărul lui: „.$telefon”. < br /> E-mailul lui: „.$mail”. < br /> Mesajul lui: „.$mesaj – formăm textul mesajului propriu-zis. $nume – introducem informațiile completate de utilizator accesând câmpurile de la pasul anterior, în ghilimele descriem ce înseamnă acest câmp, cu eticheta < br /> Întrerupem linia astfel încât mesajul în ansamblu să fie lizibil.
4. Content-type:text/html;charset=windows-1251 - la sfârșit există o indicație explicită a tipului de date transmis în mesaj și codificarea acestuia.

IMPORTANT!

Codificarea specificată în „capul” documentului ( < meta http- equiv= "Content-Type" content= „text/html; charset=windows-1251” /> ), codificarea din mesajul Content-type:text/html;charset=windows-1251 și, în general, codificarea fișierului PHP trebuie să se potrivească, altfel în mesajele primite prin poștă se vor afișa „cuvinte nebune” în loc de rusă sau Litere engleze.

Mulți oameni nu indică în mod explicit codificarea mesajului trimis, dar pe unii clienți de e-mail acest lucru poate cauza probleme în viitor (e-mailurile care nu pot fi citite sunt trimise pe e-mail), așa că recomand să-l specificați oricum.

Verificarea formularului pentru caracterul adecvat al datelor introduse

Pentru a vă asigura că utilizatorii nu pierd din greșeală câmpurile și completează totul corect, merită să verificați datele introduse.

Acest lucru se poate face atât în ​​PHP pe partea de server, cât și în JS pe partea client. Folosesc a doua opțiune, deoarece astfel o persoană poate afla imediat ce a greșit și poate corecta eroarea fără a face tranziții suplimentare de pagină.

Lipim codul de script în același fișier în care avem partea HTML a formularului. Pentru cazul nostru va arăta astfel:

< script>function checkForm(form) ( var name = form. name. value; var n = name. match(/ ^[ A- Za- zA- Jaa- z ] * [ A- Za- zA- Ja- z ] + $/ ) ; dacă (!n) ( alertă( „Numele introdus este incorect, vă rugăm să corectați eroarea”); return false; ) var phone = form. telefon. valoare; var p = telefon. potrivire(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; dacă (! p) ( alertă(„Numărul de telefon a fost introdus incorect” ); return false; ) var mail = formular. Poștă. valoare; var m = mail . meci(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \ ) + [ A- Za- z] + $/ ) ; dacă (! m) ( alertă(

„E-mailul introdus este incorect, vă rugăm să corectați eroarea”

); return false; ) returnează adevărat; ) Ei bine, acum analiza obișnuită: Pentru asta,

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

astfel încât atunci când faceți clic pe butonul de trimitere formular, îl verificăm

Atașăm lansarea scriptului nostru la eticheta de formular:

Acum să luăm lista de verificare punct cu punct: După cum puteți vedea, un astfel de mini cec este scris pentru fiecare dintre câmpurile noastre. Am evidențiat verificarea pentru un câmp din captură de ecran cu un pătrat roșu pentru alte câmpuri, are o structură similară, iar dacă este nevoie să adăugați un câmp sau să-l eliminați, acum puteți face acest lucru cu ușurință. Orice site trebuie să aibă un formular de feedback, așa că, mai devreme sau mai târziu, fiecare dintre noi se gândește să dezvolte unul. Există destul de multe opțiuni pe Internet, unii folosesc plugin-uri populare, unii folosesc propriile dezvoltări personale, dar majoritatea caută soluții gata făcute. În orice caz, al nostru

HTML

formular de feedback pentru site

E-mail:

CSS

Când forma este gata, o puteți transforma puțin. Totul aici depinde și de nevoile și fanteziile tale. Pentru claritate, am schițat câteva stiluri pentru fiecare element, astfel încât totul să nu arate atât de plat. Dar dacă ești leneș sau nu știi cum să o faci, atunci poți folosi opțiunea mea:

Form( lățimea maximă: 400px; lățime: 100%; margine: 0 automat; ) input( dimensiunea casetei: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0,11); margine: 10px; 0px 2px 0 1px negru)

Partea clientului

Aici merită să înțelegeți mai în detaliu, sau mai degrabă să alegeți opțiunea potrivită pentru dvs. Pentru a trimite mesaje prin e-mail, va trebui să folosim limbajul php, adică. creați un fișier separat în care vom transfera toate aceste date. Dar nu vom lua în considerare această metodă aici, deoarece este mult mai frumoasă când totul se întâmplă fără a reîncărca pagina. Deci ne vom uita la trimiterea datelor prin ajax.

Dacă doriți să faceți totul în mod vechi, atunci va trebui să modificați ușor html-ul de sus și să setați valoarea atributului metodei formularului (post sau obține). Totul depinde de modul în care doriți să transferați datele din formular. Și, de asemenea, nu uitați să scrieți o acțiune care va indica calea către fișierul php.

Și vom folosi o metodă mai avansată și vom trimite date fără a reîncărca pagina, iar atunci când primim un răspuns de la server, vom transmite utilizatorului un mesaj despre o operațiune reușită sau o eroare. Totuși, vom avea nevoie și de 2 fișiere, să spunem contact.phpȘi custom.js.

În primul rând, nu uitați să includeți biblioteca Jquery, cu ajutorul lui vom reduce codul de mai multe ori și vom putea efectua cu ușurință orice acțiuni folosind soluții gata făcute.

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( tip: "POST", url: "contact.php", date: str, succes : function(msg) ( if(msg == "ok") ( alert("Mesajul a fost trimis"); ) else ( alert("Eroare! Este posibil sa fi completat incorect campurile."); ) ) ) );

Acum să înțelegem planul de acțiune și de ce avem nevoie de toate aceste biblioteci și fișiere. Când utilizatorul dă clic pe butonul de trimitere, avem un eveniment de trimitere, pe care îl vom scrie în custom.js și pe baza căruia vom primi toate datele din formular și le vom trece în fișierul contact.php. Aici verificăm încă o dată dacă câmpurile noastre sunt goale (pentru a evita o altă posibilitate de spam), trimitem un mesaj prin e-mail și informăm utilizatorul cu privire la rezultatele, care sunt trimise ca răspuns la custom.js.

Dacă (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail "]); $txtphone = trim($_POST["mfbPhone"]); // de la care $fromMail = " [email protected]"; // Introduceți adresa dvs. de e-mail aici $emailTo = " [email protected]"; $subject = "Feedback"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "De la: Exemplu de formular<$fromMail>\n"; $headers .= "Tip de conținut: text/plat; charset="utf-8"\r\n"; $headers .= "Versiune MIME: 1.0\r\n"; $headers .= "Data: ". date("D, d M Y h:i:s O") ."\r\n"; // body of the letter $body = "A primit o scrisoare de pe site-ul ".$site." \n\nNume: „.$txtname.”\nTelefon: „.$txtphone.”\ne-mail: „.$txtemail.”\nMesaj: „.$txtmessage; mail($emailTo, $subject, $body, $headers); echo "ok";

Acesta este cel mai elementar exemplu de funcționare a unui formular de contact. Există multe opțiuni pentru cum să modificați fișierul de verificare în PHP, să vă creați propriile clase etc. Dar sarcina noastră a fost să creăm un exemplu simplu și funcțional pe care să-l poți folosi pe site-ul tău.

demonstrație

fişiere

Pluginuri gata

Din moment ce sunteți pe un blog WordPress, probabil că sunteți pregătit și dornic să utilizați tot felul de pluginuri, mai ales dacă sunteți un om complet lamer în programare și layout. Și nu te condamn pentru asta și pot chiar să-ți prezint una dintre ele atenției pentru claritate. Scopul acestui paragraf nu este o recomandare, ci doar un exemplu, din moment ce am folosit pluginul Formularul de contact 7în mai multe proiecte.

Este foarte ușor de configurat și aproape întotdeauna funcționează impecabil. Dacă aveți nevoie să vă creați propriul design unic, o puteți face. Tot ce trebuie să faceți este să adăugați câmpurile necesare în constructor, să traduceți și să modificați notificările despre erori și trimiterea cu succes în felul dvs. și ați terminat. Apoi, copiați shortcode-ul și inserați-l în locul dorit din formular.

Nu am avut niciodată probleme cu pluginul și dacă aveți nevoie de o soluție rapidă și gata, atunci aceasta este. Dacă aveți propriile cerințe pentru formă în ceea ce privește funcționalitatea și designul, atunci este mai bine să utilizați prima opțiune, care necesită cunoștințe în această industrie.

În acest articol vom vorbi despre un formular de feedback dinamic, care, atunci când dimensiunea ferestrei se schimbă, va deveni adaptabil la vizionare. Adică, formularul de feedback va fi disponibil pentru vizualizare pe toate tipurile de dispozitive, pe computere personale, laptopuri, smartphone-uri și tablete.

Formularul de feedback va consta din 3 câmpuri de introducere a datelor - numele, adresa de e-mail și textul scrisorii. Toate câmpurile vor fi obligatorii și nu veți putea trimite un e-mail necompletat. Câmpul de introducere a adresei de e-mail va fi validat suplimentar pentru corectitudinea introducerii. Datele vor fi prezentate în cod html, stilurile de design ale formularului de feedback vor fi scrise într-un fișier CSS separat. Pe baza principiului acestui script, este posibil să se creeze, prin analogie, un număr mai mare sau mai mic de câmpuri de intrare.

Avantajele utilizării acestui formular sunt funcționarea continuă a site-ului și transmiterea dinamică a datelor din formular, fără reîncărcarea paginii. De asemenea, trebuie remarcat faptul că este ușor de vizualizat pe dispozitivele mobile.

În fișierul send.php, editați următoarele rânduri: $to = " [email protected]"; $subject= "Mesaj de la site.ru"; $header="De la: site.ru";;

Scrie o scrisoare

* Toate campurile sunt necesare

Trimite

$(function() ( $("#loader").hide(); $("form").submit(function(e) ( var name = $("#name").val(); var email = $("#email").val(); var mesaj = $("#message").val(); var data = "name=" + name + "&email=" + email + "&message=" + message ; if(date) ( $.ajax(( tip: "POST", url: "./send.php", date: date, beforeSend: function(html)) ( $("#loader").show(); $("#submit").hide(); succes: function(html)( $("#loader").hide(); $("#result").html(html); ) ); ) return false ));

1. Plugin pentru crearea formularelor online „jFormer”

Crearea formularelor de contact: feedback, comentarii, formular de autentificare, formular de inregistrare cu verificarea corectitudinii informatiilor introduse.

2. Formular de înregistrare pas cu pas folosind jQuery

O formă îngrijită, cu umplere pas cu pas. Mai jos este un indicator de completare a formularului.

3. Formular pas cu pas

Completarea formularului în mai mulți pași și verificarea faptului că este completat corect.

4. Formular de contact pentru site

Validarea corectitudinii informațiilor introduse se realizează din mers înainte de trimiterea mesajului folosind javascript.

5. Comutare animată între formulare folosind jQuery

Comutare animată folosind jQuery între formularul de conectare al site-ului, formularul de înregistrare și câmpul de recuperare a parolei. Pe pagina demo, faceți clic pe linkul galben pentru a vedea efectul.

6. Formular de feedback PHP de plecare

O soluție similară poate fi folosită pentru a oferi unui vizitator posibilitatea de a contacta rapid proprietarul site-ului de pe orice pagină. Pe pagina demo, faceți clic pe săgeata de mai jos pentru a deschide formularul.

7. Formular de înregistrare PHP folosind jQuery și CSS3

Formular cu verificarea corectitudinii informatiilor introduse.

8. Formular de înregistrare PHP în stil Facebook

Un formular de înregistrare frumos implementat folosind CSS, PHP și jQuery.

9. Formular de contact jQuery „SheepIt”

A fost implementată capacitatea de a adăuga noi câmpuri înainte de a trimite un mesaj.

10. Formular de contact AJAX de lux

Formular frumos de feedback PHP cu verificarea corectitudinii informațiilor introduse. Tehnologii: CSS, PHP, jQuery.

11. Sistem de autorizare/înregistrare pe site

12. Formular de transmitere a datelor

Cu verificarea umplerii corecte.

13. Pluginul jQuery „Contactabil”.

Pentru a implementa un formular de feedback de ieșire pentru a trimite rapid un mesaj.