Ajax обработка форм обратной связи
Доброго времени суток помогите пожалуйста создать форму обратной связи на AJAX. Я много времени потратил на это но у меня не чего не получается. У меня на сайте есть шесть чекбосов с выбором ответа, поле имя и телефон мне нужно сделать что бы когда пользователь нажал на чек бокс с выбраной им проблемой, заполнил поля имя и телефон нажал на кнопку ко мне приходили данные на почту с его выбором именем и телефоном. Еще хотелось бы что бы и на телефон приходило оповещения когда клиент обратился на сайте за нашими услугами но это не главное. У меня это вызывает 404 ошибку могли бы вы помочь мне разобраться
<!--======== чекбоксы или радиобоксы, от замены типа инпута вид не изменится =======-->
<div class="checkbox-group checkbox-group--grid">
<div class="form-item">
<label class="label">
<input type="checkbox" name="problem[]" value="Засорилась скважина" >
<span class="fake-checkbox"></span>
<p>Засорилась скважина</p>
</label>
</div>
<div class="form-item">
<label class="label">
<input type="checkbox" name="problem[]" value="Перестала поступать вода" >
<span class="fake-checkbox"></span>
<p>Перестала поступать вода</p>
</label>
</div>
<div class="form-item">
<label class="label">
<input type="checkbox" name="problem[]" value="Щелкает реле" >
<span class="fake-checkbox"></span>
<p>Щелкает реле</p>
</label>
</div>
<div class="form-item">
<label class="label">
<input type="checkbox" name="problem[]" value="Заканчивается вода" >
<span class="fake-checkbox"></span>
<p>Заканчивается вода</p>
</label>
</div>
<div class="form-item">
<label class="label">
<input type="checkbox" name="problem[]" value="Не работает насос" >
<span class="fake-checkbox"></span>
<p>Не работает насос</p>
</label>
</div>
<div class="form-item">
<label class="label">
<input type="checkbox" name="problem[]" value="Другая причина" >
<span class="fake-checkbox"></span>
<p>Другая причина</p>
</label>
</div>
</div>
<div class="form-wrapper">
<div class="form-item">
<input type="text" name="callbackfio" value="" class="required" placeholder="Имя">
<span class="error_callbackfio"></span>
</div>
<div class="form-item">
<input type="tel" name="callbacktel" value="" class="tel required" placeholder="Телефон">
<span class="error_callbacktel"></span>
</div>
<div class="agree-text agree-text--accent">
<input type="hidden" name="iagree" value="" class="required">
<label class="label">
<input type="checkbox" name="iagree" id="iagree-problems" value="I agree that:">
<span class="fake-checkbox"></span>
<p>Заполняя форму, Вы даете согласие на обработку персональных данных</p>
</label>
<span class="error_iagree"></span>
</div>
<div class="form-btn">
<button class="btn-accent" type="submit">Получить консультацию</button>
</div>
</div>
<input type="hidden" name="af_action" value="ae5f21e893618aea8dc0bf07e973d0df" />
</form><div id="answer3" class="alert2 alert-info d-none">
<p>Спасибо за обращение, сообщение отправлено.<br> Наш менеджер перезвонит вам в ближайшее время.</p>
</div>
</div>
Код обработчика php
function send_ajax_form() {
if (!isset($_POST['action']) || $_POST['action'] !== 'send_mail_ajax') {
wp_send_json_error('Invalid request');
}
if (!isset($_POST['callbackfio']) || empty($_POST['callbackfio'])) {
wp_send_json_error('Invalid name');
}
if (!isset($_POST['callbacktel']) || empty($_POST['callbacktel'])) {
wp_send_json_error('Invalid phone');
}
if (!isset($_POST['iagree'])) {
wp_send_json_error('You must agree to the terms');
}
$to = 'sales@skvazhinaremont.ru';
$subject = 'Новая заявка с сайта';
$message = '';
$message .= 'Имя: ' . sanitize_text_field($_POST['callbackfio']) . "\n";
$message .= 'Телефон: ' . sanitize_text_field($_POST['callbacktel']) . "\n";
$message .= 'Согласие на обработку персональных данных: Да' . "\n";
$headers = array('Content-Type: text/html; charset=UTF-8');
if(wp_mail($to, $subject, $message, $headers)) {
wp_send_json_success('Form submitted successfully');
} else {
wp_send_json_error('Unable to send email');
}
}
function my_ajax_script_enqueue_scripts() {
wp_enqueue_script('my-ajax-script', get_template_directory_uri() . '/assets/components/ajaxform/js/default.js', array('jquery'), '1.0', true);
wp_localize_script('my-ajax-script', 'myScript', array(
'ajax_url' => admin_url('admin-ajax.php'),
'name' => wp_get_current_user()->display_name
));
}
add_action('wp_enqueue_scripts', 'my_ajax_script_enqueue_scripts');
// Регистрируем обработчик Ajax запроса
add_action('wp_ajax_send_mail_ajax', 'send_ajax_form');
add_action('wp_ajax_nopriv_send_mail_ajax', 'send_ajax_form');
js обработчика
var AjaxForm = {
initialize: function (afConfig) {
if (!jQuery().ajaxForm) {
document.write('<script src="' + afConfig['assetsUrl'] + '/js/lib/jquery.form.min.js"><\/script>');
}
if (!jQuery().jGrowl) {
document.write('<script src="' + afConfig['assetsUrl'] + '/js/lib/jquery.jgrowl.min.js"><\/script>');
}
$(document).ready(function () {
$.jGrowl.defaults.closerTemplate = '<div>[ ' + afConfig['closeMessage'] + ' ]</div>';
});
$(document).off('submit', afConfig['formSelector']).on('submit', afConfig['formSelector'], function (e) {
$(this).ajaxSubmit({
dataType: 'json',
data: {pageId: afConfig['pageId']},
url: afConfig['actionUrl'],
beforeSerialize: function (form) {
form.find(':submit').each(function () {
if (!form.find('input[type="hidden"][name="' + $(this).attr('name') + '"]').length) {
$(form).append(
$('<input type="hidden">').attr({
name: $(this).attr('name'),
value: $(this).attr('value')
})
);
}
})
},
beforeSubmit: function (fields, form) {
//noinspection JSUnresolvedVariable
if (typeof(afValidated) != 'undefined' && afValidated == false) {
return false;
}
form.find('.error').html('');
form.find('.error').removeClass('error');
form.find('input,textarea,select,button').attr('disabled', true);
return true;
},
success: function (response, status, xhr, form) {
form.find('input,textarea,select,button').attr('disabled', false);
response.form = form;
$(document).trigger('af_complete', response);
if (!response.success) {
AjaxForm.Message.error(response.message);
if (response.data) {
var key, value, focused;
for (key in response.data) {
if (response.data.hasOwnProperty(key)) {
if (!focused) {
form.find('[name="' + key + '"]').focus();
focused = true;
}
value = response.data[key];
form.find('.error_' + key).html(value).addClass('error');
form.find('[name="' + key + '"]').addClass('error');
}
}
}
}
else {
AjaxForm.Message.success(response.message);
form.find('.error').removeClass('error');
form[0].reset();
//noinspection JSUnresolvedVariable
if (typeof(grecaptcha) != 'undefined') {
//noinspection JSUnresolvedVariable
grecaptcha.reset();
}
}
}
});
e.preventDefault();
return false;
});
$(document).on('keypress change', '.error', function () {
var key = $(this).attr('name');
$(this).removeClass('error');
$('.error_' + key).html('').removeClass('error');
});
$(document).on('reset', afConfig['formSelector'], function () {
$(this).find('.error').html('');
AjaxForm.Message.close();
});
}
};
//noinspection JSUnusedGlobalSymbols
AjaxForm.Message = {
success: function (message, sticky) {
if (message) {
if (!sticky) {
sticky = false;
}
$.jGrowl(message, {theme: 'af-message-success', sticky: sticky});
}
},
error: function (message, sticky) {
if (message) {
if (!sticky) {
sticky = false;
}
$.jGrowl(message, {theme: 'af-message-error', sticky: sticky});
}
},
info: function (message, sticky) {
if (message) {
if (!sticky) {
sticky = false;
}
$.jGrowl(message, {theme: 'af-message-info', sticky: sticky});
}
},
close: function () {
$.jGrowl('close');
},
};```
Источник: Stack Overflow на русском