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

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

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

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

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

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

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

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

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

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

  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 скриптом движка.
Ещё одно важное замечание!
Я уже больше года не использую эту форму и давать какие либо советы для меня затруднительно. Либо работает, либо нет. Частично решение проблем освещено в комментариях.

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

Смотрите также

Огни большого города http://obg.kz

Как масштабировать изображения в CSS

В этой статье поделюсь способом как масштабировать изображения в css.    Конечно-же придуман этот способ …

Огни большого города http://obg.kz

Как по клику на кнопке открыть страницу в новой вкладке

Как по ссылке открыть страницу в новой вкладке знают все. Добавляем в ссылку атрибут target="_blank" …

95 комментариев

  1. Сергей

    Новая форма обратной связи несомненно более продвинутая. Загрузилась легко и работает просто замечательно. 
    Автору горячий респект!

    • Спасибо за такой отзыв! Рад, что у Вас все получилось. А то я, честно говоря, переживал, что с такими настройками никто кроме меня возиться не станет 🙂

       

      • Сергей

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

      • всё подключилось, всё показавает, только не преходять письма…. Почему? 

        • Ну вот так просто сложно сказать… Внимательно проверьте настройки формы и указания там своего адреса…

          Возможно Ваш хостинг не работает с php mail

          Посмотрите файл forma-svyazi/assets/xml/config.php
          Там есть блок настройки SMTP. Попробуйте использовать их…

  2. Анастасия

    Спасибо за форму, все прекрасно установилось и функционирует. Приятно, что есть такие мастера!

  3. Виктор

    Все установил, на страничке сайта работает прекрасно, однако сообщения адресату приходят в виде
    Mail delivery failed: returning message to sender. Что-то не так?
    Спасибо.

     
     

    • Виктор

      host mxs.mail.ru [94.100.176.20]: 550 Я так понял, что spam.mail.ru не допускает к себе на почту письма, от несуществующего домена. Где и что нужно исправить?

      • В админке блога — Параметры — Общие — в поле Адрес e-mail укажите свой реальный e-mail. 

        • Виктор

          Он реальный и с реально существующего хостинга srv5.host-food.ru. По-любому спасибо, мне очень понравилось, допилю самостоятельно!

          • И Вам спасибо за отзыв. Если несложно, потом скажите в чем была причина?

          • Виктор

            В общем, скипт тут не при чем! mail.ru фильтровал по подстроке dynamic в PTR. Вопрос решен с провайдером и все прекрасно работает. Еще раз огромное спасибо!!!

          • Александр

            Виктор как решить проблему ,по подробней можно не пойму

        • Спасибо, что написали о причине. А то как-то неуютно было… сомнения разные…

          Рад, что все получилось. Удачи Вам.

  4. Руслан

    В браузерах Comodo IceDragon и CoolNovo не работает!!!!

    • Завтра специально на работе установлю и попробую… Потом напишу. Но вообще-то обычно проверяется на основных популярных браузерах — IE, FireFox, Chrom, Opera…

      Comodo IceDragon сделан на базе Mozilla FirefoxCoolNovo китайский аналог на основе проекта Chromium… вроде должно работать, но возможно, что из-за особенностей сборок что-то изменено в движке или блокируется…

    • Как и обещал — установил, проверил… Всё работает без проблем в обоих указанных браузерах!

       

       

       

       

       

       

       

       

       

      Устанавливал всё по дефолту, ничего не менял. Может быть у Вас просто отключены JavaScript?

  5. Здравствуйте, Александр! Очень мне понравилась форма обратной связи Ваша. Я все сделала по вашей схеме, и… что-то не так все пошло. Слетела картинка в отзывах. И перестал работать слайдер и к тому же в сайдбаре «Последние записи» теперь выглядят не так как это требует сам шаблон. Если это возможно, подскажите пожалуйста, где я могла допустить ошибку? Спасибо!

  6. Да, ещё Александр, видно что-то с кодировкой беда в моей форме одни иероглифы сейчас вместо кириллицы

    • Здравствуйте. Посмотрел Ваш блог, очень понравился. Красиво. По поводу возникших проблем…
      1. Слайдер — не уверен, но возможно конфликтуют два скрипта jquery. Попробуйте из виджета формы связи убрать строку:
      скрипт
      Перезагрузите после этого страницу и проверьте заработал-ли слайдер? Если «Да», то посмотрите работает-ли форма связи?
      2. Кодировка формы — попробуйте в файл .htaccess добавить строку AddDefaultCharset UTF-8. Перезагрузите страницу… Помогло?
      Если нет, то посмотрите какая кодировка у файла forma-svyazi/index.php ? У меня Ansi as utf 8… можно поэкспериментировать, например выставить просто utf 8
      Если не затруднит, напишите о результатах. При какой-либо неудаче будем разбираться и думать еще…

  7. Спасибо за форму обратной связи без плагина. У меня стоит плагин. Причем к нему впридачу установился плагин капчи для этой формы. А Ваша форма подойдет мне и по внешнему виду.
    Только вот вопросик возник. Можно ее поставить не в виджетах, а на страничке «Контакты» или поставить в двух местах? 

    • В принципе можно. Если Вы обратили внимание, то у меня форма подписки расположена слева в виджете и еще под каждой статьей. А способ её реализации точно такой-же как и у формы обратной связи…

  8. Александр, спасибо за быстрый ответ! Все предложенные вами варианты перепробовала и пока успеха нет! Слайдер не работает, в самой форме вопросительные знаки, и в сайдбаре строка последние записи так и осталась не соответствующей остальным виджетам.

  9. Александр, у меня на блоге стоит плагин Shortcodes Ultimate, но я его применила только на странице http://www.kamrita.ru/ob-avtore, там похоже он конфликтует со скриптом,т.к. картинка сместилась, а рамка изображения почему-то растянулась на всю ширину.

  10. Александр, сейчас попробовала отправить сообщение через форму и не получилось. Чтобы было понятнее напишу как вижу: крутится колесико загрузки. И сообщение не отправляется

    • Елена, я заметил, что сейчас в форме вопросительные знаки, но раньше там были другие кракозябры… Значит дело все-же в кодировке. Возможно, что все остальное косячит из-за этого. Ваше крутящееся колесико увидел — пробовал написать Вам… 🙂

      Но не расстраивайтесь, как и всегда, решение где-то на поверхности…

      Для начала верните все, что изменяли, за исключением строки в файле .htaccess AddDefaultCharset UTF-8.

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

      Если все стало нормально, то предлагаю следующее: скачайте код еще раз, очень тщательно, внимательно и не торопясь внесите нужные корректировки, как описано в статье. Кодировки там уже стоят такие-же как и у меня — их вроде-бы менять и не нужно.

      Если опять что-то не так, то попробуйте временно отключить Shortcodes Ultimate.

      Если ничего не получится, то напишите, что Вы используете для слайдере… Поставлю в качестве эксперимента себе на локалку этот слайдер + Shortcodes Ultimate и посмотрю в чем дело. Так гадать очень сложно.

      Или просто дайте временно мне доступ к Вашему сайту по FTP — проверю все настройки формы. Если идеология не позволяет дать доступ, то скопируйте папку forma-svyazi со своего сервера и отправьте мне по почте — посмотрю настройки и кодировки так.

      Просто скрипт работает отдельно от движка вордпресс и по идее не должен бы конфликтовать…

       

  11. хорошо, Александр я все сделаю и потом по мере вопрос буду действовать. Спасибо большое!

  12. Спешу отчитаться, Александр! Убрала код-слайдер появился, убрала плагин, потом добавила снова код в виджет и активировала плагин. Ура слайдер работает, но теперь другая проблема- Фраза Напишите мне письмо она не активна,т.е. не переводит на форму, соответственно и кодировку не возможно просмотреть.

  13. Александр, вот эта строчка и приводит к сбою слайдера (я её вернула обратно в код) и в самой форме так и остались вопросительные знаки. Так жаль, что не получается.

    • Ну действительно жалко… Я не знаю какой там у Вас слайдер, мог бы поэкспериментировать на своем локальном блоге, но вот странное дело — я у себя тоже эту строчку убрал и все нормально работает. Этот скрипт потом еще раз вызывается уже непосредственно в коде формы. Почему у Вас не срабатывает трудно судить.

      То, что вопросительные знаки… значит что-то перешибает кодировку (как бы не тот же слайдер). Ведь в WordPress кодировка по умолчанию utf-8, в моем коде тоже. Не должно быть непоняток. Но тут в любом случае можно поиграться с кодировкой файлов формы связи, чтобы подогнать под свой конкретный случай.

      Вот не знаю… по мне, я бы уперся, что называется, рогом 🙂 но все-равно победил бы эту засаду…

      Возможно сначала-бы отключил слайдер (если дело в нем) и попробовал бы добиться работоспособности формы без него. Потом бы уже настраивал слайдер, возможно вообще сменил-бы его, вариантов же много. Но я посмотрел… Вы уже убрали форму.

      Жаль…

  14. Да, я хочу, чтобы она функционировала, и пока её не победила убрала только с виджета

  15. А слайдер у меня похоже древний Featured Content Gallery. Он рекомендован самим шаблон темы, поэтому я и воспользовалась им.

    • А слайдер у меня похоже древний Featured Content Gallery

      Попробую поставить на свою локальную копию блога и потом напишу что да как…

      Если дело в нем — разберемся. Если нет — будем копать дальше. Не переживайте, коль желание у Вас есть, значит обязательно победим!

  16. Спасибо, Александр за помощь! Буду очень ждать вашего вердикта!

    • Ну вот, как бы и первый отчет… Правда понедельник — день тяжелый и на работе сразу навалилось множество неожиданных дел, только и успевал вертеться — и интернет-магазин дополнять каталогами, и инструкции разные писать, и windows 8, ушедший вдруг в отказ в соседнем отделе, приручать… Много чего было. Но все-же я умудрился среди всей этой суматохи поставить плагин Featured Content Gallery на локальную копию блога и… а вот настроить его не смог. Нет, все, что положено для него я прописал, но то-ли мой шаблон не позволяет, то ли еще что — произвольных полей нет у меня. Ни в записях, ни в другом месте… Так, что вместо изображений у меня отображался белый прямоугольник с параметрами, которые я задал в настройках. Но тем не менее — плагин был установлен, и форма связи продолжала преспокойно себе функционировать, глубоко игнорируя все мои игры с плагином.

      Честно говоря, плагин Featured Content Gallery меня несколько озадачил своей реализацией… Что-бы добавить изображение в слайдер мне надо создать какое-то произвольное поле… Брр…

      Вообще-то я не использую слайдеры на блоге, так что не мне, наверное, судить, но воспользовавшись случаем поискал информацию и опробовал несколько различных слайдеров — очень удобный, простой и в тоже время функциональный — Easing Slider Lite. Никаких левых движений и не нужных полей. Все визуально, все настраивается. Вместо Вашего как раз-бы подошел. Ну или более серьезный — M-vSlider (не путать с vSlider — это совершенно разные)…

      Но это так, к слову. Форма у меня работала при всех слайдерах безо всяких проблем.

  17. Спасибо, Александр! Вы проделали очень большую работу — огромное спасибо! Буду разбираться дальше.

  18. Аркадий

    Спасибо, Александр за отличную форму. Также столкнулся со знаками вопроса в полях формы, и на решение наткнулся случайно: открыл файл index.php в notepad++ и в поле кодировки поставил галку «Кодировать в UTF-8(без BOM)» и все встало на места. Внимание! Если редактировать вышеуказанный файл в обычном блокноте проблема возобновляется, но лечится так же. Возможно это поможет другим пользователям. Спасибо!

    • Спасибо за отзыв. Кстати, тоже столкнулся с тем, что где-то нормально работает в кодировке UTF-8, а где-то надо именно, как UTF-8(без BOM).

      И, таки, да — notepad++ предпочитаю всем остальным инструментам!  

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

  20. Александр

    письма приходят от того email который я указал а с других ошибка
     

  21. Здравствуйте Александр. Большое спасибо за такую обстоятельную и полезную статью. Очень понравилась ваша форма обратной связи и подача материала. 
    Но при этом у меня не работает кнопка «Напишите мне письмо». Подскажите пож-та, где я накосячила ?

  22. Все,  спасибо! Разобралась и все заработало!!! Ура ! 

    • Извиняюсь, что не успел ответить на Ваше первое сообщение, только утром увидел…

      Рад что у Вас все получилось! А в чем была причина? Если не трудно — напишите, может другим пригодится…

      Спасибо!

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

        • Спасибо, Надежда! Часто бывает так, что комментарии, как в Вашем случае, несут очень важную информацию, дополняющую, детализирующую и улучшающие саму статью.
          И что-бы не писал автор, читающий все-же внимательно смотрит как оценивают это комментаторы.
          Спасибо!

  23. Здравствуйте, спасибо Вам большое, очень долго искала что то подобное, устанавливала кучу плагинов, но ничего не получалось!А тут все работает=)Но не могли  бы Вы подсказать, как сделать так если мне нужно  что бы это окно появлялось при нажатии на картинку?

  24. Ура , вроде разобралась=)только у меня теперь другая проблема,у меня колесико крутится-крутится, но ничего не отправляется!Подскажите пожалуйста в чем может быть причина?На всякий случай вот как я вставила код(может в этом причина): 

    <div id="pozvoni"><a href="#" title="Открыть форму обратной связи" onclick="AppendScript('http://indigo26.ru/forma-svyazi/assets/js/form.js'); return false;"> <img src="wp-content/themes/new indigo/img/pozvoni.jpg"   width="251" height="80" border="0"  /> </a>  </div>
     <script type="text/javascript" src="http://indigo26.ru/forma-svyazi/assets/js/jquery.js"></script>
    <script type="text/javascript" src="http://indigo26.ru/forma-svyazi/assets/js/xoljs.js"></script>
    • Юлия, здравствуйте. Немного задержался с ответом — выходные были заполнены до предела… 🙂
      Но я вижу, что Вы уже и сами разобрались во всем — и как картинку сделать ссылкой, и с отправкой самого письма. Зашел к Вам на блог и отправил тестовое письмо. Все прекрасно отправилось. Как и должно быть. Вы и шапку в форме красную поставили — Умничка!
      Удачи!

      • Спасибо,сама рада что смогла разобраться=)Еще хотела спросить, вообще их этой формы можно удалять поля, например что бы человеку не нужно было вводить свою почту или это не возможно?Хочется из нее попробовать сделать форму заказа обратного звонка,пытаюсь разобраться,но пока не выходит)

        • Конкретно из этой формы убрать поле проблематично, так-как весь скрипт завязан на этих полях и их проверку. Но! Никто не мешает, используя этот метод, создать свою форму под любые именно свои нужды. Все останется то-же самое, только будет вызываться другой скрипт формы. Например. я так сделал форму подписки на блог — тот-же метод, просто добавил еще один файлик со скриптом формы и в коде вызываю его…
          Вот посмотрите:

          <script type="text/javascript" src="http://obg.kz/forma-svyazi/assets/js/jquery.js"></script>
          <script type="text/javascript" src="http://obg.kz/forma-svyazi/assets/js/xoljs.js"></script>  
          <img src="http://obg.kz/forma-svyazi/assets/img/mail_forward.png" style="float: left; margin: auto auto auto auto; padding: 2px  5px  2px  1px;" title="Новости на почту" alt="Получить" />
          <strong>Тогда получайте анонсы новых статей на почту!</strong><br><br>
          <a href="#" title="Подписаться на новости блога" onclick="AppendScript('http://obg.kz/forma-svyazi/assets/js/smartresp.js'); return false;">Хочу  новости блога на почту!</a>

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

  25. Юлия, вот вдогон почитайте…

  26. Александр

    Добрый день! Сделал так как вы сказали, но ничего не работает и ошибку выдает в консоли Google Chrome Uncaught TypeError: undefined is not a function… Почему такое может быть?

    • Александр

      Сам отвечаю))
      Wordpress интересно работает с новыми версиями Jquery…
      Чтобы таких ошибок не было, надо весь form.js обернуть в такую конструкцию

      (function ($) {
      //Сам form.js
      }(jQuery))

      Может кому-то поможет…
      За форму огромное спасибо!

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

  27. Добрый день! Форма очень понравилась, но письма не отправляет. Хостер написал «Вам нужно использовать не php mail, а smtp введя данные вашей почты.»
    Скажите, где у вас в скрипте можно изменить данную функцию

    • Посмотрите файл forma-svyaziassetsxmlconfig.php
      Там есть блок настройки SMTP. Но вообще странный хостинг, который не работает с php mail… Вот если честно, то просто посмотрите в сторону смены хостинга на более качественный…

  28. Андрей

    Здравствуйте, не могли бы Вы пожалуйста подсказать как добавить дополнительные поля например (Телефон) в данную форму Если просто добавить в index.php, то при отправке не показывает, что сообщение отправленно, хотя на почту приходит. и в почте номер отображается как цифры например: (: 89051234567, а нужно чтобы отображалось Телефон: 89051234567)

    • Скорее всего надо добавить поле телефон в файл описания полей:

      forma-svyazi/assets/xml/fields.php

      Посмотрите там по аналогии с существующими полями… и добавьте нужное поле.

      А потом уже и в index.php…

      • Андрей

        К сожалению это не помогло((

        • Андрей, а что и как Вы делали? Я попробовал — все работает и с телефоном.
          Изменения вносятся в два файла:
          fields.php

          <?php if(basename(__file__) == 'fields.php') exit; ?>
          <?xml version="1.0" encoding="utf-8"?>
          <xml><Fields><field><alias>name</alias><name>Name</name><message>This field can't stay empty</message><func>notempty</func><is>name</is></field><field><alias>email</alias><name>Email</name><message>Enter with a valid email!</message><func>email</func><is>email</is></field><field><alias>sales</alias><name>Sales</name><is>subject</is></field><field><alias>telefon</alias><name>Telefon</name><message>This field can't stay empty</message><func>notempty</func></field><field><alias>message</alias><name>Message</name><message>This field can't stay empty</message><func>notempty</func><is>custom</is></field><field><alias>security_code</alias><name>Security Code</name><message>The security code is wrong!</message><func>sec1</func><is>sec1</is></field></Fields></xml>

          В index.php добавляете вот такую конструкцию:

          <span class="input">
          	<label for="telefon"><b>Телефон:</b> </label>
          	<input  type="text" id="telefon" name="telefon" />
          	<div class="warning" id="telefonError">Это поле обязательно для заполнения</div>
          </span>
          Результат
          Все нормально приходит и даже сообщает при отправке, если поле не заполнено
          • Андрей

            Спасибо, всё уже реализовал. Просто вчера из виду упустил один тег. Сегодня на свежую голову всё получилось. Спасибо Вам большое за помощь и за проделаную работу. Форма супер.

    • Рад, что у Вас всё получилось!

      yahoo

      Удачи!

  29. Александр, спасибо огромное!!!!
    Заменил в файле forma-svyaziassetsxmlconfig.php следующие настройки 
    <smtp>
            <!— smtp gmail config —>
                <use>yes</use>
                <auth>yes</auth>
                <secure>tls</secure>
                <host>smtp.rambler.ru</host>
                <username>werd_34@rambler.ru</username>
                <password>123456</password>
                <port>25</port>
     
            </smtp>
    И всё заработало!!!
     

    • Александр, к сожалению при отправке почты через SMTP, выскочил ещё один глюк — теперь почта отправляется только в том случае, если я прописываю в поле «E-mail» адрес своей почты —  login@rambler.ru.  В остальных случаях — опять Произошла ошибка, сообщение не может быть отправлено!
      Подскажите пожалуйста, в чём тут дело.

      • Юрий, вообще-то форма не моя, я взял её из Сети, о чем и писал в первой статье про эту форму….

        Что можно сделать? Проверьте правильность настроек SMTP, попробуйте вбить туда не рамблер, а SMTP хоста, на котором Ваш сайт…

        Меня лично вообще смущает во этот подзаголовок smtp gmail config, может автор делал только для гугловской почты?

        Но вообще, я еще раз всё-же посоветую, заставьте Вашего хостера включить php mail…

      • А еще вот это <secure>tls</secure>

        Точно-ли такой протокол безопасности? Посмотрите в настройках почтового клиента. Может быть из-за этого…

  30. Андрей

    Здравствуйте, не могли бы вы подсказать, можно ли каким нибудь образом, чтобы при заказе товара например эта форма отправляля мне на e-mail не только данные заказа, но и страницу с которой был сделан заказ?

    • Не совсем понимаю каким боком сюда можно прикрепить заказ товара… Но вообще-то сделайте скрытые дополнительные поля и передавайте в них нужную информацию. Это касается не только страницы, с которой был сделан заказ, но и многое так можно передать.

  31. Не могла найти у вас форму обратной связи.. Это минус.. Итак, что хочу сказать: Поздравляю! Вот еще один плагин, который вы можете выбрать: http://codecanyon.net/item/smart-cleanup-tools/3714047 (не успела написать о нем) Он легко и просто оптимизирует базу данных. В общем решайте. О чем я, написано тут http://nataliaakulova.ru/dolgozhdannye-itogi-3x-konkursov/ Если бы я знала, как связаться другим способом, я бы это сделала!

    • Наталья…

      А вот это в самом верху…

      Неужели так незаметно? 21

      Спасибо за поздравления! Насчёт плагинов — я ответил у Вас на блоге…

      Наталья, ещё раз спасибо! И… с началом весны Вас!  23

  32. добрый день. Форма классная! Помогите, пожалуйста убрать поля Email и  код проверки. Все ненужное мне убрал и нет проблем, а после удаления этих двух полей, возникают проблемы при отправке. редактировал index.php и fields.php

    • Денис, а зачем эти поля убирать? Как Вы, например, узнаете кому отвечать? Дело в том, что эти поля проходят валидацию и тут надо копаться в js-скриптах… Вроде как в файле forma-svyazi/assets/js/js.js надо ковырять…

  33. Я добавил поле «Номер телефона». Это нужно для рабочего сайта, чтобы мы клиентам просто звонили.

  34. Александр, спасибо. Все разобрался и сделал.

  35. Александр, здравствуй!

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

    Александр, кнопку обратной связи в виджете я нашла, но почему-то эта кнопка ведет на эту же записьcheeky??? Это специально так или сбой какой-то?

    • Чего-то я не поняла… Сейчас снова зашла сюда, кнопка обратной связи работает, значит ложная тревога, извини.

      • Софья, здравствуй! Я этим кодом не пользуюсь уже 100 лет! Давно уже стоит Contact Form 7

        Насчёт востребованности… Ну вот зашёл пользователь на сайт, почитал что-то и решил задать какой-то вопрос или ещё что написать автору… И откуда-же он должен взять мой адрес? Искать мои ответы в комментариях и там смотреть?

        Это неправильно.

        Кстати, я получаю много писем именно через форму обратной связи.

        • Александр, мне понравилась форма, которая всплывает, это шикарно!

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

          • Ну в принципе, мне тоже в модальном окне нравится больше, чем просто страница с контактами… Как то стильнее, что-ли… Хотя по сути — это лишний наворот, но красиво… cheeky

  36. Ой, спасибо Вам огромное!

    • Да не за что. Рад, что пригодилось. Правда сам я давно этот метод уже не использую. Посмотрел у Вас на сайте — работает нормально. Ну и пару замечаний заодно… заголовок "Заказать обратный звонок" не совсем подходит для этой формы. Есть для обратных звонков специальные скрипты. Пример работы самого простейшего можно посмотреть вот здесь — в верхнем меню пункт "Контакты" и там как раз есть обратный звонок… Кликните по нему посмотрите. Удобно. И ещё, у Вас практически форма обратной связи продублирована в правом сайдбаре… Зачем тогда лишние скрипты, если форма связи у Вас и без того имеется?

  37. Александр спасибо, даже несколько преобразовал вашу форму.. получилась форма обратной связи, в виде заявки на покупку квартиры.. Спасибо вам, как человеку! 

    Вот то, что получилось: http://km-evro-city.ru/static/buyers/&nbsp;

    • Спасибо, Влад. Красиво получилось, посмотрел. Сам я эту форму давно уже не использую. Сначала перескочил на плагин Contact Form 7, потом поставил себе другой скриптик, мне он больше нравится…

      • Да, для вордпресса контакт форм 7 самое лучше решение на сегодняшний день.. у самого сайты на вордпрессе 90%, но если самописный движок, то с поддержкой smtp ваша форма идеальное решение. Еще раз доомо аригато!

  38. Здравствуйте что то не получается с формой не отправляет после нажатие кнопки отправить крутиться колесико и не каких движений.Уже незнаю что и делать два раза начинал все сначала.Подскажите  или возможность скинуть вам доступ

    • Алексей, честно говоря, уже наверное не подскажу — сам я этой формой давно перестал пользоваться. Но тут есть несколько вариантов.

      1 — Если всё сделано правильно, то должно работать. Возможно где-то какой-то код не полностью скопирован, тут только проверять посимвольно. Или неправильно заменили тестовые данные на свои реальные…

      2. Возможно, что на хостинге закрыта функция mail() и отправка только посредством smtp — надо уточнять у хостера.

      3. Посмотрите по комментариям, у кого-то была похожая проблема — решили.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *