Jak utworzyć formularz kontaktowy HTML5 / CSS3 oparty na Ajax
Formularz kontaktowy jest śmiertelnie niezbędny dla każdej strony internetowej, ponieważ działa jako komunikator, który przekazuje opinię lub zapytania użytkowników do webmastera. W sieci pojawiły się niezliczone formularze kontaktowe, ale niestety większość z nich nie wyjaśnia ci wewnętrznych części roboczych, więc tutaj znajduje się szczegółowy samouczek, który nauczy Cię budowania zaawansowanego formularza kontaktowego od podstaw w oparciu o technologię pop, HTML5 i CSS3.
Biorąc pod uwagę charakter internetowego formularza kontaktowego do poczty e-mail, musimy także zanurkować w dwóch oddzielnych polach aplikacji, które są kodem zaplecza PHP do wysyłania wiadomości e-mail i funkcji jQuery dla bogatego interfejsu użytkownika. Na koniec pozostanie nam w pełni dynamiczny i funkcjonalny formularz kontaktowy napisany z myślą o późniejszym dostosowaniu.
Zacznij teraz, aby zbudować własny zaawansowany formularz kontaktowy!
Skrót do:
- Demo - Uzyskaj podgląd tego, co budujesz
- Pobierz - Pobierz wszystkie pliki (php + css)
Strukturyzacja aplikacji
Aby rozpocząć, potrzebujesz pewnego rodzaju serwera WWW do pracy. Jeśli używasz komputera z systemem Windows, WAMP jest prawdopodobnie najlepszą opcją. Użytkownicy komputerów Mac mają podobny program o nazwie MAMP, który jest równie łatwy w instalacji.
Pakiety te skonfigurują lokalny serwer na twoim komputerze z pełnym dostępem do PHP. Alternatywnie, jeśli posiadasz miejsce na serwerze lub masz pełny dostęp do serwera w zdalnej lokalizacji, możesz go użyć. Nie będziemy potrzebować żadnych baz danych MySQL, co powinno trochę uprościć.
Po skonfigurowaniu serwera utwórz nowy folder do przechowywania aplikacji. Możesz nazwać to, co chcesz, ponieważ nie jest szkodliwe lub nawet związane z produktem końcowym. Struktura folderów zostanie użyta podczas uzyskiwania dostępu do plików w przeglądarce internetowej. Prostym przykładem może być http: //localhost/ajaxcontact/contact.php
Zbudujmy nasze pliki!
Będziemy pracować tylko w 2 plikach podstawowych. Najpierw potrzebujemy rdzenia .php plik do przechowywania nie tylko naszej logiki aplikacji, ale także znaczników HTML. Poniżej znajduje się przykładowy kod zaczerpnięty z naszego pliku startowego.
Formularz kontaktowy Ajax HTML5 / CSS z jQuery
Na początek napisaliśmy prostą sekcję nagłówka do naszego dokumentu. Obejmuje to ogólne Deklaracja Doctype dla HTML5 oraz niektóre elementy dokumentu HTML / XML. Nie są one dokładnie wymagane, ale ułatwią proces renderowania w starszych (i nowszych) przeglądarkach. Również nigdy nie boli oferowanie dodatkowych informacji.
Nieco dalej widzimy dwie linie tuż przed naszym tagiem zamykającym nagłówek. Pierwszy obejmuje nasz Skrypt jQuery z internetowego repozytorium kodów Google. Jest to wymagane, aby nasze dynamiczne błędy stron działały. Bezpośrednio poniżej mamy włączenie podstawowego Dokument CSS zawierające wszystkie nasze style stron.
W naszym korpusie dokumentów mamy kilka zawierające podziały wstrzymanie głównego formularza kontaktowego. Zawiera 3 elementy wejściowe dla nazwa użytkownika, adres e-mail, i wiadomość prywatna. Znaczniki HTML są dość standardowe i nie powinny zagłuszyć umysłu żadnego pośredniego programisty.
Twój e-mail został wysłany. Huzzah!
Tutaj mamy podstawowe Kod warunkowy PHP zagnieżdżony w kilku kontenerach stron. Sprawdza wartość zadaną zmiennej o nazwie
$ emailSenta jeśli jest równy true, wyświetli komunikat powodzenia.Wewnątrz naszego formularza HTML
The jeszcze instrukcja jest tym, co zostanie uruchomione po załadowaniu pierwszej strony, ponieważ początkowo nie będzie żadnych treści do wysłania. W środku znajdziemy a krótka kolekcja elementów formularza i a przycisk Prześlij.
Błąd podczas wysyłania formularza
Być może zauważyłeś, że jest inny blok warunkowy bezpośrednio po formularzu początkowym. Sprawdza, czy zmienna ma nazwę $ hasError i wyświetli komunikat o błędzie po potwierdzeniu. Ta metoda awaryjna to używany tylko, jeśli JavaScript jest wyłączony w przeglądarce, a zatem nie może generować błędów dynamicznych.
Cały czas możemy znaleźć indywidualne zmienne PHP sprawdzane. Oświadczenia są regulowane, jeśli formularz został już złożony z jedynie częściowymi danymi wypełnionymi. Jest to kolejny system rezerwowy, który wyświetla zawartość pól już wypełnionych - fajna sztuczka dla właściwego korzystania z użytkownika!
Bezpośrednio po wypełnieniu formularza jest niewielu Funkcje jQuery napisaliśmy. Porozmawiamy o tym najpierw, ponieważ są one domyślną implementacją na stronie pageload. Jeśli jednak przeglądarka nie akceptuje JavaScript, domyślnie możemy polegać na naszym kodzie PHP.
Otwarcie na jQuery
Najprostszym sposobem na rozpoczęcie rozmowy na ten temat byłoby zanurzenie się w nim. Podzielę poszczególne bloki wiersz po wierszu, dzięki czemu można zobaczyć, co skrypt sprawdza w rzeczywistości.
Jeśli jednak się zgubisz przejrzyj pliki kodu projektu. Wszystkie pełne bloki są wstępnie napisane i dobrze udokumentowane w witrynie jQuery. Aby rozpocząć, otwieramy nasz kod podobny do każdego innego:
Jeśli znasz wywołania zwrotne możesz zauważyć słupek() funkcja ma wbudowany zestaw parametrów. Wywołania zwrotne to mniejsze funkcje, które są wywoływane na odpowiedź danych z innej funkcji.
Na przykład, kiedy nasza jQuery.post () funkcja pomyślnie wykonuje e-mail, wywołuje własną funkcję wewnętrzną, aby wyświetlić animację przesuwną. Cały ten kod można napisać w swoim własnym bloku i przenieść w inne miejsce. Jednak ze względu na ten samouczek znacznie łatwiej jest napisać wywołanie zwrotne jako funkcję wbudowaną.
Przełamując nasz PHP
Ostatnią przeszkodą jest wspomnienie logika za naszym procesorem PHP. Jest to system zaplecza, który rzeczywiście będzie wywołać funkcję poczty i wyślij wiadomość. Cały kod użyty w poniższych przykładach można znaleźć bezpośrednio na górze naszego głównego .php plik, przed jakimkolwiek wyjściem HTML.
Istnieje również kilka wewnętrznych stylów, które odświeżają stronę. Nie ma tu nic nowego, więc nie będziemy wchodzić w żadne szczegóły. Jednakże styles.css dokument jest zawarty w kodzie projektu i zawiera podstawowe techniki CSS3.
Aby rozpocząć, otwieramy klauzulę PHP i sprawdzamy jeśli formularz został nawet złożony. The SŁUPEK zmienna “złożone” faktycznie było ukrytym polem wprowadzania dodanym na samym końcu naszego formularza. To przydatny sposób sprawdź, czy użytkownik nic nie przesłał jeszcze nie tracimy zasobów serwera.
Po tym mamy 3 oddzielne Jeśli inaczej sprawdzanie instrukcji, aby zobaczyć jeśli każde pole wejściowe zostało wypełnione. Nie uwzględnię tutaj każdego fragmentu logiki, ponieważ wszystkie są z natury bardzo powtarzalne. Aby jednak podać krótki przykład, załączyłem poniższą klauzulę weryfikacji e-mail:
// potrzebujesz poprawnego emaila jeśli (trim ($ _ POST ['email']) === ") $ emailError = 'Zapomniałeś wpisać swój adres e-mail.'; $ hasError = true; else if (! preg_match ("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+.[az]2,4$/i", trim ($ _POST ['email']))) $ emailError = 'Podałeś nieprawidłowy adres e-mail.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);PHP usunie wszystkie białe znaki z wartości i sprawdzi, czy cokolwiek pozostało. Jeśli tak, mamy szczegółowy Wyrażenie regularne (Regex) aby sprawdzić, czy ciąg wejściowy naszego użytkownika pasuje do wzorca wiadomości e-mail.
Z pewnością nie musisz rozumieć, jak to zrobić
preg_match ()działa, aby zbudować ten skrypt. Jest to przydatna funkcja określ zasady i wymagania dotyczące udanego typu danych, ale przekazuje zaawansowaną wiedzę programistyczną, aby naprawdę zrozumieć. W tym scenariuszu zapewniamy, że użytkownik wprowadza tylko kilka wybranych znaków, zawiera @ symbol, po którym następuje 2-4 znaki reprezentujący a Domena najwyższego poziomu.Po wszystkich naszych przejściach logicznych i nie zwracamy żadnych błędów, czas wysłać wiadomość! Ten fragment kodu ustawi poszczególne zmienne, aby dostosować naszą wiadomość e-mail i skonfigurować niektóre nagłówki poczty dla procesu.
// bez błędów błędy napiszmy teraz! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Przesłana wiadomość od'. $ nazwa; $ sendCopy = przycinanie ($ _ POST ['sendCopy']); $ body = "Nazwa: $ nazwa n e-mail: $ email n n Komentarze: $ comments"; $ headers = 'From:'. ' <'.$emailTo.'>” "r n". 'Odpowiedzieć do: ' . $ email; mail ($ emailTo, $ subject, $ body, $ headers); // ustaw wartość boolowską na TRUE $ emailSent = true;Jeśli zastanawiałeś się, w jaki sposób kod wykryje twój adres e-mail, jest to część do wypełnienia. Pierwsza zmienna w naszym zestawie jest zatytułowana
$ emailToi powinien zawierać którykolwiek adres e-mail, który otrzyma wiadomość.W naszym wnętrzu
$ ciałozmienna korzystamy znogranicznik, aby dodać nowe linie do wiadomości. To dodaje małe miejsca docelowe dla nazwisko nadawcy, adres e-mail, po nich następuje przerwa treść wiadomości. Oczywiście możesz spędzić czas na poprawianiu wyświetlacza, ale ta struktura działa dobrze.Wniosek
To zamyka nasz samouczek dotyczący zaawansowanego formularza kontaktowego. Jeśli chcesz stylizować swoje elementy w stosunku do moich, możesz sprawdzić mój przykład styles.css w kodzie projektu. Strona jest jednak na tyle uporządkowana, że można bardzo łatwo zaprojektować własny wygląd.
Możesz pobrać kod źródłowy i przyjrzeć się bliżej temu, co zrobiłem. Dobrze jest skorzystać z samouczka, ale bezpośredni dostęp do źródła projektu może być nieoceniony. Dodałem także krótki arkusz stylów, aby ułatwić dostosowanie, dzięki za widok!
