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

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

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

Были и другие недочёты, например, при открытии формы в новом окне или вкладке попытка вернуться на предыдущую страницу оканчивались понятно чем. Ну и так далее.

Поэтому после первого шага, пришлось делать и второй - все это совершенствовать, улучшать, переделывать...

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

Вот этот недочёт я сейчас и исправляю.

Итак, пропустим монолог о том для чего нужна такая форма, если Вы читаете статью - значит знаете это и без меня, и приступим к описанию того, как такую форму сделать.

Реализация формы новая, но требования к ней остались прежними:

1. реализовывалась без установки плагина;
2. отображалась во всплывающем модальном окне;
3. была доступна с любой страницы блога, а не вынуждала переходить на какую-либо конкретную страницу;
4. после завершения работы с формой посетитель блога должен оставаться в той-же части блога откуда он эту форму вызвал – никаких перенаправлений;
5. реализация формы не должна требовать внесения какого либо кода ни в движок WordPress, ни в файлы стилей, ни в шаблон (например style.css, functions.php, single.php, page.php и т.д.);
6. форма должна уметь осуществлять проверку заполнения полей, т.е. должна быть валидация;
7. на форме должна быть captcha или иная защита от спама.
8. форма должна быть кроссбраузерной – нормально отображаться во всех популярных браузерах;
9. ну и, естественно, она должна работать – отправлять мне email.

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

Что изменилось?

Практически все это видно на скриншоте.

• Убран лишний обрамляющий фон формы.
• Контент под самой формой не исчезает, как было в старом варианте.
• Убрал кнопку "Закрыть" - она совсем не нужна.

Это только из визуальных эффектов.

Техническая сторона тоже претерпела сильные изменения.

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

Скачиваем архив по ссылке в конце статьи, распаковываем и получаем папку forma-svyazi со скриптами формы. Эту папку надо будет закачать в корневой каталог своего блога туда где лежат папки wp-admin, wp-content... Вот как на скриншоте:

Для закачки папки на блог советую использовать замечательный и бесплатный FTP-клиент FileZilla.

Теперь надо настроить форму и подключить её к блогу.

Удобнее все настройки формы произвести до закачки папки на сервер.

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

Для всех подобных действий я использую редактор Notepad++.

Открываем файл forma-svyazi/assets/xml/config.php

Находим там строки

<Addresses>
 <!-- Enter your e-mail address -->
 <address>Здесь Ваш EMAIL</address>
 <address on="subject" value="Support"></address>

 и фразу "Здесь Ваш EMAIL" меняем на Ваш реальный email, тот самый на который должны приходить письма.

При необходимости можно прописать свои темы сообщений в форме обратной связи.

Для этого открываем файл forma-svyazi/index.php

Находим там строки

<span>
<label for="sales"><b>Тема:</b> </label>
<select id="sales" name="sales">

 и всё, что ниже до строк

</select>
</span>

 является определением тем сообщений. Можете менять и добавлять свои вот в таком формате:

<option value="Значение для темы письма">Значение для формы</option>

Обращаю внимание на обязательную сохранность тегов!

У меня это выглядит так:

Далее редактируем файл forma-svyazi/assets/js/form.js

$(document).ready(function() {  
    AppendStyle('http://Ваш сайт/forma-svyazi/assets/css/form.css');  
    xgb_GetWidget();  
  });  

  function widgetClose() {  
    $('#xWidget').remove();  
  }  

  function xgb_GetWidget() {  
    $.ajax({  
      url: 'http://Ваш сайт/forma-svyazi/assets/php/form.php',  
      type: 'POST',  
      dataType: 'text',  
      data: 'm=form',  
      cache: false,  
      success: function (data, textStatus) {  
          var div = document.createElement('div');  
          div.id = "xWidget";  
          document.body.appendChild(div);  
          $('#xWidget').html(data);  
        }  
    });  
  }

 Во 2-й и 12-й строках фразу "Ваш сайт" меняем на реальный адрес Вашего сайта. При этом обратите внимание, что "http://" там уже прописан.

Аналогичную замену производим ещё в одном файле:

forma-svyazi/assets/php/form.php

<?php
$c = ' 
 <div id="xWidget" class="parentdiv" onclick="widgetClose()"><center> 
 <iframe class="myiframe" src="http://Ваш сайт/forma-svyazi/index.php"></iframe> 
 <div class="formdiv"> 
 <a href="#" title="Закрыть" class="close" onclick="widgetClose()" rel="nofollow">X</a></div>
 </center></div>'; 
 echo $c;
?>

 Фразу "Ваш сайт" меняем на реальный адрес Вашего сайта в 4-й строке.

На этом настройки формы завершены и можно папку forma-svyazi загружать на блог, как описано выше.

Подключение скрипта к блогу

А теперь самое трудное в том смысле, что тут надо сделать сразу несколько замен, которые мы делали выше и плюс придумать свой текст, а может и свою фотографию еще выложить... Помните, писал про возню? 😆

Первым делом размещаем в нужном месте виджет "Текст".

Где его разместить зависит от Вашего шаблона, принципиальной разницы нет. У меня он в правом сайдбаре вверху.

Затем вставляем в этот виджет следующий код:

<script type="text/javascript" src="http://Ваш сайт/forma-svyazi/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://Ваш сайт/forma-svyazi/assets/js/xoljs.js"></script>  
<img src="http://Ваш сайт/forma-svyazi/assets/img/my_foto_60x75.jpg" style="float: left; margin: auto auto auto auto; padding: 5px  5px  5px  1px;" title="Это я" alt="Это я" />
<em><strong>Привет!</strong><br>Вы всегда можете связаться со мной, для этого просто ...</em><br>
<a href="#" title="Открыть форму обратной связи" onclick="AppendScript('http://Ваш сайт/forma-svyazi/assets/js/form.js'); return false;">Напишите мне письмо</a>

 Получится примерно такое:

Расшифровываю сам скрипт:

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

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

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

Пятая строка - это собственно вызов формы, вернее ссылка на вызывающий скрипт.

Важно! В этом скрипте Вы должны изменить в строках № 1,2,5 фразу "Ваш сайт" на реальный адрес Вашего сайта!

В строке № 3 "http://Ваш сайт/forma-svyazi/assets/img/my_foto_60x75.jpg" заменить ссылкой на Вашу фотографию или вообще удалить эту строку!

Всё! На этом подготовка формы обратной связи завершена.

Заключение

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

Данную форму можно размещать не только на WordPress, но и на любом сайте, в том числе и рукописном, т.е. без всякого движка. Для Joomla, например, есть модуль аналогичный приведённому в статье виджету - произвольный HTML код. Ну а для самодельных сайтов вопроса вообще не возникает - вставляй на любую страницу в любое место. Только надо учесть, что кодировка страниц в WordPress utf-8, на других сайтах может отличаться. В этом случае необходимо будет поменять кодовую страницу у скриптов формы, тех самых, которые мы изменяли.

Что касается адаптации формы к дизайну своего шаблона, то она сводится к изменению цвета заголовка формы обратной связи. За это отвечает файл forma-svyazi/assets/img/lay/top.png. 

Там-же я положил и top-red.png, понятно, что он красный. Чтобы использовать именно красный, то просто переименуйте его в top.png. Если-же нужен какой-либо другой цвет, то отредактируйте этот файл в GIMP или Фотошопе.

Вот собственно и всё. Ниже ссылка для скачивания.

Важное замечание!

В некоторых случаях скрипт формы может конфликтовать с jquery скриптом движка.

Ещё одно важное замечание!

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

Удачи Вам и до встречи на моём блоге.

Материалы по теме:

Минимальный набор плагинов для WordPress

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

Вывод связанных записей красиво и без плагина

Форматирование комментариев WordPress, часть первая

Плагин ARK WYSIWYG Comment Editor – визуальный редактор комментариев

Визуальный редактор комментариев