PHP Solutions – Formularz kontaktowy

19 lutego, 2012 w kategoriach: Web developing, PHP, Podstawy

7,753 0
Dane:
  • Czas pracy: 15 min
  • Poziom: Podstawowy
Opis:

Poradnik pokazujący jak w prosty sposób wykonać formularz kontaktowy.

Pliki do pobrania

Pokaż/Ukryj wszystko

Witam! W tym tutorialu pokażę Ci jak wykonać prosty, edytowalny formularz kontaktowy, który możesz umieścić na swojej stronie internetowej.

Efekt końcowy:
Alt zform

Przejdźmy teraz do kroku następnego, gdzie utworzymy kod HTML. ;)


Wydawnictwo Strefa Kursów

W tym kroku stworzymy najprostszy z możliwych kod html, do którego w kroku 4 dodamy kod PHP. Całość zapiszemy pod nazwą ‚kontakt.php’.

Dajemy podstawowe informacje meta, importujemy nasz plik css. W sekcji body dajemy przykładowy nagłówek.

<!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" />
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="PL">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<title>Formularz kontaktowy - Tutorials24</title>
</head>

<body>
<h2>Formularz kontaktowy</h2><br><br><center>

Po tym będzie zamieszczony kod PHP. Zróbmy więc kilka linijek odstępu, a kod PHP damy później.
Tworzymy formularz kontaktowy. Ważne by każdy input miał swoją nazwę (name), gdyż będziemy się tak do każdego pola odwoływali.

<div id="form">
<form method="post">
<input type="hidden" name="submit" value="TRUE" />

<div class="field"><label>Imię</label>
<input type="text" name="imie" class="contact_form_input" /><br /></div>

<div class="field"><label>E-mail</label>
<input type="text" name="email" class="contact_form_input" /><br /></div>

<div class="field"><label>Ulubiona strona</label>
<select class="contact_form_input" name="wybor"><option value="">--Wybierz--</option><option value="Tutorials 24">Tutorials24.pl</option><option value="Google.pl">Google.pl</option></select><br /></div>

<div class="field"><label>Wiadomość</label>
<textarea type="text" name="message" class="contact_form_textarea"></textarea><br />

<input type="submit" value="Wyślij" name="submit" class="contact_form_submit" /></div>
</form>

</form>
</div>

Kończymy sekcję body i html

</body>
</html>

Przejdźmy teraz do kroku 3, gdzie trochę ostylujemy nasz kod HTML.

Stylujemy przykładowy nagłówek.

h2 {
color: #3c0853;
text-align: center;
}

a także cały kontener ‚form’ i wszystkie elementy w nim zawarte tj pola tekstowe i button ‚Wyślij’.

#form {
width: 800px;
margin: 0 auto;
}
#form label {
width: 400px;
float: left;
}
#form .contact_form_input {
float: right;
margin-right: 150px;
width: 200px;
margin: 5px 0;
}
#form .contact_form_submit {
float: left;
margin-left: 300px;
margin-top: 100px;
}
#form .contact_form_textarea {
width: 300px;
height: 100px;
float: right;
resize: none;
margin: 5px 0;
}
#form .field {
float: left;
}

Na koniec pozostało nam ostylowanie wiadomości, czy wystąpiły jakieś błędy bądź, czy wiadomość została wysłana, czy też nie.

.blad {
color: #F00;
text-align: center;
}
.success {
text-align: center;
color: #090;
}
.error {
color: #F00;
text-align: center;
}

W kodzie css to już wszystko. Przejdźmy teraz do kodu PHP, który dodamy w utworzonym przez nas wcześniej pliku.

Otwieramy wcześniej zapisany plik z kodem HTML. W wyznaczonym miejscu (podanym wcześniej) uzupełniamy kod php.
Otwieramy znacznik php. Ustawiamy zmienne.

<?php

$twojemail = "kontakt@tutorials24.pl"; //na jaki adres ma zostać wysłana treść z formularza
$blad=0; // początkowo liczba błędów musi wynosić 0

Następnie przechodzimy do naszego skryptu.
Czyli po kliknięciu przycisku o nazwie ‚submit’ nastąpi filtrowanie danych wprowadzonych przez użytkownika. Ustalamy także temat wiadomości.

if (isset($_POST['submit'])) {

// filtrowanie treści wprowadzonych przez użytkownika
$temat = "Formularz kontaktowy"; // temat wiadomości
$imie = htmlspecialchars(stripslashes(strip_tags(trim($_POST["imie"]))), ENT_QUOTES);
$email = htmlspecialchars(stripslashes(strip_tags(trim($_POST["email"]))), ENT_QUOTES);
$wybor = htmlspecialchars(stripslashes(strip_tags(trim($_POST["wybor"]))), ENT_QUOTES);
$message = htmlspecialchars(stripslashes(strip_tags(trim($_POST["message"]))), ENT_QUOTES);

Sprawdzamy, czy pola wypełnione przez użytkownika nie są puste. Jeśli są to zmienna blad powiększa się, co prowadzi do wyświetlenia komunikatu/komunikatów o błędzie.

// sprawdzamy czy wszystkie pola zostały wypełnione
if (!$imie) {
$blad++;
echo '<p class="blad">Proszę wpisać swoje imię.</p>';
}
if (!$email) {
$blad++;
echo '<p class="blad">Proszę wpisać swój adres e-mail.</p>';
}
if (!$wybor) {
$blad++;
echo '<p class="blad">Proszę podać ulubioną stronę.</p>';
}
if (!$message) {
$blad++;
echo '<p class="blad">Proszę wpisać treść wiadomości.</p>';
}

Jeżeli zmienna blad przechowuje nadal zero błędów następuje wysłanie wiadomości. Czyli najpierw nadanie odpowiednich nagłówków, ustalenie ostatecznej wersji wiadomości.

// jeżeli nie ma błędu, to wiadomość e-mail zostaje wysłana
if ($blad == 0) {

// niezbędne nagłówki do wyświetlania wiadomości HTML
$naglowki = "MIME-Version: 1.0" . "\r\n";
$naglowki .= "Content-type:text/html;charset=utf-8" . "\r\n";

// opcjonalne nagłówki
$naglowki .= 'From: <'.$email.'>' . "\r\n";
$naglowki .= 'Cc: <'.$twojemail.'>' . "\r\n";

// całkowita treść wiadomości
$message = nl2br($message);
$wiadomosc = <<< KONIEC
<html>
<p><strong>Imię:</strong> $imie</p>
<p><strong>E-mail:</strong> $email</p>
<p><strong>Ulubiona strona:</strong> $wybor</p>
<p><strong>Wiadomość:</strong><br /> $message</p>
</html>
KONIEC;

Do wysłania e-maila posłużymy się funkcją mail(), z którą wyślemy treść wiadomości, temat, odpowiednie nagłówki na wybrany przez nas e-mail.

// wysyłanie wiadomości e-mail
$wynik = mail('<'.$twojemail.'>', $temat, $wiadomosc, $naglowki);

Sprawdzamy, czy wiadomość została wysłana. Zależnie od odpowiedzi uzyskujemy odpowiedni komunikat.

// komunikat potwierdzający wysłanie wiadomości bądź nie
if ($wynik) {
echo '<p class="success">Wiadomość została wysłana.</p>';
} else {
echo '<p class="error">Wiadomość nie została wysłana.</p>';
}

Kończymy wcześniej rozpoczęte instrukcje warunkowe.

}
}

Całość zapisujemy pod wybraną nazwą np. ‚kontakt.php’.

I voila. Stworzyłeś/stworzyłaś właśnie formularz kontaktowy, który pomoże Ci udoskonalić własną stronę internetową.

Pozdrawiam, Fisz ;)

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dodaj komentarz