Лучшие решения
появляются в процессе

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 сообщение, полученное от сервера.

Осталось написать функцию, которая будет обрабатывать отправленные на сервер данные (её можно поместить в файл темы 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

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

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


Хорошая статья? Оцените!
(9 оценок, среднее: 5,00 из 5)
Загрузка...


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

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

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

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

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

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

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