Kao odgovor na takvo pitanje, prvo što pada na pamet je: "Udobno i radi." I ovo je općenito logično. U suprotnom, koja je svrha lijepe forme na stranici? Povratne informacije, koji se ne koristi? Ali prvo o svemu.
Mnogo oblika - jedan ciljZapočnimo s time čemu služe obrasci za povratne informacije na web stranici? Vlasnik web stranice mora biti u mogućnosti doći do posjetitelja svoje web stranice. Ljudi nastoje uštedjeti vrijeme na traženju informacija o proizvodima koji su im potrebni, razjašnjavanju njihovih kvaliteta i karakteristika, cijena i, što je najvažnije, narudžbi. Obrasci za povratne informacije važan su kanal putem kojeg se odvija komunikacija između posjetitelja stranice i njenog vlasnika, prodavača i kupca. Ako ovaj komunikacijski kanal ne funkcionira ili je nezgodan za posjetitelja, on može odustati od ideje da vas kontaktira, a samim tim i od ideje da postane vaš pravi klijent.
Koliko se redovito i aktivno obrasci za povratne informacije koriste na vašoj web stranici, govorit će o vašoj web stranici ništa gore od analize posjeta.
Ovo logično slijedi zaključak koji je već iznesen gore - obrasci za povratne informacije moraju biti praktični i moraju funkcionirati!
Vrijedno je napomenuti da drugi dio ovog zaključka ne ovisi samo o ispravnom programiranju. S tehničke strane, obrazac može raditi savršeno, ali operater mora brzo odgovoriti na zahtjeve koji dolaze sa stranice. Inače će obrasci za povratne informacije biti beskorisni. Ako operater ponovno nazove posjetitelja za dva dana, potreba za naručivanjem proizvoda ili usluge od osobe može jednostavno nestati.
Može postojati veliki izbor obrazaca za povratne informacije (“Naručite povratni poziv”, “Postavite pitanje”, “Ostavite recenziju”, “Ispunite obrazac za narudžbu”, “Kontaktirajte upravitelja” itd.), a oni mogu koristiti za različite zadatke. Ali svi će imati u biti isti cilj - osigurati vezu između posjetitelja stranice i njenog administratora ili vlasnika, dobiti kontakte posjetitelja za daljnju interakciju s njim.
Sedam savjeta koje treba zapamtitiPrisjetimo se nekoliko jednostavna pravila, što se mora uzeti u obzir pri izradi i postavljanju FOS-a na stranicu.
Obrazac treba postaviti tako da ga posjetitelj može lako pronaći.
Postavite obrazac na vidljivo mjesto - tako da se posjetitelj Vaše stranice ne mora truditi pronaći obrazac za povratnu informaciju među mnoštvom različitih elemenata na stranici ili beskrajno skrolati po stranici.
Tradicionalno, obrasci se mogu postaviti u zaglavlje web stranice ili na stranicu za kontakt.
Ako je potrebno, možete duplicirati ključne obrasce u podnožju kako ne biste tjerali posjetitelje koji su pregledali cijelu stranicu da se ponovno pomiču prema gore:
Ako postoje stranice s proizvodima ili uslugama koje podliježu posebna ponuda a posjetitelj ga može dobiti online narudžbom, brzim pozivom ili narudžbom na ovoj stranici.
Osim toga, to će vam omogućiti da "privučete" posjetitelja koji je već zainteresiran za proizvod ili uslugu. Posjetitelj je pogledao opis, garancije, cijene, zaključio da mu proizvod ili usluga odgovara, pa mu odmah nudimo da, bez napuštanja ove stranice, ostavi zahtjev za narudžbu ove usluge.
Obrazac mora biti prikazan i jednako ispravno raditi na svim uređajima i u svim preglednicima.
Ili ukratko - provjerite kompatibilnost obrazaca za povratne informacije na vašoj stranici s više preglednika i platformi. Obrazac može biti vidljiv i jednostavan za ispunjavanje s laptopa ili stolno računalo, ali na tabletu polje za unos podataka može biti preusko i nezgodno za unos teksta ekran na dodir. Hoće li klijent tada uvijek iznova pokušavati unijeti svoje podatke kako bi vas kontaktirao? Odgovor je očit.
Obrazac treba biti kratak i jasan.
Što to znači? Obrazac se ne bi trebao sastojati od velika količina polja ili korake popunjavanja. Osim, naravno, ako za to postoji ozbiljna potreba. Ljudi teže jednostavnosti; ne žele trošiti puno vremena na shvaćanje i ispunjavanje deset tisuća polja.
Ako usluga uključuje primanje sasvim detaljne informacije, pojednostaviti zadatak za klijenta (ako je to moguće, naravno). Istaknite nekoliko ključnih polja koja morate ispuniti:
Izgleda praktičnije nego, na primjer:
Bolje je nazvati i usmeno razjasniti sve što trebate, ali posjetitelju olakšajte ispunjavanje obrasca. I time povećajte šanse da vas kontaktira!
Nastavljajući temu jasnoće, obratite pozornost na činjenicu da obrazac ima naslov - "Naručite povratni poziv", "Naručite poziv geodetu", "Naručite besplatne konzultacije" itd. Bolje je duplicirati isto zaglavlje u elektroničkim obavijestima koje će dolaziti iz obrasca na vašu e-poštu. Tada ne samo da se posjetitelj vaše stranice neće zbuniti i zaboraviti prijavu za što točno ispunjava. No, sami ćete dobiti jasnu informaciju o tome koja je informacija bila zanimljiva posjetitelju koji je podnio zahtjev. To će vam pomoći da brzo krenete u daljnju komunikaciju s posjetiteljem i pravilno izgradite dijalog.
Obrazac treba imati ugodan i praktičan dizajn.
Sva polja moraju biti jasno vidljiva. Ako koristite puno boja pri izradi dizajna forme, obratite pozornost da ih nema previše, da su kombinirane i da nisu pretjerano svijetle. Osoba koja ispunjava obrazac ne smije naprezati vid. Isto vrijedi i za odabir boja za tekstualne poruke.
Bolje je izbjegavati kombiniranje tamnog na tamnom. Ako, na primjer, na tamnoplavoj pozadini napravite tamnocrveni ili tamnozeleni natpis "Vaša poruka je poslana", jednostavno se neće vidjeti.
Obrazac mora sadržavati poziv na akciju.
Mali dodir koji potiče posjetitelja da poduzme ili dovrši radnju. U našem slučaju, pošaljite poruku sa stranice!
Također je bolje istaknuti gumb u kontrastnoj boji. Zajedno s pozivom na akciju, to će ga učiniti uočljivim i privući pozornost posjetitelja.
Forma bi se trebala lako smotati.
Dakle, formular je lako pronaći, ima lijep dizajn i praktičan je za ispunjavanje. Što drugo?
Ne zaboravite zamoliti programere da dodaju "križ" na obrazac kako biste ga mogli zatvoriti. Ili konfigurirajte obrazac da se automatski skupi nakon što ga ispunite.
Čini se kao sitnica, ali može pokvariti cjelokupnu sliku.
Na primjer, posjetitelj je ostavio zahtjev na web mjestu i želi se vratiti na pregledavanje web mjesta. ALI! Obrazac visi, ne nestaje i nije jasno kako ga zatvoriti. Ili druga opcija - posjetitelj se predomislio o pisanju zahtjeva i odlučio se sam nazvati. Može ispasti neugodno.
Postavljanje poruke odgovora.
Nešto kao to…
Osoba koja šalje poruku želi biti sigurna da ćete njezinu poruku primiti i razmotriti. Tehnički gledano, postavljanje automatske obavijesti neće oduzeti puno vremena, ali će ojačati samopouzdanje posjetitelja da njegova poruka neće ostati bez odgovora. To se obično koristi u onim obrascima u kojima trebate navesti svoje elektronička pošta. Međutim, moderne usluge omogućuju postavljanje automatskih upozorenja putem SMS-a.
SažimajućiPostoji mnogo suptilnosti i drugih detalja: možete eksperimentirati s oblikom i dizajnom, možete dodati nenametljive grafike na temu itd. Ali osnovni kriteriji se ne mijenjaju. Svemu što je gore rečeno, želio bih dodati veliku, ali važnu želju - povremeno provjeravajte rad obrazaca za povratne informacije na web mjestu. Tehnički kvarovi ne bi trebali biti prepreka vašem poslovanju!
Obrazac za povratne informacije, ili drugačije rečeno, jedan je od najvažnijih elemenata svake web stranice. I naravno, kao i svi drugi elementi korisničkog sučelja, kontakt elementi moraju biti na neki način izvana stilizirani i dizajnirani kako bi privukli pažnju korisnika i potaknuli komunikaciju.
Nudim vam na razmatranje nekoliko opcija za stilove obrazaca za povratne informacije, isključivo pomoću 3, bez upotrebe dodatnih slika u dizajnu. Ništa suvišno, samo kratki fragmenti koda (isječci) za kontakt forme, izrađeni u svijetlim i tamnim bojama.
Ovisno o boji glavne pozadine stranice, vizualno će se mijenjati i osnovna boja pozadine samog obrasca. Veličina forme ovisi o veličini posude u koju će se forma staviti.
Html okvir obrasca je standardan, potrebna su polja za unos i gumb "Pošalji" za povezivanje s CSS-om, svakom elementu obrasca dodijeljena je određena klasa, ništa komplicirano, neće biti teško razumjeti.
| < form> < input name= "name" placeholder= "Unesite svoje ime!" class = "name" required /> < input name= "emailaddress" placeholder= "Unesi svoj email!" class = "email" type= "email" required /> < textarea rows= "4" cols= "50" name= "subject" placeholder= "Unesite svoju poruku:" class = "message" required> < input name= "submit" class = "btn" type= "submit" value= "Poslati" /> |
CSS
Neću ići puno u detalje o stilovima, samo ću napomenuti jednu stvar: koristio sam neka CSS3 svojstva u dizajnu, linearni gradijent, efekt sjene, blago zaobljene kutove itd., pokušao sam postići neki križ -kompatibilnost preglednika za ova svojstva, ali u starijim verzijama preglednika obrazac će i dalje izgledati malo drugačije ((.
| /* Osnovni stil obrasca */ obrazac ( margina: 0 auto; max- width: 95 %; padding: 30px 30px 6px 30px; border: 1px solid rgba(0 , 0 , 0 , .2 ) ; - moz- border- radius : 5px; - webkit- granica- radijus: 5px; granica- radijus: 5px; - moz- pozadina- isječak: padding; - webkit- pozadina- isječak: padding- box; background- clip: padding- box; pozadina: rgba( 0 , 0 , 0 , 0.5 ) ; - moz- box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; - webkit- box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; box-shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; overflow: hidden; ) /* Polje poruke */ textarea( background: rgba(255 , 255 , 255 , 0.4 ) ; širina: 100%; visina: 110 px; obrub: 1 px solid rgba(255 , 255 , 255 , .6 ) ; - moz- polumjer obruba: 4 px; - webkit- polumjer obruba: 4 px; polumjer obruba: 4 px; - moz- pozadina- isječak: padding; - webkit- background- isječak: padding- box; background- clip: padding- box; display: block; font-familija: "Open Sans", sans- serif; veličina fonta: 18px; težina slova: 300; boja: #fff; padding-left: 25px; padding- desno: 20px; padding-top: 12px; margina- dno: 20px; preljev: skriven; ) /* Polja za unos */ input ( širina: 100%; visina: 48px; obrub: 1px solid rgba(255 , 255 , 255 , .4 ) ; - moz- granica- radijus: 4px; - webkit- granica- radijus: 4px; granica- radijus: 4px; - moz- pozadina- isječak: ispuna; - webkit- pozadina- isječak: padding- okvir; pozadina- isječak: padding- okvir; prikaz: blok; font-obitelj: "Open Sans" , sans - serif; veličina fonta: 18px; težina fonta: 300; boja: #fff; ispuna- lijevo: 20px; ispuna- desno: 20px; margina- donja: 20px; ) unos[ tip= pošalji] ( kursor: pokazivač; ) unos. ime (pozadina: rgba(255, 255, 255, 0.4); padding- lijevo: 25px;) unos. e-pošta (pozadina: rgba(255, 255, 255, 0.4); padding- lijevo: 25px;) unos. poruka ( pozadina: rgba(255 , 255 , 255 , 0.4 ) ; padding- lijevo: 25px; ) ::- webkit- input- rezervirano mjesto (boja: #fff; ) :- moz- rezervirano mjesto (boja: #fff; ) : :- moz- rezervirano mjesto (boja: #fff; ) :- ms- unos- rezervirano mjesto (boja: #fff; ) unos: fokus, tekstualno područje: fokus (boja pozadine: 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 ) ; preljev: skriven; ) /* Stilovi za gumb za slanje */ . btn ( širina: 138px; visina: 44px; - moz- radijus obruba: 4px; - webkit- radijus obruba: 4px; polumjer obruba: 4px; float: desno; obrub: 1px solid #253737; pozadina: #416b68; pozadina: - webkit- gradijent (linearno, lijevo gore, lijevo dolje, od (#6da5a3), do (#416b68)); pozadina: - webkit- linearni- gradijent (gore, #6da5a3, #416b68); pozadina: - moz - linearni gradijent (gore, #6da5a3, #416b68); pozadina: - ms- linearni gradijent (gore, #6da5a3, #416b68); pozadina: - o- linearni gradijent (gore, #6da5a3, #416b68); pozadinska slika: - ms- linearni- gradijent (vrh, #6da5a3 0%, #416b68 100%); padding: 10. 5px 21px; - webkit- obrub- radijus: 6px; - moz- obrub- radijus: 6px; obrub - polumjer: 6px; - webkit- okvir- sjena: rgba(255, 255, 255, 0.1) 0 1px 0, umetnuti rgba(255, 255, 255, 0.7) 0 1px 0; - moz- okvir- sjena: rgba( 255 , 255 , 255 , 0.1 ) 0 1px 0 , umetnuto rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; sjena okvira: rgba(255 , 255 , 255 , 0.1 ) 0 1px 0 , umetnuto rgba(255 , 255, 255, 0.7) 0 1px 0; tekst-sjena: #333333 0 1px 0; boja: #e1e1e1; ) . btn: lebdite (obrub: 1px solid #253737; tekst- sjena: #333333 0 1px 0; pozadina: #416b68; pozadina: - webkit- gradijent(linearno, lijevo gore, lijevo dolje, od(#77b2b0), do(# 416b68)); pozadina: - webkit- linearni- gradijent(vrh, #77b2b0, #416b68); pozadina: - moz- linearni- gradijent(gor, #77b2b0, #416b68); pozadina: - ms- linearni- gradijent(gore , #77b2b0, #416b68); pozadina: - o- linearni- gradijent(gore, #77b2b0, #416b68); pozadinska slika: - ms- linearni- gradijent(gore, #77b2b0 0%, #416b68 100%); boja: #fff; ). btn: aktivno ( margina- vrh: 1px; tekst- sjena: #333333 0 -1px 0; obrub: 1px solid #333333; pozadina: #ffCC00; pozadina: - webkit- gradijent(linearno, lijevo gore, lijevo dolje, od( #ffCC00), do(#ff6600)); pozadina: - webkit- linearni- gradijent(top, #ffcc00, #ff6600); pozadina: - moz- linearni- gradijent(top, #ffcc00, #ff6600); pozadina: - ms- linearni- gradijent(gore, #ffcc00, #ff6600); pozadina: - o- linearni- gradijent(gore, #ffcc00, #ff6600); pozadinska slika: - ms- linearni- gradijent(gore, #ffcc00 0% - moz - okvir-sjena: rgba(255, 255, 255, 0) 0 1px 0, umetnuti rgba(255, 255, 255, 0. 7) 0 1px 0; okvir-sjena: rgba(255, 255, 255, 0) 0 1px 0, umetnuti rgba(255, 255, 255, 0.7) 0 1px 0; obris: nema; ) |
/* Osnovni stil obrasca */ obrazac ( margina: 0 auto; max-width: 95%; padding: 30px 30px 6px 30px; border: 1px solid rgba(0,0,0,.2); -moz-border-radius : 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: rgba( 0, 0, 0, 0.5); -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0) ,.5); box-shadow: 0 0 13px 3px rgba(0,0,0,.5); overflow: hidden; ) /* Polje poruke */ textarea( pozadina: rgba(255, 255, 255, 0.4) ; širina: 100%; visina: 110px; obrub: 1px solid rgba(255,255,255,.6); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background -isječak: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display: block; font-family: "Open Sans", sans-serif; font-size:18px; font-weight : 300; boja: #fff; padding-left:25px; padding-desno:20px; padding-top:12px; margin-bottom:20px; preljev: skriven; ) /* Polja za unos */ input ( širina: 100%; visina: 48px; granica: 1px solid rgba(255,255,255,.4); -moz-border-radius: 4px; -webkit-border-radius: 4px; border- radijus: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display: block; font-family: "Open Sans", sans-serif; font -size:18px; font-weight: 300; color:#fff; padding-left:20px; padding-right:20px; margin-bottom:20px; ) input (cursor:pointer;) input.name ( background: rgba( 255, 255, 255, 0.4); padding-left:25px; ) input.email ( background: rgba(255, 255, 255, 0.4); padding-left:25px; ) input.message ( background: rgba(255, 255, 255, 0.4); padding-left:25px; ) ::-webkit-input-placeholder ( boja: #fff; ) :-moz-placeholder ( boja: #fff; ) ::-moz-placeholder ( boja: #fff; ) :-ms-input-placeholder ( boja: #fff; ) input:focus, textarea:focus ( background-color: 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); okvir-sjena: 0 0 5px 1px rgba(255,255,255,.5); preljev: skriven; ) /* Stilovi za gumb za slanje */ .btn ( width: 138px; height: 44px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; float:right; border : 1px solid #253737; pozadina: #416b68; pozadina: -webkit-gradient(linearno, lijevo gore, lijevo dolje, od(#6da5a3), do(#416b68)); pozadina: -webkit-linear-gradient(gore, # 6da5a3, #416b68); pozadina: -moz-linearni-gradijent(gore, #6da5a3, #416b68); pozadina: -ms-linearni-gradijent(gore, #6da5a3, #416b68); pozadina: -o-linear- gradijent (vrh, #6da5a3, #416b68); pozadinska slika: -ms-linearni gradijent(vrh, #6da5a3 0%, #416b68 100%); ispuna: 10. 5px 21px; -webkit-border-radius: 6px; -moz-border-radius: 6px; radijus granice: 6px; -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, umetnuti rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, umetnuti rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0.1) 0 1px 0, umetnuti rgba(255,255,255,0.7) 0 1px 0; tekst-sjena: #333333 0 1px 0; boja: #e1e1e1; ) .btn:hover ( border: 1px solid #253737; text-shadow: #333333 0 1px 0; background: #416b68; background: -webkit-gradient(linearno, lijevo gore, lijevo dolje, from(#77b2b0), to (#416b68)); pozadina: -webkit-linearni-gradijent(gore, #77b2b0, #416b68); pozadina: -moz-linearni-gradijent(gore, #77b2b0, #416b68); pozadina: -ms-linearni-gradijent (gore, #77b2b0, #416b68); pozadina: -o-linearni-gradijent(gore, #77b2b0, #416b68); pozadinska slika: -ms-linearni-gradijent(gore, #77b2b0 0%, #416b68 100% ); boja: #fff; ) .btn:active ( margin-top:1px; text-shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: -webkit-gradient(linearno) , lijevo gore, lijevo dolje, od (#ffCC00), do (#ff6600)); pozadina: -webkit-linear-gradient(top, #ffcc00, #ff6600); pozadina: -moz-linear-gradient(top, # ffcc00, #ff6600); pozadina: -ms-linearni-gradijent(gore, #ffcc00, #ff6600); pozadina: -o-linearni-gradijent(gore, #ffcc00, #ff6600); pozadinska slika: -ms-linearno -gradijent(vrh, #ffcc00 0%, #ff6600 100%); boja: #fff; -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, umetnuti rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, umetnuti rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0) 0 1px 0, umetnuti rgba(255,255,255,0.7) 0 1px 0; obris: nema; )
Možda će vam ovo biti zanimljivo: 2. Kontakt obrazac u svijetlim bojamaDruga opcija dizajna obrasca za povratne informacije predstavljena je u svijetlim bojama; dimenzije obrasca (širina, visina), kao u prvoj opciji, nisu fiksne i lako će se uklopiti u dimenzije spremnika u kojem će se ovaj obrazac nalaziti. nalazi se.
Kao iu prvoj opciji, Html struktura kontakt obrasca je standardna, elementi obrasca s određenim klasama odgovaraju klasama u CSS-u.
| < form> < input name= "name" placeholder= "Unesite svoje ime!" class = "textbox" required /> < input name= "emailaddress" placeholder= "Unesi svoj email!" class = "textbox" type= "email" required /> < textarea rows= "4" cols= "50" name= "subject" placeholder= "Unesite svoju poruku:" class = "message" required> < input name= "submit" class = "button" type= "submit" value= "Poslati" /> |
CSS
Pri formiranju osnovnih veličina formi i unutarnjih elemenata koristio sam postotne vrijednosti širine zahvaljujući kojima se forma lako prilagođava dimenzijama posude u kojoj će se nalaziti. Shema boja gumba "Pošalji", njegova veličina i mjesto mogu se jednostavno promijeniti, samo eksperimentirajte određene vrijednosti.
| /* Osnovni stilovi obrasca */ form( margina: 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 ) ; ) /* Stilovi margina unos */ . tekstualni okvir (visina: 50 px; širina: 100%; radijus obruba: 3 px; obrub: rgba(0 , 0 , 0, .3 ) 2 px čvrsta; veličina okvira: obrub; obitelj fontova: "Open Sans" , sans-serif; veličina fonta: 18px; padding: 10px; margin-bottom: 30px; ) . poruka: fokus, . tekstni okvir: fokus( obris: nijedan; obrub: rgba(24, 149, 215, 1) 2px čvrsta; boja: rgba(24, 149, 215, 1) ;) /* Stilovi tekstualnog okvira */. poruka( pozadina: rgba(255 , 255 , 255 , 0.4 ) ; širina: 100%; visina: 120px; obrub: rgba(0 , 0 , 0 , .3 ) 2px čvrsta; veličina okvira: okvir okvira; - moz - polumjer obruba: 3px; veličina fonta: 18px; obitelj fontova: "Open Sans", sans-serif; - webkit- polumjer obruba: 3px; polumjer obruba: 3px; prikaz: blok; ispuna: 10px; margina - dolje: 30 px; overflow: skriveno; ) /* Osnovni stilovi gumba */ . gumb (visina: 50 px; širina: 100%; radijus obruba: 3 px; obrub: rgba(0 , 0 , 0 , .3 ) 0 px solid; veličina okvira: obrub; ispuna: 10 px; pozadina: #90c843; boja: #FFF; obitelj fonta: "Open Sans", sans-serif; težina fonta: 400; veličina fonta: 16pt; prijelaz: pozadina. 4s; kursor: pokazivač; ) /* Promjena pozadine gumba pri lebdenju * / . gumb: lebdite (pozadina: #80b438; ) |
/* Osnovni stilovi obrasca */ 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); ) /* Stilovi polja za unos */ . textbox( height:50px; width:100%; border-radius:3px; border:rgba(0,0,0,.3) 2px solid; box-sizing:border-box; font-family: "Open Sans", sans-serif; font-size:18px; padding:10px; margin-bottom:30px; ) .message:focus, .textbox:focus( outline:none; border:rgba(24,149,215,1) 2px solid; color:rgba( 24,149,215,1); ) /* Stilovi tekstualnih polja */ .message( pozadina: rgba(255, 255, 255, 0.4); širina:100%; visina: 120px; obrub:rgba(0,0,0,.3 ) 2px solid; box-sizing:border-box; -moz-border-radius: 3px; font-size:18px; font-family: "Open Sans", sans-serif; -webkit-border-radius: 3px; border -radius: 3px; display:block; padding:10px; margin-bottom:30px; overflow:hidden; ) /* Osnovni stilovi gumba */ .button( height:50px; širina:100%; rubni radijus:3px; granica:rgba(0,0,0,.3) 0px čvrsta; veličina okvira: rubni okvir; padding:10px; pozadina:#90c843; boja:#FFF; obitelj fontova: "Open Sans", sans-serif; težina fonta:400; veličina fonta: 16pt; prijelaz:pozadina .4s; kursor:pokazivač; ) /* Promjena pozadine gumba pri lebdenju */ .button:hover( background:#80b438; )
Postoji mnogo mogućnosti dizajna za kontakt forme, glavna stvar je imati malo mašte i osnovno znanje o CSS-u. Na stranicama mog bloga možete pronaći druge i primjere stilova obrazaca za povratne informacije.
Za one koji su posebno nepažljivi, želim još jednom pojasniti: obrasci predstavljeni u članku samo su vanjska ljuska Da bi obrasci stvarno mogli obavljati svoje funkcije potrebno im je priložiti rukovatelj skriptama kojih ima dosta razbacano po internetu pa vas molimo da ne pišete u komentarima da obrasci ne rade i sl., sve radi odlično, samo trebate razumjeti što, gdje i zašto))).
Sa svim poštovanjem, Andrew.
Pozdrav, dragi prijatelji i gosti bloga! Povratne informacije o web stranici jedna su od najznačajnijih značajki koje blogeru omogućuju komunikaciju sa svojim posjetiteljima. Ali postoji jedna začkoljica - dodaci koji prikazuju povratne informacije za web mjesto imaju veliku težinu!
Već sam neko vrijeme bio zauzet olakšavanjem svog bloga i odlučio sam se riješiti nepotrebnih dodataka koji ga opterećuju svojom težinom i sprječavaju brzo učitavanje stranica. I prije svega, moj izbor je pao na formu za povratne informacije, odnosno na dodatak koji ju je prikazivao na mojoj web stranici “Contact Form 7”, a trebao je i drugi dodatak koji je prikazivao captcha “reCaptcha”. Ovako sam se odlučio riješiti dva prilično značajna dodatka odjednom, koristeći obrazac za povratne informacije koji ne zahtijeva nikakve dodatke i koji se lako instalira na web mjesto. Sada ću vam reći o tome i, naravno, dopustiti ću vam da preuzmete datoteke kako biste mogli stvoriti slične povratne informacije za svoju stranicu...
I tako, nakon što sam konačno uklonio dodatke za izradu obrasca za povratne informacije sa svoje stranice, počeo sam stvarati jednostavan i pouzdan obrazac za povratne informacije bez korištenja dodataka. I evo što sam dobio:
Možete vidjeti i provjeriti funkcionalnost mog obrasca za povratne informacije za stranicu na stranici “ ”. Pišite mi u kontakt formu na web stranici i odgovorit ću vam!
Sada prijeđimo na najvažniju stvar i stvorimo vlastitu povratnu informaciju za web mjesto, neovisno o dodacima...
Dajemo povratne informacije za stranicu bez dodataka!Sve što nam treba za ovo: moja blog stranica sa člankom "Povratne informacije za stranicu", uređivač teksta i naravno vaša želja da kreirate vlastiti obrazac za kontakt na stranici kako biste to olakšali uklanjanjem nepotrebnih i teških dodataka!
Ovdje je HTML kod obrasca za povratne informacije za web mjesto, koji možete zalijepiti na svoje web mjesto ili blog bilo gdje, za mene je ovo kontakt stranica:
Obrazac za povratne informacije
Kako se zoveš
Naslov poruke
Pošalji poruku
Imajte na umu neke važne stvari koje trebate učiniti u ovom kodu:
Morate učitati ovu datoteku na svoj hosting u korijenskoj mapi motora web stranice! Ali prvo provjerite jeste li ga popravili ili niste!
U retku gdje je ispisan tekst “VAŠA HOSTING EMAIL ADRESA”! “, morate ga ispraviti na Vašu E-mail adresu koja se nalazi na Vašem hostingu. Ako nemate račun e-pošte na svom hostingu, svakako ga napravite. Nije teško!
Sada trebate spojiti skriptu koja povezuje jQuery biblioteku na stranici za ispravan rad našeg sustava "povratne informacije za stranicu". Prvo provjerite na svojoj web stranici, možda je ova skripta već instalirana, ako ne znate kako to učiniti, postavite pitanje podršci na svom hostingu.
Evo skripte:
Ili možete dodati ovu funkciju svojoj WordPress functions.php datoteci:
Funkcija my_jquery() ( wp_deregister_script("jquery"); wp_register_script("jquery", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"); wp_enqueue_script("jquery" );)
Zamjenjuje skriptu i također uključuje jQuery biblioteku na WordPress stranici.
Sada povezujemo skriptu na našoj web stranici koja će raditi zajedno s datotekom mail.php, šaljući vaša pisma. Da bismo to učinili, moramo stvoriti js datoteku poput contact.js i poslati je na vašu web stranicu u mapu sa skriptama vaše aktivne teme, koja se zove js. Ako ga nemate na svojoj web stranici, stvorite ga!
Evo skripte:
JQuery(document).ready(function($) ( $("#contact").submit(function() ( var str = $(this).serialize(); $.ajax(( type: "POST", url : "VAŠA DOMENA/wp-content/themes/VAŠA TEMA/mail.php", podaci: str, uspjeh: funkcija(msg) ( if(msg == "OK") ( rezultat = "Poruka poslana"; $(" #fields").hide(); ) else (result = msg;) $("#note").html(result); ) )); return false; )); ));
Skoro gotovo! Sada sve što moramo učiniti je učitati stilove u vaš na našem hostingu CSS datoteka, koji je odgovoran za oblikovanje teme stranice. Ako se to ne učini, naše novostvorene povratne informacije za stranicu neće biti lijepe i monokromatske.
Ovdje je kod stila za obrazac za povratne informacije za web mjesto:
Form#contact ( border:1px solid #e5e5e5; padding:10px; background:#e9ffd0; border-radius:5px; ) #contact label (font-size: 14px;) #contact input:required:valid (box-shadow: 0 0 3px #BCEF89; boja obruba: #BCEF89!važno; pozadina: #fff url(images/valid.png) no-repeat 98% center; ) #contact textarea:required:valid (box-shadow: 0 0 3px #BCEF89; boja obruba: #BCEF89!važno; ) #contact input:focus:invalid ( box-shadow: 0 0 3px #FFDF97; boja obruba: #FFDF97!važno; pozadina: #fff url(images/invalid. png) no-repeat 98% center; ) #contact textarea:focus:invalid ( box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; ) .err ( border: 1px solid #ff8c00; padding: 10px; pozadina: #FFDF97; text-align: lijevo; border-radius: 3px; ) .ok ( border: 1px #BCEF89 solid; margin-bottom: 15px; padding: 10px; background: #f5f9fd; text-align: center ; border-radius: 3px; ) #author, #email, #url ( width: 30%; padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; ) #komentar ( padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; overflow: auto; ) #submit (font-weight: 400; background: #393; font-size: 15px; color: #fff ; padding: 10px 50px; obrub: nijedan; kursor: pokazivač; )
Samo ih kopirajte i pošaljite u datoteku style.css svoje aktivne teme na web mjestu. Ako tada želite promijeniti boje i oblik, ali to je samo za napredne korisnike!
Sada su naše povratne informacije za stranicu potpuno spremne za upotrebu. Testirajte ga i uživajte u njegovom radu!
To je sve!
Ako vam se svidio ovaj materijal? Zatim kliknite gumbe društvenih mreža, pretplatite se na ažuriranja bloga i napišite svoj komentar ispod!
Obrazac za povratne informacije za stranicu koju ću vam pokazati temelji se na korištenju Ajax tehnologije. Ali ne brinite, ne morate to znati, sve je već spremno, samo trebate instalirati ovaj obrazac i prilagoditi ga sebi!
Ljudi, scenarij je odavno zastario. Nekima djeluje, drugima ne. I previše sam lijen da to shvatim, a kamoli da ažuriram. Dakle, testirajte po vlastitom nahođenju.
PHP obrazac za povratne informacije poslan e-poštomOvaj obrazac za povratne informacije na web stranici je sam po sebi vrlo funkcionalan, dolazi s nekoliko dodataka koji stvaraju atraktivan izgled te provjerite valjanost (čitaj ispravnost) podataka koje ste unijeli. Ovi dodaci rade na velikom i moćnom! I zovu se ovako:
1. JQTransform– dodatak koji vam omogućuje da naš obrazac za povratne informacije učinite lijepim!
2. formValidator– i ovaj dodatak provjerava točnost unesenih podataka u obrascu za kontakt i, ako se nešto dogodi, prikazuje opise!
Za puni rad ove forme koristit će se klasa PHPMailer. Smatra se jednim od najboljih!
Napomena za pametne:
Obrazac za povratne informacije za stranicu može se napraviti u HTML-u! Ali počet će raditi samo uz pomoć PHP-a! I nista vise!
Ovo sam ja za one koji traže obrazac za povratne informacije samo u HTML-u. Učinit ćeš to, ali neće ići!
Stoga vaš mora podržavati PHP, a za ovaj kontakt obrazac PHP mora biti najmanje verzije 5. Nadam se da sam razjasnio? Štoviše, sada svaki normalan hosting podržava ove uvjete!
Iskopao sam ovaj obrazac za povratne informacije na web stranici www.tutorialzine.com, poveznica vodi izravno na originalnu stranicu, tj. web stranica autora ovog obrasca!
Sve je na engleskom, pa smo Sasha i ja morali malo petljati da rusificiramo ova forma kontakte i same dodatke koji su s njim povezani.
Iskreno govoreći, dva dana smo se mučili s tim “formularom” jer su se počeli pojavljivati razni bugovi, a nismo htjeli objaviti obrazac za povratnu informaciju koji nije do kraja popunjen, pogotovo ovako lijep! Dakle, ako ste ljubitelj toga da sve radite sami, a misao vam se pojavi u najsvjetlijoj glavi - da sami rusificirate ovaj obrazac, dat ću vam nekoliko savjeta, jer se nećete ograničiti na jednostavno prevođenje fraza:
1. Ovaj obrazac za povratne informacije je prilagođen buržoaziji i preuzet je od tamo, tako da će vam poslati krakozyabl umjesto uobičajenih ruskih znakova. Razumijevanje kodiranja. I općenito, svi "pečati" bit će povezani s ovim!
2. Skripta za provjeru valjanosti u početku ne razumije naša slova, pa će ih morati tamo napisati!
3. Čak i nakon ovih koraka, ako navedete predmet pisma na ruskom, pismo stiže s predmetom - Bez predmeta (nadam se da sam ispravno napisao), ovo se može izliječiti ako navedete kodiranje u datoteci klase PHPMailer .
4. U izvornom obliku tekst u poljima za unos bio je pritisnut na dno, a ne u sredinu. Ovo je greška dodatka JQTransform.
Pa izgleda kao da je sve ispisano i upozoreno. Idemo dalje!
Od autora: Pozdrav prijatelji. Ovaj članak bit će nastavak, u kojem smo implementirali slanje podataka obrazaca na poslužitelj bez ponovnog učitavanja stranice. Ovdje ćemo nastaviti ovu temu i naučiti kako primati podatke na poslužitelju i implementirati slanje obrasca na e-mail. Dakle, postavimo obrazac za povratne informacije i dodamo mogućnost slanja e-poštom.
Izvorne datoteke trenutnog članka možete preuzeti s .
U ovoj lekciji ćemo sve učiniti što je moguće jednostavnije i sami. Konkretno, za slanje e-pošte koristit ćemo posebnu PHP funkciju nazvanu mail(), koja se često koristila za slanje e-pošte u prošlosti.
Počnimo sa sintaksom funkcije pošte. Ova funkcija ima tri obavezna parametra i dva izborna (nisu potrebna). Potrebni parametri:
do — e-pošta primatelja (također možete navesti nekoliko adresa, navodeći ih odvojene zarezima);
predmet — predmet pisma;
poruka — tekst pisma.
Od neobaveznih parametara gotovo uvijek se koristi samo prvi, koji je odgovoran za zaglavlja pisma: kodiranje, pošiljatelj, tip slova itd.
Pokušajmo poslati e-poštu pomoću ovu funkciju. Učinimo to u datoteci mail.php, u koju prihvaćamo podatke iz forme. Novi kod ovu datoteku bit će ovako: