Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jquery dodanie/edycja formularza
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
bezbap
21.02.2013, 18:32:37
Witam. Otóż pobrałem z internetu gotowy szablon jquery lecz niestety nie działa formularz kontaktowy. Jest on na stronie ale nie działa. Wiem czego brakuje ale nie wiem jak to uzupełnić aby wysyłał emaila na dany adres. Wpis w html-u wygląda następująco:
[HTML] pobierz, plaintext 
  1.             	<div id="form">
  2.                 	<form action="#">
  3.                     	<span>Nazwa:</span>
  4.                         <input type="text" name="name" class="name" />
  5.                         <span>Email:</span>
  6.                         <input type="text" name="email" class="email"/>
  7.                         <span>Wiadomosc:</span>
  8.                         <textarea class="message"></textarea>
  9.                         <input type="submit" name="submite" value="Submit" class="submit">
  10.                     </form>
  11.                 </div>
[HTML] pobierz, plaintext


Oczywiście brakuje pliku .php, który wysyłałby emaila. I tutaj pojawia się problem bo ja wgl nie wiem jak się za to zabrać. Gotowiec raczej tutaj nie będzie pasował bo na stronie wpis wygląda tak jak wygląda. Jak teraz zedytować gotowy formuarz aby działał na stronie bez zmieniania jego wyglądu?
PaFaT
21.02.2013, 19:52:23
Drogi(a) bezbap,

Znacznik <form> powinien wyglądać następująco:
[HTML] pobierz, plaintext 
  1. <form action="/wyslij-maila.php" method="post">
[HTML] pobierz, plaintext


Również polu <textarea> trzeba nadać nazwę, np. name="message".

Musisz pamiętać, że nie każdy serwer jest w stanie wysłać maila - na pewno nie serwer lokalny.
Kiedyś sam szukałem darmowego serwera obsługującego wysyłanie maili - znalazłem kilka, ale działa tylko CBA.

Natomiast plik wyslij-maila.php, znajdujący się w głównym katalogu strony powinien być mniej więcej taki:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. window.onload = function()
  5. {
  6. history.go(-1);
  7. }
  8. </script>
  9. </head><body>
  10. <?php
  11. $nazwa = $_POST['name'];
  12. $email = $_POST['email'];
  13. $tresc = $_POST['message'];
  14.  
  15. $adres = 'moj.adres@example.com';
  16. $temat = 'Wiadomość ze strony';
  17. $znaczniki = 'From: ' . $email . ' <' . $nazwa . '>';
  18.  
  19. mail($adres, $temat, $tresc, $znaczniki);
  20. ?>
  21. </body></html>
[HTML] pobierz, plaintext


Powinno zadziałać.

Mogą jednak pojawić się problemy z polskimi znakami.
Zobacz tutaj.
bezbap
23.02.2013, 18:59:16
Wszystko działa, wysyła emaila tylko teraz pozostaje pytanie jak to wszystko upiększyć? Po wysłaniu otwiera się sendmail i jest białe tło. Byłoby fajnie aby po kliknięciu przycisku submit pokazywał się komunikat z potwierdzeniem wyslania emaila a w przypadku kiedy nie byłby podany email bądź błędnie byłby wypelniony formularz komunikat zmuszajacy do poprawy.. Jako, że nie byłem wstanie zrobić takiej prostej rzeczy o którą prosilem wcześniej to czy mogłby mi ktoś w tym także pomóc? Będę bardzo wdzięczny.. :-)
PaFaT
24.02.2013, 21:17:57
Drogi(a) bezbap,

Po pierwsze, sprawdzenie poprawności wpisanych danych najlepiej wykonać w JS.
Aby tego dokonać, należy zmienić kod przycisku wysyłającego formularz na taki:

[HTML] pobierz, plaintext 
  1. <input type="button" value="Wyślij" name="submite" class="submit" onclick="sprawdzFormularz(this.form); " />
[HTML] pobierz, plaintext


W sekcji <head> należy dodać następujący kod:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function sprawdzFormularz(form)
  3. {
  4. if(!form) return;
  5. var nazwa = form.elements["name"];
  6. var email = form.elements["email"];
  7. var tresc = form.elements["message"];
  8. if(!nazwa || !email || !tresc) return;
  9.  
  10. var reg = /^[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*@([a-zA-Z0-9_-]+\.)+([a-zA-Z]{2,4})$/i;
  11.  
  12. var bledy = false;
  13. var komunikat = "";
  14.  
  15. if(nazwa.value == ""){
  16. komunikat = "Nie wpisano nazwy.\n";
  17. bledy = true;
  18. }
  19.  
  20. if(email.value == ""){
  21. komunikat += "Nie wpisano adresu e-mail.\n";
  22. bledy = true;
  23. }
  24.  
  25. if(tresc.value == ""){
  26. komunikat += "Nie wpisano treści wiadomości\n";
  27. bledy = true;
  28. }
  29.  
  30. if(email.value != "" && email.value.match(reg) == null){
  31. komunikat += "Podany adres e-mail jest nieprawidłowy.\n";
  32. bledy = true;
  33. }
  34.  
  35. if(bledy){
  36. window.alert(komunikat);
  37. return;
  38. }
  39.  
  40. form.submit();
  41. }
  42. </script>
[HTML] pobierz, plaintext


Po drugie, aby wywołać komunikat potwierdzający wysłanie wiadomości, zmień zawartość pliku wyslij-maila.php na taką:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Refresh" content="1; url=strona_z_formularzem_kontaktowym.php?wyslano=yes" />
  4. </head><body>
  5. <?php
  6.  
  7. $nazwa = $_POST['name'];
  8.  
  9. $email = $_POST['email'];
  10.  
  11. $tresc = $_POST['message'];
  12.  
  13. $adres = 'moj.adres@example.com';
  14.  
  15. $temat = 'Wiadomość ze strony';
  16.  
  17. $znaczniki = 'From: ' . $email . ' <' . $nazwa . '>';
  18.  
  19. mail($adres, $temat, $tresc, $znaczniki);
  20.  
  21. ?>
  22.  
  23. </body></html>
[HTML] pobierz, plaintext


Zaś w pliku z formularzem kontaktowym (pamiętaj, że musi mieć rozszerzenie .php):
jeśli masz skrypt wykonywany po załadowaniu strony (<body onload="", window.onload = function() itp.) dopisz do niego:

[PHP] pobierz, plaintext 
  1. <?php if($_GET['wyslano'] && $_GET['wyslano'] == 'yes') echo "window.alert('Wiadomość została pomyślnie wysłana.'); location.href = 'strona_z_formularzem_kontaktowym.php'; " ?>
[PHP] pobierz, plaintext


lub, jeśli nie masz skryptu reagującego na zdarzenie onload, dodaj do sekcji <head> następujący kod:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. window.onload = function()
  3. {
  4. <?php if($_GET['wyslano'] && $_GET['wyslano'] == 'yes') echo "window.alert('Wiadomość została pomyślnie wysłana.'); location.href = 'strona_z_formularzem_kontaktowym.php'; " ?>
  5. }
  6. </script>
[HTML] pobierz, plaintext


Nie zapomnij podstawić nazwy swojego dokumentu za strona_z_formularzem_kontaktowym.

Oby zadziałało! smile.gif
bezbap
25.02.2013, 17:15:17
Super wink.gif All działa. Pozostało już tylko kosmetyczne pytanie.. Mógłbyś pokazać na jednym przykładzie jak zmienic wygląd wyskakującego okna wink.gif
PaFaT
26.02.2013, 15:58:15
Cóż...

Nie da się zmienić wyglądu okna komunikatu (jest to okno systemowe).
Można użyć metody window.open() w celu otwarcia nowego okna, jednak wystąpią rózne komplikacje (okno musi być modalne), a poza tym może być to zablokowane przez AdBlockera.

Można użyć warstw HTML w celu uzyskania modalnej warstwy.
Po prostu do sekcji <head> dopisz następujący kod:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function openAlert(info, height, width)
  3. {
  4. var modal = document.getElementById("modalDiv");
  5. var transparent = document.getElementById("transparentDiv");
  6. if(!modal || !transparent) return;
  7. var docW = window.innerWidth;
  8. docW = docW ? docW : Math.max(parseInt(document.documentElement.clientWidth), parseInt(document.documentElement.scrollWidth));
  9. var docH = window.innerHeight;
  10. docW = docW ? docW : Math.max(parseInt(document.documentElement.clientHeight), parseInt(document.documentElement.scrollHeight));
  11.  
  12. var opacity = 60;
  13.  
  14. transparent.style.opacity = opacity / 100;
  15. transparent.style.filter = "Alpha(opacity=" + opacity + ")";
  16. transparent.style.width = docW + "px";
  17. transparent.style.height = docH + "px";
  18. transparent.style.zIndex = 1000;
  19. transparent.style.display = "block";
  20.  
  21. width = isNaN(width) ? 400 : width;
  22. height = isNaN(height) ? 200 : height;
  23.  
  24. modal.style.width = width + "px";
  25. modal.style.height = height + "px";
  26. modal.style.position = "absolute";
  27. modal.stylel.left = Math.round((docW - width) / 2) + "px";
  28. modal.style.top = Math.round((docH - height) / 2) + "px";
  29. modal.style.zIndex = 2000;
  30. modal.style.display = "block";
  31.  
  32. var str = info;
  33. str += '<input type="button" value="OK" style="width: 75px; height: 40px; position: absolute; left: ';
  34. str += Math.round((width - 75) / 2);
  35. str += 'px; bottom: 15px; " onclick="closeAlert(); " />';
  36.  
  37. modal.innerHTML = str;
  38. }
  39.  
  40. function closeAlert()
  41. {
  42. var modal = document.getElementById("modalDiv");
  43. var transparent = document.getElementById("transparentDiv");
  44. if(!modal || !transparent) return;
  45. modal.style.display = "none";
  46. transparent.style.display = "none";
  47. }
  48. </script>
[HTML] pobierz, plaintext


oraz, do sekcji <body> taki kod:

[HTML] pobierz, plaintext 
  1. <div id="modalDiv" style="background: #FFFFE1; border: 1px solid #000000; border-radius: 5px; position: absolute; display: none; "></div>
  2. <div id="transparentDiv" style="background: #000000; positon: absolute; left: 0px; top: 0px; display: none"></div>
[HTML] pobierz, plaintext


Aby pokazać okienko należy wpisać formułę:

openAlert(komunikat, szerokość okna, wysokość okna);
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.