Tworzymy formularz opinii w języku PHP. Dział kontroli jakości Wywołanie formularza w oknie modalnym

Cześć przyjaciele! Chciałbym przedstawić Państwu uniwersalny skrypt umożliwiający przesyłanie danych z formularzy na adres e-mail. Skrypt jest idealny dla witryn typu Landing Page, witryn z wizytówkami itp. Nasz skrypt Feedback Forms wyróżnia się spośród masy innych skryptów w Internecie tym, że ma możliwość łączenia nieograniczonej liczby formularzy z różnymi polami na jednej stronie i jest w stanie wysyłać listy do kilku odbiorców.

Więc. Zacznijmy. Zacznijmy od możliwości skryptu.

Połącz nieograniczoną liczbę formularzy na jednej stronie.

Sprawdzanie poprawności wypełnienia pól.

Konfigurowanie powiadomień.

Możliwość użycia liter w każdym formularzu.

Typ listu - (jeśli używane są znaczniki HTML)

Wysyłanie na nieograniczoną liczbę adresów.

Indywidualna personalizacja każdej formy.

Skrypt działa bez konieczności ponownego ładowania strony.

Ochrona przed botami spamującymi.

Początkowe ustawienia.
Skrypt działa w oparciu o bibliotekę, więc pierwszą rzeczą, którą musimy zrobić, to ją podłączyć. W tym celu polecam korzystanie z bibliotek hostowanych przez Google.

Porozmawiajmy o pozostałych plikach bardziej szczegółowo:

feedback.js to główny plik skryptu odpowiedzialny za przesyłanie formularzy AJAX.
jquery.arcticmodal.js,
jquery.arcticmodal. - zapewniają możliwość wyświetlania formularzy w oknie modalnym.
jquery.jgrowl.js,
jquery.jgrowl.css - umożliwia wyświetlanie powiadomień na stronie (bloki w górnym rogu strony).

HTML i wymagane atrybuty.
Wymaganym atrybutem dla wszystkich elementów formularza jest atrybut name="" - niezbędny do późniejszej personalizacji formularza.
Dla przycisku (type="button") musisz określić class="feedback" . Chciałbym również zwrócić uwagę na fakt, że rolę przycisku może pełnić dowolny znacznik HTML z klasą „feedback” Wywołanie formularza w oknie modalnym Aby wywołać formularz w oknie modalnym należy najpierw zdefiniować akcję za kliknięcie dowolnego tagu, na przykład elementu div z klasą modal_btn
Wywołanie formularza w oknie modalnym $(document).ready(function() ( $(document).on("click", ".modal_btn",function())( $("#small-modal").arcticmodal (); )); ));
Ponieważ formularz powinien być widoczny tylko w oknie modalnym, należy go ukryć, umieszczając go w elemencie div z atrybutem style="display: none;", a także owinąć w kilka standardowych elementów div, aby nadać styl oknie modalnemu.
X

Opracowaliśmy więc podstawowe ustawienia podłączenia naszego skryptu do wysyłania formularzy na pocztę e-mail. Zajrzyjmy teraz do środka i dowiedzmy się, jak skonfigurować pola, powiadomienia i wszystko inne, co tam jest.

Przykład ustawień dla jednego formularza Ustawienia dla wszystkich formularzy zapisane są w pliku feedback\index.php
$form["form-1"] = array("fields" => array("name" => array("title" => "Nazwa", "validate" => array("preg" => "%% ", "minlength" => "3", "maxlength" => "35", "messages" => array("preg" => "Pole [%1$s ] może zawierać błąd", "minlength " => "Minimalna długość pola [ %1$s ] jest mniejsza niż dozwolona - %2$s", "maxlength" => "Maksymalna długość pola [%1$s ] jest większa niż dozwolona - %2$s", )), "tell " => array("title" => "Telefon", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\ (?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5",), "wiadomości" => array( "preg" => "Pole [%1$s] może zawierać błąd", "minlength" => "Minimalna długość pola [%1$s] jest mniejsza niż dozwolona długość - %2$s",) ),), "cfg" => array(" charset" => "utf-8", "subject" => "Temat wiadomości e-mail", "title" => "Nagłówek w treści wiadomości e-mail", " ajax" => true, "validate" => true, "from_email" = > " [e-mail chroniony]", "from_name" => "noreply", "to_email" => " [e-mail chroniony], [e-mail chroniony]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antisspam" => "email77 ", "antispamjs" => "address77", "okay" => "Wiadomość wysłana - OK", "fuck" => "Wiadomość wysłana - BŁĄD", "spam" => "Robot spamujący", "powiadom" => "color-modal-textbox", "usepresuf" => false)); // Następny formularz $form["form-2"] = array("fields" => array(.....
Aby dodać ustawienia dla nowego formularza należy skorzystać z przykładu tablicy $form["form-1"] i utworzyć nową tablicę $form[""]

Pamiętasz, co mówiłem o wymaganym atrybucie name=""?

Wymaganym atrybutem dla wszystkich elementów formularza jest atrybut name="" - niezbędny do późniejszej personalizacji formularza.
Nadszedł więc czas, aby powiedzieć, dlaczego jest on nadal potrzebny.
nazwa="" jest kluczem alfanumerycznym tablicy, musi być unikalny dla tablicy $form[""]

Przykładowy kod HTML dla przejrzystości

Teraz zrozumiemy tablice i do czego są potrzebne.

$formularz["formularz-1"] = tablica();
$formularz["formularz-2"] = tablica(); itp.
Oto główne tablice dla każdego nowego formularza, zawierające:

"pola" => tablica(); - Tablica ustawień elementów formularza.

• "nazwa" => tablica(); - Tablica ustawień elementu formularza (na przykład nazwa wejściowa="nazwa" typ="tekst"), która ma wiele ustawień.
  • "title" => "Twoje imię" - nazwa elementu formularza, będzie wyświetlana w przypadku błędów lub w szablonie
  • "validate" => tablica(); - tablica, zawiera reguły sprawdzania poprawności elementów formularza
    • "preg" => "%%" - wyrażenie regularne
    • "minlength" => "3" - minimalny rozmiar pola
    • "maxlength" => "35" - maksymalny rozmiar pola
    • "substr" => "35" - zawsze obcinane do N znaków
  • "wiadomości" => tablica(); - tablica zawierająca komunikaty walidacyjne, a mianowicie:
    • "preg" => "Element formularza nie pasuje do wyrażenia regularnego"
    • "minlength" => "Minimalna długość pola [ %1$s ] jest mniejsza niż akceptowalna - %2$s" - błąd walidacji, klucz (preg) nie pasuje do klucza walidacji
    • "maxlength" => "Maksymalna długość pola [ %1$s ] przekracza dopuszczalny limit - %2$s" - błąd walidacji, klucz (preg) nie pasuje do klucza walidacji

"cfg" => tablica(); - Szereg ustawień formularzy.

• "charset" => "utf-8" - kodowanie
• "temat" => "Temat listu", - Temat listu
• "title" => "Tytuł w treści listu", - Tytuł w treści listu
• "ajax" => true, - to jest formularz Ajax TODO (jeśli nie jest potrzebny, ustaw go na false)
• "validate" => true, - (true) jeśli chcemy sprawdzić poprawność formularza na serwerze, zastępuje walidację js przez "ajax" => true. Gdy opcja jest wyłączona (fałsz), nie trzeba konfigurować ustawień pola sprawdzania. DO ZROBIENIA
• "from_email" => "myemail", - nadawca, podaj nazwę pola (name = "myemail"), a jeśli nie potrzebujesz wiadomości e-mail od użytkownika, to skrót [e-mail chroniony]
• "from_name" => "myname", - nadawca, podaj nazwę pola (name="myname"), a jeśli nie potrzebujesz nazwy użytkownika, to odcinek Brak odpowiedzi
• "do_e-maila" => " [e-mail chroniony]", - adres e-mail odbiorcy. Aby wysłać na kilka adresów, podaj je oddzielając przecinkami. Przykład („to_email” => „ [e-mail chroniony], [e-mail chroniony], [e-mail chroniony]",)
• "to_name" => "noreply1", - Nazwa odbiorcy. W przypadku wysyłania na wiele adresów podaj nazwy odbiorców, oddzielając je przecinkami. Przykład („to_name” => „noreply1, noreply2, noreply3”,)
• "geoip" => true, - znajdź lokalizację za pomocą typu TODO
• "referer" => false, - dodaj adres URL strony, z której wysłano formularz
• "type" => "plain", - rodzaj litery - zwykły, html (jeśli używane są znaczniki HTML)
• "tpl" => false, - użyj szablonu listu. Jeśli ma wartość true, to plik szablonu zostanie podłączony zgodnie z nazwą formularza (nazwa="form-1") z folderu i plik (feedback/tpl/form-1.tpl) zostanie przetworzony, w przeciwnym razie wszystko zostanie wysyłane w niezmienionej postaci, każde pole w nowej linii
• "antispam" => "email77", - Ochrona przed spamem, metoda opiera się na ukrytym (display:none) polu, które tylko robot automatycznie wypełnia, zdradzając się w ten sposób.
• "antispamjs" => "address77", - Metoda antyspamowa opiera się na początkowo wypełnionym ukrytym (display:none) polu, które automatycznie czyści JavaScript po załadowaniu strony, nawet inteligentny robot nie jest w stanie tego przewidzieć i wtedy jest zablokowany.
• "okay" => "Wiadomość dla użytkownika", - Jeśli formularz został pomyślnie przesłany, zostanie wyświetlony komunikat dla użytkownika. Można skorzystać ze znaczników HTML.
• "fuck" => "Wiadomość dla użytkownika", - Komunikat dla użytkownika wyświetlany w przypadku wystąpienia błędu przy wysyłaniu formularza, można skorzystać ze znaczników HTML.
• "spam" => "Wiadomość do użytkownika", - Wiadomość do użytkownika wyświetlana w przypadku podejrzenia robota spamującego. Można użyć znaczników HTML.
• "notify" => "color-modal", - jaki rodzaj powiadomień wyświetlać, textbox - bloki w górnym rogu strony, color - podświetlenie koloru w formularzu, modal - okno modalne na środku strony, brak - wyłączyć. Można łączyć np. kolor-modalny - błędy w wypełnianiu pól z podświetleniem i stan wysyłania tekstu w oknie modalnym TODO
• "usepresuf" => false - Niezależnie od tego, czy w temacie czy w tytule listu ma być zastosowany niestandardowy dodatek, w przypadku małej zmiany możesz określić na przykład %%cfg.title.suffix%%, w tym celu musi być ukryte pole w formularzu, więcej szczegółów znajdziesz w f -qiu presuf()

Konfigurowanie szablonów listów Tak. Spójrzmy teraz na temat naszych wiadomości.
Po pierwsze, aby formularz został wysłany w szablonie należy w ustawieniach formularza włączyć możliwość korzystania z pliku szablonu - "tpl" => true ,
Po drugie należy utworzyć plik szablonu z rozszerzeniem *.tpl w folderze (feedback/tpl/), zgodnie z nazwą formularza (name="form-1" ).

Przykład: (feedback/tpl/form-1.tpl)

Nagłówek w treści wiadomości e-mail
%%Nazwa tytułu%%	%%nazwa.wartość%%
%%tell.title%%	%%powiedz wartość%%

nazwać, powiedzieć itp. - Są to atrybuty (name="") pól, które wypełnia użytkownik.
title - Nazwa elementu formularza, która jest ustawiana w tablicy ustawień elementu formularza.
wartość - Wartość elementu formularza.

To tyle na dzisiaj, aczkolwiek skrypt na pewno nie jest doskonały, dlatego komentarze i opisy błędów mile widziane i zostaną poprawione w przyszłych wersjach.

P.S. Scenariusz został opracowany przez zespół

Aby opracować projekt internetowy, bardzo ważne jest otrzymywanie informacji zwrotnych od odwiedzających. Niestety, na wielu stronach możliwość wysłania wiadomości do programistów albo nie jest w ogóle dostępna, albo wiąże się z dość poważnymi trudnościami.

Dziś zajmiemy się prostym rozwiązaniem tego problemu. Wykorzystując jQuery, PHP i klasę PHPMailer, formularz wysyła propozycję użytkownika bezpośrednio do Twojej skrzynki odbiorczej.

HTML

Zacznijmy od znaczników HTML. Style znajdują się na górze dokumentu, a pliki JavaScript na dole. Optymalizuje to proces ładowania strony, dzięki czemu skrypty ładują się jako ostatnie, umożliwiając użytkownikowi zapoznanie się z zawartością strony.

demo.html

Formularz opinii przy użyciu PHP i jQuery | Demo serwisu WWW Opinia

Jeśli chcesz otrzymać odpowiedź, podaj dane kontaktowe.

Wysłać

Wewnątrz ciało usytuowany div#informacja zwrotna. Jest on umieszczany w prawym dolnym rogu okna w ustalonym położeniu, co zostanie omówione w części tutoriala poświęconej CSS.

Wewnątrz tego div umieszczonych jest pięć kolorowych elementów Zakres. Każdy z nich ma 20% szerokości i jest przesunięty w lewo. W ten sposób są one umieszczone dokładnie na całej szerokości. div#informacja zwrotna.

Następny jest kontener .section, który zawiera tytuł, obszar tekstowy i przycisk.

CSS

Przejdźmy do ustawiania stylów dla formularza. Na początek powiedzmy kilka słów o tym, z czego składa się struktura arkusza stylów. Jeśli spojrzysz na poniższe definicje CSS, zauważysz, że każda reguła zaczyna się od #feedback . Tworzy to podobną przestrzeń nazw w CSS, ułatwiając dodawanie kodu do istniejącej witryny internetowej bez konfliktów.

style.css — część 1

#feedback( kolor tła: #9db09f; szerokość: 310 pikseli; wysokość: 330 pikseli; pozycja: stała; dół: 0; prawo: 120 pikseli; margines-dół: -270 pikseli; indeks Z: 10000; ) #feedback .section( tło :url("img/bg.png") powtórz-x górny lewy róg; obramowanie: 1px solid #808f81; obramowanie-dół: brak; dopełnienie: 10px 25px 25px; ) #feedback .color( float:left; height:4px; szerokość:20%; przepełnienie:ukryty; ) #feedback .color-1( kolor tła:#d3b112;) #feedback .color-2( kolor tła:#12b6d3;) #feedback .color-3( kolor tła :#8fd317;) #feedback .color-4( kolor tła:#ca57df;) #feedback .color-5( kolor tła:#8ecbe7;) #feedback h6( tło:url("img/feedback.png" ) bez powtórzeń; wysokość: 38 pikseli; margines: 5 pikseli 0 12 pikseli; wcięcie tekstu: -99999 pikseli; kursor: wskaźnik; ) #feedback textarea ( kolor tła: #fff; obramowanie: brak; kolor: #666666; czcionka: 13 pikseli „Lucida Sans”, Arial, bezszeryfowy; wysokość: 100 pikseli; dopełnienie: 10 pikseli; szerokość: 236 pikseli; zmiana rozmiaru: brak; kontur: brak; przepełnienie: auto; -moz-box-shadow: 4px 4px 0 #8a9b8c; -webkit -box-shadow:4px 4px 0 #8a9b8c; box-shadow:4px 4px 0 #8a9b8c; )

Pierwszym elementem, który należy stylizować, jest div#informacja zwrotna. Ma przypisaną stałą pozycję i jest zakotwiczony w oknie przeglądarki. Następnie następuje definicja div .Sekcja i pięć kolorowych elementów Zakres. Elementy te różnią się jedynie kolorem tła, który jest przypisany osobno dla każdej klasy.

Na samym dole prezentowanej części pliku CSS zdefiniowane są zasady wyświetlania obszaru tekstowego.

style.css — część 2

#feedback a.submit( tło:url("img/submit.png") bez powtórzeń; obramowanie: brak; wyświetlacz: blok; wysokość: 34 piksele; margines: 20 pikseli auto 0; dekoracja tekstu: brak; wcięcie tekstu: -99999px; szerokość: 91px; ) #feedback a.submit:hover( pozycja-tła: lewy dolny; ) #feedback a.submit.working( pozycja-tła: górny prawy !ważne; kursor:domyślny; ) #feedback .message (rodzina czcionek: Corbel, Arial, bezszeryfowy; kolor: #5a665b; tekst-cień: 1px 1px 0 #b3c2b5; margines-dolny:20px; ) #feedback .arrow( tło:url("img/arrows.png ") bez powtórzeń; float:prawo; szerokość:23px; wysokość:18px; pozycja:względna; góra:10px; ) #feedback .arrow.down( pozycja tła: lewa góra;) #feedback h6:hover .down( pozycja-tła:lewy dół;) #feedback .arrow.up(pozycja-tła:prawa góra;) #feedback h6:hover .up(pozycja-tła:prawy dół;) #feedback .response(rozmiar czcionki:21px; margines-góra: 70 pikseli; wyrównanie tekstu: środek; cień tekstu: 2 piksele 2 piksele 0 #889889; kolor: #FCFCFC; wyświetlacz: blok; )

Druga część arkusza stylów definiuje wygląd przycisku przesyłania. Należy pamiętać, że istnieją trzy stany przycisków, których obrazy znajdują się w jednym pliku obrazu tła - przesłać.png. Są one wyświetlane tylko wtedy, gdy jest to konieczne.

jQuery

Formularz opinii ma dwa stany – zminimalizowany i maksymalny. Podczas uruchamiania domyślnym stanem jest stan zminimalizowany w prawym dolnym rogu ekranu. A jQuery przenosi formularz do maksymalnego stanu, gdy użytkownik kliknie nagłówek. Funkcjonalność ta realizowana jest poprzez powiązanie zdarzenia i wykonanie prostych animacji.

skrypt.js — część 1

$(document).ready(function())( // Względny adres URL skryptu Submit.php. // Prawdopodobnie będziesz musiał go zmienić. var SubmitURL = "submit.php"; // Zapisz obiekt opinii w pamięci podręcznej: var feedback = $( "#feedback"); $("#feedback h6").click(function())( // Wartości właściwości animacji są przechowywane // w osobnym obiekcie: var anim = ( mb: 0, // Dolny margines pt: 25 // Górne wypełnienie); var el = $(this).find(.arrow"); if(el.hasClass("down"))( anim = ( mb: -270, pt : 10); ) // Pierwsza animacja przesuwa formularz w górę lub w dół, a druga // tytuł tak, aby był wyrównany do wersji zminimalizowanej feedback.stop().animate((marginBottom: anim.mb)); feedback.find(.section").stop() .animate((paddingTop:anim.pt),function())( el.toggleClass("dół w górę"); )); ));

Aby kod był prosty i przejrzysty, na górze tworzony jest obiekt anim, który zawiera wartości animacji, a operator jest umieszczany Jeśli. W zależności od istnienia klasy „ w dół' na strzałce rozwijamy lub zwijamy kształt.

Druga część skrypt.js obsługuje pracę z AJAX przesłać.php.

skrypt.js — część 2

$("#feedback a.submit").live("click",function())( var przycisk = $(this); var textarea = feedback.find("textarea"); // Używamy klasy robotniczej nie tylko do ustawiania stylów przycisku przesyłania danych, // ale także jako rodzaj blokady zapobiegającej wielokrotnemu generowaniu formularza.if(button.hasClass("working") || textarea.val().length< 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // Данная операция помогает пользователю определить ошибку: if(xhr.status == 404){ text = "Путь к скрипту submit.php неверный."; } // Прячем кнопку и область текста, после которой // мы показывали полученный ответ из submit.php button.fadeOut(); textarea.fadeOut(function(){ var span = $("",{ className: "response", html: text }) .hide() .appendTo(feedback.find(".section")) .show(); }).val(""); } }); return false; }); });

Do interakcji używamy metody AJAX $.ajax() jQuery przesłać.php. Ta metoda daje nieco większą kontrolę nad połączeniem niż $.get() i $.post() .

Jedną z zalet tej metody jest widoczność właściwości obiektu w trakcie „całej” funkcji wywołania zwrotnego. Tutaj sprawdzamy status odpowiedzi pod kątem zgodności błąd 404 (nie znaleziono strony) i wyświetlić użytkownikowi komunikat z prośbą o sprawdzenie ścieżki przesłaćURL.

Teraz czas przejść do ostatniej części - PHP.

PHP

PHP przetwarza dane przesłane z AJAX, sprawdza je i wysyła wiadomość e-mail na podany adres.

przesłać.php

// Tutaj musisz wpisać swój adres $emailAddress = " [e-mail chroniony]"; // Użyj sesji, aby zapobiec zalaniu: session_name("quickFeedback"); session_start(); // Jeśli ostatni formularz został przesłany mniej niż 10 sekund temu, // lub użytkownik wysłał już 10 wiadomości w ciągu ostatniej godziny if($_SESSION["lastSubmit"] && (czas() - $_SESSION["lastSubmit"]< 10 || $_SESSION["submitsLastHour"] >10))( die("Proszę odczekać kilka minut przed ponownym wysłaniem wiadomości."); ) $_SESSION["lastSubmit"] = time(); $_SESSION["przesłaneOstatnia godzina"]++; wymagaj „phpmailer/class.phpmailer.php”; if(ini_get("magic_quotes_gpc"))( $_POST["wiadomość"] = stripslashes($_POST["wiadomość"]); ) if(mb_strlen($_POST["wiadomość"],"utf-8")< 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail(); // Dodaj adres odbiorcy $mail->AddAddress($emailAddress); $mail->Subject = "Nowy e-mail z formularza opinii"; $mail->MsgHTML($msg); $mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "Formularz opinii na stronie demonstracyjnej"); $mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "Formularz opinii na stronie demonstracyjnej"); $mail->Wyślij(); echo "Dziękuję!";

Najpierw korzystamy z zarządzania sesją, aby określić, jak często użytkownik korzystał z formularza w ciągu ostatniej godziny, a także określić, ile czasu minęło od ostatniego przesłania. Jeżeli od ostatniej wysyłki minęło mniej niż 10 sekund lub użytkownik wysłał już więcej niż 10 wiadomości w ciągu ostatniej godziny, wyświetli się komunikat o błędzie.

Wiadomość e-mail jest wysyłana przy użyciu klasy PHPMailer. Uwaga! Działa tylko z PHP5.

Wiele metod PHPMailer używany do konfigurowania poczty wychodzącej. Metoda IsMail() mówi klasie, aby użyła wewnętrznej funkcji PHP Poczta(). Metoda AddAddress() dodaje adres odbiorcy (można dodać więcej niż jednego odbiorcę za pomocą dodatkowych wywołań tej metody). Po dodaniu tematu i treści listu wskazany jest adres na który należy odpowiedzieć i wiadomość zostaje wysłana.

Gotowy!

Wniosek

Za pomocą tego formularza możesz uzyskać szybką informację zwrotną od osoby odwiedzającej witrynę. Bardzo niska bariera zgłoszenia – wystarczy wypełnić pole tekstowe i kliknąć przycisk – stworzy doskonałe środowisko dla osób odwiedzających Twoje strony, aby mogli zacząć dzielić się swoimi pomysłami. Skrypt jest również dobrze skonstruowany i łatwy do dostosowania, co pomoże Ci używać go na swojej stronie internetowej przy minimalnym wysiłku.

W tej lekcji zapoznamy się z funkcją mail() na przykładzie utworzenia formularza zwrotnego w PHP, a następnie przesłania otrzymanych danych e-mailem.

W tym celu utworzymy dwa pliki - forma.php i mail.php. Pierwszy plik będzie zawierał jedynie formularz z polami do wprowadzenia danych przez użytkownika. Wewnątrz znacznika formularza znajduje się przycisk "Wysłać" oraz atrybut akcji, który odnosi się do handlera - mail.php, czyli miejsce, w którym po kliknięciu przycisku uzyskujemy dostęp do danych z formularza "Wysłać". W naszym przykładzie dane z formularza są przesyłane do strony internetowej o nazwie „/mail.php”. Na tej stronie znajduje się skrypt PHP przetwarzający dane z formularza:

Dane formularza wysyłane są metodą POST (przetwarzane jako $_POST). $_POST to tablica zmiennych przekazywana do bieżącego skryptu metodą POST.

Poniżej widzisz zawartość pliku forma.php, którego pola użytkownik sam wypełnia na jakiejś stronie internetowej. Wszystkie pola do wpisania danych muszą mieć atrybut name, wartości sami zapisujemy, bazując na logice.

Formularz opinii w PHP przesłany e-mailem


Formularz opinii w PHP





Zostaw wiadomość:
Twoje imię:



E-mail:

Numer telefonu:

Wiadomość:

Obszar tekstowy może zawierać nieograniczoną liczbę znaków-->

Tak formularz wizualnie wygląda w przeglądarce.

Następnie piszemy kod dla pliku mail.php. Wymyślamy własne nazwy zmiennych. W PHP zmienna zaczyna się od znaku $, a następnie nazwy zmiennej. Wartość tekstowa zmiennej jest ujęta w cudzysłów. Dzięki zmiennym zawartość formularza przesyłana jest na adres e-mail administratora poprzez proste umieszczenie nazwy elementu formularza w nawiasie kwadratowym – wartość nazwy.

Tym samym dane z tablicy $_POST zostaną przeniesione do odpowiednich zmiennych i przesłane na pocztę za pomocą funkcji mail. Wypełnijmy nasz formularz i naciśnij przycisk Wyślij. Nie zapomnij podać swojego adresu e-mail. List dotarł natychmiast.

W tym artykule dowiesz się jak utworzyć formularz opinii w PHP dla swojej witryny. Skrypt przetworzy wprowadzone przez użytkownika dane i wyśle ​​wynik na potrzebny e-mail. Udostępnimy opcję w PHP, gdy formularz opinii będzie działał, ale podczas wysyłania listu wystąpi błąd. W takim przypadku wszystkie wprowadzone informacje zapiszemy do pliku.

A więc zaczynajmy, przede wszystkim oznaczymy stronę i napiszemy dla niej style. Marker będzie zawierał zwykły formularz opinii z dwoma polami wejściowymi (telefon, e-mail) i jednym polem tekstowym, w którym według naszego pomysłu użytkownik wprowadzi swoją wiadomość. Umieścimy moduł obsługi formularza na osobnej stronie.

Formularz zwrotny

Podaj telefon:

Twoja poczta:

Twoje pytanie:

Napiszmy style:

HTML, treść (wysokość: 100%; margines: 0; ) html( kolor tła: #fff; kolor: #333; czcionka: 12px/14px Verdana, Tahoma, bezszeryfowa; kursor: domyślny; ) #feedback-form (kolor tła: #ececec; margines: 50px auto 0; wyrównanie tekstu: środek; szerokość: 430px; dopełnienie: 15px; ) #formularz-feedbacku h2(margines-dolny: 25px; ) #wejście w formularzu opinii, #feedback -form textarea( kolor tła: #fff; obramowanie: 1px solid #A9A9A9; dopełnienie: 1px 5px; szerokość: 90%; ) #feedback-form input( wysokość: 26px; ) #feedback-form textarea( wysokość: 75px; dopełnienie: 5px; ) #wejście formularza opinii (górny margines: 15px; kolor tła: #0B7BB5; obramowanie: 1px pełny #CCCCCC; kolor: #FFFFFF; waga czcionki: pogrubiona; wysokość: 40px; linia- wysokość: 40 pikseli; transformacja tekstu: wielkie litery; szerokość: 225 pikseli; kursor: wskaźnik; )

W wyniku tych wszystkich działań otrzymasz następujący formularz:

Teraz czas zająć się serwerem. Nasz skrypt będzie składał się z kilku części:

• Ustawienie;
• Funkcje drugorzędne;
• Przetwarzanie przychodzących danych;
• Wyjście wiadomości.

Wszystkie te części są oczywiście warunkowe, ponieważ nikt nie zabrania nam robić bałaganu w kodzie i odwrotnie, przenosić kluczowe części do innych plików. Ale myślę, że lepiej jest zrobić procedurę obsługi w jednym pliku, aby wygodnie było połączyć ją z innymi projektami.

Ustawienia

Na tym etapie utworzymy trzy zmienne: $my_email (skrzynka pocztowa, na którą wysyłane są dane), $path_log (ścieżka do pliku logu) oraz $time_back (czas powrotu użytkownika do serwisu).

// Określ swoją skrzynkę pocztową $my_email = " [e-mail chroniony]"; // Określ miejsce przechowywania logów $path_log = "log.txt"; // Czas powrotu użytkownika do serwisu (s) $time_back = 3;

Funkcje drugorzędne

Tutaj opisujemy pięć funkcji, które ułatwią przetwarzanie danych.

Szablony wyjściowe wiadomości:

Funkcja error_msg($wiadomość)( $wiadomość = "".$wiadomość.""; return $wiadomość; ) funkcja Success_msg($wiadomość)( $wiadomość = "".$wiadomość.""; return $wiadomość; )

Usuwanie danych otrzymanych z formularza:

Funkcja clear_data($var)( return trim(strip_tags($var)); )

Wysyłanie listu:

Funkcja send_mail($email, $subj, $text, $from)( $headers = "From: ".$from." \r\n"; $headers .= "Wersja MIME: 1.0\r\n"; $headers .= "Typ zawartości: tekst/html; charset=utf-8 \r\n"; $result = mail($email, $subj, $text, $headers); if(!$result)( return fałsz; ) zwróć prawdę; )

I ostatnia funkcja, która sprawdzi telefon i pocztę pod kątem prawidłowego nagrania ich formatu.

Funkcja check_format($data, $type)( switch($type)( case "email": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match( $pattern, $data))( return true; ) break; case "phone": $pattern = "/^(\+?\d+)?\s*(\(\d+\))?[\s-] *([\d-]*)$/"; if(preg_match($pattern, $data))(zwróć prawdę; ) przerwa; ) zwróć fałsz; )

Jak widać, wszystkie funkcje, które napisaliśmy, są niewielkie. Można je pozostawić poza obszarem przetwarzania danych, ale gdy trzeba coś zmienić lub rozszerzyć, np. check_format(), będzie to znacznie prostsze i wygodniejsze.

Przetwarzanie przychodzących danych

Przede wszystkim dowiadujemy się, z której strony przyszedł użytkownik. Następnie definiujemy zmienne, w których będą przechowywane nasze wiadomości oraz status wysłania pisma.

// Znajdź poprzednią stronę $prev_page = $_SERVER["HTTP_REFERER"]; // Nasze wiadomości $msg = ""; // Status e-maila $status_email = "";

Teraz, aby uniknąć problemów z kodowaniem, wskazujemy to za pomocą nagłówka.

Header("Typ zawartości: tekst/html; charset=utf-8");

If($_SERVER["REQUEST_METHOD"] == "POST")( if(isset($_POST["numer"], $_POST["e-mail"], $_POST["pytanie"]))( $number = clear_data ($_POST["numer"]); $email = clear_data($_POST["e-mail"]); $pytanie = clear_data($_POST["pytanie"]); if(check_format($numer, "telefon") && check_format($email, "email") && !empty($question))( // Utwórz list $e_title = "Nowa wiadomość"; $e_body = ""; $e_body .= ""; $e_body .= "Телефон: ".$number; $e_body .= "!}
"; $e_body .= "Poczta: ".$email; $e_body .= "
"; $e_body .= "Pytanie: ".$question; $e_body .= ""; $e_body .= ""; // END Utwórz list if(send_mail($my_email, $e_title, $e_body, $prev_page) ) ( $status_email = "sukces"; $msg = sukces_msg("Dziękujemy za pytanie.
Odpowiemy najszybciej jak to możliwe."); )else( $status_email = "błąd"; $msg = error_msg("Wystąpił błąd podczas wysyłania wiadomości e-mail."); ) // Zapisz do pliku $str = " Czas: ".date ("d-m-Y G:i:s")."\n\r"; $str .= "Telefon: ".$number."\n\r"; $str .= "Poczta: " .$email." \n\r"; $str .= "Pytanie: ".$pytanie."\n\r"; $str .= "E-mail: ".$status_email."\n\r"; $ str .= "= =====================================\n\r"; file_put_contents ($path_log, $str, FILE_APPEND); )else( $msg = error_msg( "Wypełnij poprawnie formularz!"); ) )else( $msg = error_msg("Wystąpił błąd!"); ) )else( wyjście ;)

W pisanym kodzie sprawdzamy, czy formularz został przesłany, w przeciwnym razie zamykamy ten plik za pomocą funkcji exit. Następnie sprawdzamy obecność komórek z naszymi danymi w tablicy POST, jeśli przyjdą, oczyszczamy je z ewentualnych śmieci. Po oczyszczeniu sprawdzamy format poczty i telefonu, a także obecność tekstu w zmiennej pytania. Następnie generujemy pismo, wysyłamy je i zapisujemy logi, w których oprócz danych zapisujemy status wysłania pisma. W ten sposób możemy śledzić działanie funkcji mail() i jednocześnie nie stracić danych.

Wyjście wiadomości

Wystarczy, że powiadomimy użytkownika o udanej lub „nie” zakończonej operacji i odesłamy go z powrotem do serwisu wraz z formularzem. Aby to zrobić, używamy znaczników z dołączeniami skryptu PHP.

Aby przekierować użytkownika z powrotem na stronę skorzystamy z metatagu odświeżania, w którym wstawimy kod PHP z już utworzonymi zmiennymi. Będziemy także musieli użyć trochę JavaScriptu, aby strona była nieco bardziej dynamiczna. Piszemy funkcję timeBack(), która przed przekierowaniem zliczy sekundy w odwrotnej kolejności.