Volite web dizajn?
Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.
Basic contact form – HTML, CSS + PHP
Nakon osnovnih i stilski dotjeranih kodova za search box i login – register forme, konačno je na red došla još jedna forma koju često koristimo, a to je kontakt forma. ( DEMO )
Da se prisjetimo, osnovni HTML kod za kontakt formu ide ovako:
<div class=”contactform”>
<form method=”POST” action=”mailer.php”>
<label>Name: </label><input type=”text” name=”name” size=”19″><br>
<label>E-mail: </label><input type=”text” name=”email” size=”19″><br>
<label>Text: </label><textarea rows=”9″ name=”message” cols=”30″></textarea>
<br>
<input class=”submit-button” type=”submit” value=”Submit” name=”submit”>
</form>
</div>
Ovaj kod ubacimo u naš HTML dokument na mjesto gdje želimo da bude naša kontakt forma.
Ono što nam je potrebno da bi kontakt forma radila je još jedan dokument koji ćemo otvoriti u notepadu i nazvati ga mailer.php .U taj dokument kopirati ćemo slijedeći kod:
<?php
if(isset($_POST[‘submit’])) {
$to = “your@mail.com”;
$subject = “Form Tutorial”;
$name_field = $_POST[‘name’];
$email_field = $_POST[’email’];
if (eregi(”(\r|\n)”, $email_field)) {
die(”Nemojte spammati.”);
}
$message = $_POST[‘message’];
$body = “From: $name_field\n E-Mail: $email_field\n Message:\n $message”;
echo “Data has been submitted to $to!”;
mail($to, $subject, $body);
} else {
echo “blarg!”;
}
?>
Ne smijemo zaboraviti zamijeniti “your@mail.com” sa našom pravom e-mail adresom.
Zvonko iz SliceMachine-a ljubazno nam je dodao u našu osnovnu formu i par redaka za sigurnost protiv spamova. Označili smo ih crvenom bojom. Hvala Zvonko 🙂
CSS za “stil 1” koji smo mi koristili:
.contactform /*– div u kojem se nalazi kontakt forma–*/
{
width: 460px
}
.contactform form /*– cijela forma–*/
{
overflow:hidden;
font-size:1.2em;
}
.contactform label /* — natpisi: “name” , E-mail, Text–*/
{
width:95%;
font-size:0.8em;
}
.contactform textarea, .contactform input /*– polja u koja se upisuje ime, mail adresa i tekst–*/
{
width:95%;
padding: 5px;
background: #ece9d8;
border: #808064 1px solid;
margin-bottom:5px;
}
.contactform .submit-button /* — button za submit–*/
{
float:right;
width: 100px;
margin-right: 11px;
}
.contactform textarea:focus, .contactform input:focus, .contactform .submit-button:focus /*– ponašanje polja za upis i submit buttona na klik mišem — */
{
border: #99161c 1px solid;
background:#ffffff;
}
Sada naš kontakt.html, mailer.php i naš style.css uploadamo na net i ako je sve u redu, naša kontakt forma radi. Poruke poslane preko nje stizati će na našu mail adresu.
Na DEMO stranici može se vidjeti, isprobati i kopirati osnovni kod za kontakt formu i još dva CSS stila.
Slični sadržaj:
- Naučite kako ukrasiti forme sa CSS-om (Jako slično)
- Search box instalacija - kako ga pokrenuti? (Jako slično)
- 13 besplatnih CMS opcija za web dizajn profesionalce (Srednje slično)
- Stranica generirana za x.xxxx sekunde (Srednje slično)
- Kako se boriti protiv spam-a sa PHP-om? (Srednje slično)
24 komentara
Trackbacks & Pingbacks
Ostavite komentar
Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.
Jeee, a baš sam razmišljao da napišem poneki tutorijal više o coding strani posla. Bravo weberice.
Ima samo jedna napomena:
Uvijek “escapati” korisničke unose! Na primjer:
$name_field = mysql_real_escape_string($_POST[‘name’]);
Ovdje se ne može ništa dogoditi, ali treba nam to svima ući u rutinu.
Nice tutorial.
Ah, vidim da sam napisao u komentaru neku foru, a nisam je objasnio.
Funkcija mysql_real_escape_string će očistiti korisnikov unos od potencijalno nesigurnih znakova i koristi se ukoliko se taj korisnikov unos koristi kao dio SQL upita.
Za prevenciju tzv. mail injection napada (kad spammer iskoristi Vašu formu za slanje spama na veliki broj adresa) koristi se nekoliko rješenja.
Vi ćete reći, ali adresa na koju se šalje je na serversokj strani, ja sam sigurna. No, niste sigurni. Spammer može unutar polja za unos svoje email adrese (From) ubaciti:
test@domena.com
Bcc: zrtva@jadnik.com
i mail će biti poslan i na zrtva@jadnik.com! Probajte, zaista je tako jednostavno.
Po meni, najjednostavnije je ovako riješiti problem:
if (eregi(“(\r|\n)”, $email_field)) {
die(“Nemojte spammati.”);
}
Ovaj kod traži novi red u korisničkom unosu, te ukoliko isti postoji, skripta se prestane izvršavati i na ekranu se ispisuje poruka.
Nemojte misliti da će ovo rješenje riješiti sve vaše probleme, ali je jako dobar početak.
Ma što bi mi bez Zvonka! 🙂
Postovani,
pozdrav
jedno malo pitanje – imam problem sa ovim codom gde treba ubaciti mail adresu da bi se pritiskom na dugme send mail ispratio , gledao sam vas odlican primer ali nikako da ga implementiram u moji,
pozdrav hvala na pomoci.
ps. ovo je cod
Your name:
E-mail address:
Telephone:
Messege:
form name=”contact” method=”post” action=”” id=”contact”>
Your name:
E-mail address:
Telephone:
Messege:
Upravo gledam ovaj primjer kontakt forme i svidja mi se s tim sto sam ja molo izmjenjeno radio 🙂 tacnije prilagodio sam je k sebi,medjutim ne radi mi pri kliku na send,vec mi javi “can not found page” onda sam pomislio da je greska u meni medjutim nije,jer sam provjerio i vas code te mi ni on ne radi i javlja isti problem… dal mi neko moze pomoci rijesiti ovaj problem !
htm code:
Korisnicko ime:
E-mail:
Poruka:
PHP code:
ERROR 404 – PAGE NOT FOUND
Oops! Looks like the page you’re looking for was moved or never existed.
Make sure you typed the correct URL or followed a valid link.
To je problem koji dobijam pri kliku na send ili vam ga submit
NEMA POTREBE DA ODGOVARATE NA PRVA DVA POSTA,RJESEN PROBLEM !
Dejan i dečki, Zvonko je napisao nekoliko tutoriala sa formama koje sadrže i php dio kodova pa vam savjetujemo da i njih pročitate, vjerujemo da će vam pomoći.
Napravio sam kontakt stranicu prema ovim upustvima… Nemam jos svoj prostor na netu *nisam zakupio domen*, kako da provjerim da li rade ove moje forme prije nego sto stavim stranicu na net… Probavao sam provjeriti stranicu na nekim “Free hosting” serverima, ali kad unesem putaju tog svog “novog” sajta, on mi otvori samo bijelu stranicu i na njoj pise “Forbiden!”. Dajte mi neki savjet i pomoc sta da radim???
probaj preko xampp-a
http://tutorijali.hdonweb.com/web-design/xampp-instalacija-apache-web-servera-za-mysql-i-php
Ja sam iskoristila kontakt formu, sve točno po uputama, ali mi ne radi …javlja ovo
Parse error: syntax error, unexpected ‘@’ in /home/korisnickoime/public_html/mailer.php on line 4
Da li ste na sljedećoj liniji $to = “your”; stavili your ili baš pravu e-mail adresu tipa ime[monkey]email.com? Naš sistem automatski zbog SPAM robota sakrije sve email adrese pa je možda tu greška?
domenu imam sa hr tako i ide mail info@domena.hr. Nisam pametna isprobala sam jedno 5 kontakt formi u nadi da ću uspjeti i neide, nije mi jasno gdje griješim.
Ajde mi pošaljite taj Vaš mailer.php na email admin[monkey]kroativ.net pa mogu pogledati u čemu je problem.
Molim za riješenje iz gore navedenog primjera gospđe Mirjane, Imam isti problem, hvala
I meni javlja grešku na 4 retku u .php fileu.
upisao sam svoju mail adresu zajedno sa “@” i na tom stringu mi javlja gresku.
Greska je u tome kada kopirate cijeli kod znak navodnika ” vam nije jedna kao za PHP kod, svaki znak navodnika manualno napisite sami i stvar je riješena!
Pozdrav
promenio sam adresu e-mail ali form nece da radi, pri svakom slanju poste ostaje beo ekran – dali neko zna resenje. – jel greska u mejlu ili u codu
pozdrav
Matas ti je odgovorio u komentarima, probaj
Odlican kod 😉 moze uvezat i druge vrste Formi … Samo navodnike izbrisite i ponovo upisite !!!
Sad, imam pitanje.. Kako mogu napraviti da me vrati na Kontakt formu ili na HOME Page poslije slanja poruke…. ? Nesto kao redirect ?
Napravio saam 🙂
Dodate u mailer.php na dno
I vrati vas za 3 sec na kontakt.html odnosno kako vam se vec zove 😉
nevidi se kod u prvom komentaru sta trebate dodat
head
meta http-equiv=”refresh” content=”3;URL=kontakt.html”
zatvorite head 😉
Pozdrav ja sam sve napraila kako pise.. ali na moj email dolazi poruka “from: $name_field\n E-Mail: $email_field\n Message:\n $message” umjesto sadrzaja polja unesenih od posiljaoca ispunjavanjem polja forme.. ima li tko rijesenje?