Домой / Сайтостроение / Форма обратной связи wordpress — делаем сами!

Форма обратной связи wordpress — делаем сами!

Форма обратной связи wordpress
Форма обратной связи wordpress

Форма обратной связи wordpress без плагина!

Здравствуйте, уважаемые друзья и гости блога!


Сегодня расскажу вам, как делается форма обратной связи wordpress на сайте без плагина, а в следующем своем материале, планирую рассказать о том, как делается красивая форма обратной связи wordpress при помощи плагина.

И так, давайте приступим и узнаем как делается обычная  форма обратной связи wordpress на сайте без плагина ...

Простая форма обратной связи wordpress на сайте без плагина!

Некоторые вебмастера, особенно начинающие, очень боятся что-то менять в движке WordPress, мотивируя это тем, что мол не знаю ничего и не разбираюсь в коде. Но ведь если Вы сами не попробуете разобраться, то и никогда не поймете и не сможете разобраться. Нужно когда-то начинать учиться!

Давайте это сделаем прямо сейчас!!!

Вот код:

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: ".$_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' );

Его Вы должны скопировать и вставить в файл functions.php вашей рабочей темы оформления сайта.

Затем в данном коде найдите вот такую строку ($to="vash_mail@help-wp.ru"; // заменить на свою почту) и просто замените в ней на свой e-mail, куда вам должны приходить письма.

Следующее действие, которое Вы должны сделать — это создать пару папок: «css» и «js». Если такие папки в вашей теме оформления сайта есть, то создавать их не нужно!

Теперь в папке «css» создаем файл стилей «styleform.css» и оставляем его пустым, так как для работы нашего примера стили необязательны, но если Вы захотите их в дальнейшем применить, то это будет возможно сделать, просто закачав их в данную директорию.

В папке  «js» создаем файл «scriptform.js», а вот в нем нужно будет сделать некоторые действия, чтобы наша форма обратной связи wordpress заработала — вставляем туда вот этот код:

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 для сайта практически готова к использованию. Осталось лишь закачать все эти файлы к вам на хостинг и можно начинать пользоваться.

А чтобы форма обратной связи wordpress начала у Вас работать, то вам нужно вставить вот такой шорткод [formZak] в любое место на вашем сайте, в пост или запись или еще куда-то.

А если вам нужно вызвать форму из пхп, например в низу страницы воспользуйтесь вызовом шорткодов:

<?php echo do_shortcode('[formZak]');?>

Если вам понравился материал пожалуйста сделайте следующее…

  1. Поставьте «лайк».
  1. Сделайте ретвит.
  1. Поделитесь этим постом с друзьями в социальных сетях.
  1. И конечно же, оставьте свой комментарий ниже 🙂

Спасибо за внимание!

Всегда ваш Валерий Бородин



Про Валерий Бородин

Проверьте также

создание лендинг

Создание Лендинг Пейдж или лучшие плагины WordPress!

Создание Лендинг Пейдж (Landing Page) какие плагины использовать на WordPress? Узнай сейчас! Здравствуйте, уважаемые друзья …

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу