Selles artiklis räägime dünaamilise tagasiside vormist, mis akna suuruse muutumisel muutub vaatamiseks kohanduvaks. See tähendab, et tagasiside vorm on vaatamiseks saadaval igat tüüpi seadmetes, personaalarvutites, sülearvutites, nutitelefonides ja tahvelarvutites.

Tagasisidevorm koosneb kolmest andmesisestusväljast - nimi, meiliaadress ja kirja tekst. Kõik väljad on kohustuslikud ja te ei saa tühja e-kirja saata. Lisaks kontrollitakse e-posti aadressi sisestamise välja sisestamise õigsust. Andmed esitatakse html koodis, tagasiside vormi kujundusstiilid kirjutatakse eraldi CSS faili. Selle skripti põhimõttel on võimalik luua analoogia põhjal suurem või väiksem arv sisestusvälju.

Selle vormi kasutamise eelisteks on saidi pidev töö ja vormilt andmete dünaamiline esitamine ilma lehte uuesti laadimata. Samuti tuleb märkida, et seda on mobiilseadmetes lihtne vaadata.

Redigeerige faili send.php järgmisi ridu: $to = " [e-postiga kaitstud]"; $subject= "Sõnum saidilt site.ru"; $header="Saatja: site.ru";;

Kirjutada kirja

* Kõik väljad on kohustuslikud

Saada @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, body ( kõrgus: 100%; polster: 0; veeris: 0; ) body ( taust: #d3dce1; fondiperekond: "Roboto", sans-serif; fondi suurus: 14px; ) .outer ( kuva: tabel laius: 100% kõrgus: .keskel (kuva: tabelilahter; vertikaaljoondus: keskel; laius: täitmine: 0 15 pikslit; ; ) .login-wr ( asend: suhteline; veeris: 0 auto : vasak-suurus: 0 0 10px 0 - ülemine: 20px; sisend: 40px; kontuur: 0; -moz-outline-style: none; 40 pikslit no-repeat vasak 10px center ) sisend ( taust: url("img/email.png") no-repeat left 10px center; ) tekstiala ( taust: url("img/pencil.png") kordusteta vasak 10 pikslit ülaosas 10 pikslit; ) tekstiala ( laius: arvutatud (100% - 55 pikslit); kõrgus: 120 pikslit; ääris: 1 pikslit täis #bbb; polsterdus: 10 pikslit 10px 10px 45px ) sisend, sisend (laius: calc(100% - 45px); max-width: 250px; ääris: 1px solid #bbb; polster: 0 0 0 45px; 4px-s; ; ) sisend:fookus, sisend:fookus ( ääris: 1px solid #2196f3; ) p ( polster-alumine: 10px; ) nupp ( laius: 100%; max-width: 150px; taust: #e6ebee; ääris: puudub; ääris -põhi: 5px solid #d3dce1 fondi suurus: 14px üleminek: kasti vari .4s;

$(function() ( $("#loader").hide(); $("vorm").submit(function(e) ( var name = $("#name").val(); var email = $("#email").val(); var sõnum = $("#message").val(); ; if(data) ( $.ajax(( type: "POST", url: "./send.php", data: data, beforeSend: function(html)) ( $("#loader").show(); $("#submit").hide(); edu: function(html)( $("#loader").hide(); $("#result").html(html; ) )); ) tagastama vale ));

1. Plugin veebivormide loomiseks "jFormer"

Kontaktvormide loomine: tagasiside, kommentaarid, sisselogimisvorm, registreerimisvorm koos sisestatud andmete õigsuse kontrollimisega.

2. Samm-sammuline registreerimisvorm jQuery abil

Korralik samm-sammult täitmisega vorm. Allpool on vormi täitmise indikaator.

3. Samm-sammult vorm

Vormi täitmine mitmes etapis ja korrektse täitmise kontrollimine.

4. Saidi kontaktvorm

Sisestatud teabe õigsuse kontrollimine toimub enne sõnumi saatmist javascripti abil.

5. Animeeritud vahetamine vormide vahel jQuery abil

Animeeritud ümberlülitamine jQuery abil saidi sisselogimisvormi, registreerimisvormi ja parooli taastamise välja vahel. Demolehel klõpsake efekti nägemiseks kollast linki.

6. Väljumise PHP tagasiside vorm

Sarnast lahendust saab kasutada selleks, et anda külastajale võimalus kiiresti saidi omanikuga ühendust võtta mis tahes lehelt. Demolehel klõpsake vormi avamiseks allolevat noolt.

7. PHP registreerimisvorm jQuery ja CSS3 abil

Vorm sisestatud teabe õigsuse kontrollimisega.

8. PHP registreerimisvorm Facebooki stiilis

Kena registreerimisvorm, mis on rakendatud CSS-i, PHP ja jQuery abil.

9. jQuery kontaktvorm "SheepIt"

Rakendatud on võimalus lisada uusi välju enne sõnumi saatmist.

10. Väljamõeldud AJAX-i kontaktvorm

Kena puhas PHP tagasiside vorm sisestatud teabe õigsuse kontrollimisega. Tehnoloogiad: CSS, PHP, jQuery.

11. Autoriseerimis-/registreerimissüsteem saidil 12. Andmete esitamise vorm

Koos õige täitmise kontrollimisega.

13. jQuery "Contactable" pistikprogramm

Väljuva tagasiside vormi rakendamine sõnumi kiireks saatmiseks.

Seega oleme lõpetamas õppetundide sarja, kuidas luua lameda kujundusega veebisait nullist. Tuletan meelde, et kujundasime veebisaidi päise. Sees – kogu ekraanil oleva pildiga jaotis. Siin on galerii portfooliotöödega. Sees – kolmeveeruline paigutus. Viimase etapina teeme täna tagasisidevormi ja jaluse paigutuse.

See on see, mida me peaksime saama.

Ma ei näita siin kogu koodi, see on liiga pikk. Kogu koodi ja lõpptulemust näete jsfiddle'is.

Minu ülesanne on näidata teile küljenduse põhimõtteid, nii-öelda loogikat, kuidas küljendaja küljendust vaadates mõtleb. Esiteks jagab ta vaimselt kogu paigutuse suurteks osadeks. Seejärel jagatakse iga sektsioon väikesteks plokkideks. Vaadake allolevat ekraanipilti.

Tagasisidevorm ise asetatakse div-märgendisse klassi osaga_2_of_3 ja see võtab enda alla kaks kolmandikku vanema laiusest.

Seejärel tuleb div-märgendi teine ​​plokk klassiga osa_1_3. Selle hõivatud laius on vastavalt üks kolmandik põhiplokist.

CSS-stiilides:

Con(
kuva: plokk;
ujuk:vasak;
marginaal: 3% 0 3% 1,5%;
}
.con:first-child(
veeris-vasak:0; /* vormiga ploki vajutamine vasakusse serva */
}
.part_2_of_3 (
laius: 66%; /* ploki laius vormiga */
}
.part_1_of_3 (
laius: 32%; /* teabeploki laius */
}
.cont-form(
polster-alumine: 25px; /* ploki kuju alumine taane */
}
.cont-form div(
polsterdus: 5px 0 15px;
}
.cont-form input,.cont-form input,.cont-form textarea(
laius: 42%; /* väljade laius teksti ja meili sisestamiseks */
polster: 15px;
kuva: plokk;
ülevaade: puudub;
taustavärv: #fff; /* vormi lahtrite värv */
värv: #888282; /* vormi tekstisisestuse värv */
fondi suurus: 0,8 em; /* sisestatud vormiteksti fondi suurus */
ujuk:vasak;
veeris-parem: 2em; /* parem taane */

fondi stiil: kaldkiri; /* sisestustekst kaldkirjas */
ääris: 2px solid #cacaca; /* vormilahtrite ääris */
}
.cont-form input(
veeris-parem: 0em; /* parem taane */
}
.cont-form textarea( /* väärtused vormi tekstiala jaoks */
polster: 18px; /* kõik väljad tekstialal */
kuva: plokk;
laius: 93%; /* tekstiala kuju laius */
kõrgus: 180 pikslit; /* tekstiala kuju kõrgus */
taustavärv: #fff; /* tekstiala tausta wdtn */
ülevaade: puudub;
värv: #888282; /* tekstialale sisestatud teksti värv */
fondi suurus: 0,8 em; /* tekstiala fondi suurus */
fondi stiil: kaldkiri; /* vormi tekstiala kaldkiri */
ääris: 2px solid #cacaca;
veeris-alumine: 2em;
}
.cont-form sisend (
fondiperekond: Verdana, sans-serif;
fondi suurus: 1 em;
värv:#fff;
polster: 0,7em 1,4em;
marginaal-parem: 2%;
taustavärv: #a97b7b;
piir: puudub;
kuva: plokk;
kursor: kursor;
ülevaade: puudub;
text-transform: suurtähtedega; /* teisenda suurtähtedeks */
ujuk: paremal;
}
.comp_addp(
fondi suurus: 0,8 em;
värv:#525252;
joone kõrgus: 1,8 em;
marginaal-alumine: 2%;
}
.comp_add a(
fondi suurus: 1,1 em;
värv:#525252;
joone kõrgus: 1,8 em;
marginaal-alumine: 2%;
}
.list2 li img(
veeris-ülaosa: 4 pikslit;
ujuk:vasak;
}
.list2 li .icon(
ujuk:vasak;
polster-vasakul: 1em;
}

Keldri planeering

Keldri paigutusega on olukord palju lihtsam. Jaluse sildi sees on autoriõiguse ja lingiga div-plokk.

HTML-vormi struktuur

Iga rida asetatakse DIV konteinerisse, seega on märksa mugavam sisestusvälja kõrvale panna silte. Kogu vorm paigutatakse 660 piksli laiusesse DIV-i lehe keskel.

Kirjutada kirja!

*Tärniga väljad on kohustuslikud

Sinu nimi *

E-posti aadress *

Teema *

sõnum*

CSS-i vormi struktuur

Kõik animatsioonid on tehtud uute CSS 3 atribuutidega. Kõik taustad on tehtud tavaliste gradientidega. Pöörake tähelepanu nupu animatsioonile. Hõljukvarjud tehakse ka CSS3-s.

/* vormistiilid */
form.row(
kuva: plokk;
polster: 7px 8px;
veeris-alumine: 7px;
}
vorm .row:hover (
taust: #f1f7fa;
}

Vormi silt (
ekraan: inline-block;
fondi suurus: 1,2 em;
fondi kaal: paks;
laius: 120 pikslit;
polsterdus: 6 pikslit 0;
värv: #464646;
vertikaalne joondamine: ülemine;
}
vorm .req ( värv: #ca5354; )

Form.note(
fondi suurus: 1,2 em;
joone kõrgus: 1,33 em;
fondi kaal: tavaline;
polsterdus: 2px 7px;
veeris-alumine: 10px;
}

Vormi sisend:fookus, vormi tekstiala:fookus (kontuur: puudub; )

/* kohatäite stiilid: http://stackoverflow.com/a/2610741/477958 */
::-webkit-input-placeholder ( värv: #aaafbd; fondi stiil: kaldkiri; ) /* WebKit */
:-moz-placeholder ( värv: #aaafbd; fondi stiil: kaldkiri; ) /* Mozilla Firefox 4 kuni 18 */
::-moz-placeholder ( värv: #aaafbd; fondi stiil: kaldkiri; ) /* Mozilla Firefox 19+ */
:-ms-input-placeholder ( värv: #aaafbd; fondi stiil: kaldkiri; ) /* Internet Explorer 10+ */

Form.txt(
ekraan: inline-block;
polster: 8px 9px;
polsterdus-parem: 30px;
laius: 240 pikslit;
fondiperekond: "Oxygen", sans-serif;
fondi suurus: 1,35 em;
fondi kaal: tavaline;
värv: #898989;
}

Kokkuvõtteks tahan öelda, et CSS3 ja HTML5 arendamisega tagasisidevormi loomine koos animatsiooni, varjude jms. ei saanudki nii keeruliseks ülesandeks. Loodan, et see õppetund aitab teil veebisaidi jaoks oma vorme luua.

Selline näeb lõpuks välja tagasiside vorm

Vaatame kohe kõiki välju, mis sellel kujul teile kättesaadavad on.

Tagasiside vormi väljade struktuur

• Saatja nimi
• postiaadress
• telefon
• saatja ettevõte
• saatja veebisait
• toode (suund)
• vajalike teenuste loetelu
• Lisainformatsioon
• rämpspostitõrje / roboti kaitse

Omadused ja võimalused

• "Saada" nupu blokeerimine, kuni vajalikud tingimused on täidetud
• lihtne valija robotite kontrollimiseks ja nende eest kaitsmiseks
• lisanupp "Tühjenda kõik väljad".

Mida sisaldab tagasiside vorm?

• HTML-i märgistus (küljenduse loomine)
• Vormiväljade kujundamine CSS/SCSS-iga
• jQuery + js
• PHP käitleja

HTML-märgistuse loomine

Niisiis, vaatame vormi märgistust:

Palun tutvustage ennast: * Märkige oma email: * Märkige oma telefoninumber: * Kirjutage, millisest ettevõttest olete: Märkige oma veebisait: Toode: Valige teenus: Ühtegi teenust pole valitud Teenus_ Teenus_ Teenus_ Teenus_ Teenus_ Teenus_ Teenus_ Lisa. Teave: Olen robot Olen inimene Tühjenda Tärniga * märgitud väljad on kohustuslikud.

Seal on kolm esimest välja, millel on ID ja teatud js-i sündmus onkeyup="checkParams()" (neid läheb meil hiljem vaja). Nende suhtes kohaldatakse andmete sisestamise õigsuse kohustuslikku kontrolli. Selle eest vastutab nõutav atribuut. Kui teil on vaja mõni muu väli eemaldada või kohustuslikuks muuta, siis lihtsalt eemaldage/lisage see atribuut.

Mitmed lisaväljad, mis pole kohustuslikud.

Valija pakutavate teenuste valimiseks valige .

Lisateabe välja tekstiala .

Valija “inimlikkuse” kontrollimiseks – töötan | ma olen inimene.

Kaks nuppu: Saada ja Kustuta teave täidetud väljadel.

Heas mõttes on endiselt puudu andmetöötluse nõusoleku kinnitamiseks märkeruut, kuid selle lisamine ei tekita teile loodetavasti raskusi.

Vormi kujundamine CSS/SCSS

Kõik vormiväljad kujundatakse CSS flexboxi (Flexible Box Layout Module) abil ja jagatakse täiendavate klassidega rühmadesse. Muidugi saate luua oma stiile. Kui tunnete CSS-i, saate kõigi vormielementide kujunduse ilma probleemideta seadistada, te ei vaja isegi minu abi.

Vorm ( sisend, sisend, sisend, tekstiala, valige ( ekraan: plokk; täidis: 12 pikslit 15 pikslit; rea kõrgus: 1,5; laius: 100%; fondi suurus: 16 pikslit; ääris: 1 pikslit tahke #ced4da; äärise raadius: . 25rem: taustakast: #fff 0 0 rgba(255, 255, 255, .05), sisestus 0 1px 0 rgba (0, 0, 0, .05 &:focus ( outline: none; ) .form-row ( kuva: flex; flex-wrap: wrap; justify-content: space-between; .form-group:nth-child(1) ( input () laius: 95%; ) ) .col-6 ( asend: suhteline; flex: 0 0 50%; max-width: 50%; ) .pt-3 ( polster-top: 1rem; ) .form-group ( margin- alumine: 1rem; silt ( reakõrgus: 1,7; tähevahe: 0,3 pikslit; teksti teisendus: suurtähed; fondi suurus: 14 pikslit; fondi kaal: 900; ) tekstiala ( min-kõrgus: 110 pikslit; suuruse muutmine: vertikaalne; ) ) )

PHP koodi seadistamine

Liigume nüüd edasi vormikäsitleja juurde, kus kõik toimingud algavad olenevalt valitud selektorist – Bot/Human.

Mis seal on?

• header("Värskenda: 5; URL=https://www.site.ru"); — pärast vormi täitmist roboti poolt saadab see teavituslehele ja naaseb 5 sekundi pärast väljal määratud lehele.
• post, nimi, telefon, ... - html-väljade sobitamise seadistamine. Siin peate tagasisidevormil sisestama kõik asjakohased nimed="". Seega tuleb teenuste väljal määrata täpselt sama valikute järjekord nagu html-i märgistuses.
• $mess on kirjas saabuva sõnumi sisu. Saate neid vahetada, muuta nende nimesid või lihtsalt kustutada/kommenteerida need, mida te ei vaja.
• $headers on kohustuslik rida, mis näitab tähe kodeeringut. Kui kustutate või muudate kogemata charset=utf-8, muutuvad kõik teie sõnad hieroglüüfideks.
• päis – peale edukat nupu klõpsamist suunatakse külastaja teavituslehele ja 5 sekundi pärast suunatakse ta määratud lehele. Või muidu (see saab veateate.

Täiendavad maiuspalad js ja jQuery jaoks

Varem vaatasime html-vormi malli, milles nägime kolme kohustusliku välja jaoks lisatud ID-sid ja funktsioone. On aeg välja mõelda, miks need lisati.

Vaadake js-koodi. See on nuppude blokeerija, mis keelamisel takistab külastajal sellel klõpsamast enne vajalike väljade täitmist.

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

Sisestame ID nõutavatele väljadele ja keelame nupule, et need selle skriptiga siduda. Nende nimesid ja kogust saad muuta, lisades/eemaldades vajalikud var read. Kui aga lisate või eemaldate need, ärge unustage muuta rea ​​tingimusi if (nimi.pikkus != 0 && email.length >= 6 && phone.length >= 10) ( .

Kuidas see liin töötab?

Kõik oleneb määratud välja märkide arvust, st. selle pikkus pikkus.

• if (nimi.pikkus != 0 - näitab, et väli ei tohiks olla tühi. Loe kui - "kui väljal ei ole märkide arv null, siis ..."
• && - ühendab tingimused (ja)
• email.length >= 6 — tähemärkide arv peab olema suurem või võrdne 6-ga. Miks kuus? Märkasin selle numbri, kuna minimaalne postiaadress on 6 tähemärki. Kas kontrollime? @bk.ru - 6 tähemärki.
• phone.length >= 10 – suurem kui kümme tähemärki või sellega võrdne. Miks 10 ja mitte 11? Selle välja täitmisel saab külastaja märkida oma telefoninumbri kas +7 või 8-ga. Seetõttu on parem märkida 10.

See on kõik. Ühendage vorm, testige ja kasutage.

Kui teil on küsimusi, kirjutage kommentaaridesse ja ärge olge artikli hindamisel kooner. Ette tänades :)