AjaxForm не отправляет письма
Хотел сделать на сайте контактную форму и решил использовать, AjaxForm c FormIt.
Но возникла проблема, он не отправляет сообщения, если не заполнять пункты ошибка самого Ajax (в виде красного окошка) не выводится (только подсвечивание красным само поле). В FormIt(тот что в админке) оповещение о отправке формы нет.
Чанк:
<form action="" method="post" class="form form_ask form_banner">
<div class="form__inputs">
<div class="input input_banner">
<input id="af_name" class="input__field required" type="text" name="name" value="" placeholder="" />
<label class="input__label" for="af_name">Ваше имя</label>
<span class="input__error error_name">Поле не заполнено!</span>
</div>
<div class="input input_banner">
<input id="af_phone" class="input__field userphone required" type="text" name="phone" value="" placeholder="" />
<label class="input__label" for="af_phone">Номер телефона</label>
<span class="input__error error_phone">Поле не заполнено!</span>
</div>
</div>
<div class="form__send">
<button type="submit" name="order" class="btn btn_questions btn_banner-form">Отправить заявку на обратный звонок</button>
<div class="input input_checkbox">
<input class="input__checkbox required" type="checkbox" name="agree" />
<div class="input__checkbox-mark"></div>
<div class="input__label input__label_checkbox input__label_banner">Я соглашаюсь с <a class="input__link" href="pdf/confidentiality.pdf" target="_blank">правилами обработки персональных данных</a> и <a class="input__link" href="pdf/confidentiality.pdf" target="_blank">политикой конфеденциальности</a>.</div>
</div>
</div>
</form>
AjaxForm:[[!AjaxForm?
&form=`tpl.AjaxForm`
&snippet=`FormIt`
&hooks=`spam,email,FormItSaveForm`
&emailSubject=`Тестовое сообщение`
&emailTo=`plohotnichenko_oleg@mail.ru`
&emailFrom=`info@countrynet.ru`
&emailTpl=`tpl.email`
&validate=`name:minLength=^2^,email:email:required`
&validationErrorMessage=`В форме содержатся ошибки!`
&successMessage=`Сообщение успешно отправлено`
]]
tpl.email:<h3>Сообщение "Перезвоните мне"</h3>
<p>От кого: [[+name]]</p>
<p>Телефон: [[+phone]]</p>
Помогите, люди добрые. Комментарии: 19
У вас указано обязательным поле email, которого нет в форме, поменяйте например так:
&validate=`name:minLength=^2^,phone:isNumber:required`
Извиняюсь, это я тоже заметил, но форма всё равно не работает. Сообщения не отправляет.
Без ajaxForm пробовали отправку проверять? Ставьте — QuickEmail, смотрите какой лог выдаст.
Сообщение на почту не пришло. Хотя плагин написал что сообщение отправлено. Пробовал вывести через
В error логах жалоба на " modRestClient::__construct is deprecated since version 2.3.0. Use the modRest classes instead."
[[!QuickEmail? &debug=`1`]]
так же написало почту на которую отправлять и «Сообщение успешно отправлено». emailsender в настройках заполнен верно. В error логах жалоба на " modRestClient::__construct is deprecated since version 2.3.0. Use the modRest classes instead."
В error логах жалоба на " modRestClient::__construct is deprecated since version 2.3.0. Use the modRest classes instead."Это информация для разработчиков. Можно отключить в системных настройках опцию — log_deprecated, чтоб не мешалось.
Сообщение на почту не пришло. Хотя плагин написал что сообщение отправлено.
В спаме смотрели? Какой хостинг провайдер?
На некоторых хостингах нужно чтобы ящик с которого идёт отправка существовал физически. Если не решите проблему и есть возможность, присылайте доступы в личку, посмотрим на вашу проблему изнутри =)
Хостинг masterhost. В спаме сообщений нет.
С мастерхостом в плане почты проблем не было, попробуйте тогда написать в техподдержку.
p.s. Если домен указанный в emailFrom реальный, он делегирован на серверы Яндекса, что можно сделать только после подключения почты для домена. Вариант проверить все настройки (MX записи и т.п.), и можно настроить отправку почты через smtp.
p.s. Если домен указанный в emailFrom реальный, он делегирован на серверы Яндекса, что можно сделать только после подключения почты для домена. Вариант проверить все настройки (MX записи и т.п.), и можно настроить отправку почты через smtp.
А что на счёт оповещений ajax? Они в самой форме тоже не отображаются, как при ошибках так и при попытке отправки сообщения. (Те прямоугольники в правом верхнем углу) Подключал как в стандартном шаблоне. Более того создал чистую страницу с стандартной формой, и опять же ничего не происходит. Даже почту обычную ставил @mail.ru всё рано никакого результата. Может к ним нужно подключать отдельно какие то js/css библиотеки?
Может к ним нужно подключать отдельно какие то js/css библиотеки?Кроме jQuery ничего не нужно. Посмотрите ошибки в консоли браузера, может какой то конфликт js.
Нашёл проблему. Она была в подключаемой bundle.js. Без неё форма работает исправно, но дело в том что она(bundle.js) жизненно необходима самому сайту (ибо ребята которые делали шаблон так решили) сам же сайт не подключается к jquery.
Если js оставить то форма выводит на формит следующее.
Если js оставить то форма выводит на формит следующее.
{"name":{"value":"Имя"},"phone":{"value":"+7 (000) 000-00-00"},"agree":{"value":"on"}}
Сама библиотека огромна, и как я понял в 11 строчек. Есть предложения? (Копировать её в комментарий чистой воды издевательство, возможно как то файлик перекинуть?)
Может есть другие контактные формы? Можете какие то посоветовать?
Нашёл проблему. Она была в подключаемой bundle.js. Без неё форма работает исправно, но дело в том что она(bundle.js) жизненно необходима самому сайту (ибо ребята которые делали шаблон так решили) сам же сайт не подключается к jquery.И совсем никаких ошибок в консоли браузера не выводит при подключённом bundle.js?
(Копировать её в комментарий чистой воды издевательство, возможно как то файлик перекинуть?)Файл можно закинуть на любое файлохранилище и приложить ссылку.
Может есть другие контактные формы? Можете какие то посоветовать?Так то отправкой и обработкой формы занимается formIt, если нужна обработка формы именно через ajax, можно написать свой скрипт.
Но я бы всё таки разобрался с этим bundle.js, из за чего и почему глючит. =)
Совсем никаких ошибок от bundle.js. Сам файл cloud.mail.ru/public/6FMU/36Km6wuq9
Ну тут надо смотреть какие плагины собраны в него, вероятно с одним или несколькими из них конфликт, с этой задачей лучше обратиться к разработчику шаблона.
Возможно есть какой то способ оградить контактные формы от этой библиотеки?
Я вот что заметил. На формит приходит спам учитывая что вывода форм на сайте нет. Как они это делают? Почему у них контактная форма работает?
Я думаю проблема в этой части кода, но если её удалить весь js ложится.
3: [function(t, e, i) {
"use strict";
jQuery(function(t) {
window.form_adjuster = {
init: function(t) {
this.options = t, this.init_cache(), this.init_validation(), this.init_mask(), this.options.file && (this.build_file_structure(), this.check_file(), this.input_file_reset()), this.send_validation(), this.init_btn_no_ajax(), this.init_ajax_without_form(), this.number_only_init()
},
init_options: function() {
var e = !!window.wp_data && window.wp_data,
i = {
type: "POST",
handler: e.sau_sender_ajax_url ? e.sau_sender_ajax_url : "./form-handler.php",
dataType: "json",
contentType: !1,
processData: !1,
task: "task",
file: !1,
onload: !1,
success: !1,
error: !1
};
return this.options ? t.extend(i, this.options) : i
},
init_cache: function(e) {
this.options = this.init_options(), this.$input_phone = t(".userphone"), this.$input_date = t(".js-input-date"), this.$form = t("form:not(.js-no-ajax)"), this.$noajax_btn = t(".js-noajax-btn"), this.$number_only = t(".js-number-only"), this.$file_input = t(".js-file-check"), this.$btn_without_form = t(".js-single-button")
},
init_validation: function() {
t.validator.addMethod("regexp", function(t, e, i) {
var n = new RegExp(i);
return this.optional(e) || n.test(t)
}, "Please check your input."), t.validator.addClassRules({
userphone: {
regexp: "[^_]+$"
},
usermail: {
email: !0,
required: !0
},
required: {
required: !0
},
password: {
minlength: 6
},
passwordConfirm: {
minlength: 6,
equalTo: ".js-input-new-password"
}
})
},
init_mask: function() {
this.$input_phone.inputmask({
mask: "+7 (999) 999-99-99",
showMaskOnHover: !1
}), this.$input_date.inputmask("dd/mm/yyyy", {
showMaskOnHover: !1
})
},
form_send: function(e, i) {
var n = form_adjuster.options;
t.ajax({
type: n.type,
url: n.handler,
dataType: n.dataType,
contentType: n.contentType,
processData: n.processData,
data: e,
success: function() {
n.success ? n.success() : form_adjuster.ajax_success(), form_adjuster.$form_cur = !1
},
error: function() {
n.error ? n.error() : form_adjuster.ajax_error(), form_adjuster.$form_cur = !1
}
})
},
ajax_success: function() {
console.log("success"), form_adjuster.$form_cur && form_adjuster.$form_cur.trigger("reset")
},
ajax_error: function() {
console.log("error")
},
formData_assembly: function(e) {
var i, n = new FormData,
o = {},
s = t(e),
r = s.find(":input:not(.js-no-collect),select,textarea"),
a = [];
i = r.serializeArray();
for (var l = 0; l < i.length; l++)
if (i[l].value.length > 0) {
var c = r.filter("[name=" + i[l].name + "]"),
u = {};
if ("hidden" == c.attr("type") || c.hasClass("js-system-field")) c.hasClass("js-system-field") || n.append(i[l].name, i[l].value);
else {
var d = c.attr("data-title");
if (c.hasClass("js-work-position")) {
var p = c.closest(".js-add-work-block").find(".js-datepicker-period");
a.push({
value: i[l].value,
period: p.val(),
title: "Данные о месте работы"
})
} else s.hasClass("js-only-selected") ? o[i[l].value] = c.closest(".js-wrap").find(".js-counter-input").val() : (u.value = i[l].value, u.title = d, o[i[l].name] = u)
}
}
if (a.length > 0 && (o.position = a), n.append("formData", JSON.stringify(o)), form_adjuster.options.file) {
var h = t(e).find(".js-file-check");
h.length > 0 && h.each(function() {
var e = t(this),
i = e.val().length,
o = e.prop("multiple");
i > 0 && (o ? form_adjuster.collect_multiple_file(n, e) : n.append(e.attr("name"), e[0].files[0]))
})
}
this.form_send(n, !1)
},
collect_multiple_file: function(e, i) {
var n = i.closest(".js-file-wrapper");
n.find(".js-file-list");
t(".js-file-list li").each(function() {
for (var n = t(this).attr("data-name"), o = 0; o < i[0].files.length; o++) n == i[0].files[o].name && e.append(i.attr("name"), i[0].files[o])
})
},
check_file: function() {
function e(t) {
switch (t.target.error.code) {
case t.target.error.NOT_FOUND_ERR:
alert("File Not Found!");
break;
case t.target.error.NOT_READABLE_ERR:
alert("File is not readable");
break;
case t.target.error.ABORT_ERR:
break;
default:
alert("An error occurred reading this file.")
}
}
function i(e) {
for (var i = t(this), o = 0; o < i[0].files.length; o++) n(i[0].files[o], i)
}
function n(t, i) {
var n = new FileReader,
o = t.name,
s = i.closest(".js-upload-wrapper"),
r = (s.find(".js-filename"), i.closest(".js-input-file-block"));
n.file_name = o, n.onerror = e, r.addClass("_onload"), n.onabort = function(t) {
alert("File read cancelled")
}, n.onload = function(t) {
form_adjuster.options.onload ? form_adjuster.options.onload() : form_adjuster.file_onload(i, n)
}, n.onprogress = function(t) {
if (t.lengthComputable) {
var e = parseInt(t.loaded / t.total * 100, 10);
s.find(".js-upload-progressbar").css("width", e + "%")
}
}, n.readAsDataURL(t)
}
form_adjuster.$file_input.on("change", i)
},
file_onload: function(e, i) {
if (e.hasClass("js-file-preview")) {
var n = e.closest(".js-file-module"),
o = n.find(".js-object-fit");
n.find(".js-indicator-changes").attr("value", "true"), o.attr("src", i.result), t.fn.objectFitImages(o)
} else {
var n = e.closest(".js-upload-wrapper"),
s = n.find(".js-upload-text");
e.closest(".js-input-file-block").removeClass("_onload").addClass("_loaded"), n.addClass("_loaded"), s.text(i.file_name)
}
},
build_file_structure: function() {
form_adjuster.$file_input.each(function() {
var e = t(this),
i = e.data("params");
i = i || {}, e.wrap('<div class="upload-wrapper js-upload-wrapper' + (i.mod ? " upload-wrapper_" + i.mod : "") + '"></div>').after('<div class="upload-wrapper__bar-wrapper"><div class="upload-wrapper__bar js-upload-progressbar"></div></div><span class="upload-wrapper__label"><span class="upload-wrapper__text js-upload-text">' + (i.label ? i.label : "Изменить") + "</span>" + ("simple" === i.mod ? '<span class="cross-btn js-file-reset"></span>' : "") + "</span>")
})
},
input_file_reset: function() {
t(document).on("click", ".js-file-reset", function() {
var e = t(this);
if (e.hasClass("js-reset-preview")) {
var i = e.closest(".js-file-module"),
n = i.find(".js-file-check"),
o = i.find(".js-object-fit");
i.find(".js-indicator-changes").attr("value", "true"), o.attr("src", "").removeAttr("style")
} else {
var i = e.closest(".js-upload-wrapper"),
s = i.find(".js-upload-text"),
n = i.find(".js-file-check");
i.removeClass("_loaded"), s.text(n.data("params").label)
}
n.replaceWith(n.val("").clone(!0))
})
},
init_ajax_without_form: function() {
form_adjuster.$btn_without_form.click(function(e) {
e.preventDefault();
var i = JSON.parse(t(this).attr("data-json"));
form_adjuster.form_send(JSON.stringify(i.parameters), i.action)
})
},
init_btn_no_ajax: function() {
form_adjuster.$noajax_btn.click(function(e) {
e.preventDefault(), t(this).closest("form").submit()
})
},
number_only_init: function() {
t(document).on("keydown", ".js-number-only", function(t) {
46 == t.keyCode || 8 == t.keyCode || 9 == t.keyCode || 27 == t.keyCode || 65 == t.keyCode && !0 === t.ctrlKey || t.keyCode >= 35 && t.keyCode <= 39 || (t.keyCode < 48 || t.keyCode > 57) && (t.keyCode < 96 || t.keyCode > 105) && t.preventDefault()
})
},
send_validation: function() {
this.$form.each(function() {
t(this).validate({
errorPlacement: function(t, e) {
t.remove()
},
submitHandler: function(e) {
form_adjuster.$form_cur = t(e), t(e).hasClass("js-custom-ajax") ? t(e).trigger("custom_ajax") : form_adjuster.formData_assembly(e)
}
})
})
}
}
})
}, {}],
Добавьте к тегу form css класс — ajax_form
Это не обязательно, ajaxForm сам добавляет этот класс автоматически.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.