Dzwon.

Są ci, którzy przeczytali tę wiadomość przed tobą.
Subskrybuj odbieranie artykułów świeżych.
E-mail
Nazwa
Nazwisko
Jak chcesz przeczytać dzwonek
Bez spamu

W tej lekcji zapoznamy się z funkcją poczta (), na przykładzie tworzenia formularze zwrotne na PHP Z późniejszymi wysyłaniem danych do poczty.

Aby to zrobić, utwórz dwa pliki - forma.php. i mail.php.. W pierwszym pliku pojawi się tylko formularz z polami do wprowadzania użytkownika. Wewnątrz Tag. formularz - przycisk "E-mail" I atrybut akcja.który odnosi się do przewodnika - mail.php., To dla niego dane z formularza są wyświetlane po naciśnięciu przycisku "E-mail". W naszym przykładzie formularze te są wysyłane do strony zatytułowanej "/Mail.php". Ta strona rejestruje skrypt PHP.który przetwarza dane formularza:


Formularze te są wysyłane metodą POCZTA. (przetworzony as $ _Post.). $ _Post. - Jest to tablica zmiennych przeniesionych do bieżącego skryptu przez metodę POCZTA..

Poniżej widujesz zawartość pliku forma.php.którego pola wypełnią użytkownika na stronie internetowej. Wszystkie pola wprowadzania pola muszą mieć atrybut nazwa., Przepisujemy wartości siebie na podstawie logiki.




Formularz zwrotny na PHP z wysłaniem do poczty


Formularz zwrotny na PHP







Zostaw wiadomość:
Twoje imię:



E-mail:

Numer telefonu:

Wiadomość:

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







Więc forma wizualnie wygląda w przeglądarce.

Następny kod zapisu pliku mail.php.. Wymyślić nazwy zmiennych. W PHP. zmienna zaczyna się od znaku $ a następnie nazwa zmiennej. Wartość tekstowa zmiennej jest cytaty. Korzystanie z zmiennych na e-mailu administratora, przesyłana jest zawartość formularza, po prostu zastępując nazwę elementu formularza do wsporników kwadratowych - wartość nazwa..

$ do \u003d " [Chroniony e-mail]"; // E-mail odbiorcy danych z formularza
$ TEMA \u003d "formularz zwrotny na PHP"; // Motyw otrzymanego EAMEL
$ Message \u003d "Twoje imię:" $ _ Post [Name "]."
"// przypisz wartość zmienną uzyskaną z nazwiska \u003d formularz nazwy
$ Wiadomość. \u003d "E-mail:". $ _ Post ["Email"]. "
"; // uzyskane z nazwy formy \u003d e-mail
$ Wiadomość. \u003d "Numer telefonu:" $ _ Post ["Telefon"]. "
"// otrzymane z nazwy \u003d formularz telefonu
$ Message. \u003d "Wiadomość:". $ _ Post ["Wiadomość"]. "
"// otrzymane z nazwy \u003d formularz wiadomości
$ Headers \u003d "Mime-Version: 1.0". "r n"; // Tytuł odpowiada formatu plus symbol tłumaczenia łańcucha
$ Nagłówków. \u003d "Typ treści: tekst / HTML; Charset \u003d UTF-8". "r n"; // wskazuje typ wysłanej treści
Poczta ($ do, $ Tema, $ Wiadomość, $ nagłówki); // wysyła wartości zmiennych do odbiorcy na e-mailu
?>

Tak więc dane z tablicy $ _Post. zostanie przeniesiony do odpowiednich zmiennych i wysłanych do poczty za pomocą funkcji poczta. Wypełnijmy nasz kształt i kliknij przycisk Wyślij. Nie zapomnij określić e-maila. List przyszedł natychmiast.

Cześć przyjaciele! W tej lekcji porozmawiamy o tworzenie formularza zwrotnegolub jak nadal mówi się w ludziach "Formularz kontaktowy".

Dziś przeanalizujemy z tobą, jak możesz utworzyć za kilka minut. lekki, piękny i funkcjonalny Forma informacji zwrotnych z moją ulubioną wtyczką Formularz kontaktowy 7. .

Spróbuję wyjaśnić wszystkie kroki instalacji formularza jak najwięcej, a w związku z tym lekcją będzie wystarczająco długie 🙂

Tworzenie formularza kontaktowego w WordPress

Na samym początku chcę zauważyć, że formularz kontaktowy wtyczki 7 jest rusyfikowany, a nie będziesz miał żadnych problemów z nim. Ponieważ dowód moich słów może działać fakt, że ta wtyczka została pobrana Ponad 25 milionów razy !!!

I zacznijmy. Aby utworzyć formularz sprzężenia zwrotnego trzeba wykonać następujące czynności:

1. Zainstaluj i aktywuj wtyczkę kontaktu 7. Jak zainstalować wtyczki.

2. Po aktywacji przejdź do Formularz kontaktowy 7 -\u003e Formularze.

3. W oknie otwiera się Skopiuj linię Z kodem wstawki.

4. Kopiuj wkład kodu na tę stronę, na której chcemy dodać formularz sprzężenia zwrotnego. Po włożeniu kodu nie zapomnij zapisać zmian, naciskając przycisk. "Aktualizacja".

Oto jak wynik Dodaj oprogramowanie do formularza kontaktowego, otrzymamy:

Gotowy! Zainstalowałeś forma robocza Opinie na swojej stronie!

Jak widać, suma w ciągu kilku minut Możesz łatwo zainstalować formularz sprzężenia zwrotnego na stronie. Na ten możesz umieścić punkt, ale ci, którzy nie pasują do standardowej formy i kto chce stwórz W pełni nowy kształt kontaktowy z innymi dziedzinami i możliwościami - polecić Przeczytaj lekcję do końca.

Aby utworzyć nową formę, musisz najpierw zdecydować, które dziedziny są potrzebne. W tej lekcji, jako przykład, stworzymy proste powrót formularz zamówienia.

Aby to zrobić, potrzebujemy w formie takich pól do napełniania:

  • Nazwa (wymagane wypełnienie pola)
  • Nazwisko
  • Telefon (pole obowiązkowe)
  • Pole z wyborem wygodnego czasu

Po tym, jak zdecydowaliśmy się na pola, przejdź do utworzenia formularza:

1. Idź do B. Formularz kontaktowy 7 -\u003e Dodaj nowy.

2. W otwartym oknie kliknij przycisk "Dodaj nowe". W razie potrzeby wybierz język na poniższej liście rozwijanej. Przez domyślny język będzie rosyjski.

3. Po naciśnięciu przycisku pójdziesz na stronę, na której jest formularz edytora..

Na głównej stronie, pole, w którym piszemy nazwa nowa forma. W Formy szablonów. Widzimy standardowe pola formularza, które są tworzone domyślnie.

Poniżej przedstawiamy ustawienia listu, który przychodzi do Twojej poczty po tym, jak ktoś wysłał zamówienie z formularza na stronie. W tych ustawieniach można na przykład zmienić lub dodać e-mail, do którego żądania zostaną odebrane z formularza w witrynie. W szablon literowy Informacje są skonfigurowane do wyświetlenia w liście.

4. Po tym, jak będziemy zapoznać się z strukturą redakcji, przejdź do stworzenia naszej nowej formy. Za to potrzebujemy Kasować Z szablonu kształtu Wszystkie linie z wyjątkiem przycisku "Wysłać",i w szablonie litery kasować Wszystko całkowicie. . Po usunięciu należy zadziałać w ten sposób:

5. Teraz musimy stworzyć nowe pola: Nazwa (obowiązkowy), Nazwisko, Telefon(obowiązkowy), Wygodny czas rozmowy.

Zacznij od stworzenia pola aby wprowadzić nazwęktóre muszą być obowiązkowe do napełniania. Aby to zrobić, naciśnij przycisk "Generować tag"i wybierz Pole tekstowe.

W ustawieniach nowego pola umieścimy kleszcz, który jest konieczny tylko wtedy, gdy pole musi być obowiązkowe do napełniania. Następnie skopiuj wygenerowany kod do szablonu kształtu po prawej stronie, a następujące kody kopiuje do szablonu literowego. Komentarze i strzałki o lepsze zrozumienie, patrz poniższy obraz.

6. Po dodaniu pola, aby wprowadzić nazwę, kliknij "Generuj tag" -\u003e pole tekstowe I analogicznie utwórz pole Nazwisko i Telefon, Kopiowanie i wkładanie kodu do szablonu kształtu i szablon litery. Jedyną różnicą jest to dla pola Nazwiskonie musisz umieścić kleszcza do obowiązkowego wypełnienia .

Po dodaniu pola nazwa, nazwisko i edytor telefonu formularza będzie wyglądać tak:

7. Teraz utworzyć pole Wygodny czas rozmowy. Aby to zrobić, kliknij "Generować tag" i wybierz "Menu rozwijane".

W polu Wybór Piszemy w linii jednej opcji, w naszym przypadku jest to czas od 8 do 30 do 18-00 z odstępami dwóch godzin. Po wypełnieniu skopiuj odpowiednie linie kodu do szablonu kształtu i szablon litery.

W rezultacie powinieneś się tak uzyskać:

9. Skopiuj kod kodu i wklej go na stronie, na której potrzebujesz formularza. Jeśli zrobiłeś wszystko dobrze, powinieneś mieć ten formularz zamówienia zwrotnego:

Po wywołaniu połączenia z witryny, e-mail przyniesie pocztę Z tym wypełnieniem:

Gotowy!Tutaj stworzyliśmy z tobą powrót formularz zamówienia wywołania od podstaw.

Zgadzam się, że na niektóre wszystko może wydawać się bardzo trudne i przerażające, ale takie uczucie będzie dopiero do pierwszego utworzenia formularza kontaktowego od podstaw 😉

W większości przypadków standardowy formularz sprzężenia zwrotnego jest wystarczająco dość, który jest tworzony przez domyślną wtyczkę natychmiast po instalacji i aktywacji.

Mam nadzieję, że ta lekcja była dla Ciebie przydatna i zajmowałeś się formularzem kontaktowym wtyczką 7.

Jeśli masz w trakcie tworzenia pytań formularzy lub czegoś nie zostanie uzyskane - napisz i zadawaj pytania w komentarzach.

I pamiętaj o tym formularz zwrotny na stronie - atrybut obowiązkowy na stronie kontaktu.

Cześć przyjaciele! W tej lekcji porozmawiamy o tworzeniu formularza sprzężenia zwrotnego lub nadal mówić ludziom o "formularzu kontaktowym". Dziś zajmiemy się tobą, ponieważ możesz utworzyć kilka minut za pomocą światła, pięknego i funkcjonalnego formularza zwrotnego za pomocą mojego ulubionego styku 7 wtyczki 7. Spróbuję wyjaśnić w najbardziej szczegółowo wszystkie kroki instalacji formularza kontaktowego, aw in Połączenie z tą lekcją okazuje się wystarczająco długo :) Tworzenie formularza kontaktowego w WordPress na samym początku Chcę zauważyć, że formularz kontaktowy wtyczki 7 jest rusyfikowany, a nie będziesz miał żadnych problemów z nim. Ponieważ dowód moich słów może działać fakt, że ta wtyczka ...

Przegląd

Głosuj na lekcję

100

Ocena

Wynik: Drodzy Czytelnicy! Nie bądź leniwy, aby głosować i zostawić komentarz. W ten sposób mogę zrozumieć przydatność lekcji i artykułów oraz poprawić swoją jakość w przyszłości. Z góry dziękuję!

Jednym z najczęstszych zadań w praktyce jest wdrożenie formy informacji zwrotnej. Tobash pisze jej kod HTML, projektowanie go na CSS, tworząc skrypt PHP, który obsługiwałby dane odebrane od użytkownika i wysłał do naszej poczty, zapisując skrypt JS, który sprawdziłby formularz, aby odpowiednio wprowadź dane wejściowe, ochrona Nadwaśliwość naszej spamu, aby zapewnić, że nasza skrzynka pocztowa nie spadła z ataków botów.

Wszystkie powyższe chwile będą brane pod uwagę w naszym przeglądu i komentowano szczegółowo.

Zaczynamy tworzyć formularz zwrotny:

Html.

Przede wszystkim piszemy kod HTML, jest ustawiony na polach, które wypełnią użytkownika. Będą nadal wydawane. Kod kodu wygląda tak:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" > Nazwa: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" > Telefon: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" > E-mail: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" > Wiadomość: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Wysłać" />

I wizualnie wygląda tak:

Zgadzam się, podczas gdy wszystko jest brzydkie i nic nie jest jasne, ale właśnie zaczęliśmy.

Rozważmy szczegółowy opis:

  • < form method= "post" action= "mail.php" > …


    Aby utworzyć formularz, musisz użyć znacznika formularza. To on określa początek i koniec formularza do tłumacza kodu. On, podobnie jak dowolny tag, ma cały zestaw atrybutów, ale formularze obowiązkowe tworzy tylko dwa, jest to metoda (metoda wysyłania żądania do serwera, do formularzy Użyj postu) i działanie (wskazuje ścieżkę do rozdania formularza Plik, w szczególności w tym pliku będzie zawierał skrypt PHP, który wyśle \u200b\u200bdo poczty wprowadzonej przez użytkownika, w naszym przypadku widzimy, że ten plik jest nazywany Mail.php i leży w tym samym katalogu witryny jako dane strony ).
  • < input maxlength= "30" type= "text" name= "name" />


    Następnie śledzimy zamiast tego. Jest to rzeczywiste pola formularzy, w których użytkownicy wprowadzą potrzebne informacje (Type \u003d "Tekst" mówi, że będzie to tekst). Atrybut maxlengength wskazuje, ile znaków może wprowadzić użytkownika w tej formie pola. Najważniejszym atrybutem jest nazwa - Określa nazwę określonego pola. Jest na tych nazwach w przyszłym skrypcie PHP przetworzy w niej informacje przychodzące. Jeśli chcesz, nadal możesz ustawić atrybut zastępczy, który wyświetla tekst wewnątrz pola znikający podczas instalowania kursora wewnątrz niego. Jednym z problemów Playsholder jest to, że nie jest obsługiwane przez niektóre stare przeglądarki.
  • < label for = "name" > Nazwa:


    Używany, jeśli odmówiliśmy zastępców. Zwykły podpis polowy, Atrybut formularza raportuje, co konkretnie pole obejmuje ten podpis. Wartość tego obszaru zainteresowań jest wskazana przez nazwę.
  • < textarea rows= "7" cols= "50" name= "message" >


    Ponadto, ponieważ wejście ma być podawane przez informacje o użytkowniku, tylko tym razem pole jest zaostrzone dla długich wiadomości. Wiersze określa rozmiar pola w ciągach, Cols w postaciach. Ogólnie rzecz biorąc, ustawiają wysokość i szerokość naszej dziedziny.
  • < input type= "submit" value= "Wysłać" />


    Fakt, że jest to przycisk wysyłania formularza, mówi nam Type \u003d "Prześlij", a wartość ustawia tekst, który będzie w tym przycisku.
  • < div class = "right" >


    Używane tylko do dalszej wizualnej formy projektu.

CSS.

Aby nasz formularz sprzężenia zwrotnego wygląda do zaprezentowania, musi zostać wydany. Aby uzyskać następujący wynik:

Użyliśmy tego kodu:

formularz (tło: # F4F5f7; Wypełnienie: 20px;) Formularz. W lewo, forma. Prawy (wyświetlanie: inline-block; pionowo-wyrównuj: górny; szerokość: 458px;) Formularz. Prawo (Padding - LEWE: 20PX;) Etykieta (Wyświetlacz: Block; Font- Rozmiar: 18px; Tekst- Wyrównuj: Centrum; Marka: 10PX 0PX 0PX Czcionka - Rozmiar: 16px; Szerokość: 436px;) Textarea (wysokość: 98px; margines dolny: 32px;) Wejście [Type \u003d "Prześlij"] (Szerokość: 200px; Float: Prawa; Brak; Tło: # 595B5f; Kolor: #fff; tekst - transformacja: wielkie litery;)

W szczegółach do malowania CSS nie widzę punktu, narysuję twoją uwagę tylko do kluczowych punktów:

  1. Nie pisz rejestracji dla każdego znacznika w formie. Spróbuj zbudować swoje selektory, aby para linii kodu sprawia, że \u200b\u200bwszystkie potrzebne przedmioty.
  2. Nie używaj linii i tworzenia wcięć, dodatkowych tagów według typu < br>, < p> I tak dalej, z tymi zadaniami CSS doskonale radzi sobie z właściwością wyświetlaną: blok i margines z wyściółką. Więcej o tym, dlaczego nie używać < br> W układzie możesz przeczytać w tagu Artykuł Br i jest potrzebny? .
  3. Nie używaj układu tabeli dla formularzy. To sprzeczne z semantyki tego znacznika i wyszukiwarki kochają kod semantyczny. W celu utworzenia wizualnej struktury dokumentu, mamy wystarczająco dużo tagów DIV, a właściwości wyświetlacza ustawione przez niego w CSS: Blok wbudowany (buduje bloki z rzędu) i pionowo-wyrównuj: Top (nie pozwala im biegnąć Ekran), prosimy o niezbędną wysokość i voila, nic zbędnego i wszystko znajduje się, jak potrzebujemy.

Dla tych, którzy chcą uratować swój czas na konstrukcji na miejscu, mogę doradzić za pomocą ram CSS podczas tworzenia witryn, szczególnie napisanych samodzielnie. Moim wyborem w tym planie jest Twitter Bootstrap. Lekcja na temat projektu formularzy z jego użyciem może być oglądana.

PHP.

Cóż, nadszedł czas, aby nasz formularz mógł wykonać.

Idziemy do naszego katalogu głównego witryny i utwórz tam plik Mail.php, do którego wcześniej wskazaliśmy ścieżkę w atrybucie formularza tagu formularza.

Ostatecznie jego kod będzie wyglądał następująco:

Twoja wiadomość została wysłana poprawnie "Javascript: History.back ()"\u003e Wróć

" ; Jeśli (! Puste ($ _Post ["Nazwa"]) i! Puste ($ _POST ["Telefon"]) i! Pusty ($ _Post ["Mail"]) i! Pusty ($ _Post ["Wiadomość"])) ($ Name \u003d Wykończenia (strip_tags ($ _Post ["Nazwa"])); $ Telefon \u003d Wykończenia (strip_tags ($ _Post ["Telefon"]); $ mail \u003d wykończenia (strip_tags ($ _post ["mail"]) ); $ Message \u003d Trim (strip_tags ($ _post ["Message"])); mail (, "napisałeś:" Nazwa $ ".
Jego liczba: "$ telefon".
Jego poczta: "$ Mail. "
Jego przesłanie: "
. $ Message,); Echo. "Twoja wiadomość została wysłana pomyślnie!
Wkrótce otrzymasz odpowiedź
$ back "
; Wyjście; ) Inaczej (echo; wyjście;)?\u003e

Dyskusja z częściami HTML i CSS można pominąć tego dokumentu. W istocie jest to zwykła strona witryny, którą można zorganizować na żądanie i konieczność. Rozważ najważniejszą część tego - skrypt przetwarzania formularza PHP:

$ back \u003d "

"Javascript: History.back ()"\u003e Wróć

" ;

Tworzymy link do tego ciągu, aby powrócić do poprzedniej strony. Ponieważ nie wiemy z góry, która strona, użytkownik spadnie na tym, odbywa się z małą funkcją JS. W przyszłości będziemy odnosić się do tej zmiennej, aby wycofać go w miejscach potrzebujących.

jeśli (! Puste ($ _Post ["Nazwa"]) i! Puste ($ _POST ["Telefon"]) i! Pusty ($ _Post ["Mail"]) i! Pusty ($ _Post ["Wiadomość"])) ( // w tablicy części obsługi ) Inna (echo "Aby wysłać wiadomość wypełnić wszystkie pola! $ Back"; Wyjście; )

Tutaj przykręcamy kontrolę kształtu na pełni pola. Jak się domyśliłeś, pod względem $ _Post ["Nazwa"] w cytatach, piszemy wartość atrybutu nazwy naszej inconine.

Jeśli wszystkie pola są wypełnione, skrypt rozpocznie przetwarzanie danych w swojej wewnętrznej części, ale jeśli przynajmniej jedno pole nie zostało wypełnione, wiadomość zostanie wyświetlona z żądaniem, aby wypełnić wszystkie pola formularza echa ", aby wysłać wypełnienie wiadomości Wszystkie pola! $ back "i odniesienie, aby powrócić do poprzedniej strony, które stworzyliśmy pierwszy ciąg.

Dale wkładka do wewnątrz obsługi formularza:

$ imię \u003d wykończenie (strip_tags ($ _POST ["Nazwa"]); $ Telefon \u003d wykończenie (strip_tags ($ _POST ["Telefon"])); $ Mail \u003d wykończenie (strip_tags ($ _Post ["mail"])); $ Message \u003d Trim (strip_tags ($ _POST ["Wiadomość"]));

W ten sposób czyszczyliśmy dane wprowadzone przez użytkownika z tagów HTML i niepotrzebnych szczelin. Pozwala nam to ochrona przed uzyskaniem złośliwego kodu w wiadomościach wysłanych do nas.

Czeki mogą być skomplikowane, ale jest już na żądanie. Minimalna ochrona po stronie serwera już ustawiamy. Ponadto zrobimy po stronie klienta za pomocą JS.

Nie zaleca się, aby całkowicie odmówić ochrony formularza po stronie serwera na korzyść JS, ponieważ chociaż jest niezwykle rzadki, ale Unicumes znajdują się z JS odłączoną w przeglądarce.

Po czyszczeniu tagów dodaj wysyłanie wiadomości:

poczta ( "[email protected]", "List z Adres_iesight""Napisałem Ci:". Nazwa $. "
Jego liczba: "$ telefon".
Jego poczta: "$ Mail. "
Jego przesłanie: "
. $ Wiadomość, "Typ treści: tekst / HTML; Charset \u003d Windows-1251") ;

To ta linia i jest zaangażowana w formację i wysyłanie wiadomości do nas. Jest wypełniony następująco:

  1. "[email protected]" - Tutaj między cytatami Wstaw swoją pocztę
  2. "List z nazwą adresu" jest przedmiotem wiadomości, która przyjdzie do poczty. Możesz coś napisać tutaj.
  3. "Napisałeś:" Nazwa $ ". < br /> Jego liczba: "$ telefon". < br /> Jego poczta: "$ Mail". < br /> Jego wiadomość: "$ Message - Tworzymy sam wiadomość. $ Nazwa - Włóż informacje wypełnione przez użytkownika poprzez odwołanie do pól z poprzedniego kroku, w notatkach opisują to, co oznacza to pole, tag < br /> Dokonujemy transferu linii, aby wiadomość była ogólnie czytelna.
  4. Typ treści: tekst / HTML; Charset \u003d Windows-1251 - na końcu istnieje wyraźne wskazanie danych typu danych przesyłanych w komunikacie i jego kodowaniu.

WAŻNY!

Kodowanie określone w "głowicy" dokumentu ( < meta http- equiv= "Content-Type" content= "Tekst / HTML; Charset \u003d Windows-1251" /> ), kodowanie z wiadomości typu treści: tekst / HTML; Charset \u003d Windows-1251 i ogólnie kodowanie pliku PHP musi być zgodne z inaczej "Krakoyarbra" zostanie wyświetlona zamiast liter rosyjskich lub angielskich.

Wielu nie wskazuje, że kodowanie wiadomości wysłanych wyraźnie, ale na niektórych klientach pocztowych, ponieważ w przyszłości mogą wystąpić problemy w przyszłości (nieczytelne litery przychodzą do poczty), więc zalecam go wskazać.

Weryfikacja formularza do odpowiednich danych

Więc użytkownicy nie śmieją się w dziedzinach dla nieuważności i wypełniają wszystko poprawnie, musi zweryfikować dane wejściowe.

Można to zrobić zarówno przez PHP po stronie serwera, jak i na JS po stronie klienta. Używam drugiej opcji, ponieważ dana osoba może natychmiast dowiedzieć się, co nie poprawnie i poprawić błąd bez podejmowania dodatkowych przejść na stronach.

Wkład kodu skryptu w tym samym pliku, gdzie mamy część formularza HTML. Dla naszego incydentu będzie to wyglądać:

< script> Funkcja CheckForm (Formularz) (VAR Name \u003d Form. Nazwa. Wartość; var n \u003d nazwa. Mecz (/ ^ [a- za- yay] * [A- ZA- YA- I] + $ /); Jeśli (! n) (alert ( "Nazwa jest wprowadzana nieprawidłowo, popraw błąd"); Zwracać false; ) Var Telefon \u003d formularz. Telefon. Wartość; Var p \u003d telefon. Dopasuj (/ ^ [0 - 9 +] [0 - 9 -] * [0 - 9 -] + $ /); Jeśli (! p) (alert ( "Telefon jest wprowadzany nieprawidłowo"); Zwracać false; ) Var mail \u003d formularz. Poczta. Wartość; Var m \u003d poczta. Mecz (/ ^ [A- Z0- 9] [A- Z0- 9. _-] * [A- ZA- Z0- 9 _] * @ ([A- Z0- 9] + ([A- Z0- 9 -] * [A- Z0- 9] +) *.) + [A- ZA-Z] + $ /); Jeśli (! m) (alert ( "E-mail wprowadzony nieprawidłowo, popraw błąd"); Zwracać false; ) Zwrócić prawdę; )

Cóż, teraz zwykła analiza:

Dla, aby kliknąć przycisk Wyślij, przetestowaliśmy Ukrywamy uruchomienie naszego skryptu na znaczniku formy:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Teraz, w punktach, przyjmujemy skład weryfikacji:


Jak możesz zauważyć, że taki mini czek jest napisany dla każdej z naszej dziedziny. Kontrola na jednej dziedzinie, którą przydzielałem w zrzucie zrzutu ekranu z czerwonym kwadratem, w innych dziedzinach ma podobną strukturę, a jeśli konieczne jest dodanie pola lub usunięcie go, możesz teraz łatwo zrobić.

Formularz zwrotny na stroniePokażę Cię - na podstawie korzystania z technologii AJAX. Ale nie martw się, nie musisz tego wiedzieć, wszystko jest już gotowe, będzie musiało zainstalować ten formularz i skonfigurować dla siebie!

Faceci - skrypt jest całkowicie przestarzały. Ktoś działa, ktoś nie ma. I rozumiem i te wszystkie aktualizacje - lenistwo. Dlatego test według własnego uznania.

Formularz sprzężenia zwrotnego PHP z wysłaniem do poczty

To formularz opinii na miejscu Bardzo funkcjonalny sam w sobie kilka wtyczek jest połączonych z nim, który tworzy atrakcyjny wygląd i sprawdzić ważność (poprawność odczytu) wprowadzonych danych. Te wtyczki działają nad wielkim i potężnym! I nazwał to:

    1. Jqtransform. - Wtyczka, która umożliwia Ci piękne formularz opinii!

    2. formValidator. - a ta wtyczka sprawdza formę kontaktów na temat poprawności wprowadzonych informacji i, w którym to przypadku wyświetlane wskazówki!

W pełnej pracy tego formularza będzie używana klasa - PHPMailer. Uważany za jednego z najlepszych!

Uwaga dla najmądrzejszego:

Formularz opinii witryny można wykonać na HTML! Ale zacznie działać tylko z PHP! I w żaden sposób!

To ja dla tych, którzy szukają formularza zwrotnego tylko na HTML. Zrób to, ale nie zadziała!

Dlatego twoje musi wspierać PHP, a dla tej formy kontaktów PHP nie powinna być niższa niż piąta wersja. Mam nadzieję, że jest jasne? Co więcej, teraz każdy normalny hosting obsługuje te warunki!

Wyprowadziłem tę formę informacji zwrotnych na stronie www.tutorialzine.com link prowadzi bezpośrednio do oryginalnej strony, tj. Strona autora tego formularza!

Wszystko jest tam w języku angielskim, więc mieliśmy małego majsterkiem z Sashą, do rusyfikacji tej formy kontaktów i wtyczek, które są podłączone do niego.

Przyznaję się szczerze, a dzięki tej "formie" było dwa dni, ponieważ różne ławicy zaczęły się pojawiać, a odwrotna forma komunikacji niedokończona do końca, tym piękniejsze, nie chciałem się układać! Więc jeśli jesteś amatoriem, aby zrobić wszystko, a myśl pasuje do twojej lekkiej głowicy - sam do rusyfikacji, nie ograniczę kilka wskazówek, ponieważ po prostu tłumaczenie zwrotów nie będzie ograniczony do:

    1. Ta forma sprzężenia zwrotnego jest wyostrzona pod burążą, stamtąd i została pobrana, więc wyśle \u200b\u200bCi zamiast normalnych postaci rosyjskich - Krakoyablabla. Przestrzegać kodowania. W ogóle wszystkie "uszczelki" będą z tym związane!

    2. Skrypt walidacji początkowo nie rozumie naszych listów, więc będą musieli je zarejestrować!

    3. Nawet po tych działaniach, jeśli określisz przedmiot pisania w języku rosyjskim, litera przychodzi z tematem - bez podmiotu (mam nadzieję, że napisał prawidłowo), jest traktowany, jeśli określisz kodowanie w pliku klasy PHPmailer.

    4. W oryginalnej postaci tekst w polach wejściowych wciśnięty do dołu, a nie w środku. Jest to gruźlica wtyczki jqtransform.

Cóż, wszystko wydawało się malować i ostrzegł. Chodźmy dalej!

W odpowiedzi na takie pytania, pierwszą rzeczą, która przychodzi na myśl, jest "wygodna i pracownicy". I jest to ogólnie logiczne. W końcu, w przeciwnym razie, jaki jest punkt obecności pięknej formy informacji zwrotnych, które nie używa? Ale najpierw pierwsze rzeczy.

Wiele form - jeden cel

Zacznijmy od tego dlaczego potrzebujesz formularzy zwrotnych na stronie? Właściciel witryny powinien być w stanie skontaktować się z zwiedzniami na jego stronie. Ludzie starają się oszczędzać czas na znalezieniu informacji o odpowiednich produktach, wyjaśniają swoje cechy i cechy, ceny i odpowiednie - zamawianie. Formularze sprzężenia zwrotnego - ważny kanał, przez który komunikacja między odwiedzającym witryny a jego właścicielem, sprzedający i kupujący. Jeśli ten kanał komunikacyjny nie działa lub okazuje się niewygodnie dla gościa, może odmówić odwołania się do Ciebie, a zatem od idei stania się prawdziwym klientem.

Jak regularnie i aktywnie korzystać z formularzy zwrotnych w witrynie opowiedzieć o swojej stronie bez pogorszenia niż wizyty analityki.

Stąd logically oznacza wniosek, który został już wyraziony powyżej - formy informacji zwrotnej muszą być wygodne i muszą działać!

Warto zauważyć, że druga część tego wyjścia zależy nie tylko na poprawności programowania. Od strony technicznej forma może doskonale pracować, ale operator musi szybko reagowaćpochodzące z witryny. W przeciwnym razie formularze sprzężenia zwrotnego będą bezużyteczne. Jeśli operator nazywa się odwiedzającym w ciągu dwóch dni, potrzeba zamówienia produktu lub usługi w osobie może po prostu zniknąć.

Formy informacji zwrotnej mogą być świetnym zestawem ("Zamówienie zwrotne", "Zadaj pytanie", opuść recenzję "," Wypełnij formularz zamówienia "," Skontaktuj się z głową ", itp.) I mogą być używany do różnych zadań. Ale celem wszystkich będzie zasadniczo sam - zapewnienie połączenia odwiedzającego witryny i jego administratora lub właściciela, zdobądź kontakty odwiedzające, aby jeszcze bardziej interakcja.

Siedem wskazówek Note.

Przypominając kilka prostych zasad, które należy wziąć pod uwagę przy opracowywaniu i umieszczeniu FOS na stronie.

    Formularz powinien być umieszczony, aby gość jest wygodny, aby go znaleźć.

    Umieść formę w widocznym miejscu - odwiedzającym witryny nie trzeba podejmować starań, aby znaleźć formę formularza informacji zwrotnej wśród wielu różnych elementów na stronie lub nieskończenie szoruj stronę.

    Tradycyjnie formy można umieścić w nagłówku witryny lub na stronie kontaktu.

    Możesz, w razie potrzeby, duplikaty kluczowych formularzy w stopce, aby nie zmuszać odwiedzających, którzy sprawdzili całą stronę, przewiń go ponownie:

    Jeśli istnieją strony z produktami lub usługami, do których oferta specjalna i goście mogą dostać go za pośrednictwem zamówienia online, umieść szybki formularz połączenia lub projektowanie zamówień na tej stronie.

    Ponadto pozwoli Ci "hakowi" odwiedzającym, który jest już zainteresowany produktem lub usługą. Odwiedzający spojrzał na opis, gwarancję, ceny, zdecydował, że produkt lub usługę był odpowiedni dla niego, a teraz natychmiast go oferujemy, bez opuszczania tej strony, zostaw prośbę o zamówienie tej usługi.

    Formularz powinien być wyświetlany i działa równo poprawnie na wszystkich urządzeniach i we wszystkich przeglądarkach.

    Lub krótko - Sprawdź formularze przekazywania przeglądarki i sprzężenia krzyżowe w swojej witrynie. Formularz może być zauważalny i wygodny do wypełnienia z laptopa lub komputera stacjonarnego, ale na tablecie pole wprowadzania danych może być zbyt wąskie i niewygodne, aby wykonać tekst na ekranie dotykowym. Czy klient spróbuje spróbować dokonać swoich dowodów z czasem, aby skontaktować się z Tobą? Odpowiedź jest oczywista.

    Formularz musi być krótki i zrozumiały.

    Co to znaczy? Formularz nie powinien składać się z dużej liczby pól lub etapów napełniania. Chyba że oczywiście nie ma twardych potrzeb. Ludzie dążą do prostoty, nie chcą spędzać dużo czasu, by wymyślić i wypełnić dziesięć tysięcy dziedzin.

    Jeśli usługa oznacza otrzymanie dość szczegółowych informacji, uprościć zadanie klientowi (jeśli jest oczywiście być może). Wybierz wiele pól kluczowych, aby wypełnić:

    Wygląda na bardziej wygodne niż na przykład:

    Lepiej oddzwonić i werbalnie, aby wyjaśnić wszystko, czego potrzebujesz, ale ułatwić użytkownik wypełnienia formularza. A tym samym zwiększenie szans na kontakt z tobą!

    Kontynuując przedmiot jasności, zwróć uwagę na fakt, że formularz ma nagłówek - "Zamów połączenie zwrotne", "Zamówienie wezwania mierniczego", "kolejność bezpłatnej konsultacji", itd. Ten sam tytuł jest lepszy do powielenia w alertach elektronicznych, które pochodzi z formularza do poczty. Wtedy nie tylko odwiedzający witryny nie pomywa i nie zapomnę aplikacji, co dokładnie to sprawia. Ale sam uzyskasz wyraźne dane, które informacje były zainteresowane gościom, który opuścił aplikację. Pomoże to szybko poruszać się z dalszą komunikacją z gościem i prawidłowo zbudować dialog.

    Formularz musi mieć przyjemny i praktyczny projekt.

    Wszystkie pola powinny być wyraźnie widoczne. Jeśli podczas tworzenia formularza projektu jest wiele kolorów, warto zwrócić uwagę na to, że nie ma zbyt wiele do łączenia, a nie nadmiernie jasne. Mężczyzna wypełniający kształt nie powinien obciążać ich wzroku. To samo dotyczy wyboru kolorów wiadomości tekstowych.

    Lepiej jest uniknąć kombinacji ciemności na ciemności. Jeśli na przykład na ciemnym niebieskim tle zrobisz ciemnoczerwony lub ciemnozielony napis "Twoja wiadomość wysłana", po prostu nie będzie widoczna.

    Formularz musi zawierać połączenie do działania.

    Mały kod kreskowy dzwoniący do gościa, aby wykonać lub zakończyć akcję. W naszym przypadku wyślij wiadomość z witryny!

    Ponadto lepiej podświetlenie z kontrastem. Wraz z połączeniem do działania sprawi, że zauważalny i przyciągnie uwagę gościa.

    Formularz musi być łatwo złożony.

    Tak więc forma jest łatwa do znalezienia, ma przyjemny design, wygodny do napełniania. Co jeszcze?

    Nie zapomnij poprosić programistów, aby dodać "Krzyż" do formularza, abyś mógł go zamknąć. Lub skonfiguruj automatyczną formę składania po wypełnianiu go.

    Wydaje się, że drobiazg i ogólny obraz może być śpiewany.
    Na przykład odwiedzający pozostawił aplikację na stronie i chce wrócić do przeglądania witryny. ALE! Forma się zawiesza, nie znika, jak go zamknąć - nie jest jasne. Albo inna opcja - odwiedzający zmienił zdanie, aby napisać prośbę i postanowił zadzwonić do siebie. Może być nieprzyjemny.

    Konfigurowanie wiadomości odpowiedzi.

    Coś w tym stylu…

    Osoba, która wysłała wiadomość chce być pewna, że \u200b\u200bjego wiadomość zostanie przyjęta przez ciebie i przeglądana. Technicznie, automatyczna konfiguracja alertu nie zajmuje dużo czasu, ale wzmocni zaufanie gościa w fakcie, że jego wiadomość nie zostanie pozostawiona bez odpowiedzi. Jest to zwykle używane w tych formach, w których musisz określić swój adres e-mail podczas napełnienia. Jednak nowoczesne usługi umożliwiają dostosowanie automatycznych alertów i przez SMS.

Zreasumowanie

Mamy wiele subtelności i innych części: Możesz eksperymentować z formularzem i projektem, możesz narysować dyskretny harmonogram na ten temat itp. Ale podstawowe kryteria się nie zmieniają. Do wszystkich powyższych, chcę dodać duży, ale ważne życzenie - okresowo sprawdzaj działanie formularzy zwrotnych na stronie. Niepowodzenie techniczne nie powinny być przeszkodą dla Twojej firmy!

Dzwon.

Są ci, którzy przeczytali tę wiadomość przed tobą.
Subskrybuj odbieranie artykułów świeżych.
E-mail
Nazwa
Nazwisko
Jak chcesz przeczytać dzwonek
Bez spamu