Создаем формы без использования плагинов (например Contact Form 7). Делаем форму Ajax. Создание простой формы Добавляем скрипт обработчик (с валидацией полей) Прописываем функцию формы Данное решение взято с сайта inprocess.by Читать далее »
Долго искал и нашел (здесь www.thenerdyblog.com) отличное решение — форма с вложением файла на ajax. Форма Скрипт Файл-обработчик Если нужно чтобы вложение было обязательным, то в условии else прописываем ошибку: Читать далее »
Если нам нужно кастомизировать карту Яндекс, то будет не достаточно подключить ее через iframe, т.к. в нем не будет никаких настроек. Необходимо подключить API Яндекс.Карт Подключаем API Яндекс.Карт На данный Читать далее »
Contact Form 7 — очень нужный плагин для модулирования различных форм обратной связи. Имеет множество дополнений. Плагин Contact Form 7 Код вставки формы Отключить обертку в <p> и добавление <br> Читать далее »
$(".submit-button").on("click", function (event) {
event.preventDefault();
var name = $(".form-name").val();
var tel = $(".form-tel").val();
if (name === '') {
alert('Заполните поле с именем');
return false;
}
if (tel === '') {
alert('Заполните поле с номером телефона');
return false;
}
if (tel.match(/[^0-9'".]/)) {
alert('Телефон заполнен не верно');
return false;
}
$.ajax({
url: "/wp-admin/admin-ajax.php",
method: 'post',
data: {
action: 'ajax_order',
name: name,
tel: tel
},
success: function (response) {
$('#submit-ajax').html(response);
}
});
});
// Отправка заявки
$(".submit-button").on("click", function (event) {
event.preventDefault();
var name = $(".form-name").val();
var tel = $(".form-tel").val();
var email = $(".form-email").val();
if (name === '') {
alert('Заполните поле с именем');
return false;
}
if (tel === '') {
alert('Заполните поле с номером телефона');
return false;
} else if (tel.match(/[^0-9'".]/)) {
alert('Телефон заполнен не корректно');
return false;
} else if (tel.length < 8) {
alert('Слишком короткий номер');
return false;
} else if (!((tel.lastIndexOf("+7", 0) === 0) || (tel.lastIndexOf("8", 0) === 0))) {
alert('Введите корректный номер в формате +79998887766 или 89998887766');
return false;
}
if(email === '') {
alert('Укажите свой E-Mail');
return false;
} else if ( !validateEmail(email) ) {
alert('Введите корректный E-Mail');
return false;
}
if (!$("input[name='messenger']:checked").val()) {
alert("Выберите удобрый для вас мессенджер");
return false;
}
if (!$('input:checkbox[name="acceptance"]').is(':checked')) {
alert('Вы должны ознакомиться с политикой конфиденциальности');
return false;
}
$.ajax({
url: "/wp-admin/admin-ajax.php",
method: 'post',
data: {
action: 'ajax_order',
name: name,
tel: tel,
email: email,
},
success: function (response) {
$('#submit-ajax').html(response);
}
});
});
// Проверка E-mail
function validateEmail($email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test( $email );
}
Подсветка полей
// Подсвечивание полей обязательных для заполнения
$(".submit-button").on("click", function (event) {
var name = $(".form-name").val();
var tel = $(".form-tel").val();
var email = $(".form-email").val();
$(".form-field").removeClass('validate novalidate');
if (name === '') {
$(".form-name").addClass('novalidate');
} else {
$(".form-name").addClass('validate');
}
if (tel === '') {
$(".form-tel").addClass('novalidate');
} else if (tel.match(/[^0-9'".]/)) {
$(".form-tel").addClass('novalidate');
} else if (tel.length < 8) {
$(".form-tel").addClass('novalidate');
} else if (!((tel.lastIndexOf("+7", 0) === 0) || (tel.lastIndexOf("8", 0) === 0))) {
$(".form-tel").addClass('novalidate');
} else {
$(".form-tel").addClass('validate');
}
if(email === '') {
$(".form-email").addClass('novalidate');
} else if ( !validateEmail(email) ) {
$(".form-email").addClass('novalidate');
} else {
$(".form-email").addClass('validate');
}
});
[quest]Придумать единую функцию подсветки[/quest]
Ошибка при отправке
В одном из проектов, на выделенном сервере, столкнулся с тем что функция mail (и wp_mail) не отправляли письма. Решил это установкой плагина Easy WP SMTP (300 000), в котором прописал настройки SMTP созданного ящика почты домена.
Был случай, также на выделенном сервере, что не работала отправка функцией mail, но при этом wp_mail отправляется нормально.
В некоторых специфических формах может потребоваться отправка дополнительного письма адресату с подтверждением получения заявки.
Оптимально это сделать посредством создание отдельной страны с шаблоном ответа и добавлять заголовок и содержимое страницы в виде заголовка и содержимого письма:
// Отправляем почтовое сообщение
if(wp_mail($mail_to, $thm, $msg, $headers)) {
$response = 'Сообщение отправлено.<br>Мы свяжемся с вами в ближайшее время.';
//Письмо отправителю
$page = get_post(1511);
wp_mail($email, $page->post_title, $page->post_content, $headers);
wp_reset_postdata();
} else {
$response = 'Ошибка при отправке';
}
[warn]Важно чтобы кнопка отправки формы была именно button, а не полем input (type="submit"). Иначе работать не будет.[/warn]
Скрипт
$(document).ready(function() {
$("#submit").click(function(e) {
var proceed = true;
if(proceed) { //everything looks good! proceed...
//data to be sent to server
var m_data = new FormData();
m_data.append( 'first_name', $('#fname').val());
m_data.append( 'email_address', $('#email_address').val());
m_data.append( 'file_attach', $('input[name=file_attach]')[0].files[0]);
//instead of $.post() we are using $.ajax()
//that's because $.ajax() has more options and flexibly.
$.ajax({
url: '/wp-content/themes/meisterwerk-2/process.php',
data: m_data,
processData: false,
contentType: false,
type: 'POST',
dataType:'json',
success: function(response){
//load json data from server and output message
if(response.type == 'error') { //load json data from server and output message
output = '<div class="error">'+response.text+'</div>';
} else {
output = '<div class="success">'+response.text+'</div>';
}
$("#response").hide().html(output).slideDown();
}
});
}
});
});
Файл-обработчик
<?php
//Recepient Email Address
$to_email = "mail@mail.ru";
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
$output = json_encode(array( //create JSON data
'type'=>'error',
'text' => 'Sorry Request must be Ajax POST'
));
die($output); //exit script outputting json data
}
//Sanitize input data using PHP filter_var().
$first_name = filter_var($_POST["first_name"], FILTER_SANITIZE_STRING);
$email_address = filter_var($_POST["email_address"], FILTER_SANITIZE_EMAIL);
$subject = "Your Email Subject Goes Here...";
//Textbox Validation
if(strlen($first_name)<4){ // If length is less than 4 it will output JSON error.
$output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
die($output);
}
$message = '<html><body>';
$message .= "<p><strong>First Name:</strong> " . strip_tags($_POST['first_name']) . "</p>";
$message .= "<p><strong>Email Address :</strong> " . strip_tags($_POST['email_address']) . "</p>";
$message .= "</body></html>";
$file_attached = false;
if(isset($_FILES['file_attach'])) { //check uploaded file
//get file details we need
$file_tmp_name = $_FILES['file_attach']['tmp_name'];
$file_name = $_FILES['file_attach']['name'];
$file_size = $_FILES['file_attach']['size'];
$file_type = $_FILES['file_attach']['type'];
$file_error = $_FILES['file_attach']['error'];
//exit script and output error if we encounter any
if($file_error>0) {
$mymsg = array(
1=>"The uploaded file exceeds the upload_max_filesize directive in php.ini",
2=>"The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form",
3=>"The uploaded file was only partially uploaded",
4=>"No file was uploaded",
6=>"Missing a temporary folder" );
$output = json_encode(array('type'=>'error', 'text' => $mymsg[$file_error]));
die($output);
}
//read from the uploaded file & base64_encode content for the mail
$handle = fopen($file_tmp_name, "r");
$content = fread($handle, $file_size);
fclose($handle);
$encoded_content = chunk_split(base64_encode($content));
//now we know we have the file for attachment, set $file_attached to true
$file_attached = true;
}
if($file_attached) { //continue if we have the file
// a random hash will be necessary to send mixed content
$separator = md5(time());
// carriage return type (RFC)
$eol = "\r\n";
// main header (multipart mandatory)
$headers = "From:Fromname <info@fromemail.com>" . $eol;
$headers .= "MIME-Version: 1.0" . $eol;
$headers .= "Content-Type: multipart/mixed; boundary=\"" . $separator . "\"" . $eol;
$headers .= "Content-Transfer-Encoding: 7bit" . $eol;
$headers .= "This is a MIME encoded message." . $eol;
// message
$body .= "--" . $separator . $eol;
$body .= "Content-type:text/html; charset=utf-8\n";
$body .= "Content-Transfer-Encoding: 7bit\r\n\r\n";
$body .= $message . $eol;
// attachment
$body .= "--" . $separator . $eol;
$body .= "Content-Type:".$file_type." ";
$body .= "Content-Type: application/octet-stream; name=\"" . $file_name . "\"" . $eol;
$body .= "Content-Transfer-Encoding: base64" . $eol;
$body .= "Content-Disposition: attachment; filename=\"".$file_name."\"".$eol.$eol; // !Обязательно два $eol иначе приходит изображение с 0 Kb
$body .= $encoded_content . $eol;
$body .= "--" . $separator . "--";
} else {
$eol = "\r\n";
$headers = "From: Fromname <info@fromemail.com>" . $eol;
$headers .= "Reply-To: ". strip_tags($email_address) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$body .= $message . $eol;
}
$send_mail = false; // в одном проекте без этого была ошибка
$send_mail = mail($to_email, $subject, $body, $headers);
if(!$send_mail) {
//If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
$output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
die($output);
}else{
$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$first_name .' Thank you for your order, will get back to you shortly'));
die($output);
}
Если нужно чтобы вложение было обязательным, то в условии else прописываем ошибку:
Если нам нужно кастомизировать карту Яндекс, то будет не достаточно подключить ее через iframe, т.к. в нем не будет никаких настроек. Необходимо подключить API Яндекс.Карт
Подключаем API Яндекс.Карт
На данный момент существуют разные версии Api. Будем подключать версию 2.1
ymaps.ready(function () {
var myMap = new ymaps.Map('YMapsID', {
center: [43.567075, 39.736186],
zoom: 14,
controls: ['smallMapDefaultSet']
});
myMap.geoObjects
.add(new ymaps.Placemark([43.567075, 39.736186], {
balloonContent: '', //Всплывающий при наведении текст
iconCaption: 'Черноморская, 13 Г'
}, {
preset: 'islands#redCircleDotIconWithCaption',
iconCaptionMaxWidth: '200'
}));
myMap.behaviors.disable('scrollZoom'); //Отключам zoom колесом при наведении
});
Координаты объекта проще всего выяснять, открыв Яндекс карты и введя необходимый адрес. Чуть ниже введенного адреса ебудут сами координаты и кнопка Скопировать.
Больше настроек и параметров можно узнать на специальном сайте API Яндекс.Карт
Собственная иконка на карте
Добавляем в скрипт следующий код:
// Создаём макет содержимого.
MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
'<div style="color: #FFFFFF; font-weight: 600;">$[properties.iconContent]</div>'
),
myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
hintContent: 'Таганрогская, 140 Б, офис 16',
balloonContent: 'НАЗВАНИЕ<br>Таганрогская, 140 Б, офис 1<br>+7 (863) 288-88-88 доб. 118<br>+7 (888) 888-88-89'
}, {
// Необходимо указать данный тип макета.
iconLayout: 'default#image',
iconImageHref: '/wp-content/uploads/2018/07/bazabirs-map.png',
// Размеры метки.
iconImageSize: [52, 83],
// Смещение левого верхнего угла иконки относительно её точки привязки.
iconImageOffset: [-26, -83]
})
myMap.geoObjects
.add(myPlacemark)
Flamingo — доп. плагин для сохранения всех отправленных форм в интерфейсе админки.
Если формы подвержены СПАМу, то данный плагин создаст в таблице wp_posts множество записей. Чистить их !все можно запросом в phpMyAdmin:
DELETE FROM `wp_posts` WHERE `post_type` = 'flamingo_inbound';
Цели Yandex
[warn]В новейших версиях плагина рекомендуется js-обработчики прописывать в функциях. Ниже описано подробнее.[/warn]
Добавление целей для Yandex Metrika для Form7 — в Дополнительных настройках формы прописываем строку
on_sent_ok: "yaCounterXXXXXX.reachGoal('ORDER');"
[info]yaCounterXXXXXX - номер счетчика Yandex (!не ID цели), для нескольких целей будет единым. ORDER - название цели (без пробелов и без цифр, только латинские буквы) в зависимости от назначения формы[/info]
Как протестировать отправку целей Яндекс Метрики описано здесь.
[info]Если текст на кнопке отправки слишком велик
[submit class:button send_one "Получить консультацию по карте"]
и в мобильной версии уходит за экран, можно заменить на
<button class="button">Получить консультацию по карте</button>[/info]
Contact Form 7 Dynamic Text Extension
Дополнение добавляющее в плагин Contact Form 7 два дополнительных поля с динамическим содержанием (открытой и скрытое). Есть возможность подгружать в это поле шорткоды. В примере ниже — user_favorites — шорткод
on_sent_ok: "location.replace('http://www.SITE.com');"
либо
on_sent_ok: «location='http://адрес_страницы/';»
Дублирующиеся письма
Если мы получаем несколько одинаковых писем, то причиной может быть то что посетитель не видит подтверждения отправки формы и жмет несколько раз. Происходить это может из-за того что все уведомления отключены, а пользовательские события после отправки письма не работают из-за ошибки.. Также причиной может быть не очевидное уведомление об отправленном письме, либо задержка уведомления после отправки.
Исправить это можно скриптом (при многократном нажатии отправка будет происходить 1 раз):
Еще один плагин расширяющий функционал Contact Form 7, добавляющий полноценный функционал добавления полей даты и времени с настройками оформления этих полей. Сходу плагин не работал, не появлялись всплывающие календари при выборе поля. Проблема устранилась после добавления стиля #ui-datepicker-div {z-index: 99 !important;}
!Важной особенностью является то что поле не должно быть доступно для фокусирования. Иначе в мобильных браузерах будет происходить переход на заполнение стандартной текстовой формы. Чтобы запретить фокус на форме — необходимо прописать ему свойство readonly.
Есть такой косяк: когда даем возможность выбирать год (change-year) в выпадающем списке года выводятся в диапазоне -10 +10. Исправить это можно параметром указывающем точный диапазон годов — year-range:1940:2020. А если указать в одном из параметров now, то это будет текущий год.
Обновления обработчика событий
До конца 2017 плагин переходит с системы Дополнительные настройки, в которых прописывались js-события при отправке формы. Теперь создатели плагина рекомендуют эти события прописывать в functions.php следующим образом:
Общий обработчик событий для всех форм Contact Form 7
Локализованный обработчик для конкретной формы (например, для счетчиков Яндекс и Google, либо для индивидуальных уведомлениях при отправке). Добавляем проверку по ID формы.
Пользователи будут видеть только наименования, а в настройках Письмо в поле адресат вставляем это поле, в него будет подставляться значения в виде почты.
Можно также прописать несколько ящиков в одном значении:
$(".submit-button").on("click", function (event) {
event.preventDefault();
var name = $(".form-name").val();
var tel = $(".form-tel").val();
if (name === '') {
alert('Заполните поле с именем');
return false;
}
if (tel === '') {
alert('Заполните поле с номером телефона');
return false;
}
if (tel.match(/[^0-9'".]/)) {
alert('Телефон заполнен не верно');
return false;
}
$.ajax({
url: "/wp-admin/admin-ajax.php",
method: 'post',
data: {
action: 'ajax_order',
name: name,
tel: tel
},
success: function (response) {
$('#submit-ajax').html(response);
}
});
});
// Отправка заявки
$(".submit-button").on("click", function (event) {
event.preventDefault();
var name = $(".form-name").val();
var tel = $(".form-tel").val();
var email = $(".form-email").val();
if (name === '') {
alert('Заполните поле с именем');
return false;
}
if (tel === '') {
alert('Заполните поле с номером телефона');
return false;
} else if (tel.match(/[^0-9'".]/)) {
alert('Телефон заполнен не корректно');
return false;
} else if (tel.length < 8) {
alert('Слишком короткий номер');
return false;
} else if (!((tel.lastIndexOf("+7", 0) === 0) || (tel.lastIndexOf("8", 0) === 0))) {
alert('Введите корректный номер в формате +79998887766 или 89998887766');
return false;
}
if(email === '') {
alert('Укажите свой E-Mail');
return false;
} else if ( !validateEmail(email) ) {
alert('Введите корректный E-Mail');
return false;
}
if (!$("input[name='messenger']:checked").val()) {
alert("Выберите удобрый для вас мессенджер");
return false;
}
if (!$('input:checkbox[name="acceptance"]').is(':checked')) {
alert('Вы должны ознакомиться с политикой конфиденциальности');
return false;
}
$.ajax({
url: "/wp-admin/admin-ajax.php",
method: 'post',
data: {
action: 'ajax_order',
name: name,
tel: tel,
email: email,
},
success: function (response) {
$('#submit-ajax').html(response);
}
});
});
// Проверка E-mail
function validateEmail($email) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test( $email );
}
Подсветка полей
// Подсвечивание полей обязательных для заполнения
$(".submit-button").on("click", function (event) {
var name = $(".form-name").val();
var tel = $(".form-tel").val();
var email = $(".form-email").val();
$(".form-field").removeClass('validate novalidate');
if (name === '') {
$(".form-name").addClass('novalidate');
} else {
$(".form-name").addClass('validate');
}
if (tel === '') {
$(".form-tel").addClass('novalidate');
} else if (tel.match(/[^0-9'".]/)) {
$(".form-tel").addClass('novalidate');
} else if (tel.length < 8) {
$(".form-tel").addClass('novalidate');
} else if (!((tel.lastIndexOf("+7", 0) === 0) || (tel.lastIndexOf("8", 0) === 0))) {
$(".form-tel").addClass('novalidate');
} else {
$(".form-tel").addClass('validate');
}
if(email === '') {
$(".form-email").addClass('novalidate');
} else if ( !validateEmail(email) ) {
$(".form-email").addClass('novalidate');
} else {
$(".form-email").addClass('validate');
}
});
[quest]Придумать единую функцию подсветки[/quest]
Ошибка при отправке
В одном из проектов, на выделенном сервере, столкнулся с тем что функция mail (и wp_mail) не отправляли письма. Решил это установкой плагина Easy WP SMTP (300 000), в котором прописал настройки SMTP созданного ящика почты домена.
Был случай, также на выделенном сервере, что не работала отправка функцией mail, но при этом wp_mail отправляется нормально.
В некоторых специфических формах может потребоваться отправка дополнительного письма адресату с подтверждением получения заявки.
Оптимально это сделать посредством создание отдельной страны с шаблоном ответа и добавлять заголовок и содержимое страницы в виде заголовка и содержимого письма:
// Отправляем почтовое сообщение
if(wp_mail($mail_to, $thm, $msg, $headers)) {
$response = 'Сообщение отправлено.<br>Мы свяжемся с вами в ближайшее время.';
//Письмо отправителю
$page = get_post(1511);
wp_mail($email, $page->post_title, $page->post_content, $headers);
wp_reset_postdata();
} else {
$response = 'Ошибка при отправке';
}