Formularz kontaktowy z Ajax
Jako, że poprzedni formularz kontaktowy cieszy się ogromną popularnością, postanowiłem zebrać wasze wszystkie prośby i uwagi do kupy i stworzyć wersję 2.0 mojego formularza kontaktowego wykorzystującego technikę Ajax, rozbudowując go dodatkowo o style Bootstrap’a.
Nowy formularz działa na tej samej zasadzie, co stary — wykorzystuje funkcję php_mail() — tak więc najpierw upewnij się, że Twój serwer ma tą funkcję włączoną. Najprościej wrzucić paczkę “bez edycji” ( pamiętaj, zeby zamienić email docelowy na swój ;) ) gdzieś na serwer i zobaczyć czy działa. Dla tych nieszczęśników, którzy mają ją wyłączoną mam dobrą i złą wiadomość — będzie wersja wykorzystująca SMTP, czyli taka, która działa na każdym serwerze, zła jest taka, że z braku czasu trochę na nią poczekacie :(
Co nowego?
- Jest oparty na bootstrapie, więc nie będziesz się musiał martwić się CSS’em
- Większa swoboda konfiguracji wysyłki wiadomości
- Usprawnione informowanie o błędnie wypełnionych polach
- Dodanie wyboru tematu wiadomości
- Dodanie checkboxa z możliwością wysłania kopii wiadomości do siebie
- Uproszczony mechanizm informacji zwrotnych
- Działają polskie znaki — nie trzeba doklejać kodu :P
Demo/download
[demo url=”http://demo.wojtek1150.com/BetterAjaxForm/"]DEMO[/demo][download url=”http://wojtek1150.com/?wpdmdl=2878"]DOWNLOAD[/download]
Wymagane pliki
W paczce znajdziesz wszystko co potrzebne, jednak nie wszystko z niej jest niezbędne do działania na pewno będzie Ci potrzebne:
- form.php
- jquery.scripts.js — w katalogu js
- styles.css — w katalogu css
Resztę dodajemy z zewnętrznych źródeł — możesz je również pobrać i przechowywać u siebie. Do sekcji head nad naszym pliczkiem css (aby Twój CSS nie został nadpisany) dodajemy sobie CSS bootstrapa:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">A do footera nad jquery.scripts.js wrzucamy jQuery. Dodałem też jquery-migrate, ale nie jest ono potrzebne:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>Kod
Jeśli chodzi o HTML to jedyne czego potrzebujemy to całego fieldseta:
<fieldset id="contact_form">
<div id="result"></div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Imię i nazwisko</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
<input type="text" class="form-control" name="name" placeholder="Wpisz proszę Imię i nazwisko" />
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Email</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></div>
<input type="email" class="form-control" name="email" placeholder="Twój adres email" />
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Telefon</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></div>
<input type="tel" class="form-control" name="phone" placeholder="Numer telefonu" />
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Temat</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-tag" aria-hidden="true"></span></div>
<select type="text" class="form-control" name="subject">
<option value="puste" selected>W jakiej sprawie?</option>
<option value="Pierwszy temat">Pierwszy temat wiadomości</option>
<option value="Drugi temat">Drugi temat wiadomości</option>
<option value="Trzeci temat">Trzeci temat wiadomości</option>
</select>
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Wiadomość</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></div>
<textarea class="form-control" name="message" placeholder="Wiadomość do przesłania" /></textarea>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="checkbox">
<label>
<input type="checkbox" name="copy"> Wysłać Ci kopię?
</label>
</div>
</div>
</div>
<div class="form-group">
<button id="submit_btn" type="submit" class="btn btn-primary" aria-label="Left Align"><span class="glyphicon glyphicon-send" aria-hidden="true"></span>Wyślij</button>
</div>
</fieldset>Ważne by zachować atrybut name w polach, oraz ID “submit_btn” w przycisku wysyłania. Do tych rzeczy będzie się odwoływać nasz formularz. Dobrze też zostawić sobie contact_form w ID fieldsetu. Dodając nowe pola pamiętajmy o unikalności atrubutu name, żeby wszystko dobrze działało. Więcej zabawy jest z kodem JavaScript. Jednak mamy tam wszystko zakomentowane, co nam potrzeba. Najpierw deklarujemy wszystkie pola:
//Przypisujemy zmienne
var fieldName = $('input[name=name]');
var fieldMail = $('input[name=email]');
var fieldPhone = $('input[name=phone]');
var fieldSubject = $('select[name=subject]');
var fieldMessage = $('textarea[name=message]');Działa to tak, że tworzymy sobie zmienną, do której przypisujemy pole z formularza. Następnie pobieramy wartości z tych inputów (oraz naszego checkboxa):
//Pobieramy dane
var user_name = $(fieldName).val();
var user_email = $(fieldMail).val();
var user_phone = $(fieldPhone).val();
var user_subject = $(fieldSubject).val();
var user_message = $(fieldMessage).val();
//CHECKBOX OD KOPII DLA KLIENTA
var send_copy = $('input[name=copy]').val();Poniżej mamy prostą walidację, dla pól wymaganych, która nam doda style dla pustych pól. Tak więc nie muszą być tam wszystkie pola. Jest to dość proste, jeśli nie — zapraszam do komentarzy :) — tymczasem idziemy dalej. Pod komentarzem Dane do wysłania kryje się taka linijka:
post_data = {'userName':user_name, 'userEmail':user_email, 'userPhone':user_phone, 'userSubject': user_subject, 'userMessage':user_message, 'sendCopy':send_copy};Tutaj trzeba podać już wszystkie pola, gdyż one są przesyłane do naszego pluginu. Należy pamiętać o odpowiednich nazwach. Pierwsza zmienna w tablicy to nazwa zmiennej pod jaką zostanie wysłana zawartość pola, druga to to nasze pole (pamietaj, że musza to być dane, nie pola, wiec wpisuj nazwy zmiennych, do których przypisaliśmy wartości poprzez funkcję val());
Poniżej ważną rzeczą jest też nazwa pliku do którego wysyłamy dane. Jeśli zmieniasz lokalizację plików lub ich nazwy, pamiętaj aby zastąpić form.php ścieżką do pliku. Tutaj tej ścieżki nie ma ze względu na to, że pliczek znajduje się w tym samym katalogu co plik html, nie javascript — więc jeśli nasz form.php jest w katalogu libs należy podać ścieżkę libs/form.php.
Dalej jedynie co mamy do edycji to sekcję dodatkowej walidacji, która pokoloruje nam pola, które sprawdzimy za pomocą wtyczki. Omówię to przy php’ie.
PHP
Ok, mamy wszystko już po stronie użytkownika, czas pobrać te dane, przetrawić je i wysłać (bądź nie) wiadomość i zwrócić odpowiedni komunikat użytkownikowi. Postarałem się, aby wszystko było zapisane możliwie jak najprościej i opisane bardzo dokładnie, więc omówię tylko sprawę danych zwrotnych, o których wspomniałem przed chwilą. W linijkach od 63 do 79 mamy skrypt odpowiadający za dodatkową walidację pól. Można to również było sprawdzić za pomocą javaskryptu, ale z pewnych względów — tą zagadkę pozostawię Ci do rozwiązania ;) — zrobiłem to w PHP. Weźmy sobie za przykład ten fragment:
$output = json_encode(array('type'=>'error', 'text' => $TXT_Name, 'field' => 'input[name=name]'));Zwracamy nim tablicę z pewnymi wartościami w przypadku niespełnienia danej regółu, pierwszy to oczywiście, informacja, że jest to błąd, drugi — text — zwraca zmienną do której jest przypisana wiadomość zwrotna (domyślnie jest to “Imię jest za krótkie!”), w konfiguracji na górze można sobie to zmienić. Trzecią jest nazwa pola, a raczej nazwa zmiennej, do której jest przypisane pole, do którego ma być przypisany ten błąd. Przypominam:
$(response.field).after(error_html).parent().addClass('has-error');W skrócie zamiast response.field będziemy mieli input[name=name] i to pole zostanie pokolorowane na czerwono itd.
Poniżej mamy konfigurację wysyłki wiadomości, czyli jak ma wyglądać nasz email. Wszystko jest opisane w samym pluginie, więc nie będę się tutaj rozdrabniał. Tak więc zapraszam do pobierania i pozostawiania komentarzy. Do usłyszenia ;)
[wpdm_package id=2878 template=”link-template-default-wdc”]
