[JavaScript][PHP] Jak stworzyć formularz z okienkiem kontaktowym, z którego można wysłać e-mail bez przeładowania strony?

Chcesz stworzyć wygodny formularz kontaktowy, gdzie użytkownik serwisu będzie mógł wpisać wiadomość i po kliknięciu, bez przeładowania strony, wyśle ją do Ciebie lub na inny, wskazany adres. Po wysłaniu listu zobaczy okienko z podziękowaniami.

Stworzenie dobrego i wygodnego okienka do kontaktów z czytelnikami serwisu jest bardzo ważne. Mogą oni natychmiast zgłosić uwagę lub wysłać zapytanie po ofertę. Brak przeładowania strony powoduje, że nie przeniosą się nagle na inną stronę i nic nie przerwie im oglądania strony, na której się znajdują.

Większość skryptu napisana jest w JavaScripcie, a okienko z podziękowaniami, obsługujące również wysyłkę wpisanej treści, wykonane jest w PHP. System nie jest trywialny do wykonania, więc będziemy musieli się trochę nagimnastykować. Zacznijmy od okienka kontaktowego.

<form name="okno">

Wpisz wiadomość:

<br><textarea name="txt" rows="6" cols="12" style="width:150px;"></textarea>

<br>Zostaw adres e-mail:

<br><input type="text" name="mail" style="width:150px;">

<br><input type="button" value="wyślij" onclick="wyslij()">

</form>

Nic strasznego - zwykły formularz z polem textarea, gdzie można zostawić dłuższą informację i pole tekstowe, gdzie należy wpisać adres e-mail. Po kliknięciu w guzik wyślij nastąpi wywołanie funkcji wyslij() napisanej w JavaScript.

Sam skrypt będzie musiał poradzić sobie z kilkoma niedogodnościami. Jedną z nich to polskie znaki. Zastosujemy tablicę konwersji znaków na litery bez ogonków, dzięki czemu nie otrzymamy mailem dziwnych znaczków w treści listu - metodę opisałem w jednej z wcześniejszych porad.

Tablice będą dwie, jedna dla Internet Explorera a druga dla poozostałych przeglądarek, bo w inny sposób kodują one polskie znaki. Poniższy skrypt umieść gdzieś obok formularza.

<script language="javascript">

<!--

if (navigator.appVersion.indexOf("MSIE")>0) {

pol=new Array("261","263","281","322","324","243","347","378","380",

"260","262","280","321","323","211","346","377","379");

} else {

pol = new Array("185","230","234","179","241","243","156","159","191",

"165","198","202","163","209","211","140","143","175");

}

bez=new Array("97","99","101","108","110","111","115","122","122",

"65","67","69","76","78","79","83","90","90");

function wyslij() {

var mail = document.okno.mail.value;

if (mail.indexOf("@")<1) {

alert("Podaj adres e-mail!"); return false;

}

var tekst = document.okno.txt.value;

for (var i=0;i<pol.length;i++) {

var regexp = eval("/"+String.fromCharCode(pol[i])+"/g");

tekst=tekst.replace(regexp,String.fromCharCode(bez[i]));

}

mail.replace(" ","");

tekst.replace(" ","%20");

window.open("popup.php?mail="+mail

+"&tekst="+escape(tekst),"odp","width=300,height=300");

return true;

}

//-->

</script>

Na górze skryptu znajdują się wspomniane tablice znaków. Po wejściu do funkcji wyslij() sprawdzamy od razu czy użytkownik podał e-mail. Jeżeli nie, otrzyma stosowny komunikat. Sprawdzanie maila jest banalne i sprowadza się do znalezienia znaku małpki.

Następnie pobierana jest zawartość pola tekstowego i znak po znaku wszystkie polskie litery zamieniane są na odpowiedniki bez ogonków. Dodatkowo adres czyszczony jest z pustych spacji, a puste spacje w treści zamieniane są na odpowiednik numeryczny %20, ponieważ w odnośniku nie może być spacji.

Ostatecznie tworzymy nowe okienko, a w adresie tego okienka jako parametry do pliku popup.php przekazujemy adres e-mail i treść komunikatu. I tutaj czeka nas kolejna pułapka. Adres URL z parametrami nie może być dłuższy niż ok. 4 tys. znaków z pewną tolerancją w zależności od przeglądarki.

Sytuacja przypomina wysyłanie formularza metodą GET, a więc wszystkie dane muszą zmieścić się w przekazywanym adresie. Dlatego też mail podajemy jako pierwszy, bo gdyby klient wysmażył dłuższy list, na pewno będzie przekazany adres i część listu, co pozwoli dopytać go o resztę, która nie przeszła.

Mamy już gotowy skrypt - otworzy on okienko i przekaże podczas wywołania skryptu PHP adres i treść listu. Teraz potrzebujemy osobnego pliku PHP o nazwie popup.php, gdzie odbierzemy dane i wyślemy je mailem pod wskazany adres.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html><head><meta http-equiv="content-type"

content="text/html; charset=iso-8859-2">

<title>okienko</title></head><body>

<?

$mail = $_GET["mail"];

$tekst = $_GET["tekst"];

echo "<b>Dziękujemy za wiadomość!</b><p>";

mail("[e-mail]","List ze strony", $tekst, "From: $mail");

?>

<p><center><a href="javascript:window.close()">zamknij okno</a></center>

<script language="javascript" type="text/javascript">

<!--

setTimeout("window.close()",10000);

//-->

</script>

</body>

W skrypcie wystarczy pobrać przekazane dane metodą GET. Następnie można podziękować za informację i wysłać ją mailem do adresata. Na końcu przydaje się jeszcze skrypt, który automatycznie zamknie okienko po 10 sekundach oraz link, gdyby ktoś chciał zamknąć okno ręcznie.

Wszystkie elementy są już gotowe - kwestia dopracowania wyglądu, rozmiarów okienka i formularza. Sam mechanizm jest bardzo użyteczny i wyśmienicie sprawdza się w praktyce.

Jeżeli dane chcesz przekazać dane do skryptów napisanym np. w Perlu lub ASP, nic nie stoi na przeszkodzie aby napisać odpowiedni skrypt do odbierania danych metodą GET w innym języku. Zasada działania całego rozwiązania jest identyczna.

---