Форма обратная связь WordPress без плагина

обратная связь 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="[email protected]"; // заменить на свою почту
$headers = "Content-type: text/html; charset=utf-8 \r\n";
$headers.= "From: ".$_SERVER['SERVER_NAME']." \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="[email protected]"; - заменить на свою почту. Больше ничего менять не нужно, пример рабочий и обратная связь wordpress без плагина тестировалась на версии WP 4.2.

Следуя из этого кода, вам нужно создать в теме 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 без плагина. Дальше я попробую немножко рассказать что значит этот код, если конечно это вам интерестно.

Описание обратной связи для 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_send_action" должна совпадать с вот этой строчкой в вашем яваскрипт файле: 'action':'myform_send_action'

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.

Комментарии к записи «Форма обратная связь WordPress без плагина»:
  1. Yuriy:

    Спасибо за помощь, и вас с наступающим Новым годом

  2. Yuriy:

    код забыл, вот он:
    if( function_exists( 'gglcptch_display' ) ) { echo gglcptch_display(); };

    • admin:

      Найдите этот код в шорткоде:
      $rty.='<div class="line"><textarea id="mess" placeholder="Сообщение"></textarea></div>';

      и после него можно написать:

      if( function_exists( 'gglcptch_display' ) ) {
      $rty.='<div class="line">'.gglcptch_display().'</div>';
      }

      Должно выводиться. возможно блок div будет лишним уберете его если что.
      Но вам же потом наверное придется обработчик допистаь для этого кода.

      С наступающим вас.

  3. Yuriy:

    Здравствуйте, я установил плагин Google Captcha (reCAPTCHA) by BestWebSoft и тепер хочу передать вот такой код в форму после textarea:

    как мне это сделать, извените я новичок в вебе и возможно ответ на этот вопрос очевиден, но прошу вашей помощи.

  4. Светлая:

    Добрый вечер! Подскажите, пожалуйста, что не работает, когда выводится алерт "Ошибка соединения"?

    • admin:

      Добрый день.
      alert("Ошибка соединения"); - если у вас не сработал аякс запрос, какая-то ошибка. Нужно смотреть на сайте, так на вскидку не смогу угадать.

  5. Лиза:

    Здравствуйте! Пример не работает с темой quill, в header темы подключен wp_head(), в footer - wp_footer(). вставляю шорткод
    [formZak], выводит только "[formZak]". Пробовала менять wp_mail на mail. Что я делаю не так?

    • Лиза:

      Вот такой код на странице (php на всякий случай)

      [formZak]

    • admin:

      Добрый день.
      Видимо к функции отображения текста не прикреплена функция do_shortcode.
      Вы пробовали так вызывать <?php echo do_shortcode('[formZak]');?>

      Если так не работает, значит вы не прописали шорткод в функции.

    • Лиза:

      Уточняю код

      [formZak]
      WP версии 4.6.1
      P.S. не хватает функции предпросмотра коммментария

    • Лиза:

      Извините за спам, да, пробовала, в комментарии привожу код, как он есть на странице, ваш сайт не пропускает php. add_shortcode( 'formZak', 'formZak' ); присутствует строка. могут ли влиять другие плагины?

    • admin:

      Если у вас вместо шорткода выводится код которым вы вызываете этот шорткод, то это одно из двух:

      1) нет такого шорткода, он не объявлен

      2) шорткод объявлен, но во время вывода он не проходит обработки do_shortcode. (Как запустить напрямую через эту функцию я написал выше)

    • Лиза:

      а вот на другой теме по той же схеме получилось, спасибо большое

  6. Дмитрий:

    Здравствуйте. Помогите, подключил все как написано, форма открывается, но не отправляется "Ошибка соединения", 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, то все работает, почта оправляется. Помогите настроить Ваш скрипт

    • admin:

      Добрый день.
      Видимо проблема как раз в теме. Для моего кода нужна библиотека jquery, смотрите возможно вы вызываете код до переключения библиотек.
      Если этот код отключить уверен, что будет работать. А плагин CF7 нормально работает потому, что он подключается позже

  7. Евгений:

    Добрый день! Такой вопрос: как сделать отправку писем на разные ящики в зависимости от значения одного из полей?

    • admin:

      Добрый день.
      Как вариант записываем все почтовые ящики в яваскрипт, и при изменении значения пишем нужную почту в скрытое поле, потом там где вы писали кто будет получатель письма нужно писать не адрес, а [your-emailsend] шорткод скрытого поля. Как то так.

  8. Дмитрий:

    Здравствуйте.
    Большое спасибо вам за статью.

    Если кто-нибудь сталкивался или знает подскажите пожалуйста с чем может быть связана эта ошибка в js: Uncaught ReferenceError: myform_Ajax is not defined

    Всё сделал как написано в статье.

    • Дмитрий:

      Сделал пример, здесь можно посмотреть: (-url-)

    • admin:

      Добрый день.
      Этот пример будет работать только под ЦМС WordPress.
      Ошибка у вас потому что яваскрипт не знает такой переменной как "myform_Ajax.ajaxurl", там хранится путь для отправки данных. Установите ВП, подключите все как описанно в статье и оно будет у вас работать 🙂

    • Дмитрий:

      Всё и работает на WP. Php скрипт лежит в корне темы functions.php, js лежит в папке, которая находится в корне темы.

    • admin:

      Ну тогда имеет смысл подключить в теме wp_head(); в шапке и wp_footer(); в футере. Их у вас нет, а посему ваш сайт ничем не отличается от тысячи обычных хтмл страниц 🙂

      Через эти функции идет прикрепление скриптов и переменных 🙂

      Проще всего установите дефолтную тему и закиньте код туда, все будет работать

    • Дмитрий:

      Спасибо, всё работает! 🙂
      При отправке формы пишет, что ошибка сервера. Я сменил название функции wp_mail на mail. И сделал console.log ошибки. Скорее всего это из-за хостинга?

    • admin:

      если вы правильно указали почтовый ящик то проблема в сервере, wp_mail не работает. попробуйте создать файл для отправки чего либо с помощью mail() на php, доку по функции гляньте в инете что куда. думаю что у вас сервер глючит

    • Дмитрий:

      Всё работает, спасибо. 🙂

  9. Михаил:

    А в html файле кроме ничего ставить не надо, что то не работает ничего (-url-)

    • admin:

      Добрый день.
      Это форма обратной связи для сайта на WordPress. У вас я так понимаю сайт на чистом Хтмл, а вы туда пхп код 🙂 мне даже интересно как вы смогли там найти файл functions.php
      Сори, этот пример у вас не будет работать. + обратите внимание у вас в 7 строке скрипта ошибка, но до формы отношения оно все равно не имеет

  10. Ольга:

    Спасибо! Все отлично работает! Выполнила все шаги, как вы расписали. И протестировала. Письма с сайта приходят на почту. Супер!)))

  11. Дарья:

    Добрый вечер!
    Подскажите пожалуйста, как организовать очистку формы после отправки?

    • admin:

      Добрый день.
      Тут нужно писать яваскрипт код, готового универсального варианта у меня нет. Можно посмотреть и попробовать написать.

  12. Максим:

    Добрый день
    подскажите как вставить форму обратной связи в слайдер?

    • admin:

      Добрый день.
      Вам нужно выводить хтмл код для формы обратной связи в ячейку слайдера, если ваш слайдер поддерживает не только картинки но и произвольный хтмл код.
      Хотя не понимаю зачем это нужно, пользоваться такой формой, мне кажется, будет не сильно удобно.

  13. Yuriy:

    У меня выдаёт ошибку: Ошибка сервера.

    • admin:

      Это значит что вы все подключили правильно но функция wp_mail не сработала.
      Попробуйте заменить ее на просто mail - параметры остаются прежние.
      Если не будет работать покажите ссылку на сайт, возможно увижу в чем проблема.

    • Yuriy:

      Добрый день, я сменил wp_mail на mail и после отправки пишет "Сообщение отправлено!" но на почту ничего не приходит. почта @mail.com

    • admin:

      В спаме писем нет? Если нет нужно обратиться в техподдержку вашего хостинга, возможно у вас не подключена отправка почты. У моих клиентов такое было. Или как вариант на хостинг идет атака или с хостинга сыпется спам и админ все заблокировал.

  14. Артур:

    Отличный пример реализации!
    На деле я пошел дальше и столкнулся с отправкой файлов через ajax в wordpress. Если Вы имели такой опыт, то как решили эту проблему?

    • admin:

      Добрый день.
      Файлы пробовал отправлять только через обычный post разумеется ничего у меня не получилось, так как вордпресс их режет.
      На аяксе видимо та же беда, ВП очищает переменные которые отвечают за файлы. нужно копать в эту сторону мне кажется.

      Но реализации отправки файлов я видел и не одну на аяксе, по этому должно все получится

  15. Алексей:

    Хороший пример, спасибо! На его основе без проблем "собрал" нужную мне форму. По самой статье - фотки, видео это все ерунда, а вот вывести код в читаемом виде (с отступами хотя бы) было бы очень не плохо, например плагином Crayon Syntax Highlighter.

  16. Дима:

    Не работает ваша форма без плагина (как и сам плагин Contact form 7). Установил на (-url-)

    Нажимаю - никаких изменений.
    на сайте установлен плагин Contact Form 7. Т.е. есть формы обратной связи, сделать заявку обратный звонок. Месяц назад после отправки сообщения с сайта стала появляться следующая ошибка:
    Ошибка при отправке сообщения. Попытайтесь позже или обратитесь к администратору сайта.
    yandex.mail и хостинг работают нормально (протестировал). Заполнил всё верно, к тому же все раньше и так работало без изменений. Проблема возникла после обновления плагина Contact form 7 и самого wordpress. Остальные плагины не конфликтуют. Как узнать где ошибка кроется? Мой ящик (-mail-)

    • admin:

      Добрый день.
      Возможно у вас проблемы с сервером. Вот тут я описывал contact form 7 не работает возможную проблему с сервером и как ее исправить.

    • Дима:

      А если все серверы работают нормально и проблема возникла именно после обновления WP и Contact form?

    • admin:

      Вы закидывали код в файл send.php? письма приходят с сервера на почту или нет?

    • Dima:

      Да, приходят. Всё приходит, все службы работают, кроме плагина или проблема в коде. Боюсь трогать файлы сайта, там всё настройки собъются и опять работы по восстановлению((.

    • Сергей:

      Вы разберитесь у вас вообще не работает отправка писем или только плагин. Пишите что не работает этот пример, хотя вроде работает, а в итоге не работает контакт форм 7.

      Если ни одна форма не может отправить сообщение то проблемы не в форме, обычно проблемы в вашем хостинге, например через вас пошел спам, хостинг отключил письма а вам сообщить забыл, или сообщил но письмо у вас попало в спам, вот и все 🙂

  17. Арина:

    Чет маловато фоток набросали. Трудновато разбираться, возможно есть смысл создания краткого видеоролика о том как делается форма обратная связь WordPress без плагина, или же как минимум по больше шагов на картинках.
    Я скопировала код, он запустился, но копировать не сильно удобно если честно :((((((

  18. Василий:

    еху, все отлично работает. Скачал этот пример по частям забросил в места что указал автор и все отлично пашет. Не надо больше ничего придумывать, даже поля те что мне нужно. просто взял воткнул на вп и готовая форма обратная связь WordPress без плагина.

Сделать заказ
Онлайн помощь по WordPress