Acesta este modul în care va arăta în cele din urmă formularul de feedback

Să ne uităm imediat la toate câmpurile care vă vor fi disponibile în acest formular.

Structura câmpurilor formularului de feedback

• numele expeditorului
• adresa postala
• telefon
• firma expeditoare
• site-ul expeditorului
• produs (direcție)
• lista serviciilor solicitate
• Informații suplimentare
• protecție antispam / robot

Caracteristici și capabilități

• blocarea butonului „trimite” până când sunt îndeplinite condițiile necesare
• selector simplu pentru verificarea și protejarea împotriva roboților
• buton suplimentar „șterge toate câmpurile”

Ce este inclus în formularul de feedback?

• Markup HTML (crearea aspectului)
• Stilizarea câmpurilor de formular cu CSS/SCSS
• jQuery + js
• handler PHP

Crearea de markup HTML

Deci, să ne uităm la marcajul formularului:

Vă rugăm să vă prezentați: * Indicați adresa dvs. de e-mail: * Indicați numărul dvs. de telefon: * Scrieți din ce companie sunteți: Indicați site-ul dvs.: Produs: Selectați un serviciu: Niciun serviciu selectat Service_ Service_ Service_ Service_ Service_ Service_ Service_ Service_ Supplémentaire. Informații: Sunt un robot Sunt un om Golire Câmpurile marcate cu un asterisc * sunt obligatorii.

Există trei prime câmpuri care au un id și un anumit eveniment js onkeyup="checkParams()" (vom avea nevoie de ele mai târziu). Acestea vor fi supuse verificării obligatorii a corectitudinii introducerii datelor. Atributul necesar este responsabil pentru acest lucru. Dacă trebuie să eliminați sau să faceți un alt câmp obligatoriu, pur și simplu eliminați/adăugați acest atribut.

Mai multe câmpuri suplimentare care nu sunt obligatorii.

Selector pentru selectarea serviciilor furnizate selectează .

Câmp de informații suplimentare textarea .

Selector pentru verificarea „umanității” - lucrez | sunt om.

Două butoane: Trimiteți și ștergeți informațiile din câmpurile completate.

Sincer să fiu, încă lipsește o casetă de selectare pentru a confirma consimțământul pentru prelucrarea datelor, dar adăugarea acesteia, sper, nu vă va crea dificultăți.

Stilul formularului CSS/SCSS

Toate câmpurile de formular sunt stilate folosind CSS flexbox (Modulul Flexible Box Layout) și împărțite în grupuri cu clase suplimentare. Desigur, vă puteți crea propriile stiluri. 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.

Formular ( input, input, input, textzona, select ( afișare: bloc; umplutură: 12px 15px; înălțimea liniei: 1,5; lățime: 100%; dimensiunea fontului: 16px; chenar: 1px solid #ced4da; chenar-radius: . 25rem; background-clip: padding-box: #fff box-shadow: 0 1px 0 rgba(255, 255, 255, .05), inset 0 1px 0 rgba; .05); &:focus (contur: niciunul; ) .form-row ( display: flex; flex-wrap: wrap; justify-content: space-between; .form-group:nth-child(1) ( input ( lățime: 95%; ) ) .col-6 ( poziție: relativă; flex: 0 0 50%; lățime maximă: 50%; ) .pt-3 ( padding-top: 1rem; ) .form-group ( margin- jos: 1rem; etichetă ( înălțimea liniei: 1,7; spațiere între litere: .3px; transformarea textului: majuscule; dimensiunea fontului: 14px; greutatea fontului: 900; ) zona textului (înălțimea minimă: 110px; redimensionarea: verticală; ) ) )

Configurarea codului PHP

Acum trecem la gestionarea formularelor, unde încep toate acțiunile în funcție de selectorul selectat - Bot/Human.

Ce este acolo?

• header("Reîmprospătare: 5; URL=https://www.site.ru"); — după completarea formularului de către bot, acesta îl trimite la pagina de notificare și după 5 secunde revine la cel specificat în câmp.
• mail, nume, telefon, ... - setarea potrivirii câmpurilor html. Aici trebuie să furnizați toate numele relevante="" în formularul de feedback. Astfel, în câmpul de servicii trebuie să specificați exact aceeași ordine a opțiunilor ca și în markupul html.
• $mess este corpul mesajului care va sosi în scrisoare. Le puteți schimba, le puteți schimba numele sau pur și simplu le puteți șterge/comentați pe cele de care nu aveți nevoie.
• $headers este o linie obligatorie care indică codificarea literei. Dacă ștergeți sau modificați accidental charset=utf-8, atunci toate cuvintele dvs. se vor transforma în hieroglife.
• antet - după ce a făcut clic cu succes pe butonul, vizitatorul va fi trimis către o pagină de notificare și după 5 secunde va fi redirecționat către pagina specificată. Sau altfel (va primi o notificare de eroare.

Bunătăți suplimentare pentru js și jQuery

Anterior, ne-am uitat la un șablon de formular html, în care am văzut ID-uri adăugate și funcții pentru trei câmpuri obligatorii. Este timpul să ne dăm seama de ce au fost adăugate.

Uită-te la codul js. Acesta este un blocator de butoane care, atunci când este dezactivat, împiedică vizitatorul să facă clic pe el înainte ca câmpurile de care aveți nevoie să fie completate.

function checkParams() ( var nume = $("#nume").val(); var email = $("#email").val(); var telefon = $("#telefon").val(); if (name.length != 0 && email.length >= 6 && phone.length >= 10) ( $("#submit").removeAttr("disabled"); ) else ( $("#submit"). attr("dezactivat", "dezactivat");

Inserăm id-ul în câmpurile obligatorii și dezactivăm în buton pentru a le lega la acest script. Le puteți schimba numele și cantitatea adăugând/eliminând liniile var necesare. Dar dacă le adăugați sau eliminați, nu uitați să modificați condițiile din rând dacă (name.length != 0 && email.length >= 6 && phone.length >= 10) ( .

Cum funcționează această linie?

Totul depinde de numărul de caractere din câmpul specificat, adică. lungimea sa.

• if (nume.lungime != 0 - indică faptul că câmpul nu trebuie să fie gol. Citiți ca - „dacă numărul de caractere din câmp nu este zero, atunci ..."
• && - combină condiții (și)
• email.length >= 6 — numărul de caractere trebuie să fie mai mare sau egal cu 6. De ce șase? Am indicat acest număr deoarece adresa minimă de corespondență este de 6 caractere. Să verificăm? @bk.ru - 6 caractere.
• phone.length >= 10 - mai mare sau egală cu zece caractere. De ce 10 și nu 11? La completarea acestui câmp, vizitatorul își poate indica numărul de telefon fie cu +7, fie cu 8. Prin urmare, este mai bine să indicați 10.

Asta e tot. Conectați formularul, testați și utilizați.

Dacă aveți întrebări, scrieți în comentarii și nu fi zgârcit în a evalua articolul. Mulţumesc anticipat :)

Structura formularului HTML

Fiecare linie este plasată într-un container DIV, deci este mult mai convenabil să plasați etichete lângă câmpul de introducere. Întregul formular este plasat într-un DIV lat de 660 pixeli în centrul paginii.

Scrie o scrisoare!

*Câmpurile cu asterisc sunt obligatorii

Numele dumneavoastră *

Adresa de e-mail *

Subiect *

Mesaj *

Structura formularului CSS

Toate animațiile sunt realizate cu noile proprietăți CSS 3. Toate fundalurile sunt realizate cu gradiente obișnuite. Atenție la animația butonului. Umbrele hover sunt, de asemenea, făcute în CSS3.

/* stiluri de formular */
form.row(
afisare: bloc;
umplutură: 7px 8px;
margine-jos: 7px;
}
formular .row:hover (
fundal: #f1f7fa;
}

Eticheta formular (
display: inline-block;
dimensiunea fontului: 1.2em;
greutate font: bold;
lățime: 120px;
umplutură: 6px 0;
culoare: #464646;
vertical-align: top;
}
formular .req (culoare: #ca5354; )

Formular.notă(
dimensiunea fontului: 1.2em;
înălțimea liniei: 1,33 em;
greutate font: normal;
umplutură: 2px 7px;
margine-jos: 10px;
}

Intrare formular:focus, textarea formularului:focus (contur: niciunul; )

/* Stiluri de substituent: http://stackoverflow.com/a/2610741/477958 */
::-webkit-input-placeholder (culoare: #aaafbd; stil font: cursiv; ) /* WebKit */
:-moz-placeholder (culoare: #aaafbd; stil font: cursiv; ) /* Mozilla Firefox 4 până la 18 */
::-moz-placeholder (culoare: #aaafbd; stil font: cursiv; ) /* Mozilla Firefox 19+ */
:-ms-input-placeholder (culoare: #aaafbd; stil font: cursiv; ) /* Internet Explorer 10+ */

Form.txt(
display: inline-block;
umplutură: 8px 9px;
padding-dreapta: 30px;
latime: 240px;
font-family: „Oxygen”, sans-serif;
dimensiunea fontului: 1,35 em;
greutate font: normal;
culoare: #898989;
}

În concluzie, aș dori să spun că odată cu dezvoltarea CSS3 și HTML5, crearea unui formular de feedback cu animație, umbre etc. nu a devenit o sarcină atât de dificilă. Sper că această lecție vă va ajuta să vă creați propriile formulare pentru site-ul dvs. web.

1. Plugin pentru crearea formularelor online „jFormer”

Crearea formularelor de contact: feedback, comentarii, formular de autentificare, formular de înregistrare cu verificarea corectitudinii informațiilor 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 câmpuri noi î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. Plugin jQuery „Contactabil”.

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

Î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 câmpurile sunt obligatorii

Trimite @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, body ( înălțime: 100%; padding: 0; margin: 0; ) body ( fundal: #d3dce1; font-family: "Roboto", sans-serif; font-size: 14px; ) .outer ( afișare: tabel ; lățime: 100%; înălțime: 100%; alinierea textului: centru; ; ) .login-wr (poziție: relativă; margine: 0 automat; fundal: #fff; lățime maximă: 550px; umbră casetă: 3px 3px 24px #999; umplutură: 15px 15px 15px 15px; ) h2 ( text- align : dimensiunea fontului: 1.6em: 0 0 10px 0; margine: 1px; 40px; outline: 0; -moz-outline-style: none ) (înălțime: 40px; outline: 0; -moz-outline-style: none; ) input ( background: url("img/user.png") no-repeat stânga 10px centru; ) textarea ( fundal: url("img/pencil.png") fără repetare stânga 10px sus 10px; ) textarea ( lățime: calc(100% - 55px); înălțime: 120px; chenar: 1px solid #bbb; umplutură: 10px 10px 10px 45px; dimensiunea fontului: 14px; intrare (lățime: calc(100% - 45px); lățime maximă: 250px; chenar: 1px solid #bbb; umplutură: 0 0 0 45px; dimensiunea fontului: 14px ; ) input:focus, input:focus ( chenar: 1px solid #2196f3; ) p ( padding-bottom: 10px; ) buton ( lățime: 100%; lățime maximă: 150px; fundal: #e6ebee; chenar: niciunul; chenar -bottom: 5px solid #d3dce1 font-size: 14px font-weight: 200: box-shadow .4s;

$(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 ));