W odpowiedzi na takie pytania pierwsze, co przychodzi na myśl: „Wygodny i działający”. I to jest generalnie logiczne. W końcu inaczej, jaki jest sens posiadania na stronie piękny kształt informacja zwrotna to nie jest używane? Ale najpierw najważniejsze.
Na początek, dlaczego potrzebujemy formularzy opinii na stronie? Właściciel witryny powinien 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 właściwości i cech, cen, aw apogeum na składaniu 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 zadziała lub okaże się dla odwiedzającego niewygodny, może on zrezygnować z kontaktu z Tobą, a co za tym idzie z pomysłu zostania Twoim prawdziwym klientem.
To, jak regularnie i aktywnie wykorzystywane są formularze zwrotne w Twojej witrynie, powie o Twojej witrynie nie gorzej niż statystyki odwiedzin.
To logicznie prowadzi do wniosku, który został już wyrażony powyżej - formularze zwrotne powinny być wygodne i działać!
Warto zauważyć, że druga część tego wniosku zależy nie tylko od poprawności programowania. Technicznie formularz może działać idealnie, ale operator musi szybko reagować na wezwania pochodzi z serwisu. W przeciwnym razie formularze zwrotne będą bezużyteczne. Jeśli operator oddzwoni do odwiedzającego w ciągu dwóch dni, potrzeba zamówienia produktu lub usługi od osoby może po prostu zniknąć.
Formularze zwrotne mogą być bardzo różnorodne („Zamów oddzwonienie”, „Zadaj pytanie”, „Zostaw opinię”, „Wypełnij formularz zamówienia”, „Skontaktuj się z kierownikiem” itp.) wykorzystywany do różne zadania. 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 do dalszej interakcji z nim.
Przypomnijmy sobie kilka proste zasady, które należy wziąć pod uwagę przy opracowywaniu i umieszczaniu FOS na stronie.
Formularz powinien być umieszczony w taki sposób, aby odwiedzający mógł go łatwo znaleźć.
Umieść formularz w widocznym miejscu - tak, aby odwiedzający Twoją witrynę nie musiał trudzić się odnalezieniem formularza opinii pośród wielu różnych elementów na stronie lub przewijać stronę w nieskończoność.
Tradycyjnie formularze można umieścić w nagłówku serwisu lub na stronie kontaktowej.
Opcjonalnie możesz zduplikować kluczowe formularze w stopce, aby nie zmuszać gości, którzy obejrzeli całą stronę, do ponownego przewijania w górę:
Jeśli istnieją strony z produktami lub usługami, które podlegają oferta specjalna a odwiedzający może go otrzymać poprzez zamówienie online, szybką rozmowę telefoniczną lub formularz zamówienia na tej stronie.
Dodatkowo pozwoli „zahaczyć” odwiedzającego, który jest już zainteresowany produktem lub usługą. Odwiedzający spojrzał na opis, gwarancje, ceny, zdecydował, że produkt lub usługa mu odpowiada, a teraz oferujemy mu natychmiast, bez opuszczania tej strony, pozostawienie prośby o zamówienie tej usługi.
Formularz powinien wyświetlać się i działać równie poprawnie na wszystkich urządzeniach i we wszystkich przeglądarkach.
Lub krótko — sprawdź formularze opinii dotyczące różnych przeglądarek i platform w Twojej witrynie. Formularz może być widoczny i łatwy do wypełnienia z laptopa lub komputer stacjonarny, ale na tablecie pole wprowadzania 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 przejrzysty.
Co to znaczy? Forma nie może być duża liczba pola lub etapy wypełniania. O ile oczywiście nie jest to bezwzględnie konieczne. Ludzie dążą do prostoty, nie chcą spędzać dużo czasu na sortowaniu i wypełnianiu dziesięciu tysięcy pól.
Jeśli usługa polega na uzyskaniu dość szczegółowych informacji, uprość zadanie klientowi (o ile jest to oczywiście możliwe). Zaznacz kilka kluczowych pól, które musisz wypełnić:
Wygląda wygodniej niż np.:
Lepiej oddzwonić i ustnie wyjaśnić wszystko, czego potrzebujesz, ale ułatwić odwiedzającemu wypełnienie formularza. A tym samym zwiększ szanse, że się z Tobą skontaktuje!
Kontynuując temat przejrzystości, zwróć uwagę, że formularz ma tytuł - „Zamów oddzwonienie”, „Zamów wezwanie na mierniczego”, „Zamów bezpłatną konsultację” itp. Lepiej zduplikować ten sam nagłówek w powiadomieniach e-mail, które będą przychodzić z formularza na Twoją pocztę. Wtedy nie tylko odwiedzający Twoją witrynę nie będzie zdezorientowany i nie zapomni wniosku o to, co dokładnie opracowuje. Ale ty sam otrzymasz jasne dane, jakie informacje były interesujące dla gościa, który opuścił aplikację. Pomoże Ci to szybko zorientować się w dalszej komunikacji z odwiedzającym i poprawnie zbudować dialog.
Formularz powinien mieć przyjemny i praktyczny design.
Wszystkie pola muszą być wyraźnie widoczne. Jeśli w projektowaniu formy stosuje się wiele kolorów, warto zwrócić uwagę na to, aby nie było ich za dużo, aby się ze sobą łączyły i nie były przesadnie jaskrawe. Osoba wypełniająca formularz nie powinna nadwyrężać wzroku. To samo dotyczy dopasowywania kolorów dla wiadomości tekstowych.
Lepiej unikać połączenia ciemności z ciemnością. Jeśli np. na ciemnoniebieskim tle zrobisz ciemnoczerwony lub ciemnozielony napis „Twoja wiadomość została wysłana”, po prostu nie będzie on widoczny.
Formularz powinien zawierać wezwanie do działania.
Mały dotyk, który zachęca odwiedzającego do podjęcia lub zakończenia działania. W naszym przypadku wyślij wiadomość z serwisu!
Lepiej też podświetlić guzik kontrastowym kolorem. Wraz z wezwaniem do działania sprawi to, że będzie się wyróżniać i przyciągnie uwagę odwiedzającego.
Forma powinna łatwo się rolować.
Tak więc formularz jest łatwy do znalezienia, ma ładny wygląd i jest łatwy do wypełnienia. Co jeszcze?
Nie zapomnij poprosić programistów o dodanie krzyżyka do formularza, abyś mógł go zamknąć. Lub ustaw automatyczne składanie formularza po jego wypełnieniu.
Wydaje się, że to drobiazg, ale ogólny obraz może zepsuć.
Na przykład użytkownik zostawił prośbę w witrynie i chce wrócić do przeglądania witryny. ALE! Formularz zawiesza się, nie znika, nie jest jasne, jak go zamknąć. Lub inna opcja - gość zmienił zdanie na temat pisania aplikacji, ale postanowił sam zadzwonić. Może się to okazać nieprzyjemne.
Ustawienie komunikatu odpowiedzi.
Coś w tym stylu…
Osoba, która wysłała wiadomość, chce mieć pewność, że jej wiadomość zostanie przez Ciebie odebrana i rozważona. Technicznie ustawienie automatycznego powiadomienia nie zajmie dużo czasu, ale wzmocni pewność odwiedzającego, że jego wiadomość nie pozostanie bez odpowiedzi. Jest to zwykle używane w formularzach, które wymagają podania adresu e-mail podczas wypełniania. Jednak nowoczesne usługi pozwalają na ustawienie automatycznych powiadomień SMS-em.
Istnieje wiele subtelności i innych szczegółów: możesz eksperymentować z kształtem i projektem, możesz wykończyć dyskretną grafikę na ten temat itp. Ale podstawowe kryteria się nie zmieniają. Do wszystkich powyższych chciałbym dodać duże, ale ważne życzenie - okresowo sprawdzaj działanie formularzy zwrotnych na stronie. Awarie techniczne nie muszą być przeszkodą w działaniu Twojego biznesu!
Dzień dobry przyjaciele! W tym artykule powiem używając php i ajax. Skonfiguruj i zainstaluj formularz opinii bez ponownego ładowania do Twojej witryny. Nagrałem też szczegółowy samouczek wideo na ten temat.
W rzeczywistości regularnie otrzymuję wiadomości z prośbą o poinformowanie mnie jak utworzyć formularz opinii bez ponownego ładowania jak zrobić formularz subskrypcji bez przeładowywania jak założyć taki formularz na stronie i wiele innych podobnych pytań.
Od razu muszę powiedzieć, że jest to dość skomplikowany temat sam w sobie, ale trzeba go opowiedzieć w taki sposób, aby nawet osoby, które nie są w ogóle obeznane z programowaniem w PHP i JavaScript (ajax), były w stanie to zrozumieć i przyswoić. Ten artykuł nie jest przeznaczony dla początkujących, a jeśli nie jesteś dobrze zorientowany w HTML i w ogóle nie znasz PHP, trudno będzie ci to rozgryźć.
Pisząc ten artykuł, przygotowując się kod źródłowy formularze i nagranie lekcji wideo Spędziłem cały dzień pracy. Ale myślę, że nie zrobiłem tego na próżno, a ten artykuł bardzo ci się spodoba.
Zobaczmy więc, jak nasz będzie wyglądał i działał.
Klikając przycisk „Prześlij” powyżej formularz zwrotny pojawi się monit "Wiadomość jest przetwarzana...".
Jeśli odwiedzający Twoją witrynę nie wypełnił formularza lub podał nieprawidłowe dane, pojawi się komunikat o błędzie.
Jeśli wszystko zostało wypełnione poprawnie, to tekst z formularze zwrotne zostanie wysłany na Twój adres e-mail, a osobie zostanie wyświetlony komunikat o pomyślnym wysłaniu.
Cóż, teraz przyjaciele, przejdźmy do kodu.
Kod HTML formularza opinii bez ponownego ładowania będzie wyglądać tak:
HTML to szkielet naszego formularza. Udekorujmy go trochę, dodając kilka stylów CSS:
SidebarForm (tło: #f6f6f6; box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; width: 420px;) #cor5 (border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;) .sidebarForm h4 (czcionka: 14px Verdana; kolor: #333333; wyrównanie tekstu: do lewej; dopełnienie: 10px 10px 0 10px; ) .sidebarForm label (czcionka: 12px Verdana; kolor: #333; dopełnienie: 10px; ) .sidebarForm .input (szerokość: 170px; wysokość: 20px; przepełnienie: ukryte; tło: białe; obramowanie: pełne 1px #DFE2E5 ;margines: 5px 0 10px 10px;box-shadow: 0 0 5px #ccc;-webkit-box-shadow: 0 0 5px #ccc;-moz-box-shadow: 0 0 5px #ccc;) .sidebarForm .input dane wejściowe (szerokość: 165px; wysokość: 26px; tło: białe; margines: -3px 0 0 -5px; dopełnienie: 0px 8px; obramowanie: brak; tło: przezroczyste; ) .sidebarForm .textarea (wysokość: 70px; szerokość: 320px; przepełnienie : ukryte; tło: białe; obramowanie: pełne 1px #DFE2E5;margines: 5px 0 10px 10px;box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; ) .sidebarForm .textarea textarea ( szerokość: 316px; wysokość: 66px; tło: białe; obramowanie: brak; zmiana rozmiaru: brak; ) .sidebarForm button ( obramowanie: 2px #ccc solid; szerokość: 150px; wysokość: 25px; czcionka: 12px Verdana; grubość czcionki: 700; kolor: #FFFFFF; kolor tła: #cc0000; wypełnienie na dole: 2px; margines: 5px 0 15px 135px;)
Informacje z naszego formularze zwrotne po kliknięciu w przycisk „Wyślij” jest wysyłana na serwer (do handlera) w tle, bez przeładowywania strony w przeglądarce. Odpowiada za to kod JavaScript:
$(document).ready(function() ( // Formularz zwrotny ................................/ varregVr22 = "
Wiadomość jest przetwarzana...
Dziękuję, "; var wynikStat = "! Twoja wiadomość została wysłana!
"; var oll = (messageResp + pozName + resultStat); if(response == 1)( $("#loadBar").html(oll).fadeIn(3000); $("# pozNazwa").val(" "); $("#posEmail").val(""); $("#postText").val(""); ) else ( $("#loadBar").html(odpowiedź).fadeIn(3000 ); ) )); zwróć fałsz; )); ));
W module obsługi musimy sprawdzić, co wysłał odwiedzający, a jeśli wszystko jest w porządku, wysłać list do administratora witryny. I poinformuj gościa, że jego list został pomyślnie wysłany! Piszemy kod php:
header("Typ zawartości: text/html; charset=utf-8"); //************************************************ ** if( empty($_POST["js"]))( $log ==""; $error="no"; //flaga błędu $posName = addlashes($_POST["posName"]); $posName = htmlspecialchars( $posName); $posName = stripslashes($posName); $posName = trim($posName); $posEmail = addlashes($_POST["posEmail"]); $posEmail = htmlspecialchars($posEmail); $posEmail = stripslashes( $posEmail); $posEmail = trim($posEmail); $posText = addlashes($_POST["postText"]); $posText = htmlspecialchars($posText); $posText = stripslashes($postText); $posText = trim( $posText); //Sprawdź, czy nazwa jest poprawna if(!$posName || strlen($posName)>20 || strlen($posName) Pole \"Twoje imię\" jest niepoprawnie wypełnione (3- 15 znaków)!"; $error ="yes"; ) //Sprawdź adres e-mail funkcja isEmail($posEmail) ( return(preg_match("/^[-_.[:alnum:]]+@((([[ :alnum:]]|[[ :alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am |an|ao|aq|ar |arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs |bt|bv|bw|by |bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy |cz|de|dj|dk |dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd |ge|gf|gh|gi |gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il |in|info|int|io |iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc |li|lk|lr|ls |lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu |muzeum|mv|mw|mx |my|mz|na|nazwa|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe |pf|pg|ph|pk |pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh |si|sj|sk|sl |sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|do|tp|tr |tt|tv|tw|tz |ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm |zw)$|((? |||)\.)(3)(?|||))$/i" ,$posEmail)); ) if($posEmail == "") ( $log .= "
Błąd!
Kodeks zawiera niezbędne komentarze i wyjaśnienia. Więcej szczegółów omówię w poniższym filmie.
Jak widzisz formularz opinii bez przeładowywania strony gotowy. Możesz go modyfikować do swoich potrzeb, dodawać nowe pola, ustawiać captcha itp. Ponadto na podstawie kodu tego formularza można tworzyć formularze zapisów, formularz dodawania komentarzy itp. Ich zasada działania jest taka sama.
Jak ci się podoba artykuł? Mam nadzieję, że temat: Jak utworzyć formularz opinii bez przeładowywania strony» był dla Ciebie interesujący i znalazłeś tutaj coś przydatnego dla siebie. Nie zapomnij zasubskrybować aktualizacji mojej strony przez e-mail.
Uwaga! Zapraszam wszystkich do mojego
Cześć chłopaki. Seryoga jest w kontakcie. Wiem, że dawno nie pisałem - biznes, biznes ... A teraz, szczerze mówiąc, nie ma absolutnie czasu. I zrobimy formę nie według mojej lekcji, ale według lekcji mojego przyjaciela - Krotowa Romana.
Utwórz formularz opinii dla witryny będziemy konsekwentni. Dlatego ten artykuł zostanie podzielony na 3 lekcje.
Po prostu opakujemy go w HTML i stworzymy moduł obsługi PHP do wysyłania e-maili. Wszystko będzie sekwencyjne, od zera do wyniku. Abyś wszystko zrozumiał i mógł samodzielnie osadzić niezbędne pola.
Roma pokaże ci, jak wykonać przesyłanie Ajax. Czyli wyślij dane z formularza bez przeładowywania strony. Co, jak widzisz, jest bardzo wygodne i nowoczesne.
Cóż, w trzecim (lekcja w przygotowaniu - link pojawi się tutaj później), wprowadzimy kontrolę poprawności. Nie za pomocą przeglądarki, ale za pomocą specjalnych skryptów.
Zwracając uwagę! Aby formularz działał, konieczne jest, aby Twój hosting wspierał PHP.
Jeśli masz jakieś pytania dotyczące niezrozumiałych momentów w pisaniu obsługi formularza do wysyłania listów, możesz je zadać w komentarzach.
Oto, co ostatecznie stało się w pliku index.php
Przypominam, że zawiera prosty formularz zwrotny. Bez dekoracji lub innych dzwonków i gwizdków. Aby nie przeciążać Cię zbędnymi informacjami.
Zawartość pliku upload.php:
Tutaj przeprowadzana jest podstawowa kontrola kompletności formularza, aby nie wysyłać pustych wiadomości. Jeśli wszystko jest „dobrze” – list zostaje wysłany. I następuje przekierowanie do strony-powiadomienia o pomyślnym wysłaniu listu.
If (!empty($_POST["nazwa"]) AND !empty($_POST["email"]) AND !empty($_POST["wiadomość"])) ( $headers = "From: Roman Krotov ". " Odpowiedzieć do: [e-mail chroniony]" . "X-Mailer: PHP/" . phpversion(); $theme = "Nowa wiadomość z witryny"; $letter = "Dane wiadomości:"; $letter .=" "; $letter .="Nazwa: ". $_POST["nazwa"]; $letter .=" E-mail: ".$_POST["email"]; $letter .=" Telefon: ".$_POST["telefon"]; $letter .=" Wiadomość: " .$_POST["wiadomość"];if (mail(" [e-mail chroniony]", $theme, $letter, $headers))( header("Lokalizacja: /testform/thankyou.php"); ) else ( header("Location: /testform"); ) ) else ( header("Location: / formularz testowy"); )
Cóż, nie widzę powodu, aby publikować tutaj samą stronę powiadomień. Tam podstawowa struktura Dokument HTML i tylko jeden wiersz tekstu.
W procesie promocji serwisu, obok badania statystyk odwiedzin, szczególne znaczenie mają informacje o serwisie pochodzące od samych odwiedzających. Jeden z najbardziej proste sposoby uzyskaniem takich informacji jest umieszczenie w serwisie strony z formularz zwrotny. Odwiedzający zostawia wiadomość, która zostanie do Ciebie wysłana E-mail lub inny wskazany przez Ciebie. W takim przypadku odwiedzający nie musi korzystać ze swojego program pocztowy, nie musi nawet mieć własnego e-maila.
Najprostszy przykład takiego formularza pokazano na rysunku 1. (To jest doskonale działająca próbka i możesz jej użyć do wysłania mi podziękowania).
Aby zamieścić taką formę opinii na stronie wystarczy podstawowa wiedza o HTML oraz umiejętność obsługi dwoma poleceniami - Kopiuj I Wstawić. Rozważ sekwencję działań w celu utworzenia formularza opinii (ryc. 1) na stronie HTML witryny.
1. Sprawdź to plan taryfowy Twój host (biuro, w którym hostowana jest Twoja witryna) obsługuje PHP. Jeśli nie, najprawdopodobniej będziesz musiał zapłacić dodatkowo, aby przejść na inną taryfę, która obsługuje ten sam PHP. Nie możesz szukać znaczenia tego skrótu, ponieważ nie potrzebujesz znajomości PHP.
2. Wybierzmy stronę, na której chcemy umieścić formularz zwrotny i wklejmy w odpowiednie miejsce poniższy kod:Jak widać, cały formularz jest tworzony przez tag z atrybutami akcja=poczta.php(wskazanie strony serwisu, na której znajduje się skrypt do przetwarzania wprowadzonych danych) i metoda=post(sposób przesyłania danych na serwer). Oddzielne linie utworzone przez tag z dobrze zdefiniowanymi atrybutami. Lokalizacja poszczególnych elementów formularza, tekstu, czcionek itp. Możesz zmienić zgodnie z projektem swojej witryny. w tagu . Opcje " kol" I " wydziwianie» odpowiadają za szerokość i wysokość pola tekstowego. Możesz ustawić parametry, jak chcesz. Powinieneś skończyć z czymś takim jak zrzut ekranu poniżej.
a w nim wprowadź kod przycisku z następującymi parametrami: wysłać wiadomość . Powinieneś uzyskać podobny wynik, jak pokazano na zrzucie ekranu.
Połącz style css Do HTML można zrobić na dwa sposoby:
Plik styl.css podłączony wewnątrz tagu za pomocą skryptu . W przypadku, gdy plik stylu nie znajduje się w tym samym folderze, co główny plik html, musisz podać ścieżkę do niego. W naszym pliku stylu każdy element ma oznaczenie. Jeśli chcesz, możesz zmienić parametry dla siebie, kierując się jedynie podstawowymi umiejętnościami programistycznymi.
Jak już wspomniałem, skrypt PHP Odpowiedzialny za wykonanie formularza zwrotnego. Jednak, aby mniej więcej zrozumieć, jak działa język PHP, musisz przeczytać dużą ilość literatury i spędzić przyzwoitą ilość godzin na ćwiczeniach. Dlatego podobnie jak w przypadku css, dostarczymy Ci gotowy plik ze skryptem php, który dopiero dołączymy do dokumentu z formularzem.
W przeciwieństwie do pliku styl.css, plik ze skryptem php jest dołączony we właściwościach samego formularza. Zacznijmy po kolei:
Po wykonaniu wszystkich kroków na wyjściu otrzymasz taki prosty, schludny formularz opinii
