V odpovědi na takovou otázku mě jako první napadne: „Pohodlné a fungující“. A to je obecně logické. Jinak jaký má smysl mít na webu krásnou formu? zpětná vazba, který se nepoužívá? Ale nejdřív.
Mnoho podob – jeden cílZačněme tím, k čemu jsou formuláře zpětné vazby na webu? Majitel webu musí být schopen oslovit návštěvníky svého webu. Lidé se snaží ušetřit čas hledáním informací o produktech, které potřebují, ujasňováním si jejich kvalit a vlastností, cen a hlavně objednáváním. Formuláře zpětné vazby jsou důležitým kanálem, kterým dochází ke komunikaci mezi návštěvníkem webu a jeho vlastníkem, prodejcem a kupujícím. Pokud tento komunikační kanál nefunguje nebo je pro návštěvníka nepohodlný, může opustit myšlenku kontaktovat vás, a tedy i myšlenku stát se vaším skutečným klientem.
To, jak pravidelně a aktivně využíváte formuláře zpětné vazby na vašem webu, nevypovídá o vašem webu hůře než návštěva analytiky.
Z toho logicky vyplývá závěr, který již byl uveden výše – formuláře zpětné vazby musí být pohodlné a musí fungovat!
Stojí za zmínku, že druhá část tohoto závěru závisí nejen na správném programování. Po technické stránce může formulář fungovat perfektně, ale operátor musí rychle reagovat na požadavky přicházející ze stránek. Jinak budou formuláře zpětné vazby k ničemu. Pokud operátor zavolá návštěvníkovi zpět za dva dny, může jednoduše pominout potřeba objednat si u člověka produkt nebo službu.
Může existovat celá řada formulářů zpětné vazby („Objednejte si zpětné zavolání“, „Zeptejte se“, „Zanechte recenzi“, „Vyplňte objednávkový formulář“, „Kontaktujte manažera“ atd.) a mohou použít pro různé úkoly. Všichni ale budou mít v podstatě stejný cíl – zajistit spojení mezi návštěvníkem webu a jeho správcem či majitelem, získat návštěvníkovy kontakty pro další interakci s ním.
Sedm tipů k zapamatováníPřipomeňme si několik jednoduchá pravidla, které je třeba vzít v úvahu při vývoji a zveřejňování FOS na webu.
Formulář by měl být umístěn tak, aby jej návštěvník pohodlně našel.
Umístěte formulář na viditelné místo – aby se návštěvník vašeho webu nemusel namáhat hledat formulář zpětné vazby mezi mnoha různými prvky na stránce nebo donekonečna posouvat stránku dolů.
Formuláře lze tradičně umístit do záhlaví webu nebo na kontaktní stránku.
V případě potřeby můžete duplikovat klíčové formuláře v zápatí, abyste nenutili návštěvníky, kteří si prohlédli celou stránku, znovu se posouvat nahoru:
Pokud existují stránky s produkty nebo službami, které podléhají speciální nabídka a návštěvník jej může obdržet prostřednictvím online objednávky, rychlého volání nebo objednávkového formuláře na této stránce.
Navíc vám to umožní „zaháknout“ návštěvníka, který již má o produkt nebo službu zájem. Návštěvník se podíval na popis, záruky, ceny, rozhodl se, že mu produkt nebo služba vyhovuje, a tak mu okamžitě nabízíme, aniž by opustil tuto stránku, zanechat požadavek na objednávku této služby.
Formulář musí být zobrazen a fungovat stejně správně na všech zařízeních a ve všech prohlížečích.
Nebo stručně – zkontrolujte kompatibilitu formulářů zpětné vazby na vašem webu mezi prohlížeči a platformami. Formulář může být viditelný a snadno vyplnitelný z notebooku popř stolní počítač, ale na tabletu může být pole pro zadávání dat příliš úzké a nepohodlné pro zadávání textu Dotyková obrazovka. Bude se pak klient znovu a znovu snažit zadat své údaje, aby vás mohl kontaktovat? Odpověď je zřejmá.
Formulář by měl být stručný a jasný.
Co to znamená? Formulář by se neměl skládat z velké množství pole nebo kroky vyplňování. Pokud to ovšem není nezbytně nutné. Lidé se snaží o jednoduchost, nechtějí trávit spoustu času zjišťováním a vyplňováním deseti tisíc polí.
Pokud služba zahrnuje příjem docela detailní informace, zjednodušit úlohu pro klienta (pokud je to samozřejmě možné). Zvýrazněte několik klíčových polí, která je třeba vyplnit:
Vypadá to pohodlněji než např.
Je lepší zavolat zpět a vše potřebné si slovně ujasnit, ale usnadněte návštěvníkovi vyplnění formuláře. A tím zvyšte šanci, že vás bude kontaktovat!
Pokračujte v tématu srozumitelnosti a věnujte pozornost skutečnosti, že formulář má název - „Objednat zpětné zavolání“, „Objednat zavolání geodetovi“, „Objednat bezplatnou konzultaci“ atd. Je lepší duplikovat stejnou hlavičku v elektronických upozorněních, která přijdou z formuláře na váš email. Návštěvník vašich stránek se pak nejen nesplete a nezapomene na přihlášku, co přesně vyplňuje. Vy sami ale dostanete jasnou informaci o tom, jaké informace návštěvníka, který požadavek podal, zajímaly. To vám pomůže rychle se orientovat v další komunikaci s návštěvníkem a správně budovat dialog.
Forma by měla mít příjemný a praktický design.
Všechna pole musí být jasně viditelná. Pokud při vytváření návrhu formuláře používáte hodně barev, měli byste dbát na to, aby jich nebylo příliš mnoho, aby byly kombinované a nebyly příliš světlé. Osoba, která formulář vyplňuje, by neměla namáhat zrak. Totéž platí pro výběr barev pro textové zprávy.
Je lepší se vyhnout kombinaci tmavé s tmavou. Pokud například na tmavě modrém pozadí vytvoříte tmavě červený nebo tmavě zelený nápis „Vaše zpráva byla odeslána“, jednoduše to nebude vidět.
Formulář musí obsahovat výzvu k akci.
Malý dotek, který povzbudí návštěvníka k provedení nebo dokončení akce. V našem případě pošlete zprávu z webu!
Knoflík je také lepší zvýraznit v kontrastní barvě. Společně s výzvou k akci to zviditelní a přitáhne pozornost návštěvníka.
Forma by se měla snadno srolovat.
Formulář lze tedy snadno najít, má pěkný design a pohodlně se vyplňuje. Co jiného?
Nezapomeňte vývojáře požádat, aby do formuláře přidali „křížek“, abyste jej mohli zavřít. Nebo nakonfigurujte formulář tak, aby se po vyplnění automaticky sbalil.
Vypadá to jako maličkost, ale může to zkazit celkový obraz.
Návštěvník například zanechal na webu požadavek a chce se vrátit k prohlížení webu. ALE! Formulář visí, nezmizí a není jasné, jak jej zavřít. Nebo jiná možnost – návštěvník si sepsání žádosti rozmyslel a rozhodl se zavolat sám. Může to dopadnout nepříjemně.
Nastavení zprávy s odpovědí.
Něco takového…
Osoba odesílající zprávu chce mít jistotu, že její zpráva bude přijata a zvážena vámi. Technicky vzato, nastavení automatického upozornění nezabere mnoho času, ale posílí důvěru návštěvníka, že jeho zpráva nezůstane bez odpovědi. To se obvykle používá v těch formulářích, kde musíte uvést své e-mailem. Moderní služby však umožňují nastavit automatické upozornění prostřednictvím SMS.
ShrnutíExistuje spousta jemností a dalších detailů: můžete experimentovat s tvarem a designem, můžete k tématu přidat nenápadnou grafiku atd. Základní kritéria se ale nemění. Ke všemu, co bylo řečeno výše, bych rád přidal velké, ale důležité přání - pravidelně kontrolujte fungování formulářů zpětné vazby na webu. Technické závady by neměly být překážkou vašeho podnikání!
Formulář zpětné vazby, nebo jinak řečeno, je jedním z nejdůležitějších prvků každé webové stránky. A samozřejmě, stejně jako všechny ostatní prvky uživatelského rozhraní, i kontaktní prvky musí být nějak externě stylizovány a navrženy tak, aby upoutaly pozornost uživatelů a podpořily komunikaci.
Nabízím ke zvážení několik možností stylů formulářů zpětné vazby, výhradně pomocí 3, bez použití dalších obrázků v designu. Nic nadbytečného, jen krátké fragmenty kódu (úryvky) pro kontaktní formuláře, vyrobené ve světlých a tmavých barvách.
V závislosti na barvě hlavního pozadí stránky se vizuálně změní základní barva pozadí samotného formuláře. Velikost formuláře závisí na velikosti nádoby, ve které bude formulář umístěn.
Html formulářový framework je standardní, pro propojení s CSS jsou vyžadována nezbytná vstupní pole a tlačítko „Odeslat“, každému formulářovému prvku je přiřazena specifická třída, nic složitého, nebude to těžké na pochopení.
| < form> < input name= "name" placeholder= "Zadejte své jméno!" class = "name" required /> < input name= "emailaddress" placeholder= "Vložte svůj e-mail!" class = "email" type= "email" required /> < textarea rows= "4" cols= "50" name= "subject" placeholder= "Zadejte svou zprávu:" class = "message" required> < input name= "submit" class = "btn" type= "submit" value= "Poslat" /> |
CSS
Nebudu se moc rozepisovat o stylech, jen poznamenám jednu věc: v návrhu jsem použil nějaké vlastnosti CSS3, lineární přechod, efekt stínu, mírně zaoblené rohy atd., snažil jsem se dosáhnout nějakého křížku -kompatibilita s prohlížečem pro tyto vlastnosti, ale ve starších verzích prohlížečů bude formulář stále vypadat trochu jinak ((.
| /* Základní styl formuláře */ forma ( margin: 0 auto; max- width: 95 %; padding: 30px 30px 6px 30px; border: 1px solid rgba(0 , 0 , 0 , .2 ) ; - moz- border- radius : 5px; - webkit- border- poloměr: 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 , , ) , .5 ); box-shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; overflow: hidden; ) /* Pole zprávy */ textarea( background: rgba(255 , 255 , 255 , 0.4 ) ; šířka: 100 %; výška: 110px; okraj: 1px solid rgba(255 , 255 , 255 , .6 ) ; - moz- border- poloměr: 4px; - webkit- border- poloměr: 4px; border- poloměr: 4px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; display: block; font- family: "Open Sans", bezpatkové; velikost písma: 18px; váha písma: 300; barva: #fff; padding-left: 25px; padding-right: 20px; padding-top: 12px; okraj- dole: 20px; přepad: skrytý; ) /* Vstupní pole */ input ( šířka: 100 %; výška: 48px; okraj: 1px solid rgba(255 , 255 , 255 , .4 ) ; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; display: block; font- family: "Open Sans" , sans - patka; velikost písma: 18px; váha písma: 300; barva: #fff; odsazení- vlevo: 20px; odsazení- vpravo: 20px; okraj- dole: 20px; ) input[ type= submit] (kurzor: ukazatel; ) vstup. název ( pozadí: rgba(255 , 255 , 255 , 0.4 ); padding- left: 25px; ) input. email ( pozadí: rgba(255 , 255 , 255 , 0.4 ); padding- left: 25px; ) input. message ( background: rgba(255 , 255 , 255 , 0.4 ); padding- left: 25px; ) ::- webkit- input- placeholder ( color: #fff; ) :- moz- placeholder( color: #fff; ): :- moz- zástupný symbol ( barva: #fff; ) :- ms- input- zástupný symbol ( barva: #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 : 0 ; box 0 5px 1px rgba(255 , 255 , 255 , . 5); přepad: skrytý; ) /* Styly pro tlačítko Odeslat */ . btn ( šířka: 138px; výška: 44px; - moz- border- poloměr: 4px; - webkit- border- poloměr: 4px; border- poloměr: 4px; float: right; border: 1px solid #253737; background: #416b68; pozadí: - webkit- gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68)); background: - webkit- linear- gradient(top, #6da5a3, #416b68); background: - moz - lineární- gradient (top, #6da5a3, #416b68); pozadí: - ms- linear- gradient (top, #6da5a3, #416b68); pozadí: - o- linear- gradient (top, #6da5a3, #416b68); pozadí- obrázek: - ms- lineární- gradient (top, #6da5a3 0%, #416b68 100%); odsazení: 10, 5px 21px; - webkit- border- poloměr: 6px; - moz- border- poloměr: 6px; border - radius: 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 , vložit rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; stín boxu: rgba (255 , 255 , 0) 2155 inset 5, 255, 255, 0,7) 0 1px 0; text-shadow: #333333 0 1px 0; barva: #e1e1e1; ). btn: hover ( border: 1px solid #253737; text- shadow: #333333 0 1px 0; background: #416b68; background: - webkit- gradient(linear, left top, left bottom, from(#77b2b0), to(# 416b68)); pozadí: - webkit- linear- gradient(top, #77b2b0, #416b68); background: - moz- linear- gradient(top, #77b2b0, #416b68); background: - ms- linear- gradient(top , #77b2b0, #416b68); pozadí: - o- lineární- gradient (horní, #77b2b0, #416b68); obrázek na pozadí: - ms- lineární- gradient (horní, #77b2b0 0 %, #416b68 100 %); barva: #fff; ). btn: active ( margin- top: 1px; text- shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: - webkit- gradient(linear, left top, left bottom, from( #ffCC00), to(#ff6600)); pozadí: - webkit- linear- gradient(top, #ffcc00, #ff6600); background: - moz- linear- gradient(top, #ffcc00, #ff6600); background: - ms- linear- gradient(top, #ffcc00, #ff6600); background: - o- linear- gradient(top, #ffcc00, #ff6600); background- image: - ms- linear- gradient(top, #ffcc00 0% - moz - box-shadow: rgba(255, 255, 255, 0) 0 1px 0, vložit rgba(255, 255, 255, 0. 7) 0 1px 0; box-shadow: rgba(255, 255, 255, 0) 0 1px 0, vložit rgba(255, 255, 255, 0,7) 0 1px 0; obrys: žádný; ) |
/* Základní styl formuláře */ forma ( margin: 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); přetečení: skryté; ) /* Pole zprávy */ textarea( pozadí: rgba(255, 255, 255, 0,4) ; šířka: 100 %; výška: 110px; okraj: 1px solid rgba(255,255,255,.6); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 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; barva:#fff; padding-left:25px; padding-right:20px; padding-top:12px; margin-bottom:20px; přetečení:skryté; ) /* Vstupní pole */ input ( šířka: 100 %; výška: 48px; okraj: 1px solid rgba(255,255,255,.4); -moz-border-radius: 4px; -webkit-border-radius: 4px; border- radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display: block; font-family: "Open Sans", bezpatkové; písmo -size:18px; font-weight: 300; color:#fff; padding-left:20px; padding-right:20px; margin-bottom:20px; ) input (kurzor:ukazatel; ) input.name (pozadi: 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 ( barva: #fff; ) :-moz-placeholder( color: #fff; ) ::-moz-placeholder ( barva: #fff; ) :-ms-input-placeholder ( barva: #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); box-shadow: 0 0 5px 1px rgba(255,255,255,.5); přepad: skrytý; ) /* Styly pro tlačítko Odeslat */ .btn ( šířka: 138px; výška: 44px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; float:right; border : 1px plný #253737; pozadí: #416b68; pozadí: -webkit-gradient(lineární, vlevo nahoře, vlevo dole, od(#6da5a3), do(#416b68)); pozadí: -webkit-linear-gradient(top, # 6da5a3, #416b68); pozadí: -moz-linear-gradient(top, #6da5a3, #416b68); background: -ms-linear-gradient(top, #6da5a3, #416b68); background: -o-linear- gradient (horní, #6da5a3, #416b68); obrázek na pozadí: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%); odsazení: 10. 5px 21px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 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, inset rgba(255,255,255,0.7) 0 1px 0; text-shadow: #333333 0 1px 0; barva: #e1e1e1; ) .btn:hover ( border: 1px solid #253737; text-shadow: #333333 0 1px 0; background: #416b68; background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to (#416b68)); pozadí: -webkit-linear-gradient(top, #77b2b0, #416b68); background: -moz-linear-gradient(top, #77b2b0, #416b68); background: -ms-linear-gradient (top, #77b2b0, #416b68); background: -o-linear-gradient(top, #77b2b0, #416b68); background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100% ); color: #fff; ) .btn:active ( margin-top:1px; text-shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: -webkit-gradient(linear , vlevo nahoře, vlevo dole, od(#ffCC00), do(#ff6600)); pozadí: -webkit-linear-gradient(top, #ffcc00, #ff6600); pozadí: -moz-linear-gradient(top, # ffcc00, #ff6600); pozadí: -ms-linear-gradient(top, #ffcc00, #ff6600); background: -o-linear-gradient(top, #ffcc00, #ff6600); background-image: -ms-linear -gradient(top, #ffcc00 0%, #ff6600 100%); barva: #fff; -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, vložení rgba(255,255,255,0,7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, vložit rgba(255,255,255,0,7) 0 1px 0; box-shadow: rgba(255,255,255,0) 0 1px 0, vložení rgba(255,255,255,0,7) 0 1px 0; obrys: žádný; )
Možná vás bude zajímat toto: 2. Kontaktní formulář ve světlých barváchDruhá možnost návrhu formuláře zpětné vazby je uvedena ve světlých barvách; rozměry formuláře (šířka, výška), stejně jako v první možnosti, nejsou pevné a snadno se vejdou do rozměrů kontejneru, kde bude tento formulář nachází se.
Stejně jako v první možnosti je Html struktura kontaktního formuláře standardní, formulářové prvky s určitými třídami odpovídajícími třídám v CSS.
| < form> < input name= "name" placeholder= "Zadejte své jméno!" class = "textbox" required /> < input name= "emailaddress" placeholder= "Vložte svůj e-mail!" class = "textbox" type= "email" required /> < textarea rows= "4" cols= "50" name= "subject" placeholder= "Zadejte svou zprávu:" class = "message" required> < input name= "submit" class = "button" type= "submit" value= "Poslat" /> |
CSS
Při formování základních velikostí formulářů a vnitřních prvků jsem vycházel z procentuálních hodnot šířky, díky kterým lze formulář snadno přizpůsobit rozměrům kontejneru, ve kterém bude umístěn. Barevné schéma tlačítka „Odeslat“, jeho velikost a umístění lze snadno změnit, jen experimentujte určité hodnoty.
| /* Základní styly formuláře */ 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 , 0,45 ); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0,45) styly okrajů; ) /* vstup */ . textbox( výška: 50px; šířka: 100%; border- poloměr: 3px; border: rgba(0 , 0 , 0 , .3 ) 2px solid; box-sizing: border- box; font- family: "Open Sans" , bezpatkové; velikost písma: 18px; výplň: 10px; okraj spodní: 30px;) . zpráva: zaměření, . textbox: focus( obrys: none; border: rgba(24 , 149 , 215 , 1 ) 2px solid; color: rgba(24 , 149 , 215 , 1 ) ; ) /* Styly textového pole */ . message( background: rgba(255 , 255 , 255 , 0.4 ); šířka: 100 %; výška: 120px; border: rgba(0 , 0 , 0 , .3 ) 2px solid; box-sizing: border- box; - moz - border- poloměr: 3px; font- size: 18px; font- family: "Open Sans" , bezpatkový; - webkit- border- poloměr: 3px; border- radius: 3px; display: block; padding: 10px; margin - dole: 30px; přetečení: skryté; ) /* Základní styly tlačítek */ . button( height: 50px; width: 100%; border-radius: 3px; border: rgba(0 , 0 , 0 , .3 ) 0px solid; box-sizing: border- box; padding: 10px; background: #90c843; barva: #FFF; rodina fontů: "Open Sans" , bezpatkové; váha fontu: 400; velikost fontu: 16pt; přechod: pozadí. 4s; kurzor: ukazatel; ) /* Změna pozadí tlačítka při umístění kurzoru * / . tlačítko: hover (pozadí: #80b438; ) |
/* Základní styly formuláře */ 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); ) /* Styly vstupních polí */ . 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( obrys:none; border:rgba(24,149,215,1) 2px solid; color:rgba( 24,149,215,1); ) /* Styly textových polí */ .message( pozadí: rgba(255, 255, 255, 0,4); šířka: 100 %; výška: 120 px; border: 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; ) /* Základní styly tlačítek */ .button( výška:50px; šířka:100%; border-radius:3px; border:rgba(0,0,0,.3) 0px solid; box-sizing:border-box; padding:10px; pozadí:#90c843; barva:#FFF; font-family: "Open Sans", bezpatkové; váha písma:400; velikost písma: 16pt; přechod:pozadí .4s; kurzor:ukazatel; ) /* Změna pozadí tlačítka při umístění kurzoru */ .button:hover( background:#80b438; )
Možností designu kontaktních formulářů je spousta, hlavní je mít trochu fantazie a základní znalosti CSS. Na stránkách mého blogu najdete další a ukázky stylu formulářů zpětné vazby.
Pro ty, kteří jsou obzvláště nepozorní, chci ještě jednou objasnit: formuláře uvedené v článku jsou správné vnější schránka Aby formuláře skutečně plnily své funkce, je potřeba k nim připojit obslužný program skriptů, kterých je po internetu roztroušeno dost, proto prosím do komentářů nepište, že formuláře nefungují apod., vše funguje skvěle, jen musíte pochopit co, kde a proč))).
Se vší úctou, Andrew.
Dobrý den, milí přátelé a hosté blogu! Zpětná vazba na web je jednou z nejvýznamnějších funkcí, která umožňuje bloggerovi komunikovat se svými návštěvníky. Má to ale jeden háček – pluginy, které zobrazují zpětnou vazbu k webu, váží hodně!
Již nějakou dobu jsem zaneprázdněn odlehčováním svého blogu a rozhodl jsem se zbavit se nepotřebných pluginů, které jej zatěžují svou hmotností a brání rychlému načítání stránek. A v první řadě moje volba padla na formulář pro zpětnou vazbu, respektive na plugin, který to zobrazoval na mém webu “Contact Form 7” a potřebovalo to i druhý plugin, který by zobrazoval captcha “reCaptcha”. Takto jsem se rozhodl zbavit se dvou poměrně významných pluginů najednou pomocí formuláře zpětné vazby, který nevyžaduje žádné pluginy a lze jej snadno nainstalovat na stránky. Nyní vám o tom povím a samozřejmě vám umožním stáhnout soubory, abyste mohli vytvořit podobnou zpětnou vazbu pro svůj web...
A tak poté, co jsem ze svých stránek konečně odstranil pluginy pro vytváření formuláře zpětné vazby, začal jsem vytvářet snadný a spolehlivý formulář zpětné vazby bez použití jakýchkoli pluginů. A tohle jsem dostal:
Funkčnost mého formuláře zpětné vazby pro web si můžete prohlédnout a zkontrolovat na stránce „ “. Napište mi do kontaktního formuláře na webu a já vám odpovím!
Nyní přejdeme k tomu nejdůležitějšímu a vytvoříme si vlastní zpětnou vazbu pro stránky, nezávisle na jakýchkoli pluginech...
Poskytujeme zpětnou vazbu pro web bez pluginů!Vše, co k tomu potřebujeme: můj blogový web s článkem „Zpětná vazba pro web“, textový editor a samozřejmě vaše touha vytvořit si vlastní kontaktní formulář na webu, abyste to usnadnili tím, že se zbavíte nepotřebných a těžkých pluginů!
Zde je HTML kód formuláře zpětné vazby pro web, který můžete vložit na svůj web nebo blog kdekoli, pro mě je to kontaktní stránka:
Formulář zpětné vazby
Jak se jmenuješ
E-mailem
Předmět zprávy
poslat zprávu
Všimněte si prosím některých důležitých věcí, které musíte v tomto kódu udělat:
Tento soubor musíte nahrát na svůj hosting v kořenové složce enginu webu! Ale nejprve zkontrolujte, zda jste to opravili nebo ne!
V řádku, kde je napsán text „VAŠE HOSTINGOVÁ EMAILOVÁ ADRESA“! “, musíte jej opravit na vaši e-mailovou adresu, která je na vašem hostingu. Pokud na svém hostingu nemáte e-mailový účet, nezapomeňte si jej vytvořit. Není to složité!
Nyní musíte připojit skript, který propojí knihovnu jQuery na webu, aby správně fungoval náš systém „zpětná vazba pro web“. Nejprve zkontrolujte svůj web, možná je tento skript již nainstalován, pokud nevíte, jak to udělat, položte otázku na podporu na vašem hostingu.
Zde je skript:
Nebo můžete tuto funkci přidat do svého souboru WordPress functions.php:
Funkce 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" );)
Nahrazuje skript a obsahuje také knihovnu jQuery na webu WordPress.
Nyní na našem webu připojíme skript, který bude spolupracovat se souborem mail.php a posílat vaše dopisy. K tomu potřebujeme vytvořit soubor js jako contact.js a odeslat jej na váš web do složky se skripty vašeho aktivního motivu, který se nazývá js. Pokud ho na svém webu nemáte, vytvořte si ho!
Zde je skript:
JQuery(document).ready(function($) ( $("#contact").submit(function() ( var str = $(this).serialize(); $.ajax(( typ: "POST", url : "VAŠE DOMÉNA/wp-content/themes/VAŠE TÉMA/mail.php", data: str, success: function(msg) ( if(msg == "OK") ( result = "Zpráva odeslána"; $(" #fields").hide(); ) else (result = msg;) $("#note").html(result); ) )); return false; )); ));
Skoro hotovo! Teď už zbývá jen nahrát styly do toho vašeho na náš hosting CSS soubor, která je zodpovědná za stylizaci tématu webu. Pokud to neuděláte, naše nově vytvořená zpětná vazba pro web nebude krásná a jednobarevná.
Zde je kód stylu pro formulář zpětné vazby pro web:
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; border-color: #BCEF89!important; background: #fff url(images/valid.png) no-repeat 98% center; ) #contact textarea:required:valid (box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; ) #contact input:focus:invalid ( box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; background: #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; pozadí: #FFDF97; text-align: left; 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; ) #comment ( padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; overflow: auto; ) #submit ( font-weight: 400; background: #393; font-size: 15px; color: #fff ; odsazení: 10px 50px; ohraničení: žádné; kurzor: ukazatel; )
Stačí je zkopírovat a odeslat do souboru style.css vašeho aktivního motivu na webu. Pokud pak chcete změnit barvy a tvar, je to pouze pro pokročilé uživatele!
Nyní je naše zpětná vazba k webu zcela připravena k použití. Vyzkoušejte to a užijte si jeho práci!
To je vše!
Pokud se vám tento materiál líbil? Poté klikněte na sociální tlačítka, přihlaste se k odběru aktualizací blogu a napište svůj komentář níže!
Formulář zpětné vazby pro web, který vám ukážu, je založen na použití technologie Ajax. Ale nebojte se, nemusíte to vědět, vše je již připraveno, vše, co musíte udělat, je nainstalovat tento formulář a upravit si ho pro sebe!
Kluci, scénář je už dávno zastaralý. U někoho to funguje, u jiného ne. A jsem příliš líný na to přijít, natož aktualizovat. Takže testujte podle vlastního uvážení.
Formulář zpětné vazby PHP zaslaný e-mailemTento formulář zpětné vazby na web je velmi funkční sám o sobě, je dodáván s několika pluginy, které vytvářejí atraktivní vzhled a zkontrolujte platnost (správnost čtení) vámi zadaných údajů. Tyto pluginy fungují na skvělé a mocné! A jmenují se takto:
1. JQTransform– plugin, který vám umožní udělat náš formulář zpětné vazby krásným!
2. formValidator– a tento plugin kontroluje v kontaktním formuláři správnost zadaných údajů a pokud se něco stane, zobrazí tooltipy!
Pro plné fungování tohoto formuláře poslouží třída PHPMailer. Považován za jeden z nejlepších!
Poznámka pro chytré:
Formulář zpětné vazby pro web lze vytvořit v HTML! Ale to začne fungovat až s pomocí PHP! A nic jiného!
To jsem já pro ty, kteří hledají formulář zpětné vazby pouze v HTML. Uděláš to, ale nebude to fungovat!
Váš tedy musí podporovat PHP a pro tento kontaktní formulář musí být PHP alespoň verze 5. Doufám, že to říkám jasně? Navíc nyní tyto podmínky podporuje každý normální hosting!
Tento formulář zpětné vazby jsem vyhrabal na webu www.tutorialzine.com, odkaz vede přímo na původní stránku, tzn. webové stránky autora tohoto formuláře!
Všechno je tam v angličtině, takže jsme se Sašou museli trochu šťourat v rusifikaci tato forma kontakty a samotné pluginy, které jsou k němu připojeny.
Abych byl upřímný, s tímto „formulářem“ jsme si pohrávali dva dny, protože se začaly objevovat různé bugy a nechtěli jsme zveřejňovat formulář zpětné vazby, který by nebyl úplně vyplněný, obzvlášť tak krásný! Takže pokud jste fanouškem toho, že všechno děláte sami, a myšlenka se objeví ve vaší nejbystřejší hlavě - abyste tuto formu rusifikovali sami, dám vám několik tipů, protože se nebudete omezovat na pouhé překládání frází:
1. Tento formulář zpětné vazby je šitý na míru buržoazii a byl odtud stažen, takže vám místo normálních ruských znaků pošle krakozyabl. Pochopte kódování. A obecně s tím budou spojeny všechny „pečetě“!
2. Ověřovací skript zpočátku nerozumí našim dopisům, takže je tam bude potřeba napsat!
3. I po těchto krocích, pokud zadáte předmět dopisu v ruštině, dopis dorazí s předmětem - Bez předmětu (doufám, že jsem to napsal správně), lze to vyléčit, pokud uvedete kódování v souboru třídy PHPMailer .
4. V původní podobě byl text ve vstupních polích stlačen dolů, nikoli doprostřed. Toto je chyba pluginu JQTransform.
No, zdá se, že vše bylo napsáno a varováno. Pokračujme!
Od autora: Zdravím vás přátelé. Tento článek bude pokračováním, ve kterém jsme implementovali odesílání dat formuláře na server bez opětovného načítání stránky. Zde budeme pokračovat v tomto tématu a naučíme se přijímat data na server a implementovat odeslání formuláře na email. Pojďme tedy nastavit formulář zpětné vazby a přidat možnost posílat ji e-mailem.
Zdrojové soubory aktuálního článku si můžete stáhnout z .
V této lekci uděláme vše co nejjednodušeji a sami. Konkrétně k odesílání emailů využijeme speciální PHP funkci nazvanou mail(), která se v minulosti často používala k odesílání emailů.
Začněme syntaxí funkce mail. Tato funkce má tři požadované parametry a dva volitelné (nevyžaduje se). Požadované parametry:
komu — e-mail příjemce (můžete také zadat několik adres oddělených čárkami);
předmět — předmět dopisu;
zpráva — text dopisu.
Z volitelných parametrů se téměř vždy používá pouze první, který má na starosti záhlaví dopisů: kódování, odesílatel, typ dopisu atd.
Zkusme poslat e-mail pomocí tuto funkci. Udělejme to v souboru mail.php, ve kterém přijímáme data z formuláře. Nový kód tento soubor bude takto: