Ajax форма для WordPress

Использование ajax при отправке формы позволяет отправить форму без перезагрузки страницы. В WordPress это достаточно просто реализовать. Допустим, у нас есть следующая форма заказа звонка:

<form class="form-container recall-form-validate">
    <div class="form-title"><h2>Заказать звонок</h2></div>
    <div class="form-title">Введите Ваше имя:</div>
    <input class="form-field form-name" type="text"  name="name" /><br />
    <div class="form-title">Введите номер телефона:</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="Отправить"/>
    </div>
</form>

Теперь напишем скрипт, обрабатывающий событие нажатия на кнопку "Отправить":

$(".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);
            }
        });
    });

Скрипт отменяет отправку данных на сервер, затем записывает значения полей формы и отправляет их через ajax. Получив результат обработки запроса, скрипт выводит в блоке с id = submit-ajax сообщение, полученное от сервера.

Улучшенный вариант скрипта, который обрабатывает поля формы автоматически:

<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>

Осталось написать функцию, которая будет обрабатывать отправленные на сервер данные (её можно поместить в файл темы functions.php):

function ajax_form(){
    $name = $_REQUEST['name'];
    $tel = $_REQUEST['tel'];
    $response = '';
    $thm  = 'Заказ звонка';
    $thm  = "=?utf-8?b?". base64_encode($thm) ."?=";
    $msg = "Имя: ".$name."<br/>
        Телефон: ".$tel ."<br/>";
    $mail_to = 'здесь адрес почты, на которую будет отправляться сообщение';
    $headers = "Content-Type: text/html; charset=utf-8\n";
    $headers .= 'From: имя отправителя' . "\r\n";

// Отправляем почтовое сообщение

    if(mail($mail_to, $thm, $msg, $headers)){
        $response = 'Сообщение отправлено';
    }else
        $response = 'Ошибка при отправке';

// Сообщение о результате отправки почты

    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' );

 

Пример работы формы заказа через ajax

Введите Ваше имя:

Введите номер телефона:


Обновлено: 21.02.2020

Вам помогла эта статья? Оцените!
(15 оценок, среднее: 4,93 из 5)
Загрузка...

Поддержать развитие блога https://www.patreon.com/processby

Комментариев: 11

  • Привет! Спасибо за материал! 
    Если не ошибаюсь, во втором фрагменте кода, последняя строка лишняя.

    • Привет! Пожалуйста! Да, вы правы, поправил.

  • Вставил код так, как Вы написали, у меня не заработала отправка. (email доставки прописал)

  • Какие могут быть основные ошибки-косяки?

    • Вставил пример формы в статью, код рабочий. Может быть jquery не подключена, также могут быть проблемы с хостингом.

  • iQuery подключена, хостинг  достойный))У меня подозрение, что скрипт не подключается к форме. При нажатии на кнопку "отправить" выскакиевает сообщение "такой страницы не существует".

    • Попробуйте вставить скрипт в footer.php, перед закрывающим тегом .

  •  Попробовал пример с другого сайта, получилось. Спасибо за ответы!

  • скажите, а зачем писать нам писать url: "/wp-admin/admin-ajax.php"
    если мы пишем обработчик в functions.php
    Что будет, если мы не напишем этот url ?

    • Отправка формы работать не будет, если вы не напишете этот url.

  • Спасибо за код! Сейчас попробую для формы комментариев на своем сайте

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *