Viena no vissvarīgākajām jebkuras vietnes sadaļām ir saziņas veidlapa, kas var būt tik vienkārša, kā pievienot dažus vienkāršus laukus un pogu, lai nosūtītu šo ievadīto informāciju, taču mēs vienmēr varam iet nedaudz tālāk un, ja esam radoši, ieviest kontaktformu, kas ne tikai pilda savu raksturīgo funkcionalitāti, bet arī nodrošina vizuālu un lietotājam draudzīgu efektu.
Apskatīsim soļus, kas jāievēro, lai ieviestu šo veidlapu, kas simulēs aploksni, kas, novietojot peles kursoru, ļaus lietotājam aizpildīt datus, kas būs burts, un tas viss, izmantojot HTML Y CSS3.
Aktīvi vai resursi
Vispirms mums ir jābūt aploksnei, kur tiks novietota mūsu vēstule, šim nolūkam mēs izmantosim divus dažādus attēlus - vienu no aploksnes augšpuses un otru no apakšas, kas kopā ar pārejām dos mums vēlamo efektu.
Kā redzam, tie nemaz nav sarežģīti, tomēr šie attēli atrodas šim piemēram piemērotā krātuvē, kuru pamācības beigās atradīsit atbilstošajā lejupielādes saitē.
Veidlapas uzbūve
Vispirms mēs izveidosim HTML failu, kas tiks saukts contact_form.html kas ietvers mūsu veidlapu kā tādu un .css faila iekļaušanu, kas būs atbildīgs par tā stilu apstrādi un pārejām, redzēsim, kā tas izskatās:
Saziņas veidlapaTagad mums vienkārši jāizveido .css ar nosaukumu stili.css un tur ievietojiet mūsu formas stilus un izmantojiet pārejas, lai radītu vēlamo efektu, vispirms mēs nedaudz mainīsim sava ķermeņa izskatu, lai tas izskatītos kā burts:Sveiki!
Ziņojums:Ievadiet savus datus
Vārds: E -pasts:
pamatteksts {fons: #ccc url ('img / bg_carta_fuera.png.webp'); krāsa: # 7c7873; font-family: 'helvetica';} p {text-shadow: 0 1px 0 #fff; font-size: 24px;} # wrap {width: 530px; mala: 20 pikseļi auto 0; augstums: 1000px;} h1 {margin-bottom: 20px; text-align: center; font-size: 48px; teksta ēna: 0 1px 0 # ede8d9; }Kad tas ir izdarīts, mēs īstenosim pārejas div, kas satur veidlapu, kuru mēs izmantosim pāreja dažādos variantos katrai pārlūkprogrammai un ar vērtību viegli ieslēdzama Mēs sniegsim jums lēna sākuma un beigu efektu:
#form_wrap {overflow: hidden; augstums: 446 pikseļi; stāvoklis: radinieks; augšpusē: 0 pikseļi; -Webkit-pāreja: visi 1s viegli-in-out .3s; -moz-pāreja: visi 1s viegli-in-out .3s; -o-pāreja: visi 1s viegli-in-out .3s; pāreja: visi 1s viegli ieeja .3s;}Tagad ar pseido elementiem pirms tam Y nicina de mēs pabeigsim vēstules efektu, kas iznāk no aploksnes, redzēsim:
#form_wrap: pirms {content: ""; pozīcija: absolūta; apakšā: 128 pikseļi; pa kreisi: 0 pikseļi; fons: url ('img / before.png.webp'); platums: 530 pikseļi; augstums: 316 pikseļi;} #form_wrap: aiz {content: ""; position: absolūts; apakšā: 0 pikseļi; pa kreisi: 0; fons: url ('img / after.png.webp'); platums: 530 pikseļi; augstums: 260 pikseļi; }Visbeidzot, mēs pievienojam dažus stilus iesniegšanas pogai, lai kontrolētu gan displeju, gan ietekmi uz to:
#form_wrap input [type = iesniegt] {position: relatīvs; font-family: 'helvetica'; fonta lielums: 24 pikseļi; krāsa: # 7c7873; text-shadow: 0 1px 0 #fff; platums: 100%; text-align: center; necaurredzamība: 0; fons: nav; kursors: rādītājs; -moz-border-rādiuss: 3 pikseļi; -webkit-border-rādiuss: 3 pikseļi; robežas rādiuss: 3 pikseļi; -Webkit-pāreja: necaurredzamība .6s viegli-in-out 0s; -moz-pāreja: necaurredzamība .6s vieglums-in-out 0s; -o-pāreja: necaurredzamība .6s vieglums-in-out 0s; pāreja: necaurredzamība .6s vieglums-in-out 0s; } #form_wrap: virziet kursoru uz ievades [tips = iesniegt] {z-index: 1; necaurredzamība: 1; -Webkit-pāreja: necaurredzamība .5s viegli-in-out 1.3s; -moz-pāreja: necaurredzamība .5s viegli ieeja 1,3s; -o-pāreja: necaurredzamība .5s viegli ieeja 1,3s; pāreja: necaurredzamība .5s viegli ieeja 1,3s;}Tātad, redzēsim, kā izskatās mūsu sākotnējā saziņas veidlapa, kad to palaižam pārlūkprogrammā:
PALIELINĀT
Novietojot peles kursoru virs tā, mēs redzēsim veidlapas funkcionalitāti, lai varētu ievadīt datus un nosūtīt:
PALIELINĀT
Kā mēs redzam, šīs veidlapas uzbūve bija pavisam vienkārša, un pats labākais - mēs neesam piesaistīti nevienai ārējai bibliotēkai, tāpēc tās ieviešana ir diezgan vienkārša jebkurā vietnē, tikai katram pašam ir jāpapildina piemērs un jāveic sūtāmā funkcionalitāte, izmantojot kādu programmēšanas valodu, piemēram, PHP, Rubīns, Python vai pat Node.js.
