Projektowanie wizerunku, podnoszenie jakości marki

Formularz kontaktowy AJAX bez wtyczki

Formularz kontaktowy AJAX bez wtyczki

Utworzenie prostego formularza kontaktowego na stronę internetową jest bardzo łatwe. Na ogół niemal zawsze korzystamy ze zwykłego kodu HTML i PHP, jednak formularz napisany w AJAX jest wyjątkowy i niebanalny, bowiem wysyłamy wiadomość ze strony internetowej bez konieczności ponownego jej przeładowywania.

Użyjemy AJAX do przesłania danych pobranych z wypełnionego formularza, oraz biblioteki jQuery dla uproszczenia kodu JavaScript, na koniec utworzymy skrypt poczty w PHP, który następnie wyśle dane z formularza kontaktowego pocztą e-mail.

Krok 1 - Tworzenie formularza HTML

Rozpoczniemy od utworzenia formularza kontaktowego w HTML, potrzebujemy go bowiem do zbierania danych od użytkownika naszej strony. Użyte w kodzie funkcje i zmienne na początek lepiej nazwać jak w poniższym przykładzie, później gdy wszystko będzie działać poprawnie możemy je zmienić. Elementowi <form> nadajemy klasę o nazwie contact_form i ustawiamy atrybut method na post, natomiast skryptowi PHP nadajemy nazwę mail.php, a więc atrybut action ustawiamy na mail.php.

kod w HTML:

<!-- Początek formularza kontaktowego AJAX -->
<form class="contact_form" method="post" action="mail.php">
    <! - komunikat formularza ->
    <div class="row">
        <div class="col-12">
            <div class="alert alert-success contact_msg" style="display: none" role="alert">
                Wysłanie wiadomości skończyło się pomyślnie.
            </div>
        </div>
    </div>
    <! - koniec komunikat formularza ->
    <div class="row">
        <!-- elementy formularza kontaktowego -->
        <div class="col-md-6 form-group">
            <input name="name" type="text" class="form-control" placeholder="Nazwisko" required>
        </div>
        <div class="col-md-6 form-group">
            <input name="email" type="email" class="form-control" placeholder="Adres e-mail" required>
        </div>
        <div class="col-md-6 form-group">
            <input name="phone" type="text" class="form-control" placeholder="Numer telefonu" required>
        </div>
        <div class="col-md-6 form-group">
            <input name="subject" type="text" class="form-control" placeholder="Temat wiadomości" required>
        </div>
        <div class="col-12 form-group">
            <textarea name="message" class="form-control" rows="3" placeholder="Treść wiadomości" required></textarea>
        </div>
        <div class="col-12">
            <input name="submit" type="submit" class="btn btn-success" value="Wyślij wiadomość">
        </div>
        <!-- elementy formularza kontaktowego -->
    </div>
</form>
<!-- Koniec formularza kontaktowego AJAX -->

Utworzyliśmy standardowy formularz kontaktowy, który zbierze imię i nazwisko, adres e-mail, numer telefonu, temat wiadomości, a także treść wiadomości. Dodatkowo formularz został umieszczony w klasach Bootstrap, które oczywiście możemy usunąć. Wszystkie pola mają wymagane atrybuty, które umożliwią przesłanie danych z formularza, nawet jeżeli którekolwiek z pól pozostanie nieuzupełnione. Poniżej umieściłem kod, który służy wyłącznie temu, aby przekazać komunikat o powodzeniu, lub błędzie.

<!-- komunikat formularza, powodzenie wysłania wiadomości -->
<div class="row">
    <div class="col-12">
        <div class="alert alert-success contact__msg" style="display: none" role="alert">
            Wysłanie wiadomości skończyło się pomyślnie.
        </div>
    </div>
</div>
<!-- komunikat formularza, powodzenie wysłania wiadomości -->

Do przesłania danych użyjemy biblioteki jQuery, tak więc na początek musimy ją wywołać w pliku formularza HTML, natomiast wszystkie funkcje JavaScript umieścimy w pliku main.js Musimy pamiętać, że w pierwszej kolejności wywołujemy bibliotekę jQuery, a kolejno funcje użyte na potrzeby formularza, wszystkie deklaracje najlepiej umieszczać na końcu kodu, tuż przed zamknięciem znacznika </body>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/main.js"></script>

To wszystko, czego potrzebujemy w pierwszym kroku, teraz można zapisać kod HTML w pliku index.html.

Krok 2 - Wykorzystanie AJAX do przesłania danych formularza

Tworzymy plik JavaScript i nazywamy go main.js, zgodnie z deklaracją w kodzie HTML umieszczamy go w podrzędnym folderze JS. Plik ten zajmie się wszystkimi funkcjami, które są wymagane do przesłania formularza za pomocą AJAX. Poniżej znajduje się pełen kod main.js.

( function( $ ) {
	'use strict';
	var form = $( '.contact__form' ),
		message = $( '.contact__msg' ),
		form_data;
	// gdy funkcja zakończy się sukcesem
	function done_func( response ) {
		message.fadeIn().removeClass( 'alert-danger' ).addClass( 'alert-success' );
		message.text( response );
		setTimeout( function() {
			message.fadeOut();
		}, 2000 );
		form.find( 'input:not([type="submit"]), textarea' ).val( '' );
	}
	// gdy funkcja zakończy się niepowodzeniem
	function fail_func( data ) {
		message.fadeIn().removeClass( 'alert-success' ).addClass( 'alert-success' );
		message.text( data.responseText );
		setTimeout( function() {
			message.fadeOut();
		}, 2000 );
	}
	form.submit( function( e ) {
		e.preventDefault();
		form_data = $( this ).serialize();
		$.ajax( {
			type: 'POST',
			url: form.attr( 'action' ),
			data: form_data
		} ).done( done_func ).fail( fail_func );
	} );
} )( jQuery );

Na samym początku kodu zadeklarowaliśmy kilka zmiennych do przechowywania danych, które otrzymujemy z naszego formularza HTML.
Funkcja submit zapisuje pobrane dane do zmiennej form_data. Później z $.ajax wysyłamy nasze dane do mail.php. Jeżeli nasze dane zostaną przesłane pomyślnie, wtedy wykonana funkcja zostanie uruchomiona i wyświetli komunikat o powodzeniu. W przeciwnym przypadku, uruchomi się funkcja fail i wyświetli komunikat o błędzie.

Krok 3 - Wykorzystanie PHP do wysłania poczty

Co robimy z danymi, które otrzymaliśmy od użytkownika? Oczywiście wyślemy je pocztą e-mail, aby to zrobić, piszemy prosty skrypt poczty PHP i zapisujemy go pod nazwą mail.php umieszczając go w folerze głównym,.

<?php
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    # FIX: Replace this email with recipient email
    $mail_to = "podaj@e-mail.pl"; // pamiętaj o zmianie adresu docelowego
    # Sender Data
    $subject = trim($_POST["subject"]);
    $name    = str_replace(array(
        "\r",
        "\n"
    ), array(
        " ",
        " "
    ), strip_tags(trim($_POST["name"])));
    $email   = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
    $phone   = trim($_POST["phone"]);
    $message = trim($_POST["message"]);
    if (empty($name) OR !filter_var($email, FILTER_VALIDATE_EMAIL) OR empty($phone) OR empty($subject) OR empty($message)) {
        # kod 400
        http_response_code(400);
        echo "Proszę wypełnić wszystkie pola formularza.";
        exit;
    }
    $content = "Name: $name\n";
    $content .= "Email: $email\n\n";
    $content .= "Phone: $phone\n";
    $content .= "Message:\n$message\n";
    # nagłówek wiadomości.
    $headers = "From: $name &lt;$email&gt;";
    # Wysłanie wiadomości.
    $success = mail($mail_to, $subject, $content, $headers);
    if ($success) {
        # kod 200 powodzenie.
        http_response_code(200);
        echo "Dziękujemy! Wiadomość została wysłana pomyślnie.";
    } else {
        # kod 500 błąd serwera.
        http_response_code(500);
        echo "Coś poszło nie tak - wiadomość nie została wysłana";
    }
  } else {
    # kod 403 
    http_response_code(403);
    echo "Nie można wysłać wiadomości";
  }
?> 

Użyty w kodzie przykładowy adres mailowy podaj@e-mail.pl należy zamienić na adres, na który formularz powinien przesyłać dane.

powrót

CODESTA
numer telefonu: 339 665 666 84+
adres e-mail: lp.atsedoc@oiduts
61-608 Poznań, ul. Boranta 15A lokal 2
numer NIP: PL6671007268