Форма обратная связь WordPress без плагина
Продолжаем серию постов посвященных обратной связи в системе управления WordPress. Сегодня я попробую расказать вам как делается обратная связь wordpress без плагина на базе штатной функции wp_mail с помощью технологии программирования ajax.
Преимущества обратной связи wordpress без плагина
- на сайте не подгружается лишний яваскрипт и CSS код - становится более легким;
- форма обратная связь WordPress без плагина менее подвержена спаму, при условии что ваш код уникальный;
- можно настроить вывод по своему вкусу, сделать форму любой сложности.
Для того, чтоб создать форму обратная связь WordPress, без использования плагинов нам потребуется минимум знаний пхп, просто скопируйте код в нужное место.
Код для создания обратная связь 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 без плагина. Дальше я попробую немножко рассказать что значит этот код, если конечно это вам интерестно.
Описание обратной связи для 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.
-
-
Добрый день! Игорь, с помощью шорткода прикрутил форму к попап меню, которое генерится с помощью плагина 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 без плагина.
Добрый день! Подскажите а можно как-то вывести настройки такой формы в админ-панель? Чтобы емейл-адрес куда будут отправляться данные с формы можно было ввести в админке?