Форма обратной связи на ajax с автоответчиком и без него
Ajax форма обратной связи полезна и красива на любом современном сайте. Давайте рассмотрим ее подробнее.
Форма работает во всплывайке — всегда позиционируется справа в окне и плавает вместе с прокруткой страницы. В ней есть автоответчик (который можно отключить), — т.е. если пользователь оставляет письмо на сайте, то одно идет вам на почту, а второе формируется и высылается ему обрантно на email, который он указал в почте. Текст сообщения для автоответчика вы вписываете сами + можете прикрепить к обратному письму файл на скачку.
Если данные вводятся верно, то они подсвечиваются зеленым, иначе красным. После того, как пользователь ввел все данные и нажал кнопку «Отправить» — появляется информер безе перезагрузки страницы, что сообщение было отправлено и отправляется два письма — первое админу о данных пользователя, второе — самому пользователю с вашим текстом и файлом на скачку (например, прайс). Отправку автоответчика можно отключить.
Установка
1. Скачайте архив и загрузите папку ajax2 в корень вашего сайта
2. Проверьте скрипт на работоспособность: ваш_домен/ajax2/index.html
3. Если все ОК — скопируйте код с файла index.html на ваш сайта, после чего этот файл можно удалить
4. Если у вас подключена библиотека jquery.js — то удалите строку <script type=»text/javascript» src=»http://code.jquery.com/jquery-1.6.min.js»></script> (от index.html)
Настройки
Откройте ваш_домен/ajax2/mail.php
1. В строке 6 настройте свой емайл — вместо [email protected] напишите свой, куда будут приходить сообщения. Строка 7 и 8 — тема письма
2. Строки 18-26 — код автоответчика — если он вообще не нужен — удалите их и форма будет работать в обычном режиме. Если нужен, то строка 19 — тема письма, строка 20 — текст письма для пользователя, строка 21 — файл, который автоматически передается пользователю на скачку. Здесь переменная $adrfile — путь к файлу на скачку, а $namefile — произвольное имя, которое пользователь будет видеь в письме. Обратите внимание, что в обоих переменных обязательно надо указывать расширение файлов. Сам файл находится в папке ваш_домен/ajax2/file. Пример — вам необходимо поставить на скачку файл prise.xsl — загружайте его в папку ваш_домен/ajax2/file, а строку 21 изменяйте следующим образом: $adrfile = ‘file/prise.xsl’;$namefile = ‘prise.xsl’;
Скачать ajax форму обратной связи
ps Также есть новая ajax форма обратной связи — гораздо более неприхотливая в установке — перейти. Она без автоответчика и всплывающего окна — зато таких форм можно ставить бесконечно много на сайте.
Желаю несложной установки!
Читайте также
blogprogram.ru | 2015-08-10 | Форма обратной связи на ajax с автоответчиком и без него | Ajax форма обратной связи полезна и красива на любом современном сайте. Давайте рассмотрим ее подробнее. Форма работает во всплывайке — всегда пози | http://blogprogram.ru/wp-content/uploads/2015/08/123213-131×131.png
blogprogram.ru
Ajax контактные формы с PHP
AJAX изменил мир веб-разработки, наглядные тому примеры twitter или facebook, gmail хорошо показывают возможности AJAX. С помощью HTML 5, CSS3, AJAX и jQuery можно создать веб-интерфейсы с высоким быстродействием и повышенным качеством обслуживания пользователей..
Как правило, контактная форма являются важной частью любого веб-сайта. Контактная форма очень полезна в предоставлении возможности вашим посетителям связаться с вами. Эти скрипты помогут вам создать свою собственную ajax контактную форму на php. Ниже представлены 15 ajax контактных форм отлично сочетающих в себе дизайн с мощным ajax.
1. Контактная форма на jQuery и PHP
Контактные формы могут быть полезны для посетителей, чтобы связаться с владельцем сайта. Они легки в использовании и, поскольку они не подвергают опасности спама адрес электронной почты владельца сайта.
2. Пример создание Ajax формы
Вот где проявляется AJAX — все проверки делаются на стороне сервера, а результаты возвращаются пользователю с помощью Javascript без обновления страницы. Это действительно хорошо с двух сторон, кроме того если отключен JavaScript.
3. Необычная контактная форма на AJAX
В данном примере мы будем использовать силу PHP, CSS и jQuery. Кроме этого будут использованы плагины formValidator для проверки введенных данных и JQTransform для оформления полей и кнопок формы. Вдобавок ко всему этому будет использован класс PHPMailer для отправки сообщений.
Форма хороша тем, что прекрасно работает и с отключенным JavaScript.
4. Выдвижная модальная jQuery форма с валидацией.
Форма связи в верхней части сайта, а также контактная ссылка внизу страницы по которой можно вызвать туже форму. Все файлы упакованы для удобного редактирования и применения в личных потребностях.
5. Контактная Ajax форма с капчей.
Данная форма имеет несколько дополнительных функций, таких как предотвращение e-mail инъекции и более точной проверки электронной почты, которая не только проверяет синтаксис, но и существование домена.
6. Отправка формы без обновления страницы с помощью jQuery.
Контактную форма, которая отправляет данные по электронной почте без обновления страницы с помощью jQuery! (Фактический письмо будет отправлено с помощью скрипта PHP в фоновом режиме).
7. Контактная Ajax форма на базе jQuery.
Контактная форма на базе jQuery без навигации по страницам. Она принимает вводимые пользователем данные, обрабатывает их и отправляет в PHP файл «process.php». Сценарий PHP отправляет уведомление по электронной почте получателю. Конечно, в случае, если браузер не поддерживает Javascript / XMLHttpRequest, в скрипте есть второй готовый вариант, с помощью обычной формы отправки.
8. LightForm — бесплатная Ajax / PHP контактная форма.
LightForm это бесплатная Ajax / PHP контактная форма. Она сочетает в себе FormCheck2 для проверки полей и NiceForms для стиля текстовых полей и полей текстового ввода.
9. AJAX контактная форма.
Вот обновленная, более легкая, раскрывающаяся AJAX контактная форма. В настоящее время она использует JQuery, JQuery плагин формы и JQuery плагин проверки вместо Scriptaculous и WForms.
10. Простые AJAX формы с JSON ответами.
11. Ajax jQuery контактная форма с проверкой.
Простая AJAX контактная форма, использующая библиотеку jQuery.
Что все это значит? Ну, это, в сущности, форма связи, которая проверяет и отправляет электронную почту без обновления страницы.
12. Супер AJAX контактная форма (v.2).
Это Ajax форма контакта сделана на PHP и JQuery. Сценарий уже включают в себя правила проверки полей и сообщения об ошибках. Этот скрипт позволяет выполнять аутентификацию SMTP, так что не нужно персональный сервер SMTP, вы можете, например, использовать Live или Google (Gmail). Таким образом, вы можете отправлять почту локально тоже!
13. Многоязычная контактная форма AJAX.
Пакет RVContactForm позволяет легко разместить один макрос XSLT, который создает форму на любом из ваших Umbraco шаблонов на странице веб-сайта. Форма проверки на стороне клиента и на стороне сервера, и вы можете легко её настроить.
14. Расширенная JQuery проверка формы.
Форма проверки с несколькими функциями, такими как группировка обязательных полей или условной проверки, если она верна или нет. Также можно проверить строки, числовые, дата или электронной почте. И вы можете объединить несколько проверок. Например: необходим цифровой ввод и не менее 5 символов в длину.
15. Ajax основе HTML5/CSS3 Контактный формуляр.
Этот пример показывает продвинутую форму контакта на основе поп-технологий HTML, CSS 3 и Ajax.
16. Форма на основе HTML5.
+ Bonus — Генератор форм.
В генераторе форм все очень просто и понятно. EasyForms это PHP библиотека, которая позволяет создавать формы быстрым и простым способ в том числе и проверки входных данных. Вместе с библиотекой EasyForm, вы получаете 4 примера форм, которые создаются с помощью этой библиотеки:
пример 1 | пример 2 | пример 3 | пример 4
В генератор форм теперь включены:
1. Контактная форма
2. Загрузка изображений с расширением и проверкой размера
3. Может цитировать форму запроса
4. Подписаться в форме, которая добавляет адрес электронной почты и имя файла CSV
5. Визуальный конструктор формы
webersoft.ru
Форма обратной связи — Super AJAX Contact Form
Форма обратной связи — Super AJAX Contact Form.
Еще один не плохой, а главное функциональный и надёжный вариант формы обратной связи. Такую форму я установил на своём сайте. По непонятным мне причинам предыдущая форма стала выдавать сообщения иероглифами! Не стал разбираться в причинах и установил эту форму — Super AJAX Contact Form. Вот её внешний вид:
Код такой формы можно скачать на официальном сайте, но она англоязычная, поэтому, чтобы не мучится с переводом, скачайте уже переведенную версию здесь.
В скачанном архиве находится папка, которую надо будет загрузить в корень сайта. Перед этим разберём, что в папке находится и что и где надо поменять. Разархивируйте архив. В архиве находится папка code.Внутри неё находится папка assets и файл index.php. Вам необходимо будет открыть папку assets, в которой есть еще несколько папок:
Откройте папку xml, там находится файл config.php, в котором Вам надо прописать адрес электронной почты, на который Вы хотите получать сообщения:
Теперь рассмотрим установку вызова формы обратной связи. У этой формы своя собственная страница, поэтому стандартным методом (создание новой страницы на сайте) ничего не получится. На моём сайте в шапке есть два варианта вызова этой формы — непосредственно в горизонтальном меню и кнопка в шапке сайта. Оба варианта работают, но установка у них разная.
Установка.
1-й вариант. Сделаем вызов формы из горизонтального меню. Создаём в админке новую страницу и называем её Контакты. Сохраняем чистую страницу и в меню появится кнопка Контакты. При клике на эту кнопку форма связи не появится. Необходимо сделать редирект на форму обратной связи. Открываем в корневой папке сайта файл .htaccess и прописываем там следующую строчку:
Redirect permanent /kontaktyi.html /code/index.php
Теперь после клика по кнопке Контакты будет происходить перенаправление на страницу формы обратной связи. Эта форма имеет шаблон своей собственной страницы. На этой странице нет никаких «механизмов», чтобы посетитель вернулся обратно на сайт. Поэтому необходимо добавить в шаблон формы связи одно дополнение.
Это дополнение можно сделать в виде логотипа сайта или в виде кнопки»Вернуться на сайт» и сделать дополнение кликабельным. Для этого откройте файл index.php формы обратной связи и вставьте сразу после тега <body> следующий код:
<div align=»center»><a href=»http://ваш сайт»>
<img src=»http://полный адрес расположения логотипа или кнопки.png» alt=»»/>
</a></div>
Для начинающих объясню немного подробнее и наглядней.
- Для начала я в Фотошопе сделал для страницы с формой обратной связи картинку с логотипом и названием сайта, чтобы потом вставить её над формой обратной связи. Это делается очень быстро.
- Второй шаг — зашел в свой аккаунт на хостинге и открыл корневую папку сайта. В корневой папке сайта находится папка этой формы — code.
- Теперь открываем папку code, в ней находится файл index.php. Открываем этот файл для редактирования. В верхней части кода этого файла ищем тег <body>:
Сразу, ниже этого тега и вставляйте код, который выделен синим цветом выше. Эта картинка будет кликабельной и при клике на неё посетитель попадет обратно на сайт. - Возможно будут такие посетители, которые не сообразят, что таким образом они могут вернуться на сайт. Для таких я специально сделал кнопку под названием «Вернуться на сайт» и установил её ниже формы. Код точно такой же, только вместо адреса расположения картинки пропишете адрес расположения кнопки. Код устанавливается в этом же файле (index.php), только в самом низу после элемента кода <div><!—bottom—></div> :
Сразу, ниже этого тега и вставляйте код, который выделен синим цветом выше. Эта картинка будет кликабельной и при клике на неё посетитель попадет обратно на сайт.
Ну и в итоге у Вас получится примерно такая картина
Теперь после клика по логотипу или кнопке, посетитель может вернуться на Ваш сайт.
2-й вариант. Можно установить какую-то отдельную кнопку в виде иконки в любом месте сайта — в шапке, в сайтбаре, в футере или на отдельной странице. Такая иконка устанавливается как кликабельная картинка или как баннер. Составим код для такого варианта:
<a href=»http://ваш-сайт.ru/code/index.php» target=»_blank» ><img src=»http://адрес картинки» border=»0″ alt=»»/></a>
В первой части кода находится адрес формы обратной связи, а во второй адрес расположения картинки. Картинку загрузите в библиотеку медиафайлов, скопируйте ссылку на картинку и вставьте в код. Ну а код вставляйте в выбранное место.
Теперь можно проверить работу формы обратной связи. У меня работает отлично!
mehelps.ru