Продолжаем серию постов посвященных обратной связи в системе управления WordPress. Сегодня я попробую расказать вам как делается обратная связь wordpress без плагина на базе штатной функции wp_mail с помощью технологии программирования ajax.
Для того, чтоб создать форму обратная связь WordPress, без использования плагинов нам потребуется минимум знаний пхп, просто скопируйте код в нужное место.
Приступим!
Открываем файл functions.php вашей темы и забрасываем туда вот такой код:
function myform_action_callback() { global $wpdb; global $mail; $nonce=$_POST['nonce']; $rtr=''; if (!wp_verify_nonce( $nonce, 'myform_action-nonce'))wp_die('{"error":"Error. Spam"}'); $message=""; $to="vash_mail@help-wp.ru"; // заменить на свою почту $headers = "Content-type: text/html; charset=utf-8 \r\n"; $headers.= "From: info@mail.ru \r\n"; // заменить на другой ящик $subject="Сообщение с сайта ".$_SERVER['SERVER_NAME']; do_action('plugins_loaded'); // не обязательно включать в новых ВП, возможно потребуется отключить if (!empty($_POST['name']) && !empty($_POST['mess']) && !empty($_POST['email'])){ $message.="Имя: ".$_POST['name']; $message.="<br/>E-mail: ".$_POST['email']; $message.="<br/>Сообщение:<br/>".nl2br($_POST['mess']); if(wp_mail($to, $subject, $message, $headers)){ $rtr='{"work":"Сообщение отправлено!","error":""}'; }else{ $rtr='{"error":"Ошибка сервера."}'; } }else{ $rtr='{"error":"Все поля обязательны к заполнению!"}'; } echo $rtr; exit; } add_action('wp_ajax_nopriv_myform_send_action', 'myform_action_callback'); add_action('wp_ajax_myform_send_action', 'myform_action_callback'); function myform_stylesheet(){ wp_enqueue_style("myform_style_templ",get_bloginfo('stylesheet_directory')."/css/styleform.css","0.1.2",true); wp_enqueue_script("myform_script_temp",get_bloginfo('stylesheet_directory')."/js/scriptform.js",array('jquery'),"0.1.2",true); wp_localize_script("myform_script_temp", "myform_Ajax", array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce('myform_action-nonce') ) ); } add_action( 'wp_enqueue_scripts', 'myform_stylesheet' ); function formZak() { $rty='<div class="form">'; $rty.='<div class="line"><input id="name" type="text" placeholder="Имя"/></div>'; $rty.='<div class="line"><input id="email" type="text" placeholder="Почта"/></div>'; $rty.='<div class="line"><textarea id="mess" placeholder="Сообщение"></textarea></div>'; $rty.='<div class="line"><input type="submit" onclick="myform_ajax_send(\'#name\',\'#email\',\'#mess\'); return false;" value="Отправить"/></div>'; $rty.='</div>'; return $rty; } add_shortcode( 'formZak', 'formZak' );
В первой функции "myform_action_callback" нужно $to="vash_mail@help-wp.ru"; - заменить на свою почту. Также, возможно, у вас возникнуть проблемы со строчкой do_action('plugins_loaded'); - на новых версиях ВП можно обойтись без неё. Больше ничего менять не нужно, пример рабочий и обратная связь wordpress без плагина тестировалась на версии WP 4.2 и 4.9.1.
Следуя из этого кода, вам нужно создать в теме 2 папки: "css" и "js". Если эти директории уже присутствуют в вашей теме то создавать не нужно. Закидываем в директорию "css" файл стилей "styleform.css" - и при желании записываем туда стили формы. Я этого делать не буду, так как для работы примера стили не нужны.
В директорию "js" закидываем файл "scriptform.js" и туда записываем вот такой простой код:
function myform_ajax_send(name,email,mess){
jQuery.ajax({
type: 'POST',
url: myform_Ajax.ajaxurl,
dataType:'json',
data:{
'name':jQuery(name).val(),
'email':jQuery(email).val(),
'mess':jQuery(mess).val(),
'nonce': myform_Ajax.nonce,
'action':'myform_send_action'
},
success: function (data) {
if(data.error==""){
alert(data.work);
}else{
alert(data.error);
}
},
error: function () {
alert("Ошибка соединения");
}
});
}
Не забываем закачать эти файлы к себе на сервер.
Все готово! - для того чтоб вывести форму обратная связь wordpress без плагина достаточно вставить шорткод [formZak] в пост или страницу своего сайта.
Если нужно вызвать форму из пхп, например в низу страницы воспользуйтесь вызовом шорткодов:
<?php echo do_shortcode('[formZak]');?>
Вы можете скопировать этот код к себе на сайт и попробовать затестировать, все должно работать, я специально проверял этот пример у себя. Вот такой ответ должен прийти на почту:
Как вы поняли, вот так просто делается форма обратной связи wordpress без плагина. Дальше я попробую немножко рассказать что значит этот код, если конечно это вам интерестно.
myform_action_callback() - функция для отправки сообщения с формы обратной связи вам на почту.
Строчки:
add_action('wp_ajax_nopriv_myform_send_action', 'myform_action_callback');
add_action('wp_ajax_myform_send_action', 'myform_action_callback');
myform_stylesheet() - функция для подключения файла стилей, яваскрипта и создания переменной яваскрипт myform_Ajax, которая в себя включает myform_Ajax.ajaxurl - сылка на обработчик аякс запроса и myform_Ajax.nonce - уникальная проверка на то, что отправка формы шла именно с вашего сайта (нужна для предотвращения спама и взлома сайта).
formZak() - функция, где формируется код формы. Тут мы можем добавлять или убирать нужные поля.
Последняя строчка функций: add_shortcode( 'formZak', 'formZak' ); регистрирует шорткод, чтоб нам было удобно работать с нашей формой обратной связи для wordpress без плагина.
Решил создать маленькую табличку, чтоб структурировать файлы которые вы должны создать или в которые нужно забросить код для того, чтоб работала обратная связь wordpress без плагина. Их не много думаю сможете разобраться.
Название директории в теме | Файлы, которые надо создать | Файлы, в которые надо записать код |
корень вашей темы | --- | functions.php |
css | styleform.css | styleform.css |
js | scriptform.js | scriptform.js |
Вроде все описал о том как создать форму обратной связи без плагинов. Если у вас остались вопросы по коду, или у вас не получилось запустить эту форму у себя на сервере можете описать проблему в комментариях. Буду рад помочь решить вашу проблему. До новых встреч.
Скачать этот пример увы не получится, так как не могу давать в вашу тему свой файл functions.php , он банально не подойдет :(.
Если у вас уже есть форма обратной связи на плагине Contact Form 7 предлагаю вам почитать мой пост о Contact Form 7 дополнительные настройки, также вы можете посмотреть краткое руководство contact form 7 настройка.
При обнаружении проблем в работе этого кода просьба сообщить нам об этом, будем признательны. Трабл возможный по причине обновления ВП и отключении какой нибудь с используемых функций, или же при переходе на новую библиотеку jquery.
Возникает вот такая ошибка ошибка "POST admin-ajax.php 500" когда отправляю форму. Подскажите как исправить
Добрый вечер!
Вас спрашивал Yuriy: 31.12.2016 в 17:51
Здравствуйте, я установил плагин Google Captcha (reCAPTCHA) by BestWebSoft и тепер хочу передать вот такой код в форму после textarea: как мне это сделать...
И у меня вопрос тоже про Google reCAPTCHA, только не по плагину, а именно просто по интеграции её в вашу форму, после её создания на сайте (-url-).
У них такое описание на странице:
https://developers.google.com/recaptcha/docs/display
А как это сделать к вашей форме?
Спасибо!
Добрый день! Подскажите а можно как-то вывести настройки такой формы в админ-панель? Чтобы емейл-адрес куда будут отправляться данные с формы можно было ввести в админке?
Добрый день! Игорь, с помощью шорткода прикрутил форму к попап меню, которое генерится с помощью плагина Popoup Maker. Выдается диагностика "Ошибка соединения". Если выводим форму на обычной странице (как и описано здесь), то все норм. В чем может быть проблема?
В параметры обработчика onclick почему-то не передаются значения input'ов. Смотрю в отладчике - value = ""
(-url-)
Предлагаю перейти в личку
Спасибо за помощь, и вас с наступающим Новым годом
код забыл, вот он:
if( function_exists( 'gglcptch_display' ) ) { echo gglcptch_display(); };
Здравствуйте, я установил плагин Google Captcha (reCAPTCHA) by BestWebSoft и тепер хочу передать вот такой код в форму после textarea:
как мне это сделать, извените я новичок в вебе и возможно ответ на этот вопрос очевиден, но прошу вашей помощи.
Добрый вечер! Подскажите, пожалуйста, что не работает, когда выводится алерт "Ошибка соединения"?
Здравствуйте! Пример не работает с темой quill, в header темы подключен wp_head(), в footer - wp_footer(). вставляю шорткод
[formZak], выводит только "[formZak]". Пробовала менять wp_mail на mail. Что я делаю не так?
Вот такой код на странице (php на всякий случай)
[formZak]
Уточняю код
[formZak]
WP версии 4.6.1
P.S. не хватает функции предпросмотра коммментария
Извините за спам, да, пробовала, в комментарии привожу код, как он есть на странице, ваш сайт не пропускает php. add_shortcode( 'formZak', 'formZak' ); присутствует строка. могут ли влиять другие плагины?
а вот на другой теме по той же схеме получилось, спасибо большое
Здравствуйте. Помогите, подключил все как написано, форма открывается, но не отправляется "Ошибка соединения", WP версия 4.6.1. Если можно поподробнее, плохо знаком с WP и функциями
Уточню... в functions.php нашел что подключина function my_jquery() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
Кстати если с плагином Contact form 7, то все работает, почта оправляется. Помогите настроить Ваш скрипт
Добрый день! Такой вопрос: как сделать отправку писем на разные ящики в зависимости от значения одного из полей?
Здравствуйте.
Большое спасибо вам за статью.
Если кто-нибудь сталкивался или знает подскажите пожалуйста с чем может быть связана эта ошибка в js: Uncaught ReferenceError: myform_Ajax is not defined
Всё сделал как написано в статье.
Сделал пример, здесь можно посмотреть: (-url-)
Всё и работает на WP. Php скрипт лежит в корне темы functions.php, js лежит в папке, которая находится в корне темы.
Спасибо, всё работает! 🙂
При отправке формы пишет, что ошибка сервера. Я сменил название функции wp_mail на mail. И сделал console.log ошибки. Скорее всего это из-за хостинга?
Всё работает, спасибо. 🙂
А в html файле кроме ничего ставить не надо, что то не работает ничего (-url-)
Спасибо! Все отлично работает! Выполнила все шаги, как вы расписали. И протестировала. Письма с сайта приходят на почту. Супер!)))
Добрый вечер!
Подскажите пожалуйста, как организовать очистку формы после отправки?
Добрый день
подскажите как вставить форму обратной связи в слайдер?
У меня выдаёт ошибку: Ошибка сервера.
Добрый день, я сменил wp_mail на mail и после отправки пишет "Сообщение отправлено!" но на почту ничего не приходит. почта @mail.com
Отличный пример реализации!
На деле я пошел дальше и столкнулся с отправкой файлов через ajax в wordpress. Если Вы имели такой опыт, то как решили эту проблему?
Хороший пример, спасибо! На его основе без проблем "собрал" нужную мне форму. По самой статье - фотки, видео это все ерунда, а вот вывести код в читаемом виде (с отступами хотя бы) было бы очень не плохо, например плагином Crayon Syntax Highlighter.
Не работает ваша форма без плагина (как и сам плагин Contact form 7). Установил на (-url-)
Нажимаю - никаких изменений.
на сайте установлен плагин Contact Form 7. Т.е. есть формы обратной связи, сделать заявку обратный звонок. Месяц назад после отправки сообщения с сайта стала появляться следующая ошибка:
Ошибка при отправке сообщения. Попытайтесь позже или обратитесь к администратору сайта.
yandex.mail и хостинг работают нормально (протестировал). Заполнил всё верно, к тому же все раньше и так работало без изменений. Проблема возникла после обновления плагина Contact form 7 и самого wordpress. Остальные плагины не конфликтуют. Как узнать где ошибка кроется? Мой ящик (-mail-)
А если все серверы работают нормально и проблема возникла именно после обновления WP и Contact form?
Да, приходят. Всё приходит, все службы работают, кроме плагина или проблема в коде. Боюсь трогать файлы сайта, там всё настройки собъются и опять работы по восстановлению((.
Вы разберитесь у вас вообще не работает отправка писем или только плагин. Пишите что не работает этот пример, хотя вроде работает, а в итоге не работает контакт форм 7.
Если ни одна форма не может отправить сообщение то проблемы не в форме, обычно проблемы в вашем хостинге, например через вас пошел спам, хостинг отключил письма а вам сообщить забыл, или сообщил но письмо у вас попало в спам, вот и все 🙂
Чет маловато фоток набросали. Трудновато разбираться, возможно есть смысл создания краткого видеоролика о том как делается форма обратная связь WordPress без плагина, или же как минимум по больше шагов на картинках.
Я скопировала код, он запустился, но копировать не сильно удобно если честно :((((((
еху, все отлично работает. Скачал этот пример по частям забросил в места что указал автор и все отлично пашет. Не надо больше ничего придумывать, даже поля те что мне нужно. просто взял воткнул на вп и готовая форма обратная связь WordPress без плагина.
Возникает вот такая ошибка ошибка "POST admin-ajax.php 500" когда отправляю форму. Подскажите как исправить
admin: 02.07.2019 в 16:19
Добрый день.
Какая-то проблема с аяксом или нет обработчика: прописали разные имена вместо myform_send_action или в пхп коде ошибка
Отвечаю:
Я копировал весь код что бы проверить его работу и далее отредактировать под свои нужды. Не знаю долен быть или нет но у меня нет файла "admin-ajax.php", может быть из-за его отсутствия эта ошибка ?