Jak zbudować responsywny formularz kontaktowy z PHP

Formularze kontaktowe są powszechnie używane w aplikacjach internetowych, ponieważ pozwalają odwiedzającym witrynę komunikować się z właścicielem strony internetowej. W przypadku większości stron internetowych responsywne formularze kontaktowe można łatwo uzyskać z różnych rodzajów urządzeń, takich jak komputery stacjonarne, laptopy, tablety i telefony komórkowe.

W tym samouczku wdrażany jest responsywny formularz kontaktowy, a przesłane dane są wysyłane jako wiadomość e -mail za pomocą PHP. Pakiet PHPMailer jest używany w tym samouczku, aby wysłać wiadomość kontaktową jako wiadomość e -mail do właściciela witryny; Trzy pliki służą do wysyłania wiadomości e -mail z LocalHost za pomocą PHP:

1. Phpmailautoload.php
2. klasa.phpmailer.php
3. klasa.SMTP.php

Możesz pobrać te pliki z https: // github.com/phpmailer/phpmailer/.

Tworzenie responsywnego formularza kontaktowego

Użyj poniższego kodu, aby utworzyć indeks.plik HTML w /var/www/html/php folder do zaprojektowania responsywnego formularza kontaktowego. Formularz będzie zawierać cztery pola: Nazwa, E-mail, Powód kontaktu I Wiadomość.

indeks.html

FORMULARZ KONTAKTOWY

Pełne imię i nazwisko*







E-mail*







Powód kontaktu*







Wiadomość*

Uruchom następujący adres URL z dowolnej przeglądarki, aby wyświetlić formularz kontaktowy:
http: // localhost/php/contactform/

Utwórz plik JS do sprawdzania poprawności i przesyłania formularza

Użyj poniższego kodu, aby utworzyć plik JS o nazwie kontakt.JS Aby potwierdzić formularz kontaktowy. Tutaj wszystkie pola są obowiązkowe, a pole e -mail musi zawierać prawidłowy adres e -mail. Jeśli WYŚLIJ WIADOMOŚĆ przycisk jest naciskowy, gdy jest puste pole lub nieprawidłowy adres e -mail, wówczas zostanie wyświetlony komunikat o błędzie. Jeśli formularz zostanie poprawnie zatwierdzony, dane formularza zostaną przesłane do kontakt.php używając Ajax () metoda. Jeśli dane z formularza kontaktowego zostaną pomyślnie wysyłane, zostanie wydrukowany komunikat sukcesu; W przeciwnym razie. Komunikat o awarii zostanie wydrukowany jako alert.

kontakt.JS

$ (funkcja ()
// Sprawdź błędy walidatora
$ („#cform”).Validator ();
// Po przesłaniu formularza
$ („#cform”).on („prześlij”, funkcja (e)
// jeśli walidator nie zapobiega przesłaniu formularza
Jeśli (!mi.isdefaultPreventent ())
var url = "kontakt.php ";
// Publikuj wartości w tle URL skryptu
$.Ajax (
Typ: „Post”,
URL: URL,
Dane: $ (to).serialize (),
Sukces: funkcja (dane)

var succesealert = '×' + dane + '';
$ ('#msg').HTML (Successalert);

);
zwrócić fałsz;

)
);

Utwórz plik PHP, aby odczytać dane z formularza i wyślij wiadomość e -mail

Użyj poniższego kodu, aby utworzyć plik PHP wywołany kontakt.php Aby odczytać dane z formularza i wysłać wiadomość e -mail z danymi za pomocą pakietu PhPmailer. Tutaj serwer SMTP konta Gmail służy do wysyłania wiadomości e -mail. Musisz włączyć Mniej bezpieczna aplikacja Opcja wysyłania wiadomości e -mail za pomocą Gmaila. Ustaw swój adres Gmail jako Nazwa użytkownika i twoje hasło jako Hasło w kodzie. Użyj ważnego adresu e -mail odbiornika, aby zastąpić „Adres e -mail odbiornika”. Jeśli uwierzytelnianie zostanie wykonane prawidłowo, e -mail zostanie wysłany pomyślnie. Wiadomość przekazywania sukcesu lub porażki zostanie zwrócona do pliku JS z pliku PHP.

kontakt.php

// zawiera niezbędny skrypt
Wymagaj „phpmailautoload.php ';
// Utwórz obiekt
$ mail = new phpmailer ();
// Włącz SMTP
$ Mail-> Issmtp ();
$ mail-> smtpauth = true;
// Włącz bezpieczny transfer
$ mail-> smtpsecure = 'tls';
// $ Mail-> smtpautotls = false;
// Ustaw nazwę hosta SMTP
$ Mail-> host = 'SMTP.Gmail.com ';
// Ustaw port SMTP
$ poczta-> port = 587;
// Skonfiguruj następującą konfigurację uwierzytelniania SMTP
$ poczta-> smtpoptions = tablica (
„SSL” => tablica (
„Verify_Peer” => Fałsz,
„Verify_peer_name” => false,
„Zezwalaj_self_signed” => true
)
);
// Ustaw swój adres e -mail Gmail jako nazwa użytkownika SMTP
$ poczta-> nazwa użytkownika = „Adres Gmaila”;
// Ustaw swoje hasło e -mail jako hasło SMTP
$ poczta-> hasło = 'gmail p';
// Ustaw adres nadawcy
$ Mail-> setfrom ($ _ Post ['e-mail'], $ _POST ['Nazwa']);
// Ustaw adres odpowiedzi
$ mail-> addRePlyTo ($ _ Post ['e-mail']);
// Ustaw adres odbiorcy
$ Mail → AddAddress („Adres e -mail odbiornika”);
// Ustaw temat e -maila
$ poczta-> tematy = $ _POST [„powód”];
// Ustaw wiadomość e -maila
$ poczta-> body = $ _POST ['message'];
// funkcja send (), aby wysłać wiadomość e -mail
if ($ mail-> send ())
Wiadomość echo została wysłana.';;
w przeciwnym razie
Echo „błąd mailera:” . $ poczta-> errorInfo;
// echo „błąd w wysyłaniu wiadomości”;

?>

Uruchom wspomniany wyżej adres URL, wypełnij formularz odpowiednimi danymi i kliknij WYŚLIJ WIADOMOŚĆ przycisk, aby przesłać formularz po sprawdzeniu sprawdzania poprawności.

Jeśli formularz został właściwie przesłany, a e -mail został wysłany do odbiornika, wówczas na górze formularza pojawi się następująca wiadomość, aby poinformować użytkownika, że ​​wiadomość została poprawnie wysłana.

Wniosek

W tym samouczku zaprojektowaliśmy prosty responsywny formula. Formularz kontaktowy jest istotną częścią każdej strony internetowej, ponieważ pozwala odwiedzającym dotrzeć do właściciela witryny w celu połączenia lub zadawania pytań. Pola formularza mogą być różne w zależności od wymagań witryny.