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

Создаем форму обратной связи в WordPress без плагинов.

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

<!–?php if (have_posts()) : ?–> <!–?php while (have_posts()) : the_post(); ?–> <div id=»post-<?php the_ID(); ?><br />» class=»post»> <h1></h1> <!–?php the_content(‘Читать дальше →’); ?–> <div class=»clear»></div> </div> <div id=»post-<?php the_ID(); ?>» class=»post»> <!–?php wp_link_pages(array(‘before’ =–> ‘ <strong>Страницы:</strong> ‘, ‘after’ => ‘

‘, ‘next_or_number’ => ‘number’)); ?>

Но чтобы шаблон не поплыл я контейнеры css оставил, у всех они могут отличаться у меня они выглядят так:

Теперь в самое начало, для создания формы обратной связи нужно вставить код:

<!–?php /* Template Name: Форма обратной связи */ ?–>

Сразу после этого кода нужно вставить другой код:

<?php

if(isset($_POST)) { if(trim($_POST) === ”) { $nameError = ‘Введите ваше имя.’; $hasError = true; } else { $name = trim($_POST); }

if(trim($_POST) === ”) { $commentError = ‘Введите сообщение.’; $hasError = true; } else { if(function_exists(‘stripslashes’)) { $comments = stripslashes(trim($_POST)); } else { $comments = trim($_POST); } }

} ?>

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

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

Для этого как вы знаете в админке WordPress нужно пройти страницы > добавить новую, здесь все как обычно заполняем заголовок, и вот самое главное с правой стороны есть поле атрибуты страницы:

Страница формы обратной связи

Где из выпадающего списка в поле «шаблон» нужно выбрать «Форма обратной связи», помните наш первый код который мы добавили в файл, это он отвечает за эту функцию соединения формы со страницей WordPress.

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

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

.soodhcenie{} /* Это внешний вид сообщения об благополучной отправке*/ .error{} /* вид вывода ошибок */ .contactform ul, .contactform li {} /*А вот это уже внешний вид самой формы */

Ну вот надеюсь у вас все получится, и несколько лишних запросов к базе данных вы устранили, и если вас заинтересовала эта тема читайте:

Предыдущая
Создать блог WordPressСоздание миниатюр или автоматическая генерация миниатюр в WordPress.
Следующая
Создать блог WordPressWordPress создаем карту сайта без плагинов.

HTML&PHP форма (и скрипт) обратной связи для блога, сайта

Вот какие формы вы получите:

Обратите внимание, скрипты поставляются с встроенной каптчей. Второй скрипт (Simple Send Mail Order) имеет одно отличие — он одновременно отправляет два письма

Одно заказчику, другое — вам.

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

Вставка на сайт производится просто:
— можете дать ссылку на /sendmail/index.php
— можете сразу вставить на страницу, при помощи кода

Пример кода:

Код можно найти на сайте, ссылка на который размещена выше.

Форма довольно минималистичная — не всем понравится дизайн «прямиком из девяностых», кому-то не нужна каптча, кому-то не хватает Аякса и красивых сообщений об ошибке. Решение есть.

Выбираем лучшие плагины контактной формы

Так как форма обратной связи wordpress – очень востребованное расширение, то и соответствующих плагинов для существует огромное количество. Можно назвать лишь наиболее популярные из них.

Вот некоторые:

Contact Form 7, на примере которого далее будет разобран процесс создания формы обратной связи;
Ещё один популярный плагин — Contact Form Plugin — он также чрезвычайно прост, легко настраивается и имеет русский язык интерфейса. Его функционал включает возможность выбора получателя сообщения, которым может стать любой пользователь сайта, а также возможность отправления файла в форме;
SimpleModal Contact Form – ещё одна простая форма обратной связи. Реализована она как всплывающая форма обратной связи wordpress, появляющаяся в модальном окне. Плагин также русифицирован, реализована проверка правильности заполнения полей ввода;
Usernoise – очень лёгкий плагин, не влияющий на скорость загрузки страницы, при этом ещё и очень красивый. После того, как Usernoise будет установлен, на блоге появится плавающая кнопка, нажатие которой вызывает появление формы для ввода текста. Причём предусматривается выбор типа формы, будь — то вопрос, пожелание или сообщение.

Создаём форму обратной связи в WordPress на примере Contact Form 7

Итак, первое, что нужно сделать – зайти в панель администратора сайта, перейти на вкладку «Плагины» и нажать на кнопку «Добавить новый».

В самом верху страницы можно будет увидеть форму поиска, в которую и нужно вбить название плагина «Contact Form 7»:

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

После выполнения данных действий в меню чуть выше вкладки «Плагины» появится новый пункт «Contact Form 7». Перейдём в пункт меню «Добавить новую» во вкладке «Contact Form 7».

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

Сначала нужно будет выбрать заголовок для формы. Назовём её «Связаться с администрацией».

Следующий пункт – формирование формы обратной связи. Простой шаблон пользователям доступен уже по умолчанию. В частности, в нём представлены поля, в которые нужно будет ввести имя пользователя, адрес электронной почты, тему сообщения и непосредственно само сообщение.

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

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

Окончательная настройка плагина контактной формы

Далее останется только нажать на кнопку «Сохранить» в правом верхнем углу окна и перейти на вкладку «Формы» в меню «Contact Form 7».

В открывшемся окне можно будет увидеть все созданные ранее формы, а справа от них – код вставки, копируемый на страницу, если в ней администратор хочет видеть форму обратной связи wordpress, плагин которой уже установлен:

Теперь нужно создать новую страницу (меню «Страницы», пункт «Добавить новую»), дать ей название, например, «Связь с администрацией», а в окно редактора вставить скопированный ранее тег для вставки недавно созданной формы.

Заметим, что редактор работает в двух режимах: «Визуально» и «Текст». Для вставки кода нужно выбрать второй режим, нажав на кнопку «Текст» над окном редактора.

Перейдя из администраторской панели на главное окно сайта сразу можно убедиться, что в верхнем меню появилась кнопка «Связь с администрацией», нажав на которую пользователь попадает в только что созданную форму обратной связи wordpress:

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

Таким образом, затратив минимум времени, администратор получает для своего сайта чрезвычайно полезный и необходимый инструмент для коммуникации со своими будущими посетителями.

Надеюсь, что статья окажется для вас полезной! Удачи!

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

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

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

Вот код:

function myform_action_callback() {
global $wpdb;
global $mail;
$nonce=$_POST;
$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." \r\n";
$subject="Сообщение с сайта ".$_SERVER;
do_action('plugins_loaded');
if (!empty($_POST) && !empty($_POST) && !empty($_POST)){
$message.="Имя: ".$_POST;
$message.="<br/>E-mail: ".$_POST;
$message.="<br/>Сообщение:<br/>".nl2br($_POST);
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 вашей рабочей темы оформления сайта.

Следующее действие, которое Вы должны сделать – это создать пару папок: “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 начала у Вас работать, то вам нужно вставить вот такой шорткод в любое место на вашем сайте, в пост или запись или еще куда-то.

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

<?php echo do_shortcode('');?>

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

Поставьте «лайк».

Сделайте ретвит.

И конечно же, оставьте свой комментарий ниже

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

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

Альтернативные или аналогичные плагины

Ну и, напоследок, стоит написать об альтернативах при поиске плагина. Как вы уже могли заметить в этой статье выше, я привёл три плагина для сравнения по разным критериями, а на самом же деле их гораздо больше и это только слову «cache» в поиске плагинов.

Если вы ищете плагин для защиты комментариев от спама, то поиск по слову «antispam» показывает на сегодня 135 вариантов разных плагинов:

Большая часть плагинов вам точно не подойдёт, т.к. они либо будут давно заброшены, либо несовместимы с вашей версией WordPress, либо морально и функционально устарели. Выбирайте для тестирования только те, которые удовлетворяют приведённым выше критериям: количество установок, совместимость с версией движка и с хорошим рейтингом. Всё остальное — в топку!

Зачем нужна форма обратной связи

В настоящее время нам трудно представить, что раньше приходилось вручную копировать или набирать адрес электронной почты, со своего е-мейла писать письмо продавцу и дожидаться ответа длительное время. Ведь за этот промежуток, пока клиент заходил на почту и писал письмо, он мог потерять или забыть нужный url, забыть сам вопрос и много чего еще могло случиться. А для владельца мог быть потерян клиент в этой ситуации. Улавливаете смысл?

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

Совместимость с версией WordPress

При разработке плагина каждый его автор должен указывать максимально свежую версию WordPress, на которой работа плагина гарантированно будет корректной.

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

Пример надписи, символизирующей совместимость с вашим сайтом, можно увидеть в карточке плагина при поиске его через админку:

Или же зайти в его подробное описание и посмотреть панель справа:

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

Поэтому всегда обращайте внимание на совместимость плагина с последней версией WordPress

Почему это важно? Здесь всё просто — иногда WordPress в новой версии подменяет используемые ранее функции на их более удобные аналоги, в связи с чем старые версии плагина могут перестать работать на вашем сайте, если вы обновите версию движка. И тогда могут начаться проблемы с использованием

Не лишним будет напомнить, что ваша прямая обязанность, как владельца сайта, это поддерживать используемую версию движка WordPress всегда в самом актуальном состоянии. Задолго до вас новую версию тестируют сотни и тысячи разработчиков, поэтому особо волноваться на этот счёт не стоит — делайте резервную копию сайта, а потом обновляйте ваш сайт до последней версии. Я поступаю именно так и всегда держу WordPress в актуальном состоянии.

Как понять, что плагин несовместим с вашей версией WordPress

Здесь всё достаточно просто. В интерфейсе поиска плагинов в админке вашего сайта можно посмотреть на карточку плагина и необходимая надпись будет в правом нижнем углу:

Либо можно щёлкнуть по названию плагина и увидеть такое:

Или же посмотреть на последнюю поддерживаемую версию: