1 (2016-06-24 18:35:50 отредактировано pavlexx)

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

День добрый всем!

Решил сделать форму обратной связи не прибегая ко всяким плагинам.
Так как для верстки я использую framework UiKit - форма сделана на нем же.
Адаптировать под другой framework не составит особого труда.

Все началось с того, что для одного проекта заказчик выставил требования которые нельзя реализовать плагинами Getsimple Contact и p01contact не покопавшись в них.
Поэтому я решил, что проще один раз потратить время и сделать форму самому, чем разбираться в "чужих" трудах. wink
Собственно форму можете посмотреть на тестовом сайте.
Можете ее протестировать, письмо придет на указанный в форме адрес.
Исходные файлы пока не размещаю, если будет интересно такое решение и кому-то пригодиться - тогда прикреплю архив со всем необходимым.
Да, забыл упомянуть, что форма адаптивна. Вариант пока не окончательный, смотрю что еще можно сделать, улучшить.

Хотелось бы услышать ваше мнение: что можно доделать, что исправить, есть ли ошибки.....

UPD. Скачать тему с формой можно по ссылке https://yadi.sk/d/BMrETi6qi6egB
Все файлы специально не стал сжимать, чтобы можно было посмотреть код и использовать в своих разработках!
Шаблон с формой обратной связи называется template-form.php
Пользуйтесь на здоровье! wink

UPD. 2 Изменил положение сообщений об ошибках и добавил иконки. Возможно так будет лучше!?

UPD. 3 Добавил капчу, немного переписал скрипты.

UPD. 4 Переписал скрипт, теперь поля "не прыгают". Предложил свой вид страницы контактов. wink
Также разместил пример "Политики конфиденциальности".
Файлы пока не размещаю и не обновляю ссылку, если будет интерес к такому варианту - выложу шаблон и обновленную форму!

UPD. 5 Обновленную форму и подробное описание смотрите здесь!

UPD. 6 Новая форма с новым валидатором и описанием изменений здесь!

UPD. 7 Доработанная форма, с возможностью использования нескольких экземпляров на одной странице и добавления своих полей без правки скрипта, и подробное описание расположены здесь!

UPD. 8 Релиз формы обратной связи, версия 1.0!

С уважением,
Алексей

Поблагодарить за помощь можно через Яндекс!

Поделиться

2

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

классная форма, еще бы каптчу добавить, можно эту http://www.opencaptcha.com/
и ссылочку-то на файлы все-таки дайте, люди потестируют
а поля свои можно будет добавлять?

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

3 (2015-07-26 15:48:00 отредактировано pavlexx)

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

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

Поблагодарить за помощь можно через Яндекс!

Поделиться

4

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

есть русская вики http://get-simple.info/wiki/ru:plugins:creation

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

5

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

Красивая форма! Ищу способ отправки сообщений с сайта через smtp, потому что злой хостер отключил функцию mail() для всех разом - боится спама от всяких джумл и т.п.

Можно ли адаптировать эту форму, чтобы работала через авторизацию по smtp?

Поделиться

6

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

Конечно можно!

Посмотрите внимательно файл email-send.php:

//  $mail->isSMTP();
//
//  $mail->Host = 'smtp.mail.ru';
//  $mail->SMTPAuth = true;
//  $mail->Username = ''; // логин от вашей почты
//  $mail->Password = ''; // пароль от почтового ящика
//  $mail->SMTPSecure = 'ssl';
//  $mail->Port = '465';

Раскомментируйте и заполните свои данные!

А строчку ниже наоборот закомментируйте:

$mail->IsMail();

Пробуйте, потом отпишитесь! wink

Поблагодарить за помощь можно через Яндекс!

Поделиться

7 (2015-10-05 18:39:26 отредактировано pavlexx)

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

Обновил форму и страницу на тестовом сайте!
(изменения в первом сообщении)
Смотрите, оценивайте и отписывайтесь (при желании).

Поблагодарить за помощь можно через Яндекс!

Поделиться

8

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

еще бы ajax каптчу приделать smile, а то я вот приделал ajax к p01-contact, а каптча не работает

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

9 (2015-10-05 19:30:46 отредактировано pavlexx)

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

У меня же через невидимое поле сделана защита!
Но есть и капча, которая генерируется локально, на сайте!
Можно и так и так, как душе угодно! wink

Поблагодарить за помощь можно через Яндекс!

Поделиться

10

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

ага, упустил из виду

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

11

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

в приходящих письмах порядок по-моему не правильный
http://prntscr.com/8o19pu

мне кажется должно быть так
http://prntscr.com/8o1a2w

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

12

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

Это все настраивается по вашему желанию! wink

Поблагодарить за помощь можно через Яндекс!

Поделиться

13

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

я пытался разобраться, но пхп не для меня smile

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

14

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

Олег, если нужно - я сделаю подробное описание, что и где нужно подправить под себя!
Просто, если мое решение никому не подходит - смысл расписывать все подробно.
Я, например, уже давно отказался от плагина "контактов" и все делаю по своему! wink
Есть валидация, и капча есть, и вид письма можно настроить, отправителя, кому ответ направить...
В общем мне ручками не составляет труда все настроить, тем более что нужно подправить не более 10 строк кода под проект!

Поблагодарить за помощь можно через Яндекс!

Поделиться

15

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

ваше решение мне точно пригодится smile я вообще собираю все, что может пригодиться
еще вопрос, нельзя ли как-то сделать так, чтобы можно было использовать для настроек вашей формы этот плагин?
http://get-simple.info/extend/plugin/gs … tings/913/
то есть как-то бы иметь возможность добавить поля этого плагина не только в template-form.php, а и в email-send.php
может быть есть какая-то возможность использовать в теме файл function.php
этот плагин, кстати, позволяет создавать любые настройки для тем, я делаю с ним новую платную тему
http://prntscr.com/8o55bo
на картинке видно настройки ajax формы - это не ваша, это я сделал для плагина отзывов, там каптчи нет
ваша форма работает замечательно, только вот небольшая неувязка описанная выше, как-то не комильфо когда мне приходит письмо от меня smile

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

16 (2015-10-06 02:03:38 отредактировано pavlexx)

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

Олег, я специально сделал на тестовом сайте чтобы письмо приходило на адрес, который указываете в форме (чтобы можно было протестировать).
Или я не правильно вас понял!?
По добавлению полей нужно подумать. Вообще mail-send.php - это же обработчик данных формы.
Я через параметры формы сделал передачу расположения mail-send.php:

<form id="contact-form" action="<?php get_theme_url(); ?>/assets/form/email-send.php".....

думаю и с другими параметрами можно будет сделать.

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

$mail->CharSet = 'UTF-8';
$mail->setFrom($_POST['email'], $_POST['name']); // адрес почты и имя отправителя
$mail->addAddress('ваша-почта@mail.ru'); // адрес почты, на которую идет отправка
$mail->addReplyTo($_POST['email'], $_POST['name']);
Поблагодарить за помощь можно через Яндекс!

Поделиться

17

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

pavlexx пишет:

Файлы пока не размещаю и не обновляю ссылку, если будет интерес к такому варианту - выложу шаблон и обновленную форму!

Конечно интересно! Буду благодарен!

Поделиться

18 (2015-10-06 08:20:43 отредактировано Nakhodka)

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

0zz пишет:
pavlexx пишет:

Файлы пока не размещаю и не обновляю ссылку, если будет интерес к такому варианту - выложу шаблон и обновленную форму!

Конечно интересно! Буду благодарен!

Поддерживаю на все 100!!!

Поделиться

19 (2015-10-07 09:26:49 отредактировано pavlexx)

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

Всем привет!

Пока шаблон и описание не размещаю!
Пробую увязать свою форму с плагином http://get-simple.info/extend/plugin/gs … tings/913/
если все получится - будет очень удобно в настройке.
Поэтому пока ждите! wink

Поблагодарить за помощь можно через Яндекс!

Поделиться

20

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

Значит будем ждать !

Поделиться

21 (2015-10-21 09:29:05 отредактировано pavlexx)

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

Всем привет!

Ну что, можете меня поздравить! wink
Доработал я свою форму, теперь настраивать и использовать, думаю, будет удобно и понятно!?

А сейчас я буду много писать smile

Итак, сразу даю ссылку на скачивание обновленной формы обратной связи.
Форму вынес в отдельный файл, который можете подключить к любому шаблону. Для пример подключения в архиве есть шаблон template-con.php (кстати кому нужно - посмотрите как можно подключать Yandex-карты без привязки к аккаунту в шаблоне). В шаблоне все прокомментировал, чтоб было понятно что и где.

Для настройки адреса почты и использования капчи настоятельно рекомендую использовать плагин GS Custom Settings, пример страницы настроек можете посмотреть здесь.

Что реализовано на данный момент:

1. Т.к. передача данных по Ajax отличается при использовании вложений от стандартной формы - имеется два файла форм: fbattach.inc.php - форма с вложением, feedback.inc.php - стандартная форма. В шаблоне просто закомментируйте ту форму которая вам не нужна или удалите строку:

<h2>Напишите нам</h2>
<!-- FORM стандартная форма -->
<?php include('feedback.inc.php'); ?>
<!-- END FORM -->
            
<!-- FORM форма с вложением -->
<!-- <?php include('fbattach.inc.php'); ?> -->
<!-- END FORM -->

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

<!-- FORM -->
<!-- для формы с вложением заменить в пути к файлам feedback на fbattach -->
<script>
  var recipient_mail = "<?php get_setting('feedback_form','email'); ?>"; // адрес, куда отправлять письма "contact@mail.ru" или из компонента/плагина
</script>
<script src="<?php get_theme_url(); ?>/assets/feedback/js/jquery.validate.js"></script>
<script src="<?php get_theme_url(); ?>/assets/feedback/js/messages_ru.js"></script>
<!-- функция для обновления капчи по клику -->
<script>
  function reload_captcha(){
    src="<?php get_theme_url(); ?>/assets/feedback/captcha/captcha.php";
    if (document.captcha) {document.captcha.src=src+'?rand='+Math.random();}
  }
</script>
<script src="<?php get_theme_url(); ?>/assets/feedback/js/form-submit.js"></script>

Для передачи данных с вложением я использую FormData, как передать по другому пока не знаю (не особо силен я в jQuery hmm), но имейте ввиду что FormData поддерживается только в IE10+ ! Стандартная форма будет работать в любом браузере. Поэтому и сделал такое разделение форм.
Т.к. формы одинаковые, за исключением поля выбора файла, буду пояснять на примере стандартной.

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

2. В форме реализовано включение/отключение капчи через плагин (использую чекбокс):

<?php if (return_setting('feedback_form','captcha')) { ?>
<div class="uk-grid">
  <div class="uk-width-1-1">
    <label class="uk-form-label" for="f-captcha">Введите число:</label>
    <div>
      <a href="javascript:void(0)" onclick="reload_captcha()" title="Обновить"><img src="<?php get_theme_url(); ?>/assets/feedback/captcha/captcha.php" name="captcha"/></a>
      <input id="f-captcha" type="text" name="norobot" />
    </div>
  </div>
</div>
<?php } ?>

соответственно укажите свои параметры в этой строке:

<?php if (return_setting('feedback_form','captcha')) { ?>

если не хотите использовать плагин - удалите строки:

<?php if (return_setting('feedback_form','captcha')) { ?>

и

<?php } ?>

3. Адрес почты, на которую будут отправляться письма, теперь можно указать тремя разными способами. У меня реализовано через плагин. Можно так же вводить через компоненты или ручками, напрямую в шаблоне:

<script>
    var recipient_mail = "<?php get_setting('feedback_form','email'); ?>"; // адрес, куда отправлять письма "contact@mail.ru" или из компонента/плагина
</script>

4. Теперь у формы есть конфиг, где можно указать все необходимые данные:

// E-MAIL method of sending messages
$es['smtp_mode']             = 'disabled';  // SMTP enabled or disabled
$es['smtp_host']             = null;        // Specify main and backup SMTP servers => 'smtp1.example.com;smtp2.example.com';
$es['smtp_port']             = null;        // TCP port to connect => 587;
$es['smtp_secure']           = 'tls';       // Enable TLS encryption, `ssl` also accepted
$es['smtp_username']         = null;        // SMTP username => 'user@example.com';
$es['smtp_password']         = null;        // SMTP password => 'secret';

// E-MAIL send options
$es['from_mail']             = '';             // адрес почты, с которой идет отправка или из формы => $_POST['email']
$es['from_name']             = 'Администратор'; // имя отправителя или из формы => $_POST['name']

// E-MAIL message options
$es['msg_title']             = 'Email message feedback form';
$es['msg_header']            = 'Информация отправлена с сайта site-name.ru';
$es['msg_header_subject']    = 'Тема сообщения:';
$es['msg_subject']           = 'Сообщение с сайта site-name.ru';
$es['msg_header_sender']     = 'Отправитель:';
$es['msg_header_mail']       = 'E-mail:';
$es['msg_header_phone']      = 'Телефон:';
$es['msg_header_message']    = 'Сообщение:';
$es['msg_header_signature']  = 'С уважнием,<br>Администратор';

У каждой формы свой конфиг, который лежит в папке формы, для примера /assets/feedback/config.php

Пояснение по // E-MAIL send options, указываете свои данные в ' ', например так:

$es['from_mail']             = 'support@site.ru';

а если хотите чтоб подставлялись данные из формы - ставите код из комментария:

$es['from_mail']             = $_POST['email'];

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

$es['msg_subject']           = 'Сообщение с сайта site-name.ru';

msg_header_* - это заголовки соответствующих данных в письме.
Расписывать все не буду, думаю и так должно быть понятно, если нет - спросите позже!

5. Теперь лезть и разбираться в файлы email-send.php и form-submit.js не нужно, все настраивается через конфиг и плагин. Более того, если вы удалите в форме какое-то поле, например "телефон" - в письмо заголовок, информация по телефону не попадет! Обязательным оставил только сообщение. Поэтому можете удалять не нужные поля смело.

6. После успешного/не успешного отправления письма КАПЧА автоматически обновляется. Так же она обновляется по клику на ней.

7. Скрытое поле никуда не делось, поэтому если вы не используете КАПЧУ спам будет отсеиваться через это поле. Включаете КАПЧУ - получаете двойную защиту! smile

ФУХ, вроде все написал, если что упустил - позже дополню!

Скачивайте, смотрите, тестируйте. Обнаружите ошибки или будут пожелания - пишите в этой теме.

Всем удачи!
С уважением, Алексей

Понравится/пригодится мое решение - скажите спасибо! wink Значит мои труды не напрасны.

Поблагодарить за помощь можно через Яндекс!

Поделиться

22

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

так все-таки плагин или файл шаблона? то есть копировать в папку Plugins и там активировать?

первые 5 минут полета:
1) активировать через плагины не получилось - скопировал в плагины, нажал "Включить" - и перестали открываться вкладки админки. Удалили их вручную, все вернулось.. Пытаюсь подключить через шаблон.
2) остались файлы .DS_Store - как я понимаю, это скрытые файлы Mac OS
3) template-con.php сам по-себе не работает, так как у меня нет header.inc.php, других вызываемых файлов шаблона или папки "lib", например..  ну ок, это просто пример, как я понимаю, и оттуда нужно копировать...
4) пока разбираюсь с другими файлами.. на мой непрофессиональный взгляд - файлов довольно много для простого пользователя, трудновато с ходу разобраться.
5) а есть возможность сделать его мультиязычным - вынести все переводы в отдельные файлы?
.. это первое, с чем столкнулся.. продолжаю разбор полетов )

Поделиться

23 (2015-10-08 19:53:44 отредактировано pavlexx)

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

0zz пишет:

так все-таки плагин или файл шаблона? то есть копировать в папку Plugins и там активировать?

Плагин для настройки вы используете GS Custom Settings, а я разместил шаблоны форм, которые вы закидываете в свою тему!

.DS_Store - да это от MAC OS остались, просто удалите их.

Я предложил вариант - вы подстройте под свою тему, свое расположение файлов, свое подключение шаблонов!

Поблагодарить за помощь можно через Яндекс!

Поделиться

24

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

pavlexx пишет:

Понравится/пригодится мое решение - скажите спасибо! wink Значит мои труды не напрасны.

Спасибо огромное за труды !!!

Поделиться

25

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

Очень понравилась Ваша форма обратной связи, Ваш пример получился очень красивым и  хочется Вашу форму обратной связи  применить у себя  - но знаний не хватает, получается не так и не то... Я только начинаю изучать GetSimple, PHP тоже "видел, но не знаю". Прошу помощи и консультаций,  готов оплатить труд... Заранее спасибо.

Поделиться