Po několika kladných ohlasech na můj starší článek jsem se rozhodl napsat další návod na e-mailový formulář. Bude již obsahovat antispamovou ochranu a možnost nastavit si vlastní e-mail, na který bude zpráva doručena. Tímto se stává celkově bezpečnější a užitečnější.
Jak začít s formulářem?
Chcete umožnit návštěvníkům posílat maily přímo z Vaší stránky? Dnes Vám ukážu jak vytvořit PHP skript, pomocí kterého mohou návštěvníci Vaší stránky posílat e-maily. Uživatel bude mít možnost nastavit si e-mail, na který bude chtít odeslat svojí zprávu. Zároveň je tento e-mailový formulář chráněn proti spamu.
Nahlédněte jak tento e-mailový formulář bude vypadat:
Ukázka plně funkčního e-mailového formuláře…
Pokud nechcete, aby konkrétní člověk posílal z Vaší stránky maily, můžete jej zablokovat pomocí jeho IP adresy. Stačí v stejném adresáři vytvořit soubor .htaccess a pomocí jej zablokovat uživateli přístup. Více o .htaccess a možnosti zablokování přístupu pomocí IP adresy se můžete dočíst v jednom ze starších článků Použití souboru .htaccess.
E-mailový formulář – HTML kód
Jen bych chtěl upozornit, že Váš hosting musí pro funkčnost podporovat PHP. V dnešní době je to již samozřejmost a proto si myslím, že toto téma není nutno dále rozvádět.
index.php (vložte kamkoli mezi tagy <body> a </body>)
<table style="height:100%;" width="100%" cellSpacing="0" cellPadding="0" border="0">
<tr><td align="center" valign="top">
<form action="odeslat.php" method="post">
<table width="250" border="0" class="text">
<tr><td width="50"><strong>O</strong>desílatel:</td><td><input name="email" size="30" type="text"/></td></tr>
<tr><td width="50"><strong>P</strong>říjemce:</td><td><input name="prijemce" size="30" type="text"/></td></tr>
<tr><td width="50"><strong>P</strong>ředmět:</td><td><input name="predmet" size="30" type="text"/></td></tr>
<tr><td width="50"><strong>V</strong>ypočítej:</td><td><input name="spam" size="23" type="text"/><strong>= 1 + 1</strong></td></tr>
<tr><td width="50" valign="top"><strong>Z</strong>práva:</td><td><textarea name="zprava" rows="8" cols="50"></textarea></td></tr>
<tr><td colspan="2" align="center"><input type="submit" class="button" value="Odeslat e-mail"/></td></tr>
</table>
</form>
</td></tr>
</table>odeslat.php (kompletní zdrojový kód)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta http-equiv="Refresh" content="4;url=index.php">
<title>Doručování e-mailu ...</title>
</head>
<body>
<?
$prijemce = $_POST['prijemce'];
$predmet = $_POST['predmet'];
$email = $_POST['email'];
$spam = $_POST['spam'];
$zprava = $_POST['zprava'];
if ($prijemce!="" and $predmet!="" and $email!="" and $zprava!="" and $spam=="2")
{
Mail($prijemce, $predmet, $zprava, "From: " . $email);
echo "<p>Váš e-mail byl úspěšně odeslán na adresu <strong>$prijemce</strong>.";
}
else
{
echo "<p>Váš e-mail se <strong>nepodařilo odeslat</strong> pravděpodobně jste nevyplnili všechny údaje, nebo nevíte kolik je 1 + 1.</p>";
}
?>
</body>
</html>
{ 34 komentáře… přečtěte si je níže nebo přidejte vlastní }
Hezké, kéž by bylo takových návodů více :-) Mimochodem jak se ti podařilo udělat tak hezké odkazy u článků? Mně wordpress generuje samé úplně hrozné v tom bych potřeboval poradit a vážně nevím už kam s tím :(
Díky. Konečně se našel někdo, kdo jen výsledek nestáhne a okno nezavře. Návodů mám více. Plánuji ještě jeden, ale ten bude za hodně dlouho. Možná taky nebude. Nevím. Je to dost práce. Zkus kouknout do sekce Tvorba WWW máš jim tam víc. Určitě se ti budou hodit. K těm odkazům. Je to celkem jednoduché, protože jsem 4 roky tvořil weby. Takže si s celým designem neustále hraju a něco předělávám. WordPress je dobrý systém, ale já preferuji ruční úpravu. Celé články píši v HTML sám. Je to lepší a máš větší kontrolu nad článkem. K tvému problému. Nevím co přesně myslíš. Odkazy jsou normální a k nim přidávám popis přes title. Barvy a všechno ostatní je stylované v CSS.
Aj. Musím říct, že tvůj html kód má k ideálnímu zpracování hooodně daleko. Nestydíš se do světa vypustit formulář s formátováním legendy pomocí tabulek? Doporučím ti pročíst si tohle: http://jdem.cz/a5698 a naučit se pořádně CSS. Pseudo prvek :First-letter ti taky nejspíš nic neříká – uzavírat první písmeno do strong je zbytečné!Podle dnešních norem je tohle z hlediska html skoro úplně špatně!
Ne nestydím a nemám k tomu důvod. Je to starý způsob, ale to mu neubírá ani drobet od kvality. CSS se pořádně učit nemusím, ale i přesto děkuji za odkaz. Nevidím důvod proč neuzavírat první písmeno do Strong. Je to na každém jak si svůj text o taguje. Normy? To je jen doporučení. Tabulky fungují a zobrazují se neustále stejně i po těch letech. Stále taky budou. Nikdo nikomu nerozkazuje, aby přestal používat tabulky. Koncovým uživatelům záleží na funkčnosti a jednoduchosti …
Sémantika ti nic neříká? Proč používat tagy, které jsou přesně k tomu účelu navrženy, když to mohu dělat jednodušeji, že ano? Když pominu ty extrémně handicapované uživatele (používání hlasových čteček) – těm absolutně komplikuješ život a formulář s tagy label a legend je pro ně 100% čitelný – to se o tabulkách říci nedá – můžeš namítnout, že těch je minimum %, ale tak se nikam nedostaneme – web by měl být pro všechny. Potom je tu početnější skupina lidí s pomalejším internetem – ať už na PC, nebo na mobilu – pokud je ti známo, tabulka se nezobrazí, dokud se 100% nenačte obsah. A když budeš používat tabulky se stejným přístupem jako pro tenhle formulář i pro celý web. To teda potěš…
Proč myslíš, že 99,9% těch lepších, nebo profesionálních (je jedno jaký výraz zvolíš) kodérů přešlo z tabulek na styly?
Rychlejší načítání díky CSS, které stejně nikoho nezajímá jelikož jsme v době, kdy internet 40 MB/ps není problém. Kratší HTML, které je jen miniaturní výhodou. Takových argumentů můžeme použít hromadu. To ovšem neznamená, že by jsme měli tabulky přestávat používat. Pokud ti vadí to, že se e-mailový formulář načítá pomalu a zdržuje tvé stránky existuje způsob jak to vyřešit. Jsi programátor. Přemýšlej.
Ne, vidím, že se s tebou nemá cenu na tohle téma hádat. Tyhle argumenty jsem čekal a nemyslím, že by jsme to mohli vyřešit touhle cestou.
Každopádně podle mě stojí za zamyšlení poslední odstavec mého minulého komentáře!
Programátor nejsem, php nerozumím.
Snad tě nezklamu, ale já se již od roku 2007 programování nevěnuji a tak se nad tím zamýšlet nebudu. Určitě si komentáře někdo přečte a třeba ti dá za pravdu. Nemá cenu v dnešní době řešit zrychlení stránky o 0.0153 sekundy. Je ovšem jasné, že tabulky jsou minulostí. To ovšem neznamená, že si je obyčejný člověk nemůže umístit na své stránky.
Yötua má pravdu, tabulky by se měly používat k zobrazování tabulkových dat a ne k zarovnávání elementů na stránce. Ale ať si každej dělá co chce, jen není úplně správné „učit“ laiky přežitým technikám…
Již jsem na tyto otázky odpovídal víš, ale díky za komentář :o)
Komu se to nelíbí je jednoduché to předělat podle aktuálních norem. Pro obyčejného uživatele to snad postačí v tomto formátu.
Tak to som zase ja, fajne to funguje, tesim sa. Je mi uplne jedno co a ako funguju normy, ci tabulky. Podstatne je, ze odoslem a pride. Dik.
Jsem stejného názoru :o)
Promiň, ale přijde mi to, jako vrátit se tak o 7 let zpátky…
Vnořená tabulka v tabulce je evidentně použita kvůli vertikálnímu zarovnání na střed. Je to aktuálně asi jediný spolehlivý způsob, to je fakt, ale obecně nevidím důvod, proč to svým čtenářům (začátečníkům) takto komplikovat (proč vůbec vertikálně zarovnávat)… Myslel jsem, že tvým účelem bylo napsat článek o funkčním e-mailovém formuláři s antispamovou ochranou. Proč tam tedy pleteš tyto vnořené tabulky a další zbytečnosti? Nebylo by jednodušší třeba každý label a pole nechat na 1 řádce a prostě oddělovat? Odsazování částí kódu ti nic neříká?
V druhé ukázce používáš HTML 4.01 Transitional, pokud bych jej použil i v první, nechápu, proč uzavíráš nepárové tagy… … což vyžaduje až XHTML. I kdybych chtěl první ukázku napsat v XHTML, pak zase nebude správný zápis cellPadding a cellSpacing… nevidím důvod, proč je psát s velkými písmeny, HTML to snese a XHTML to vyžaduje…
Máš sice pravdu, že konsorcium dává doporučení, ovšem opravdu nevidím jediný důvod (konkrétně v uvedených ukázkách), proč se těmto doporučením bránit…
a /:first-letter ve mně vyvolá spíš úsměv :)
Dovol abych se vyjádřil. Máš totiž pravdu. Všechno je dost led dozadu. Je to kvůli tomu, že když jsem se ještě věnoval tvorbě WWW (a to už je hodně dlouho) všechno tohle bylo fajn. Prostě moderní. Potom jsem se tomu přestal věnovat a napadlo mne založit blog a třeba o tom něco napsat. Tahle myšlenka byla ještě asi jeden nebo dva roky dozadu než jsem blog založil (rok 2007). Potom, co jsem ho vytvořil tak jsem napsal pár věcí o sobě a až potom jsem napsal tyhle články. Můžou proto působit trochu staře :-) to, ale neznamená, že je nikdo nemůže použít.
Snad je všechno už jasné. Prostě jsem se jen snažil pomoci a proto jsem sepsal pár článků o tvorbě, abych tu mojí životní kapitolu nějak uzavřel. Povedlo se.
PS: Nehraješ multiplayer GTA?
„PS: Nehraješ multiplayer GTA?“
Na hrách už jsem kdysi dávno zanevřel…
Konečně někdo inteligentní, který hry nehraje. Neříkám, že jsou škodlivé, ale v dnešní době se to drobet přehání. Já je hraju taky, ale s odstupem. Když se nudím a není opravdu už co dělat a na nic není chuť – CSku neodolám :)
Baví mně teamové hry. Musí se spolupracovat a všichni hrají teamově. Je to pak hodně jiné než jen běhat a střílet po všem, co se hne.
Tomáši, neřekl bych že to zrovna bude souviset s inteligencí :-)
Ale zakončím to stručně – Když už nechci občas myslet na práci… znám mnoho lepších způsobů zábavy a odreagování (podotýkám, že není řeč o drogách a podobných svinstvech :) )…
… a mohl bys nám dát nějaké rady? :D
Díky moc za tenhle návod, využil jsem ho…opravdu ještě jednou moc díky!
Super věc, něco takového jsem nebyl schopen sám napsat :)
Jen tak dál.
Tohle mi přijde vtipný, člověk který radí amatérům jak psát web, ho už dávno nepíše. A experti kteří zas nepíšou návody na web, mu radí jak má psát návody.
Dobrý den,
děkuju za pěkný návod. Doteď jsem PHP neovládal, teď už díky Vám se v tom trochu orientuju. Formulář jsem použil na svých stránkách a dokonce trochu upravil k obrazu svému. Webdesign se teprve učím. Jsem student informatiky. Sice nás ve škole učí používat výhradně CSS, ale pokud se jedná o něco, kde se tabulkové formátování vyloženě hodí (zmíněné formuláře) tak to není problém. Naopak si myslím, že tabulkové formátování je v tomto případě přehlednější i lepší než CSS. Nevidím důvod proč stoprocentně dodržovat sémantiku i v případě, kdy se nabízí jednodušší řešení
Jenom bych se rád zeptal, jak zajistím, aby mi ve formuláři v kolonce PŘEDMĚT chodila na mail správně i diakritika, pokud tam jsou háčky a čárky, tak to nešlape. Kódování nastavené mám. V kolonce ZPRÁVA diakritika funguje jak má. díky za odpověď
Pak to jen nějak vylepšit s pozadím, ohraničením a jinejma blbůstkama =D díky za tip.
Když používáš Wordpress tak si stáhni Contact Form 7. Je to užitečný plugin přes který si nastavíš formulář. A tohle už potřebovat nebudeš ;).
Mně to přijde hezky napsané a hlavně funkční. Tohle využije i laik, který se s žádným CSS patlat nikdy nebude a tabulky plní svou funkci skvělě. No a co, že jsou zastaralé. Nevim, na co si tu Yötua hraje, když se mu tohle nelíbí, tak ať si táhne jinam. Rejpat se může třeba doma v hnoji, nebo by si mohl najít holku, pak by neměl na tohle čas ;). Za mě pochvala ;).
Někde to zadává špatné kódování-co s tím, bez diakritiky je to k ničemu, že to je po dvou dnech a předtím i ještě dalšího hledání konečně první funkční.
Jo, na nějakých mailech se to stává. Pokud chceš mailový formulář s českou diakritikou zkus do souboru odeslat.php vložit do PHP kód:
$headers = "Content-Type: text/plain; charset=utf-8";– pak by mělo vše fungovat. Nezapomeň dát vědět :).Přezkoušeno, je to tak. Nemohu nic najít, aby to umělo česky. Už to hledám „týden“. Miliony zkoušek a porád nic. A přes server webzdarma vše fungovalo. Jakto, že jim jo a mě ne ? :o(((((((((((
pozn.: zkouším na Endoře. Ale tam mají novější php.
Podívej se do hlavičky souboru kde je formulář. Mělo by být stejné kódování jako v odeslat – takže:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">– pokud není stejné tak to změň a zkus to znova. Jináč příště nezakládej nový komentář, ale používej tlačítko Odpovědět ;). Snad se zadaří a formulář bude odesílat správně s diakritikou.Hm, dík, jak bude čas, tak to projdu a dám vědět.
To se teda vloudila chybička, to mělo patřit sem, to neměl být nový.
Už jsem odpovídal před pár dny a není to tu! Nic nefunguje, nikde nevidím chybu a diakritiku to mrší ve zprávě.
Je mi líto, ale pokud mé řešení nefunguje – nedokážu ti jinak pomoci. Nejsem tu žádná placená podpora ani ničí zaměstnanec – jde pouze o koníček ve volném čase. Budeš muset najít řešení jinde.
Ahoj,
jsem v tomhle totální analfabet. Nikdy jsem nerozuměl programování a ani tvorbě webovek. Snažím se si jedny vytvořit a potřebuji tam dostat tenhle formulář ale nějak nejsem toho schopen. Mohl by jsi mi prosím poradit? Moc by mi to pomohlo. Formulář se mi tam ukáže ale při odeslání mi to vyhodí chybu a to je konec.
Moc díky za pomoc.
Ber to tak, že jeden soubor vytvoří vzhled políčka a ten druhý to vykonává. Pokud tedy ten druhý nevložíš na stránky tak to prostě fungovat nebude a to myslím přes FTP. Klasické systémy, které ti samy nahrají vzhled a vlastně vyplňuješ už jen text to nepodporují. Protože nemáš přístup k serveru a nemůžeš tam nahrát soubory. Což je případ třeba estranky.cz – alespoň myslím.
Nejlepší je sehnat normální hosting, nahrát si redakční systém (já mám WordPress), vybrat si vzhled a už jen plnit stránky. K takovým systémům pak existují pluginy, který samy emailový formulář na web vloží. Většinou tam jde nastavit i nějaký antispam (tedy ochrana proti spamu) jako v tomto případě. Jestli se učíš tvořit stránky ručně tak doporučuji začít od nuly a číst třeba Jakpsátweb.cz.