Formulář zpětné vazby html ověření telefonního čísla. Webdesign a optimalizace pro vyhledávače

Vytvořte formulář zpětné vazby

Vytvoření formuláře zpětné vazby na webu

V procesu propagace webu jsou spolu se studiem statistik návštěvnosti zvláště důležité informace o webu od samotných návštěvníků. Jedním z nejjednodušších způsobů, jak takové informace získat, je umístit na web stránku s formulář zpětné vazby. Návštěvník zanechá zprávu a ta bude zaslána na vaši e-mailovou adresu nebo jakoukoli jinou, kterou určíte. Návštěvník v tomto případě nemusí používat vlastní poštovní program, dokonce ani nemusí mít vlastní e-mail.

Nejjednodušší příklad tohoto formuláře je na obr. 1. (Toto je zcela funkční vzorek a můžete mi jej poslat jako poděkování.)

Obr. 1. Jednoduchý formulář zpětné vazby

K umístění takového formuláře zpětné vazby na webovou stránku potřebujete pouze základní informace o HTML a schopnost ovládat dva příkazy - kopírovat A Vložit. Zvažme posloupnost akcí pro vytvoření formuláře zpětné vazby (obr. 1) na HTML stránce webu.

1. Zkontrolujte, zda váš hostingový plán (kancelář, kde je váš web hostován) podporuje PHP. Pokud ne, pak si s největší pravděpodobností budete muset připlatit za přechod na jiný tarif, který podporuje stejné PHP. Nemusíte hledat význam této zkratky, protože nepotřebujete znalost PHP.

2. Vyberme stránku, na kterou chceme umístit formulář zpětné vazby, a vložte následující kód na správné místo:

Jak vidíte, celý formulář je vytvořen tagem

s atributy action=mail.php(označení stránky webu, kde se nachází skript pro zpracování zadaných údajů) a metoda=post(způsob odesílání dat na server). Jednotlivé řádky vytvořené tagem se zcela srozumitelnými atributy. Umístění jednotlivých prvků formuláře, textu, fontů atd. můžete jej změnit v souladu s designem vašeho webu. Ve štítku jsou nastaveny rozměry plochy pro zadání textu zprávy: počet řádků a sloupců (rows="3" cols="25"). 3. Vytvoříme novou stránku mail.php, podobný běžnému HTML, ale s příponou .php. Celý kód stránky je zobrazen na obr. 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Zpětná vazba</title> </head> <body> <?php if (isset($_POST["jméno"])) ($jméno = $_POST["jméno"];) if (isset($_POST["e-mail"])) ($email = $_POST["e-mail"];) if (isset($_POST["nepořádek"])) ($mess = $_POST["nepořádek"];)$to = "pupkin@rambler.ru"; /*Vložte svou e-mailovou adresu*/ $headers = "Typ obsahu: text/prostý; charset=utf-8"; $subject = "Zpráva z vašeho webu"; $message = "Jméno odesílatele: $name \nE-mailová adresa: $email \nZpráva: $mess"; $odeslat = mail($to, $předmět, $zpráva, $záhlaví); if ($send == "true") { echo" Děkujeme za zaslání vaší zprávy! "; echo" <a href=index.html>Klikněte</a> pro návrat na hlavní stránku"; } jiný { echo" Chyba. Zpráva nebyla odeslána!"; } ?> </body> </html> <h5>Obr.2. Kód stránky pro zpracování formuláře zpětné vazby</h5> Adresy odkazů, kterým je třeba věnovat pozornost, jsou zvýrazněny červeně: <ul><li>pupkin@rambler.ru - nahraďte Pupkinovu adresu svou e-mailovou adresou, kam budou dostávat zprávy od návštěvníků stránek i od neúnavných spammerů. Mimochodem, na ochranu před nimi se do formuláře často zadává tzv. captcha. CAPTCHA- Plně automatizovaný veřejný Turingův test k odlišení počítačů a lidí - plně automatizovaný veřejný Turingův test k odlišení počítačů a lidí). Obvykle se jedná o značně zkreslená čísla a písmena, která musíte zadat před odesláním zprávy. O captcha si povíme v některém z následujících článků. Pokud chcete poslat dopisy na více adres, jednoduše je uveďte oddělené čárkami.</li> <li>a href=index.html – adresa hlavní (domovské) stránky webu.</li> </ul>Vytvořená stránka mail.php musí být umístěn ve stejném adresáři webu (adresář, složka), kde se nachází stránka s formulářem zpětné vazby. Zkontrolujte funkčnost formuláře zpětné vazby. Pokud je vše provedeno pečlivě, pak po vyplnění formuláře a stisknutí poslat zprávu Měl by se objevit následující text: " děkujeme za zaslání zprávy. pro návrat na hlavní stránku". Poté najdete ve své poštovní schránce (nebo ve druhé, kterou jste uvedli při vytváření formuláře zpětné vazby) vlastní zprávu pro svého blízkého. <blockquote> Komentář: na některých hostingových stránkách nový (právě nainstalovaný) formulář zpětné vazby nezačne fungovat okamžitě a první dopisy nedorazí vůbec nebo dorazí se zpožděním 1-2 dnů. Pravděpodobně dojde k "zabroušení převodů" a pak vše funguje dobře. Navíc dopisy z některých hostingových stránek nedorazí na určité adresy, například jsem měl problémy se svou poštovní schránkou na Rambleru a Mail.ru. Chcete-li tyto problémy vyřešit, kontaktujte svého hostitele - obvykle pomohou. </blockquote> Někdy při použití popsaného formuláře zpětné vazby nastanou problémy s kódováním. Pokud se v příchozím dopise namísto původní azbuky text skládá z „bláznivých kódů“ nebo prázdných čtverečků, musíte kódování vybrat ručně, což je samozřejmě nepohodlné. Abyste tomu zabránili, zkontrolujte, zda je vaše stránka s formulářem zpětné vazby zakódována charset=utf-8. Pokud používáte program Adobe Dreamweaver, pak k tomu musíte vybrat sekci nabídky Upravit - Vlastnosti stránky - Kódování. Problém s kódováním souborů webu je podrobněji rozebrán v článku Problémy s kódováním ve formuláři zpětné vazby. V popsaném příkladu je pro zjednodušení zpráva o odeslání dopisu zobrazena na prázdné stránce. Samozřejmě jej můžete umístit na kteroukoli stránku vašeho webu, aby si návštěvník mohl pomocí navigace (menu) vybrat, co dál. Chcete-li to provést, umístěte kód PHP (ten, který se nachází z<?php před ?> ) na požadované místo na stránce nabídky a změňte její název na mail.php. Kromě vyvěšení samotného formuláře zpětné vazby je vhodné zkontrolovat, zda návštěvník správně vyplnil jeho pole. To je třeba udělat, abyste nedostali prázdné dopisy a vaše poštovní schránka nebyla ucpaná odpadky, které posílají vtipálci, kteří rádi mačkají tlačítko poslat zprávu. Způsoby kontroly vyplnění formuláře zpětné vazby a ochrany před spamem jsou popsány v článcích " V této lekci se seznámíme s funkcí pošta(), na příkladu tvorby Formuláře zpětné vazby v PHP následuje odeslání přijatých dat emailem. K tomu vytvoříme dva soubory - formát.php A mail.php. První soubor bude obsahovat pouze formulář s poli pro zadání dat uživatelem. Uvnitř štítku formulář- knoflík "Poslat" a atribut akce což odkazuje na psovoda - mail.php, právě k datům z formuláře se přistupuje po stisku tlačítka "Poslat". V našem příkladu jsou data formuláře odeslána na webovou stránku s názvem "/mail.php". Tato stránka obsahuje skript pro PHP který zpracovává data formuláře: <form action="./mail.php" method="post"> Data formuláře se odesílají pomocí POŠTA(zpracováno jako $_POST). $_POST je pole proměnných předávaných aktuálnímu skriptu prostřednictvím metody POŠTA. Níže vidíte obsah souboru formát.php, jejichž pole si uživatel na nějakém webu vyplní sám. Všechna pole pro zadávání dat musí mít atribut název, si hodnoty předepisujeme sami na základě logiky. <!DOCTYPE html> <html> <head> <title>Formulář zpětné vazby v PHP zaslaný e-mailem</title> </head> <body> <h2>Formulář zpětné vazby v PHP</h2>  <form action="./mail.php" method="post">  <fieldset>  <legend>Zanechat vzkaz:</legend> Tvé jméno:  <input type="text" name="name">  E-mailem: <input type="text" name="email"> Telefonní číslo: <input type="text" name="phone"> Zpráva:  Textová oblast může obsahovat neomezený počet znaků--> <textarea rows="10" cols="45" name="message">

Takto vypadá formulář vizuálně v prohlížeči.

Dále napíšeme kód souboru mail.php. Vymýšlíme si vlastní názvy proměnných. V PHP proměnná začíná znaménkem $ následovaný názvem proměnné. Textová hodnota proměnné je uzavřena v uvozovkách. Pomocí proměnných je obsah formuláře odeslán na e-mail administrátora jednoduchým umístěním názvu prvku formuláře do hranatých závorek - hodnota název.
$to = " [e-mail chráněný]"; // email příjemce údajů z formuláře
$tema = "Formulář zpětné vazby v PHP"; // předmět přijatého emailu
$message = "Vaše jméno: ".$_POST["jméno"]."
";//přiřaďte proměnné hodnotu získanou z formuláře jméno=název
$message .= "E-mail: ".$_POST["e-mail"]."
"; //získáno z formuláře jméno=e-mail
$message .= "Telefonní číslo: ".$_POST["telefon"]."
"; //získáno z formuláře jméno=telefon
$message .= "Zpráva: ".$_POST["zpráva"]."
"; //získáno z formuláře jméno=zpráva
$headers = "MIME verze: 1.0" . "\r\n"; // záhlaví odpovídá formátu plus znaku nového řádku
$headers .= "Typ obsahu: text/html; charset=utf-8" . "\r\n"; // označuje typ odesílaného obsahu
mail($to, $tema, $zpráva, $záhlaví); //odešle hodnoty proměnných příjemci e-mailem
?>
Tedy data z pole $_POST budou předány odpovídajícím proměnným a odeslány e-mailem pomocí funkce pošta. Vyplňte náš formulář a stiskněte tlačítko Odeslat. Nezapomeňte uvést svůj email. Dopis přišel okamžitě.

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.
1. Kontaktní formulář v 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= "Uveďte své jméno!" class = "name" povinné />< input name= "emailaddress" placeholder= "Vložte svůj e-mail!" class = "email" type="email" povinné />< textarea rows= "4" cols= "50" name= "subject" placeholder= "Zadejte svou zprávu:" class = "zpráva" povinná> < 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- šířka: 95 %; padding: 30px 30px 6px 30px; border: 1px solid rgba(0 , 0 , 0 , .2 ) ; - moz- border- radius: 5px; - webkit- border - rádius: 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- stín: 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; ohraničení: 1px solid rgba(255, 255, 255, .6) ; - moz- border-; -radius: 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é; velikost písma: 18 pixelů; váha písma: 300; barva: #fff; padding- left: 25px; padding-right: 20px; padding-horní: 12px; okraj-dole: 20px; overflow: hidden; ) /* Vstupní pole */ input ( šířka: 100 %; výška: 48px; border: 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: "Otevřít Sans" , bezpatkové; velikost písma: 18px; váha písma: 300; barva: #fff; padding-left: 20px; padding-right: 20px; okraj- dole: 20px; ) input[ type= submit] (kurzor: ukazatel; ) input. 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řetečení: 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 , 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 solid #253737; background: #416b68; background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68)); background: -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ách
Druhá 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.
HTML
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= "Uveďte své jméno!" class = "textbox" povinné />< input name= "emailaddress" placeholder= "Vložte svůj e-mail!" class = "textbox" type="email" povinné />< textarea rows= "4" cols= "50" name= "subject" placeholder= "Zadejte svou zprávu:" class = "zpráva" povinná> < 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, stačí experimentovat s určitými hodnotami.
/* Základní styly formulářů */ form( margin: 0 auto; max- width: 95%; box-sizing: border- box; padding: 40px; border- radius: 5px; background: RGBA(255, 255, 255, 1) ; - webkit- box- stín: 0px 0px 15px 0px rgba(0, 0, 0, 0,45); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0,45) ; ) /* Styly vstupních polí */. 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" , sans-serif; velikost písma: 18px; odsazení: 10px; okraj-dole : 30 pixelů ; } . zpráva : soustředit se , . Textové pole : soustředit se { obrys : žádný ; okraj : rgba (24 , 149 , 215 , 1 ) 2px pevné ; barva : rgba (24 , 149 , 215 , 1 ) ; } /* Styly textových polí */ . zpráva { Pozadí : rgba (255 , 255 , 255 , 0.4 ) ; šířka : 100 %; výška : 120 pixelů ; okraj : rgba (0 , 0 , 0 , .3 ) 2px pevné ; box - dimenzování : okraj - box ; - moz - okraj - poloměr : 3px ; písmo - velikost : 18px ; písmo - rodina : "Open Sans", sans - patka ; - webkit - okraj - poloměr : 3px ; okraj - poloměr : 3px ; Zobrazit : blok ; vycpávka : 10 pixelů ; okraj - dno : 30 pixelů ; přetékat : skrytý ; } /* Základní styly tlačítek */ . knoflík { výška : 50 pixelů ; šířka : 100 %; okraj - poloměr : 3px ; okraj : rgba (0 , 0 , 0 , .3 ) 0px pevné ; box - dimenzování : okraj - box ; vycpávka : 10 pixelů ; Pozadí : #90c843; barva : #FFF; písmo - rodina : "Open Sans", sans - patka ; písmo - hmotnost : 400 ; písmo - velikost : 16pt ; přechod : Pozadí . 4s ; kurzor : ukazatel ; } /* Změnit pozadí tlačítka při najetí myší */ . knoflík : vznášet se { 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 vysvětlit: formuláře uvedené v článku jsou jen vnější skořápka; aby formuláře skutečně vykonávaly své funkce, musíte k nim připojit obslužný program skriptu, z nichž na internetu je jich roztroušeno dost, tak je to přesvědčivé prosím nepište do komentářů, že nefungují formuláře apod., vše funguje skvěle, jen je potřeba pochopit co, kde a proč))).
Se vší úctou, Andrew.

Každý web musí mít formulář zpětné vazby, takže dříve nebo později každý z nás přemýšlí o jeho vytvoření. Možností je na internetu poměrně hodně, někdo používá oblíbené pluginy, někdo vlastní osobní vývoj, ale většina hledá hotová řešení. V každém případě naše formulář zpětné vazby k webu bude funkční a funkční a o tom všem v pořádku.
HTML
Začneme tedy jako vždy obvyklou šablonou – html. Nejprve potřebujeme formulář s několika poli. Pro přehlednost a standard všech formulářů si vezmeme 3 pole. Tito. to bude Jméno, Email a Telefon.

Každý vstup má svůj jedinečný název, budeme jej později potřebovat k odesílání zpráv. Můžete také libovolně přidávat svá vlastní pole a nejen zadávat, ale také vybírat textovou oblast. Jen nezapomeňte každému z nich přiřadit vlastní jméno, které použijeme při zasílání informací e-mailem. Pro pohodlí jsem do každého pole přidal povinný atribut, díky kterému prohlížeč nedovolí uživateli odesílat prázdné hodnoty a upozorní na nutnost je vyplnit.
CSS
Když je forma hotová, můžete ji trochu transformovat. Zde také vše závisí na vašich potřebách a fantazii. Pro přehlednost jsem pro každý prvek načrtl několik stylů, aby vše nevypadalo tak ploché. Ale pokud jste líní nebo nevíte, jak na to, můžete použít moji možnost:
Form( max-width: 400px; width: 100%; margin: 0 auto; ) input( box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0,11); odsazení: 10px 20px; šířka: 100%; okraj: 10px 0; obrys: žádný; ) input( background: red; border: none; box-shadow: 0px 2px 0 1px #C50909; border- poloměr: 5px; barva: bílá; text-transform: velká písmena; váha písma: 600; šířka: 200px; kurzor: ukazatel; přechod: 0,3 s; ) input:hover( pozadí: černá; box-shadow: 0px 2px 0 1px Černá; )
Klientská část
Zde stojí za to porozumět podrobněji, nebo spíše zvolit vhodnou možnost pro sebe. Pro zasílání zpráv emailem budeme muset použít jazyk php, tzn. vytvořit samostatný soubor, do kterého všechna tato data přeneseme. Tuto metodu zde ale nebudeme uvažovat, protože je mnohem krásnější, když se vše děje bez opětovného načtení stránky. Podíváme se tedy na odesílání dat přes ajax.
Pokud chcete dělat vše postaru, pak budete muset mírně upravit horní html a nastavit hodnotu atributu metody formuláře (post nebo get). Vše záleží na tom, jak chcete data z formuláře přenést. A také nezapomeňte napsat akci, která naznačí cestu k souboru php.
A použijeme pokročilejší metodu a odešleme data bez opětovného načtení stránky a při obdržení odpovědi ze serveru dáme uživateli zprávu o úspěšné operaci nebo chybě. Budeme však potřebovat také 2 soubory, řekněme kontakt.php A custom.js.
Nejprve nezapomeňte zahrnout knihovnu Jquery, s jeho pomocí několikrát zmenšíme kód a budeme moci snadno provádět jakékoli akce pomocí hotových řešení.
$(".form").submit(funkce() ( var str = $(this).serialize(); $.ajax(( typ: "POST", url: "kontakt.php", data: str, úspěch : function(msg) ( if(msg == "ok") ( alert("Zpráva odeslána"); ) else ( alert("Chyba! Možná jste pole vyplnili špatně."); ) ) )); vrátit Nepravdivé; ) );
Nyní pochopíme akční plán a proč potřebujeme všechny tyto knihovny a soubory. Když uživatel klikne na tlačítko odeslat, máme událost odeslání, kterou zapíšeme do custom.js a na základě které obdržíme všechna data z formuláře a předáme je do souboru contact.php. Zde ještě jednou zkontrolujeme, zda jsou naše pole prázdná (abychom se vyhnuli další možnosti spamu), pošleme zprávu e-mailem a upozorníme uživatele na výsledky, které jsou odeslány jako odpověď na custom.js.
If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail "]); $txtphone = trim($_POST["mfbPhone"]); // od koho $fromMail = " [e-mail chráněný]"; // Sem zadejte svůj e-mail $emailTo = " [e-mail chráněný]"; $subject = "Zpětná vazba"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "Od: Příklad formuláře<$fromMail>\n"; $headers .= "Typ obsahu: text/prostý; charset="utf-8"\r\n"; $headers .= "MIME verze: 1.0\r\n"; $headers .= "Datum: ". date("D, d M Y h:i:s O") "\r\n"; // tělo dopisu $body = "Obdrželi jsme dopis ze stránky ".$site." \n\nJméno: ".$txtname."\nTelefon: ".$txtphone."\ne-mail: ".$txtemail."\nZpráva: ".$txtmessage; mail($emailTo, $subject, $body, $headers); echo "ok";)
Toto je nejzákladnější příklad toho, jak kontaktní formulář funguje. Existuje mnoho možností, jak upravit kontrolní soubor v PHP, vytvořit vlastní třídy atd. Naším úkolem ale bylo vytvořit jednoduchý a fungující příklad, který můžete použít na svém webu.
demo
soubory
Hotové pluginy
Vzhledem k tomu, že jste na blogu WordPress, pravděpodobně jste připraveni a dychtiví používat všechny druhy pluginů, zvláště pokud jste úplný lamer v programování a rozložení. A neobviňuji vás z toho, a dokonce vám pro jasnost mohu jeden z nich představit. Účelem tohoto odstavce není doporučení, ale pouze příklad, jelikož jsem plugin použil Kontaktní formulář 7 v několika projektech.
Jeho konfigurace je velmi snadná a téměř vždy funguje bezchybně. Pokud potřebujete vytvořit svůj vlastní jedinečný design, můžete to udělat. Stačí přidat potřebná pole v konstruktoru, přeložit a změnit notifikace o chybách a úspěšném odeslání po svém a je hotovo. Dále zkopírujte krátký kód a vložte jej na požadované místo ve formuláři.

S pluginem jsem nikdy neměl žádné problémy a pokud potřebujete rychlé a připravené řešení, pak je to ono. Pokud máte vlastní požadavky na formu z hlediska funkčnosti a designu, pak je lepší použít první možnost, která vyžaduje znalosti v tomto odvětví.