Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Универсальная форма обратной связи для WordPress

Приветствую всех читателей «Progress-project».

Сегодня у нас, как обычно достаточно важная и интересная тема.
И как вы уже наверное смогли догадаться речь будет идти о том, как очень просто можно сделать форму обратной связи на своём блоге под управлением CMS WordPress.

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

Сегодня мы с вами всё сделаем собственными руками с помощью PHP и CSS.

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

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

  • 1). Это конечно её мобильность, простота в установке, настройке и дальнейшем использовании.
  • 2). Предложенная форма обратной связи практически не нагружает сервер, что происходит при использовании различных плагинов, так-же вы не будете терять время на перенаправления на какой либо сервис.
  • 3). Конфиденциальность, строгое сохранение персональных данных указанных вашими посетителями от попадания в руки третьим лицам, что не гарантируется онлайн сервисами.
  • 4). Надёжность в работе и гарантия того, что сообщение отправленное вашим посетителем обязательно дойдёт до вас, вы не зависите от стороннего ресурса который внезапно может на время или же навсегда перестать работать.

Установка формы обратной связи на WordPress

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

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

Для этого просто создаём в Notepad++ новый пустой файл имеющий расширение php и вставляем в него  код:

<title>Сообщение успешно отправлено</title>
<?php
/*** Функция проверки переменных, введенных в форму. Если таких нет, то они создаются.
Если формой были переданы пустые значения, то функция их удаляет ***/
if (isset($_POST['ProgressSend'])){
if (isset($_POST['from_whom'])) {$from_whom = $_POST['from_whom']; if ($from_whom == '') {unset($from_whom);}}
if (isset($_POST['postal_address'])) {$postal_address = $_POST['postal_address']; if ($postal_address == '') {unset($postal_address);}}
if (isset($_POST['topic'])) {$topic = $_POST['topic']; if ($topic == '') {unset($topic);}}
if (isset($_POST['the_message'])) {$the_message = $_POST['the_message']; if ($the_message == '') {unset($the_message);}}

/*** Сбор дополнительной информации об отправителе сообщения ***/
$date=date("d.m.Y"); // число.месяц.год
$time=date("H:i"); // часы:минуты:секунды

/*** Функция проверки заполнения полей ***/
if (isset($from_whom) && isset($postal_address) && isset($topic) && isset($the_message))
{

/*** Данная функция удаляет все пробелы и преобразует HTML теги в символы ***/
$from_whom = htmlspecialchars(trim($from_whom));
$postal_address = htmlspecialchars(trim($postal_address));
$topic = htmlspecialchars(trim($topic));
$the_message = htmlspecialchars(trim($the_message));

/*** Формирование сообщения ***/
$address = "Ваш email-адрес"; // Сюда вписываем свой е-mail!!!!
$sub = "Сообщение с блога";
$message = "Автор назвался: $from_whom \nОставил такой E-mail: $postal_address \nIP автора: \nБраузер отправителя: \nДата отправки: $date \nВремя отправки:$time \nIP адрес отправителя:\nСообщение на тему: $topic \nТекст сообщения: \n $the_message";

/*** Отправка сообщения ***/
$verify = mail ($address,$sub,$message,"Content-type:text/plain; charset = UTF-8\r\nFrom:$from_whom");
if ($verify == true)
{
echo "<body bgcolor='609df9'>
<div style='margin-top: 30px'><table border='1' width='450' align='center' cellpadding='20' cellspacing='6' bgcolor='white'>
<tr>
<td>
<div style='margin'><div align='center'>Ваше сообщение успешно отправлено! <p>Вернуться на <a href='URL Адрес вашего блога'><font size='+1'>Название Вашего блога</font></a></div>
<img src='https:// Ссылка на ваше изображение'>
<p><div align='center'>Я обязательно прочту Ваше сообщение, и постараюсь ответить как можно быстрей!</div>
<p><div align='right'><i><b>C уважением, Ваше Имя</b></i></div>
</tr>
</td>
</table></div>";
}
else
{
echo "Сообщение не отправлено!";
}
}
else
{
echo "Вы заполнили не все поля!";
}
}
?>

Далее сохраняем его на своём компьютере под названием «contacts.php». Удобнее всего на вашем пк временно создать специальную папку с названием к примеру форма обратной связи и в неё сохранить данный файл с обработчиком.

После этого вы можете сразу произвести кои какую настройку данного файла.
А именно:

  • 1). В строчке «26» укажите ваш email — адрес тот на который вы хотели-бы получать все письма от ваших посетителей воспользовавшихся формой обратной связи.
  • 2). В строчке «38» вставляем вместо слов: URL Адрес вашего блога и Название Вашего блога.
    Адрес блога и его название.
  • 3). Строчка «39» здесь вам необходимо изменить ссылку на изображение которое будет отображаться на специально созданной странице, куда будет перенаправляться ваш посетитель после успешно отправленного сообщения. Вы можете выбрать для этой цели изображение с любым расширением будь то .jpg .png или .gif, единственное условие при выборе картинки которого следует передерживаться это то, что изображение не должно быть больше чем 400px в ширину, высота значения не имеет.
  • 4). строчка «40» вы можете подкорректировать или полностью изменить текст с обращением к посетителю написавшему вам сообщение воспользовавшись формой обратной связи.

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

Главная функция универсальной формы обратной связи и защита её от спама капчей

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

И так открываем данный файл и в самом верху сразу после знака: <?php. вставляем код функции универсальной формы обратной связи:

function progress_form($attr, $content = null){
return
'<div class="contact">
<form action="Путь до файла contacts.php" method="post" >
<h4>Форма связи с администратором</h4>
<table>
<body>
<tr>
<td><input type="text" name="from_whom" title="Введите Имя" placeholder=" Имя"/></td>
<td><input type="text" name="postal_address" id="postal_address" pattern="|^[-0-9A-Za-z_\.]+@[-0-9A-Za-z^\.]+\.[a-z]{2,6}$|i" title="Введите правильный email-адрес" placeholder=" E-mail"/></td>
<td><input type="text" name="topic" title="Введите тему" placeholder=" Тема" /></td>
</tr>
</body>
</table>
<input type="text" name="ProgressSend" style="display:none;" value="1" />
<textarea cols="56" rows="14" name="the_message" title="Введите текст сообщения" placeholder=" Введите текст"></textarea><br />
<p><label for="text"></p>Сколько будет 20 - 10 ?</label>
<input class="capcha" type="text" name="example" id="example" style="width:80px;" title="Введите число" onchange="progress_example_cap()();" /><input type="button" style="background:#FFD39B;" value=" Проверить " onclick="progress_example_cap()();" />
<div id="resultcap"></div>
<p><input style="display:none; margin: 4px auto; background:#7541E6;" type="submit" value="Отправить" id="submit" class="submit" /></p>
</form>
</div>';
}
add_shortcode('contact-form', 'progress_form');

Давайте так-же сразу произведём необходимые настройки данной функции.

  • 1). строка «4» тут нам необходимо прописать полный путь к файлу: contacts.php который мы с вами создали и загрузили на сервер в самом начале.
  • 2). строка «16» даёт нам возможность настройки полей ввода где: cols=«56», это ширина а: rows=«14», высота.
  • 3). строка «17» здесь у нас прописана защита от спама капчей которая задаёт для решения посетителю намеревающемуся воспользоваться формой обратной связи, простенький математический пример такого вида: «Сколько будет 20 — 10 ?». Ниже мы с вами дополнительно установим ещё и скрипт который будет его обрабатывать, что даст возможность изменять данный пример на любой сложности какой вы только пожелаете.
  • 4). строка «18» у нас имеет заданный CSS стиль со цветом для кнопки такого вида: «style=background : #FFD39B;». Его при желании вы так же можете изменить.
  • 5). строка «20» тоже имеет CSS стили, где display:none прячет клавише отправления сообщения пока пример нашей защитной капчи не будет решён правильно, margin: 4px задаёт отступ а background : #7541E6 цветную гамму.

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

Подключение. Выводим скрипт капчи формы обратной связи

Открываем расположенный среди файлов темы: footer.php находим тег</body> и сразу-же после него вставляем:

<script>function progress_example_cap() {var TitleResuly = document.getElementById("resultcap");var number = document.getElementById("example").value;var submity = document.getElementById("submit");if (number != "10") {TitleResuly.innerHTML = "Вы не верно решили пример";submity.style.display = "none";} else {TitleResuly.innerHTML = "";submity.style.display = "block";}};</script>

Теперь при желании мы можем изменить здесь две строки.

  • 1). Строка «3» if (number != «10») в данном параметре задаётся правильный ответ на задачку капчи. Поэтому если вы изменили сам пример капчи в functions.php на свой то теперь вам необходимо здесь изменить и его ответ на соответствующий.
  • 2). Строка «4» здесь можно настроить текст который появляется если пример капчи решён не верно так-же можно изменить на свой.

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

Настройка внешнего вида универсальной формы обратной связи с помощью добавления стилей CSS

Чтобы подключить CSS стили к нашей универсальной форме нам необходимо в самый конец файла style.css нашей темы вставить:

.contact form{ /* Общие стили */
width: 530px; /* Длина формы */
margin: 10px auto; /* Внешние отступы до краев таблицы */
text-align: center; /* Положение по-центру */
border-radius: 10px; /* Закругленные края */
border: 1px solid #ccc; /* Рамка */
background: #F5F5DC /* Общий цвет фона */
}
.contact td { /* Стили для полей ввода "Имя", E-mail, "Тема" */
width: 165px; /* Длина полей */
margin: 10px 1px; /* Внешние отступы */
float: left; /* Обтекание элементов по левому краю */
}
.contact input {
height:25px; /* Высота полей */
border-radius: 6px; /* Закругленные края */
border: 1px solid #ccc; /* Рамка */
}
.contact textarea{ /* Стили для текстового поля */
border-radius: 6px; /* Закругление краев*/
border: 1px solid #ccc; /* Рамка */
}
.contact table{ /* Стили для таблицы */
margin: 0 auto; /* Выравнивание по центру */
}
.contact h4{ /* Стили для заголовка формы */
margin: 10px auto 0; /* Выравнивание по центру с верхним отступом*/
}
input.capcha{ /* Стили для поля ввода ответа*/
margin-right: 5px; /* Внешний отступ справа*/
}
.submit input { /* Стили для */
text-align: center; /* Положение по центру */
}

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

А впереди нас ждёт последний заключающий этап.

Устанавливаем нашу универсальную форму обратной связи на блоге WordPress

Итак создаём на нашем блоге специальную страницу для формы обратной связи и называем её каким либо подходящим названием вроде; «Связь», «Обратная связь» или «Контакты».

После чего независимо от режима редактора вставляем на эту страницу шорт-код следующего вида:

[contact-form]

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

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

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

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-18

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Комментарии к статье

2 комментарияна “Универсальная форма обратной связи для WordPress”
  1. Алексей:

    Приветствую, а как правильно писать путь к файлу: contacts.php в functions.php, какая папка должна быть первой? Например:
    мой сайт/www/wp-content/themes/duena/contacts.php

    Ответить
    • Administrator:

      Здравствуйте Алексей, если не решаетесь экспериментировать с относительным путём, пишите полный вместе с протоколом: http://мой_сайт/www/wp-content/themes/duena/contacts.php.
      Относительный же можно указать например так: /www/wp-content/themes/duena/contacts.php, нам главное, чтобы после нажатия на кнопку открывался именно файл: contacts.php а не страничка с 404 ошибкой, отслеживайте путь в адресной строке браузера.

      Ответить

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly(4)
Николай(3)
Олег(3)
Иван(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог