Форма обратной связи без плагинов (Страница 2 из 6)

2 pavlexx

Пробую форму на тестовом сайте на локальном сервере (OpenServer). Не использую GS Custom Settings, потому что не понял пока, с чем его едят. Хочу запусть форму, внося ручные правки непосредственно в шаблон, попробовать на чистую, без внесения своими ручонками дополнительных косяков использованием прибамбасов. Автоматика - это потом.

В папку темы закидываю следующее:
папку assets
файл feedback.inc.php

В шаблон страницы обратной связи вставляю код

<?php include('feedback.inc.php'); ?>

В шаблон перед <?php get_footer(); ?>  добавляю скрипты

<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>

Из кода файла  feedback.inc.php удаляю

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

и

<?php } ?>

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

$es['from_mail']             = 'support@site.ru'; // адрес почты, с которой идет отправка или из формы => $_POST['email']

(кстати, предназначение этой строки мне непонятно. Какой адрес туда вносить? Свой вроде в скрипт выше уже вставлял...)

Заполняю поля, ввожу капчу, отправляю письмо - результат после отправки - на скриншоте. Что я делаю не так?

ЗЫ. Алексей, и еще вопрос: ясно, как отключать капчу, если использовать чекбокс в настройках в админке. А как её отключить ручками, без использования GS Custom Settings?

2 pavlexx

Убрал код капчи. Далее

var recipient_mail = "<?php get_setting('feedback_form','email'); ?>"

заменил на

var recipient_mail = "support@site.ru";

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

Адрес почты прописал так, да. И ваше предположение, Алексей, насчет  jQuery, оказалось верным. Подключил скрипт - форма заработала.
Я бы во избежание таких вот мусорных постов, как мои предыдущие, в шапке темы указал, что для работы формы нужно подключение скрипта jQuery. В каких-то шаблонах он уже подключён, а в каких-то ведь придется и ручками. Поверьте, это далеко не для всех аксиома.
Ну, первый этап пройден :) Дальше буду разбираться с GS Setting и пробовать уже с ним.
ЗЫ. И еще хочу разобраться с мылами, используемыми в вашей форме.
Вот это,

 var recipient_mail = "support@site.ru";

это, если я правильно понял, мыло, на которое приходит сообщение, т.е. мое мыло, мыло админа сайта, ну или кто там должен получить сообщение с формы обратной связи.
А вот в стр.15 в файле config.php - это что за мыло?

$es['from_mail']= ''; // адрес почты, с которой идет отправка или из формы => $_POST['email']

Где, в каком месте письма это мыло отображается?
У меня в шаблоне сейчас эта строчка выглядит именно так, т.е. контента между кавычками нет.
И стр.16,

$es['from_name'] = 'Администратор'; // имя отправителя или из формы => $_POST['name']

В письме контента этого поля я не нашел (кроме "С уважением,<br>Администратор", но это не оно)
Такие вот вопросы возникли.
В целом же, Алексей, первые впечатления от формы сугубо положительные.
Основной плюс - автономность, отсутствие привязки к капчевым сервисам.
Второе - возможность полной настройки внешнего вида.
Третье - легкость установки, даже если учесть, что это не плагин. Свою возню за трудность я не считаю, один раз разобраться - после этого установка - дело пяти минут.
Четвертое - вариабельность. Капча/без капчи, с аттачем файлов/без этого, ручками прописывать/через плагин GS Setting - это здорово. Окончательно мнение сложится, конечно, когда разберусь досконально, но даже сейчас всё очень и очень нравится.
Спасибо вам за труд и за то, что щедро поделились его результатами :)

Разобрался с GS Custom Settings, попробовал весь комплект в сборе. Красота. Субъективно - форма работает более шустро, чем в плагине getsimple_contact, я имею ввиду время появление сообщений об отправке или ошибках после нажатия Submit. Возможно, это связано с тем, что у него сторонняя капча, а в вашем скрипте локальная. Но скорость работы радует.
Алексей, еще раз спасибо за отличный скрипт, наконец-то появилась адекватная и легкая полноценная замена плагину getsimple_contact. Лично я буду использовать в работе именно ваш скрипт.
ЗЫ. Касаемо GS Custom Settings - пока всем рекомендую использовать версию 0.6, т.к. 0.6.1 и 0.6.2 глючат. Тут об этом подробней.

Приветствую всех!

В общем обновил я свою форму, выкладываю для теста и оценки работы новую версию!

1. Перешел на новый валидатор: jQuery Form Validator
Этот валидатор хорош тем, что можно прямо в шаблоне формы можно настроить под свои нужды проверку данных и не нужно лезть в js и настраивать. Все примеры по настройке найдете на сайте валидатора.
Для того, чтобы вы могли сами обновлять валидатор - разместил его в отдельной папке, т.ч. для обновления нужно просто скопировать с заменой новые файлы.

Возможности валидатора очень радуют! Например в поле Ваше имя я настроил чтобы каждое слово автоматически начиналось с заглавной буквы. Можно через параметр data-validation-help="" указать подсказку, которая будет появляться при получении полем фокуса. И еще много других возможностей!

Некоторые правки (если не устраивает настроенная мной проверка) все-таки нужно сделать, но и здесь я облегчил работу: в файле form-submit.js прописал строки и закомментировал.

2. Я решил отказаться от поддержки старых браузеров, в частности IE<10 версии, и объединить в одной форме все предыдущие наработки. Настройку формы реализовал через плагин GS Custom Settings, в архиве с формой лежит файл feedback_form_data.json с настройками, просто импортируйте его. В настройках можно задать адрес почты для писем, использовать или нет капчу, использовать или нет вложение файлов.

3. Теперь обрабатывается только та форма в которой прописан класс ajax-form!
Если будете переделывать форму под себя, то id полей обязательно сохраните для корректной работы скрипта.
Конфиг для настройки остался прежний.

4. Форму настроил так, что пока посетитель не заполнит правильно все обязательные поля - кнопка Отправить не активна, для этого в форму добавлен класс toggle-disabled! Внимательно посмотрите шаблон перед тем как будете править!
Проверка данных при такой реализации проходит налету, по мере заполнения полей.
Опять таки это все можно настроить под себя, используя возможности валидатора!

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

6. Пример стилизации формы можете посмотреть в файле form-validator/theme-default.css

Еще раз хочу обратить внимание на то, что если вы хотите воспользоваться настройками формы из админки - вам необходимо установить плагин GS Custom Settings!

Работу формы можно посмотреть на тестовом сайте, для проверки формы сообщение будут отсылаться на адрес, который вы укажете в форме.

Скачивайте, тестируйте, делитесь своим мнением и пишите об ошибках!

Имя вложенного файла видно при наведении на кнопку. А вообще это стилизация UiKit, можно и стандартное поведение сделать!
Олег, имеешь ввиду jpg? Только что пробовал - все норм.

Всем привет!

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

Архив с формой и тестовый сайт обновил.

Всем привет!

Дело было вечером - делать было нечего... Вот и доработал форму!

1. Изменил логику формирования письма. Теперь в форму можно добавлять полей столько - сколько вам нужно!
Добавляйте поля стандартно, задавая свои ID, NAME и параметры валидации, например:

<input type="text" id="f-date" name="Data" class="" data-validation="date required" data-validation-format="dd/mm/yyyy" placeholder="Введите дату">

Жестко привязанными к ID и NAME остаются только те поля, которые присутствуют сейчас в форме.
Т.е. удалять вы их можете, но при добавлении обратно ОБЯЗАТЕЛЬНО пишите те ID и NAME, которые прописаны у меня в форме!!!

2. Изменил вид сообщения в связи с изменением работы скрипта и логики формирования письма.
Теперь сообщение формируется в виде таблицы по принципу: значение <name> поля | value поля
Поэтому, если нужно чтобы в письме отображались параметры на русском - задавайте значение параметра name на кириллице, например:

<input type="text" id="f-data" name="Дата" ...>

3. Если вы не укажете элемент для вывода имени прикрепляемого файла

<p id="f-filename" class="uk-form-help-block uk-text-small"></p>

то этот блок создается автоматически и добавляется в конец родительского контейнера.

4. Сама форма особо не поменялась, за исключением одного параметра:

... action="<?php get_theme_url(); ?>/assets/form/" ...

для защиты от спама - убрал имя файла, отвечающего за отправку письма. В конце пути к каталогу с формой обязательно ставьте "/".

5. Если убрать в форме класс toggle-disabled - включается обычное поведение формы и валидации, если оставить этот класс - кнопка Отправить будет заблокирована, пока не будут правильно заполнены все обязательные поля! Для вкл/выкл этой функции теперь не нужно править js!

Тестовый сайт и архив с формой обновил!

У вас есть несколько возможностей перевести сообщения об ошибках на нужный вам язык:
1. В файле form-submit.js есть параметр lang: 'ru', отвечающий за язык сообщений. Сами языковые файлы лежат в папке валидатора в lang. Если закомментировать этот параметр - сообщения будут выводиться на английском языке (по умолчанию). Либо укажите нужный вам язык, например lang: 'de',

2. Вы можете при верстке формы указать свое сообщение об ошибке через параметр
data-validation-error-msg="Ваше сообщение об ошибке"

В новой версии валидатора появится поддержка еще большего кол-ва языков!

На счет Bootstrap - этот валидатор как раз и разрабатывается с поддержкой этого фреймворка! У него даже классы Bootstrap применяются для стилизации. Посмотрите внимательно http://www.formvalidator.net/index.html … on_styling

В файле form-submit.js я сделал комментарии.

Форму можете переделать под свой фреймворк. Классы которые я использую для валидации и стилизации совсем немного (причем часть из них добавляется динамически, скриптом):
ajax-form - необходимо добавить в саму форму (<form id="feedback-form" ... class="toggle-disabled ajax-form" ...>), без этого класса форма проверяться и отправляться не будет!

toggle-disabled - необходимо добавить в форму для блокировки кнопки <Отправить> пока не заполнены поля

form-result-error - для стилизации сообщения об ошибке при отправке (выводится в <div id="form-result-send" class="form-result-ok"></div>)

form-result-ok - для стилизации сообщения при успешной отправке (смотрите выше)

valid - для стилизации правильно заполненных полей

uk-form-danger - для стилизации сообщений об ошибке при заполнении полей (класс UiKit)

Если хотите использовать свои классы - можете поменять их в файле form-submit.js.

еще бы как-то config.php тоже сделать доступным для GS Custom Settings

Всем привет!

ЭХ, опять придется много писать, а вам много читать!

Озадачил меня Олег olsv64 таким вопросом: а как использовать на странице несколько моих форм?
Пришлось подумать... и в очередной раз доработать форму.
Теперь вы можете располагать несколько форм на одной странице (например, простая форма в футере и на самой странице контактов более развернутая) и все они должны корректно обрабатываться!
Главное не забудьте назначать каждой форме и ее элементам разные ID!

И так, по порядку:

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

2.) Та форма, которая сейчас у меня настроена - стандартная форма с привязкой NAME к конфигу и обработчику. Специально сделал значения NAME с заглавной буквы. Вы можете использовать и свои значения, но тогда значения заголовков для письма из конфига не будут браться. Так же значения "Name" и "Email" используются для формирования заголовка письма. Поэтому желательно использовать те значения NAME, которые прописаны мной! А вот те поля, которые вы будете добавлять самостоятельно - можете оформлять как вам угодно! Правила по формированию NAME я описал в посте выше.
Удалять поля можете безболезненно, но с оглядкой на особенности, которые я указал выше.

Какие NAME привязаны к конфигу и обработчику:
Name - имя отправителя
Email - E-mail отправителя
Phone - телефон
Subject - тема сообщения
Message - текст сообщения

Эти значения менять НЕЛЬЗЯ!!!
Attachment - поле для вложения
Norobot - поле ввода капчи
Spam - скрытое поле для защиты от спама

3.) Шаблон формы немного подкорректировал. Капча теперь вставляется не в ссылку, а просто через IMG. Убрал лишние ID и классы.
Обязательно прописывайте в <form>

... action="<?php get_theme_url(); ?>/assets/form/" ... method="POST" enctype="multipart/form-data" ...

если используете свое расположение каталога form - пропишите в action="" соответствующий путь!

4.) Функцию по обновлению капчи перенес в скрипт, обновляется так же, по клику на картинке.

5.) Распишу классы, которые я использую для стилизации.
Обязательные классы, прописанные в скрипте:
ajax-form - класс прописывается в <form>, без этого класса форма обрабатываться не будет.

form-result-send - прописывается в блоке, куда будут выводится сообщения после нажатия кнопки "Отправить". У меня используется <div>.

attach-filename - прописывается в блоке, куда будет выводится название прикрепляемого файла. У меня используется <p>. Если не указать этот блок - он создается автоматически и размещается в конце родительского контейнера.

img-captcha - класс для картинки с капчей.

form-captcha - класс для поля ввода капчи.

Классы валидатора, ошибок и корректных данных:
valid - класс для корректно заполненного поля (дефолтный класс Валидатора).

error - класс для поля с ошибками (дефолтный класс Валидатора).

form-error - класс для сообщения об ошибке при заполнении поля (дефолтный класс Валидатора).

form-result-ok - класс для блока form-result-send при успешной отправке письма.

form-result-error - класс для блока form-result-send при ошибке отправки письма и неверно введенной капчи.

toggle-disabled - класс прописывается в <form> для отслеживания формы в которой нужно блокировать кнопку "Отправить" пока не будут заполнены все обязательные поля.

disabled - класс для заблокированной кнопки "Отправить" (дефолтный класс Валидатора).

Чтобы облегчить вам жизнь - в архив вложил css файл со своими стилями для формы.

6.) Шаблон template-fb.php тоже претерпел некоторые изменения, внимательно посмотрите на блок:

<!-- FORM -->
...

7.) В файл form-submit.js добавил комментарии и некоторые опции.

8.) Использование библиотеки jQuery обязательно. Посмотрите порядок подключения в шаблоне template-fb.php!

Собственно форму можете посмотреть на тестовом сайте.

На этом все, вроде ничего не забыл.

Качайте архив, тестируйте и отписывайтесь здесь!

Всем удачи!

Проверьте чтоб jQuery не подключалась у вас дважды и проверьте пути расположения библиотеки!
У меня на сайте все работает, и меню и форма. И не важно где подключается библиотека в хедере или перед </body>.
И еще, попробуйте использовать ту версию jQuery которую использую я.