W tej lekcji zapoznamy się z funkcją poczta ()na przykładzie tworzenia formularze opinii PHP z późniejszym wysłaniem otrzymanych danych na pocztę.
W tym celu utworzymy dwa pliki - forma.php i mail.php... Pierwszy plik będzie zawierał tylko formularz z polami do wprowadzenia przez użytkownika. Wewnątrz tagu formularz - przycisk "Wysłać" i atrybut akcjaco odnosi się do przewodnika - mail.php, to do niego dostęp do danych z formularza uzyskuje się po naciśnięciu przycisku "Wysłać"... W naszym przykładzie dane formularza są wysyłane do strony internetowej o nazwie „/Mail.php”... Ta strona zawiera skrypt dla PHPktóry przetwarza dane formularza:
Tak wygląda formularz w przeglądarce.
Następnie piszemy kod pliku mail.php... Wymyślanie nazw zmiennych. W PHP zmienna zaczyna się od znaku $ a następnie nazwa zmiennej. Zmienna wartość tekstowa jest ujęta w cudzysłów. Za pomocą zmiennych treść formularza wysyłana jest na adres e-mail administratora, zastępując po prostu nazwę elementu formularza w nawiasach kwadratowych - wartość nazwa.
$ to \u003d " [email chroniony]"; // email odbiorcy danych z formularza
$ tema \u003d "Formularz opinii PHP"; // temat otrzymanej wiadomości e-mail
$ message \u003d "Twoje imię:". $ _ POST ["imię"]. "
"; // przypisz zmiennej wartość uzyskaną z formularza nazwa \u003d nazwa
$ message. \u003d "E-mail:". $ _ POST ["email"]. "
"; // pobrane z formularza nazwa \u003d email
$ message. \u003d "Numer telefonu:". $ _ POST ["telefon"]. "
"; // pobrane z formularza nazwa \u003d telefon
$ message. \u003d "Message:". $ _ POST ["wiadomość"]. "
"; // pobrane z formularza nazwa \u003d wiadomość
$ headers \u003d "Wersja MIME: 1.0". "\\ r \\ n"; // nagłówek odpowiada formatowi plus znak wysuwu wiersza
$ headers. \u003d "Content-type: text / html; charset \u003d utf-8". "\\ r \\ n"; // wskazuje typ wysyłanej treści
mail ($ do, $ tema, $ wiadomość, $ nagłówki); // wyślij wartości zmiennych do odbiorcy e-mailem
?>
Zatem dane z tablicy $ _POST zostaną przekazane do odpowiednich zmiennych i wysłane do poczty przy użyciu funkcji poczta... Wypełnijmy nasz formularz i kliknij przycisk Prześlij. Nie zapomnij podać swojego adresu e-mail. List dotarł natychmiast.
Cześć przyjaciele! W tym poradniku omówimy tworzenie formularza opiniilub jak mówią ludzie "Formularz kontaktowy".
Dzisiaj przeanalizujemy z Tobą, jak możesz tworzyć w kilka minut łatwy, piękny i funkcjonalny formularz opinii za pomocą mojej ulubionej wtyczki Formularz kontaktowy 7 .
Postaram się jak najbardziej szczegółowo wyjaśnić wszystkie etapy instalacji formularza kontaktowego i pod tym względem lekcja okaże się dość długa 🙂
Tworzenie formularza kontaktowego w WordPress
Na samym początku chciałbym zaznaczyć, że wtyczka Contact Form 7 jest zrusyfikowana i nie będzie z nią żadnych problemów. Dowodem moich słów może być fakt, że ta wtyczka została pobrana PONAD 25 MILIONÓW RAZY !!!
A więc zacznijmy. Aby utworzyć formularz opinii musisz wykonać następujące czynności:
1. Zainstaluj i aktywuj wtyczkę Contact Form 7. Jak zainstalować wtyczki, które możesz.
2. Po aktywacji przejdź do Formularz kontaktowy 7 -\u003e Formularze.
3. W oknie, które zostanie otwarte skopiuj linię z kodem do umieszczenia na stronie.
4. Wklej skopiowany kod na stronę, na której chcemy dodać formularz opinii. Po wstawieniu kodu nie zapomnij zapisać zmian, klikając przycisk "Odświeżać".
Lubię to wynik dodanie formularza kontaktowego w celu uzyskania:
Gotowe! Zainstalowałeś forma robocza opinie do Twojej witryny!
Jak widać w sumie w ciągu kilku minut możesz łatwo zainstalować formularz opinii na stronie. Możesz położyć temu kres, ale dla tych, którzy nie są zadowoleni ze standardowego formularza i chcą tworzyć zupełnie nowy formularz kontaktowy z innymi dziedzinami i możliwościami - polecić przeczytaj lekcję do końca.
Aby stworzyć nowy formularz, musisz najpierw określić, jakich pól w nim potrzebujemy. W tym samouczku jako przykład utworzymy prosty plik oddzwonić formularz zamówienia.
Aby to zrobić, potrzebujemy formularza, aby miał następujące pola do wypełnienia:
- Imię (pole wymagane)
- Nazwisko
- Telefon (pole wymagane)
- Pole z możliwością wyboru dogodnego czasu na rozmowę
Po wybraniu pól przystępujemy do tworzenia formularza:
1. Idź do Formularz kontaktowy 7 -\u003e Dodaj nowy.
2. W oknie, które zostanie otwarte, kliknij przycisk "Dodaj nowe"... W razie potrzeby wybierz język z listy rozwijanej poniżej. Przez domyślnym językiem będzie rosyjski.
3. Po kliknięciu przycisku zostaniesz przeniesiony na stronę, na której edytor formularzy.
Na samej górze strony znajduje się pole, w którym piszemy nazwa nowa forma... W Szablon formularza widzimy standardowe pola formularzy, które są tworzone domyślnie.
Poniżej widzimy ustawienia listu, który przychodzi na Twoją pocztę po wysłaniu przez kogoś zamówienia z formularza na stronie. W tych ustawieniach możesz na przykład zmienić lub dodać wiadomość e-mail, na którą będą przychodzić zapytania z formularza w Twojej witrynie. W szablon listu skonfigurowano informacje, które będą wyświetlane wewnątrz litery.
4. Po pobieżnym zapoznaniu się ze strukturą edytora przejdź do tworzenia naszego nowego formularza. Do tego potrzebujemy USUNĄĆ z szablonu formularza wszystkie wiersze oprócz przycisku "Wysłać",oraz w szablonie wiadomości e-mail usunąć wszystko całkowicie . Po usunięciu powinieneś otrzymać coś takiego:
5. Teraz musimy stworzyć nowe pola: Nazwa (wymagany), Nazwisko, Telefon(wymagany), Dogodny czas rozmów.
Zaczynamy od stworzenia pola wprowadzić nazwę, które powinno być wymagane. Aby to zrobić, naciśnij przycisk „Generuj tag”i wybierz Pole tekstowe.
W ustawieniach nowego pola umieść znacznik wyboru, który jest konieczny tylko wtedy, gdy pole ma być wymagane. Następnie skopiuj wygenerowany kod do szablonu formularza po prawej stronie i skopiuj następujący kod do szablonu wiadomości e-mail. Poniższy obrazek zawiera komentarze i strzałki ułatwiające zrozumienie.
6. Po dodaniu pola do wpisania nazwy kliknij „Generuj tag” -\u003e Pole tekstowe i przez analogię stwórz pole Nazwisko i Telefonkopiując i wklejając kod do szablonu formularza i szablonu listu. Jedyna różnica dotyczy tego pola Nazwiskonie musisz zaznaczać pola obowiązkowego wypełnienia .
Po dodaniu pól Imię, Nazwisko i Telefon edytor formularzy będzie wyglądał następująco:
7. Teraz tworzymy pole Dogodny czas rozmów. Aby to zrobić, kliknij „Generuj tag” i wybierz „Menu rozwijane”.
W terenie Wybór piszemy wiersz według jednej opcji, w naszym przypadku czas ten wynosi od 8-00 do 18-00 w odstępach dwugodzinnych. Po wypełnieniu skopiuj odpowiednie wiersze kodu do szablonu formularza i szablonu listu.
W rezultacie powinieneś otrzymać coś takiego:
9. Skopiuj kod formularza i wklej go na stronie, na której potrzebujesz formularza... Jeśli wszystko wykonałeś poprawnie, powinieneś otrzymać następujący formularz do zamówienia oddzwonienia:
Gdy użytkownik złoży zamówienie oddzwonienia z Twojej witryny, list zostanie wysłany na Twoją pocztę o następującej treści:
GOTOWE!Tutaj stworzyliśmy z Tobą formularz zamówienia oddzwonienia od podstaw.
Zgadzam się, że dla niektórych wszystko może wydawać się bardzo trudne i przerażające, ale to uczucie będzie trwać tylko do pierwszego stworzenia formularza kontaktowego od podstaw 😉
W większości przypadków wystarczający jest standardowy formularz opinii, który jest tworzony domyślnie przez wtyczkę zaraz po jej instalacji i aktywacji.
Mam nadzieję, że ten samouczek był dla Ciebie przydatny i odkryłeś wtyczkę Contact Form 7.
Jeśli masz jakieś pytania podczas tworzenia formularza czy coś nie zadziała - pisz i zadawaj pytania w komentarzach.
I pamiętaj o tym formularz opinii na stronie - wymagany atrybut na stronie kontaktowej.
Cześć przyjaciele! W tej lekcji porozmawiamy o tworzeniu formularza zwrotnego lub jak ludzie mówią „formularz kontaktowy”. Dzisiaj przeanalizujemy z Tobą, jak możesz stworzyć łatwy, piękny i funkcjonalny formularz opinii w kilka minut, korzystając z mojej ulubionej wtyczki Formularz kontaktowy 7. Postaram się jak najbardziej szczegółowo wyjaśnić wszystkie etapy instalacji formularza kontaktowego, dlatego lekcja będzie dość długa :) Tworzenie formularza kontaktowego w WordPressie Na samym początku chciałbym zaznaczyć, że wtyczka Contact Form 7 jest zrusyfikowana i nie będziesz miał z nią żadnych problemów. Na dowód moich słów fakt, że ta wtyczka ...
Przegląd
Głosuj na lekcję
100
Oszacowanie
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ć ich jakość w przyszłości. Z góry dziękuję!
Jednym z najczęstszych zadań w praktyce jest realizacja formularza informacji zwrotnej. Piszesz jego kod HTML, dekorujesz go w CSS, tworzysz skrypt PHP, który przetwarzałby dane otrzymane od użytkownika i wysyłał go na naszą pocztę, piszesz skrypt JS, który sprawdzałby formularz pod kątem adekwatności danych wejściowych, chronił nasze dziecko skrzynka pocztowa nie załamała się od ataków botów.
Wszystkie powyższe punkty zostaną rozważone w naszej recenzji i szczegółowo skomentowane.
Zacznijmy więc tworzyć formularz opinii:
HTML
Przede wszystkim piszemy kod HTML, to on ustawia pola, które użytkownik wypełni. Zostaną wydane w przyszłości. Kod formularza wygląda następująco:
< 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= "Wyślij wiadomość" />
A wizualnie wygląda to teraz tak:
Zgadzam się, na razie wszystko jest brzydkie i nic nie jest jasne, ale dopiero zaczęliśmy.
Rozważ szczegółowo powyższy kod:
< form method= "post" action= "mail.php" > …
aby stworzyć formularz, musisz użyć tagu form. To on określa początek i koniec formularza dla interpretera kodu. Jak każdy tag ma cały zestaw atrybutów, ale do działania formularza wymagane są tylko dwa, są to metoda (metoda wysyłania żądania do serwera, dla formularzy standardowo używają postu) i akcja (określa ścieżkę do obsługi plików formularza, w ten plik będzie zawierał skrypt w PHP, który następnie wyśle \u200b\u200bwartości wprowadzone przez użytkownika na naszą pocztę, w naszym przypadku widzimy, że ten plik nazywa się mail.php i znajduje się w tym samym katalogu witryny, co rozważana przez nas strona).< input maxlength= "30" type= "text" name= "name" />
Następnie mamy dane wejściowe. Są to rzeczywiste pola formularza, w których użytkownicy będą wprowadzać potrzebne nam informacje (type \u003d "text" oznacza, że \u200b\u200bbędzie to tekst). Atrybut maxlength określa, ile znaków użytkownik może wprowadzić do danego pola formularza. Najważniejszym atrybutem jest nazwa - określa nazwę konkretnego pola. To właśnie pod tymi nazwami w przyszłości skrypt PHP będzie przetwarzał wprowadzane do niego informacje. Jeśli chcesz, możesz również ustawić atrybut zastępczy, który wyświetla tekst wewnątrz pola, który znika po umieszczeniu w nim kursora. Jednym z problemów z symbolem zastępczym jest to, że nie jest on obsługiwany przez niektóre starsze przeglądarki.< label for = "name" > Nazwa:
Używane w przypadku, gdy porzuciliśmy symbole zastępcze. Zwykły podpis pola, atrybut for określa, do którego konkretnego pola należy ten podpis. Wartość określa nazwę interesującego nas pola.< textarea rows= "7" cols= "50" name= "message" >
Podobnie jak wejście jest przeznaczone dla użytkownika do wprowadzania informacji, tyle że tym razem pole jest wyostrzane w przypadku długich komunikatów. Wiersze wskazują rozmiar pola w wierszach, kolumny w znakach. Generalnie ustalają wysokość i szerokość naszego pudełka.< input type= "submit" value= "Wyślij wiadomość" />
Type \u003d "submit" informuje nas, że jest to przycisk do przesyłania formularza, a wartość ustawia tekst, który będzie znajdował się wewnątrz tego przycisku.< div class = "right" >
służy tylko do dalszego wizualnego projektowania formy.
CSS
Aby nasz formularz opinii wyglądał dobrze, musisz go zaaranżować. Dla następującego wyniku:
Użyliśmy tego kodu:
form (background: # f4f5f7; padding: 20px;) form. lewo, formularz. right (display: inline-block; vertical-align: top; width: 458px;) form. right (padding- left: 20px;) label (display: block; font- size: 18px; text- align: center; margin: 10px 0px 0px 0px;) input, textarea (border: 1px solid # 82858D; padding: 10px; rozmiar czcionki: 16px; szerokość: 436px;) obszar tekstowy (wysokość: 98px; margines-dół: 32px;) input [type \u003d "submit"] (width: 200px; float: right; border: none; background: # 595B5F; kolor: #fff; transformacja tekstu: wielkie litery;)
Nie widzę sensu w szczegółowym opisywaniu CSS, zwrócę uwagę tylko na kluczowe punkty:
- Nie powinieneś pisać projektu dla każdego tagu w formularzu. Spróbuj zbudować selektory, aby móc stylizować wszystkie potrzebne elementy za pomocą kilku wierszy kodu.
- Nie używaj dodatkowych znaczników według typu do łamania linii i wcięć < br>, < p> i tak dalej, CSS z właściwością display: block i marginesem z dopełnieniem dobrze sobie radzi z tymi zadaniami. Więcej o tym, dlaczego nie używać < br> w układzie możesz ogólnie przeczytać tag br w artykule, ale czy to naprawdę potrzebne? ...
- Nie używaj tabelarycznych układów formularzy. Jest to sprzeczne z semantyką tego tagu, a wyszukiwarki uwielbiają kod semantyczny. Aby uformować wizualną strukturę dokumentu, potrzebujemy tylko znaczników DIV, oraz właściwości display: inline-block (układa bloki w rzędzie) i vertical-align: top (zapobiega ich rozrzucaniu się po ekranie) ustawionych przez nie w CSS, ustawiamy im wymaganą wysokość i voila, nic więcej i wszystko znajduje się tak, jak tego potrzebujemy.
Tym, którzy chcą zaoszczędzić czas na projektowaniu stron internetowych, polecam korzystanie z frameworków CSS przy tworzeniu stron internetowych, szczególnie tych napisanych samodzielnie. Mój wybór dla tego planu to Twitter Bootstrap. Możesz obejrzeć lekcję dotyczącą projektowania formularzy za jego pomocą.
PHP
Cóż, teraz nadszedł czas, aby nasz formularz działał.
Przechodzimy do katalogu głównego naszej witryny i tworzymy tam plik mail.php, do którego wcześniej wskazaliśmy ścieżkę w atrybucie action tagu formularza.
Ostatecznie jego kod będzie wyglądał następująco:
Jego numer to „. $ Phone”.
Jego poczta: ". $ Mail. "
Jego przesłanie: „... $ wiadomość,); Echo "Twoja wiadomość została wysłana poprawnie!
Wkrótce otrzymasz odpowiedź
$ back "; wyjście; ) else (echo; wyjście;)?\u003e
Dyskusję na temat HTML i CSS tego dokumentu można pominąć. Zasadniczo jest to zwykła strona witryny, którą możesz zaprojektować według własnego uznania. Rozważmy jego najważniejszą część - skrypt PHP do przetwarzania formularza:
$ back \u003d "
\\ "javascript: history.back () \\"\u003e Wróć
" ;W tym wierszu tworzymy łącze do powrotu do poprzedniej strony. Ponieważ nie wiemy z góry, z której strony użytkownik przejdzie na tę, odbywa się to za pomocą małej funkcji JS. W przyszłości będziemy po prostu odwoływać się do tej zmiennej, aby wyświetlić ją w potrzebnych nam miejscach.
jeśli (! puste ($ _POST ["nazwa"]) i! puste ($ _POST ["telefon"]) i! puste ($ _POST ["poczta"]) i! puste ($ _POST ["wiadomość"])) ( // wewnętrzna część programu obsługi ) else (echo „Wypełnij wszystkie pola, aby wysłać wiadomość! $ Back”; wyjście; )
W tym miejscu załączamy formularz sprawdzania kompletności pól. Jak można się domyślić, w części $ _POST ["name"], w cudzysłowie, zapisujemy wartość atrybutu name naszych danych wejściowych.
Jeżeli wszystkie pola są wypełnione, to skrypt rozpocznie przetwarzanie danych w swojej wewnętrznej części, jeśli co najmniej jedno pole nie zostało wypełnione, to na ekranie użytkownika pojawi się komunikat z prośbą o wypełnienie wszystkich pól formularza echo "Aby wysłać wiadomość, wypełnij wszystkie pola! $ Back" i aby powrócić do poprzedniej strony, którą utworzyliśmy w pierwszym wierszu.
Następnie wstawiamy do wewnętrznej części programu obsługi formularzy:
$ nazwa \u003d przycinanie (strip_tags ($ _POST ["nazwa"])); $ phone \u003d trim (strip_tags ($ _POST ["telefon"])); $ mail \u003d trim (strip_tags ($ _POST ["mail"])); $ wiadomość \u003d przycinanie (strip_tags ($ _POST ["wiadomość"]));
W ten sposób usunęliśmy dane wejściowe użytkownika ze znaczników HTML i dodatkowych spacji. To pozwala nam chronić się przed otrzymywaniem złośliwego kodu w wysyłanych do nas wiadomościach.
Kontrole mogą być skomplikowane, ale jest to na twoją prośbę. Zainstalowaliśmy już minimalną ochronę po stronie serwera. Dalej zrobimy po stronie klienta przy użyciu JS.
Nie polecam całkowitego rezygnowania z ochrony formularza po stronie serwera na rzecz JS, ponieważ, choć jest to niezwykle rzadkie, istnieją unikalne z wyłączonym JS w przeglądarce.
Po wyczyszczeniu tagów dodaj wysyłanie wiadomości:
poczta ( „[email protected]”,
„List od adresu_ Twojej_witryny”, "Napisałem do ciebie:" $ name. "
Jego numer to „. $ Phone”.
Jego poczta: ". $ Mail. "
Jego przesłanie: „... $ wiadomość, „Content-type: text / html; charset \u003d windows-1251”)
;
To właśnie ta linia zajmuje się formowaniem i wysyłaniem przesłania do nas. Jest wypełniany w następujący sposób:
- „[email protected]” - wstaw swoją pocztę w cudzysłów
- „List z adresu_ twojej_witryny” to temat wiadomości, która zostanie dostarczona pocztą. Tutaj możesz napisać wszystko.
- „Napisałem do Ciebie:„. $ Imię ”. < br /> Jego numer to „. $ Phone”. < br /> Jego poczta: „. $ Mail”. < br /> Jego wiadomość: ". $ Message - tworzymy sam tekst wiadomości. $ Name - wpisujemy informacje wpisane przez użytkownika poprzez odwołanie się do pól z poprzedniego kroku, w cudzysłowie opisujemy, co to pole oznacza, tagiem < br /> robimy znak końca wiersza, aby cała wiadomość była czytelna.
- Content-type: text / html; charset \u003d windows-1251 - na końcu jest wyraźne wskazanie typu danych przesyłanych w wiadomości i ich kodowania.
WAŻNY!
Kodowanie określone w „nagłówku” dokumentu ( < meta http- equiv= "Content-Type" content= "text / html; charset \u003d windows-1251" /> ), kodowanie z wiadomości Content-type: text / html; charset \u003d windows-1251 i ogólnie kodowanie pliku PHP musi być zgodne, w przeciwnym razie w wiadomościach otrzymanych pocztą zamiast rosyjskich lub angielskich liter będzie wyświetlane "krakozyabry".
Wiele z nich nie wskazuje wyraźnie na kodowanie wysyłanej wiadomości, ale w niektórych klientach pocztowych może to powodować problemy w przyszłości (w wiadomości pojawią się nieczytelne listy), dlatego zalecam określenie tego wszystkiego.
Sprawdzenie formularza pod kątem poprawności wprowadzonych danych
Aby użytkownicy nie pomijali pól przez nieuwagę i wypełniali wszystko poprawnie, warto sprawdzić wprowadzone dane.
Można to zrobić zarówno w PHP po stronie serwera, jak i JS po stronie klienta. Korzystam z drugiej opcji, ponieważ w ten sposób osoba może od razu dowiedzieć się, co zrobił źle i poprawić błąd bez wykonywania dodatkowych przejść przez strony.
Wstaw kod skryptu w tym samym pliku, w którym znajduje się część HTML formularza. W naszym przypadku będzie to wyglądać tak:
< script> function checkForm (form) (var nazwa \u003d form. name. value; var n \u003d name. match (/ ^ [A- Za- zA- Ya- z] * [A- Za- zA- Ya- z] + $ / ); if (! n) (alert ( „Nazwa została wprowadzona niepoprawnie, popraw błąd”); return false; ) var phone \u003d form. telefon. wartość; var p \u003d telefon. dopasuj (/ ^ [0 - 9 +] [0 - 9 -] * [0 - 9 -] + $ /); if (! p) (alert ( „Telefon wprowadzony nieprawidłowo”); return false; ) var mail \u003d form. Poczta. wartość; var m \u003d mail. dopasuj (/ ^ [A- Za- z0- 9] [A- Za- z0- 9 \\. _-] * [A- Za- z0- 9 _] * @ ([A- Za- z0- 9] + ([A- Za- z0- 9 -] * [A- Za- z0- 9] +) * \\.) + [A- Za- z] + $ /); if (! m) (alert ( „E-mail wprowadzony nieprawidłowo, popraw błąd”); return false; ) return true; )
Cóż, teraz do zwykłej analizy:
Dla, aby po kliknięciu na przycisk przesyłania formularza został on sprawdzony uruchamianie naszego skryptu zawieszamy na tagu formularza:
< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >
Teraz punkt po punkcie analizujemy skład czeku:
Jak widać, taki mini czek jest napisany dla każdego z naszych pól. Zaznaczenie zaznaczenia dla jednego pola na zrzucie ekranu czerwonym kwadratem, dla innych pól ma podobną strukturę i jeśli zajdzie potrzeba dodania lub usunięcia pola, możesz teraz łatwo to zrobić.
Formularz opinii dla witrynyktóre wam pokażę opiera się na wykorzystaniu technologii Ajax. Ale nie martw się, nie musisz tego wiedzieć, wszystko jest gotowe, wystarczy zainstalować ten formularz i dostosować go dla siebie!
Chłopaki - skrypt od dawna jest przestarzały. Ktoś pracuje, ktoś nie. Jestem zbyt leniwy, by to zrozumieć, a jeszcze bardziej, żeby zaktualizować. Dlatego przetestuj według własnego uznania.
Formularz zwrotny php z wysłaniem do poczty
To formularz opinii o witrynie bardzo funkcjonalny sam w sobie, podłączonych jest do niego kilka wtyczek, które tworzą atrakcyjny wygląd i sprawdzają aktualność (poprawność odczytu) wprowadzonych danych. Te wtyczki działają dla wielkich i potężnych! Nazywa się je tak:
1. JQTransform - wtyczka, dzięki której nasz formularz opinii będzie piękny!
2. formValidator - i ta wtyczka sprawdza formularz kontaktowy pod kątem poprawności wprowadzonych informacji iw takim przypadku wyświetla podpowiedzi!
Do pełnoprawnej pracy tego formularza zostanie użyta klasa - PHPMailer. Uważany za jednego z najlepszych!
Uwaga dla najmądrzejszych:
Formularz opinii dla witryny można sporządzić w formacie HTML! Ale zacznie działać dopiero z PHP! I nic więcej!
To ja dla tych, którzy szukają formularza opinii tylko w formacie HTML. Zrobisz to, ale to nie zadziała!
Dlatego Twój musi obsługiwać PHP, a dla tego formularza kontaktowego PHP musi mieć co najmniej wersję 5. Mam nadzieję, że wyjaśniam to jasno? Co więcej, teraz każdy normalny hosting obsługuje te warunki!
Ten formularz zwrotny wykopałem na stronie www.tutorialzine.com, link prowadzi bezpośrednio do strony oryginalnej, tj. strona autora tego formularza!
Wszystko jest po angielsku, więc Sasha i ja musieliśmy trochę majstrować, aby rusyfikować ten formularz kontaktowy i same wtyczki, które są z nim połączone.
Szczerze mówiąc, spędziliśmy z tą „pleśnią” dwa dni, kiedy zaczęły się pojawiać różne ościeże, a ja nie chciałem publikować niedokończonego formularza opinii, tym piękniejszego! Jeśli więc jesteś fanem robienia wszystkiego samodzielnie, a myśl będzie pasować do twojej najjaśniejszej głowy - aby samodzielnie zrusyfikować tę formę, dam kilka wskazówek, ponieważ nie będziesz ograniczać się do prostego tłumaczenia zwrotów:
1. Ten formularz opinii jest dostosowany do burżuazji i jest stamtąd pobierany, więc wyśle \u200b\u200bci zamiast zwykłych rosyjskich znaków - krakozyatywnie. Zrozum kodowanie. Zresztą wszystkie „foki” będą z tym związane!
2. Skrypt walidacji początkowo nie rozumie naszych listów, więc będą musiały zostać tam zapisane!
3. Nawet po wykonaniu tych czynności, jeśli temat listu zostanie określony po rosyjsku, list będzie zawierał temat - Brak tematu (mam nadzieję, że napisałem go poprawnie), jest to traktowane, jeśli określisz kodowanie w pliku klasy PHPMailer.
4. W pierwotnej formie tekst w polach wejściowych został wciśnięty do dołu, a nie do środka. To jest usterka wtyczki JQTransform.
Wygląda na to, że wszystko namalował i ostrzegł. Idźmy dalej!
W odpowiedzi na te pytania pierwszą rzeczą, która przychodzi na myśl, jest: „Wygodne i wykonalne”. I jest to generalnie logiczne. W przeciwnym razie po co mieć piękny formularz opinii w witrynie, który nie jest używany? Ale najpierw najważniejsze.
Wiele form - jeden cel
Zacznijmy od tego, do czego służy formularz opinii w witrynie? Właściciel witryny musi mieć możliwość kontaktowania się z osobami odwiedzającymi jego witrynę. Ludzie mają tendencję do oszczędzania czasu na szukaniu informacji o odpowiednich produktach, wyjaśnianiu ich cech i właściwości, cenach, a w apogeum złożeniu zamówienia. Formularze opinii są ważnym kanałem komunikacji między odwiedzającym witrynę a jej właścicielem, sprzedawcą i kupującym. Jeśli ten kanał komunikacji nie działa lub okaże się uciążliwy dla gościa, może porzucić pomysł kontaktu z Tobą, a tym samym z idei zostania Twoim prawdziwym klientem.
To, jak regularnie i aktywnie używane są formularze opinii w Twojej witrynie, powie o Twojej witrynie nie gorzej niż analiza odwiedzin.
Stąd logicznie wynika wniosek, który został już wyrażony powyżej - formularze informacji zwrotnej powinny być wygodne i działać!
Należy zaznaczyć, że druga część tego wniosku zależy nie tylko od prawidłowego zaprogramowania. Technicznie rzecz biorąc, kształt może działać idealnie, ale operator musi szybko reagować na wezwaniapochodzące z witryny. W przeciwnym razie formularze opinii będą bezużyteczne. Jeśli operator oddzwoni do gościa za dwa dni, potrzeba zamówienia produktu lub usługi od osoby może po prostu zniknąć.
Istnieje wiele różnych formularzy opinii („Poproś o oddzwonienie”, „Zadaj pytanie”, „Zostaw recenzję”, „Wypełnij formularz zamówienia”, „Skontaktuj się z menedżerem” itp.) I można ich używać do różnych zadań. Ale cel dla wszystkich będzie zasadniczo taki sam - zapewnienie połączenia między odwiedzającym witrynę a jej administratorem lub właścicielem, aby uzyskać kontakty odwiedzającego w celu dalszej interakcji z nim.
Siedem wskazówek do zapamiętania
Pamiętajmy o kilku prostych zasadach, które należy wziąć pod uwagę podczas tworzenia i publikowania FOS na stronie.
Formularz należy ustawić tak, aby odwiedzający mógł go wygodnie znaleźć.
Umieść formularz w widocznym miejscu, aby odwiedzający Twoją witrynę nie musiał wysilać się, aby znaleźć formularz opinii wśród wielu różnych elementów na stronie lub bez końca przewijać stronę w dół.
Tradycyjnie formularze można umieszczać w nagłówku serwisu lub na stronie kontaktowej.
W razie potrzeby możesz zduplikować kluczowe formularze w stopce, aby nie zmuszać odwiedzających, którzy przeglądali całą stronę, do ponownego przewijania w górę:
Jeśli istnieją strony z produktem lub usługą, które mają specjalną ofertę, a odwiedzający może ją otrzymać za pośrednictwem zamówienia online, złóż szybki telefon lub formularz zamówienia na tej stronie.
Ponadto pozwoli Ci „zaczepić” gościa, który jest już zainteresowany produktem lub usługą. Gość spojrzał na opis, gwarancje, ceny, zdecydował, że produkt lub usługa mu odpowiada i teraz natychmiast proponujemy mu, bez opuszczania tej strony, pozostawienie prośby o zamówienie tej usługi.
Formularz powinien wyświetlać się i działać poprawnie na wszystkich urządzeniach i we wszystkich przeglądarkach.
Lub, w skrócie, sprawdź formularze opinii między przeglądarkami i platformami w swojej witrynie. Formularz może być zauważalny i łatwy do wypełnienia z laptopa lub komputera stacjonarnego, ale na tablecie pole wprowadzania danych może być zbyt wąskie i niewygodne do wprowadzania tekstu z ekranu dotykowego. Czy klient będzie wtedy wielokrotnie próbował wprowadzić swoje dane, aby się z Tobą skontaktować? Odpowiedź jest oczywista.
Formularz powinien być krótki i jasny.
Co to znaczy? Formularz nie powinien składać się z dużej liczby pól lub etapów wypełniania. O ile, oczywiście, nie jest to bezwzględnie konieczne. Ludzie dążą do prostoty, nie chcą spędzać dużo czasu na porządkowaniu i wypełnianiu dziesięciu tysięcy pól.
Jeśli usługa wiąże się z uzyskaniem dość szczegółowych informacji, uprość zadanie dla klienta (jeśli to możliwe, oczywiście). Podświetl kilka kluczowych pól, które należy wypełnić:
Wygląda wygodniej niż np .:
Lepiej zadzwonić i ustnie wyjaśnić wszystko, czego potrzebujesz, ale ułatwić odwiedzającemu wypełnienie formularza. A w ten sposób zwiększaj szanse, że zwróci się do ciebie!
Kontynuując temat jasności, zwróć uwagę na fakt, że formularz posiada nagłówek - „Poproś o telefon zwrotny”, „Zamów wezwanie mierniczego”, „Zamów bezpłatną konsultację” itp. Lepiej jest powielać ten sam tytuł w powiadomieniach e-mail, które będą przychodzić z formularza do Twojej poczty. Wtedy nie tylko odwiedzający Twoją witrynę nie będzie zdezorientowany i nie zapomni wniosku o to, co dokładnie wypełnia. Ale Ty sam otrzymasz jasne dane o tym, jakie informacje były interesujące dla gościa, który opuścił aplikację. Pomoże Ci to szybko nawigować podczas dalszej komunikacji z gościem i poprawnie zbudować dialog.
Forma powinna mieć przyjemny i praktyczny design.
Wszystkie pola muszą być dobrze widoczne. Jeśli w projekcie formy użyto wielu kolorów, należy zwrócić uwagę na to, że nie ma ich zbyt wiele, aby były połączone i nie były przesadnie jasne. Osoba wypełniająca formularz nie powinna męczyć oczu. To samo dotyczy dopasowywania kolorów wiadomości tekstowych.
Najlepiej unikać łączenia ciemności z ciemnością. Jeśli np. Na ciemnoniebieskim tle wykonasz ciemnoczerwony lub ciemnozielony napis „Twoja wiadomość została wysłana” to po prostu nie będzie on widoczny.
Formularz musi zawierać wezwanie do działania.
Mały akcent, który zachęca odwiedzającego do podjęcia lub zakończenia działania. W naszym przypadku wyślij wiadomość ze strony!
Lepiej też podświetlić przycisk kontrastowym kolorem. Wraz z wezwaniem do działania sprawi, że będzie on widoczny i przyciągnie uwagę odwiedzającego.
Forma powinna być łatwa do złożenia.
Tak więc formularz jest łatwy do znalezienia, ma ładny wygląd i jest łatwy do wypełnienia. Co jeszcze?
Pamiętaj, aby poprosić programistów o dodanie krzyżyka do formularza, abyś mógł go zamknąć. Lub skonfiguruj automatyczne składanie formularza po jego wypełnieniu.
Wydaje się, że to drobiazg, ale ogólny obraz może się zepsuć.
Na przykład użytkownik zostawił żądanie w witrynie i chce wrócić do przeglądania witryny. ALE! Formularz wisi, nie znika, nie jest jasne, jak go zamknąć. Albo inna opcja - gość zmienił zdanie na temat pisania aplikacji i postanowił zadzwonić do siebie. Może się to okazać nieprzyjemne.
Konfigurowanie wiadomości zwrotnej.
Coś w tym stylu…
Osoba, która wysłała wiadomość, chce mieć pewność, że jej wiadomość zostanie przez Ciebie odebrana i przejrzana. Technicznie rzecz biorąc, ustawienie automatycznego ostrzeżenia nie zajmie dużo czasu, ale wzmocni pewność odwiedzającego, że jego wiadomość nie pozostanie bez odpowiedzi. Jest to zwykle używane w tych formularzach, w których podczas wypełniania musisz podać swój adres e-mail. Jednak nowoczesne usługi pozwalają ustawić automatyczne powiadomienia SMS-em.
Zreasumowanie
Jest wiele subtelności i innych szczegółów: możesz eksperymentować z kształtem i projektem, możesz dodać dyskretną grafikę na ten temat itp. Ale podstawowe kryteria się nie zmieniają. Do wszystkiego, co zostało powiedziane powyżej, chciałbym dodać duże, ale ważne życzenie - okresowo sprawdzać działanie formularzy opinii na stronie. Błędy techniczne nie powinny być przeszkodą w Twoim biznesie!
