AJAX formularz dla WordPress

Korzystanie z ajax podczas przesyłania formularza umożliwia przesłanie formularza bez przeładowywania strony. W WordPress jest to dość proste do wdrożenia. Załóżmy, że mamy następujący formularz zamówienia połączenia:

<form class="form-container recall-form-validate">
    <div class="form-title"><h2>Zamów połączenie</h2></div>
    <div class="form-title">Wpisz swoje imię:</div>
    <input class="form-field form-name" type="text"  name="name" /><br />
    <div class="form-title">Wprowadź numer telefonu:</div>
    <input class="form-field form-tel" type="text"  name="tel" /><br />
    <div id="submit-ajax" class="submit-container">
        <input class="submit-button" type="submit" value="Wysłać"/>
    </div>
</form>

Teraz napisz skrypt obsługujący Zdarzenie kliknięcia przycisku " Wyślij":

$(".submit-button").on("click", function (event) {
        event.preventDefault();
        var name = $(".form-name").val();
        var tel = $(".form-tel").val();
        $.ajax({
            url: "/wp-admin/admin-ajax.php",
            method: 'post',
            data: {
                action: 'ajax_order',
                name: name,
                tel: tel

            },
            success: function (response) {
                $('#submit-ajax').html(response);
            }
        });
    });

Skrypt anuluje wysyłanie danych do serwera, a następnie zapisuje wartości pól formularza i wysyła je przez ajax. Po otrzymaniu wyniku przetwarzania żądania skrypt wyświetla w bloku z id = submit-ajax wiadomość otrzymaną z serwera.

Ulepszona wersja skryptu, który automatycznie przetwarza pola formularza:

<script>

    jQuery(document).ready(function($){
        var form = $(".form-container");

        form.on("submit", function (event) {
            event.preventDefault();
            var vanilaForm = this;
            var form = $(vanilaForm);

            var way = form.data('action') || "ajax_order";

            var formData = new FormData(vanilaForm);
            formData.append("action", way);

             $.ajax({
               url: "/wp-admin/admin-ajax.php",
               method: 'post',
               data: formData,
               success: function (response) {
                $('#submit-ajax').html(response);
            }});
        });
    });

</script>

Pozostaje napisać funkcję, która będzie przetwarzać dane wysyłane do serwera (można ją umieścić w pliku szablonu functions.php):

function ajax_form(){
    $name = $_REQUEST['name'];
    $tel = $_REQUEST['tel'];
    $response = '';
    $thm  = 'Zamówienie połączenia';
    $thm  = "=?utf-8?b?". base64_encode($thm) ."?=";
    $msg = "nazwisko: ".$name."<br/>
        Telefon: ".$tel ."<br/>";
    $mail_to = 'tutaj adres e-mail, na który zostanie wysłana wiadomość';
    $headers = "Content-Type: text/html; charset=utf-8\n";
    $headers .= 'From: nazwisko nadawcy' . "\r\n";

// Wyślij wiadomość e-mail

    if(mail($mail_to, $thm, $msg, $headers)){
        $response = 'Wiadomość wysłana';
    }else
        $response = 'Błąd podczas wysyłania';

// Komunikat o wyniku wysłania poczty

    if ( defined( 'DOING_AJAX' ) && DOING_AJAX ){
        echo $response;
        wp_die();
    }
}

add_action('wp_ajax_nopriv_ajax_order', 'ajax_form' );
add_action('wp_ajax_ajax_order', 'ajax_form' );

 

Przykład działania Formularza Zamówienia przez ajax

Wpisz swoje imię:

Wprowadź numer telefonu:


Aktualizacja: 08.01.2021

Czy ten artykuł ci pomógł? Postaw ocenę!
(15 ocen, średnia:4,93 из 5)
Loading...


Ilość komentarzy: 11

  • Witam! Dzięki za materiał!&nbspJeśli się nie mylę, w drugim fragmencie kodu ostatnia linia jest zbędna.

  • Wkleiłem kod tak jak napisałeś, nie dostałem wysłania. (email dostawy)

    • Wstawiłem przykładowy formularz do artykułu, kod działa. Może jquery nie jest podłączony, mogą również występować problemy z hostingiem.

  • iQuery podłączony, hosting & nbsp; przyzwoity)) mam podejrzenie, że skrypt nie łączy się z formularzem. Po kliknięciu przycisku "Wyślij" pojawi się komunikat "taka strona nie istnieje".

    • Spróbuj wkleić skrypt do footer.php, przed znacznikiem zamykającym body

  • Wypróbowałem przykład z innej strony, okazało się. Dzięki za odpowiedzi!

  • powiedz mi, po co nam pisać url: "/ wp-admin / admin-ajax.php"
    jeśli piszemy obsługi w functions.php
    Co się stanie, jeśli nie napiszemy tego adresu url ?

    • Przesłanie formularza nie będzie działać, chyba że napiszesz ten adres url.

  • Dzięki za Kod! Teraz spróbuję formularza komentarzy na mojej stronie

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *