В этом посте научу вас и покажу, как вставить скрипт крутой формы обратной связи на любой сайт, блог или интернет-магазин.
Я предпочитаю использовать готовые формы для связи, чем городить каждый раз «велосипеды» и пытаться изобрести самую лучшую форму связи. Это лишнее — есть множество бесплатных решений, упрощающих коммуникацию между владельцем сайта и посетителями и при этом экономящие время вебмастера.
Формы обратной связи на сайт — что выбрать
Форма для связи — такая вещь, которая всегда должна быть под рукой. Я имею ввиду какой-то свой проверенный скрипт, который вы изучили вдоль и поперек, а его встраивание в оформление сайта занимает 5 минут, настройка — ну пусть еще 5.
У меня такой скрипт есть, писал я его конечно не сам. Я им с вами поделюсь и расскажу, как пользоваться — в качестве бонуса к основной статье.
Основная проблема которая стоит перед вебмастерами в вопросе установки формы для заказа звонка на сайте — совместимость, универсальность.
Допустим, сегодня я делаю блог на Ворпдрессе (только по этой инструкции), завтра на Джумле, послезавтра на Друпале, в выходные делаю интернет-магазин на Опенкарте, затем верстаю лендинг страницу на чистом HTML5 + CSS3… И во всех проектах мне нужна эта форма, будь она неладна.
Вот скажите мне — это же сколько времени нужно потратить, чтобы к каждому отдельному сайту подобрать скрипт или плагин, удовлетворяющий требованиям? Ну ладно, допустим ты блоггер, работаешь с одним Ворпдрессом и по умолчанию в твоей сборке WordPress есть какой-нибудь плагин wp-contact-form-7.
Остальным-то что делать?
Поэтому я и предлагаю работать с кодом. Ваша персональная «карманная» форма обратной связи на языке PHP и HTML может быть супер гибкой, с множеством полей и AJAX, но она должна:
- Быть в наличии в одной из ваших бесконечных папок со скриптами.
- Работать всегда и везде.
- Не требовать танцев с бубном при встраивании на сайт.
Программисты конечно могут написать самостоятельно подобный скрипт обработки данных на PHP, оформить внешний стиль, прикрутить к нему капчу, добавить проверку правильности ввода полей (в т.ч. email) на странице, добавить поля для загрузки файлов, сделать эту форму на AJAX без перезагрузки.
Но, во-первых, подобные действия могут делать только квалифицированные программисты, к которым средний блоггер не относится. Во-вторых — это трата времени и окупается она только при частом возникновении подобной потребности.
Я же предлагаю сэкономить:
- Время.
- Деньги.
- Трудозатраты.
И поэтому мы будем использовать удобные, готовые универсальные скрипты, которые подойдут и динамическим сайтам на CMS, и статическим сайтам на HTML. Ведь в вопросе «как сделать милую и красивую форму обратной связи» нет «с нуля, разработать, написать, своими руками, самостоятельно». И правильно. А зачем?
HTML&PHP форма (и скрипт) обратной связи для блога, сайта
Скачайте просто скрипт Simple Send Mail или другую его версию Simple Send Mail Order с сайта landman.ru.
Скачать скрипт формы (.zip, 169Кб)
Вот какие формы вы получите:
Обратите внимание, скрипты поставляются с встроенной каптчей. Второй скрипт (Simple Send Mail Order) имеет одно отличие — он одновременно отправляет два письма. Одно заказчику, другое — вам.
Как сделать одну из таких форм обратной связи на сайте? Качайте архив, закачивайте файлы из архива на сайт в каталог /sendmail, настраиваете конфигурационный файл config.php (прописываете свой email, другие настройки) и можно пользоваться — скрипт формы обратной связи готов к работе. Покажу как выглядит конфигурационный файл:
Как видно, с файлом конфигурации формы разберется даже школьник, думаю у вас не возникнет на этот счет вопросов.
Вставка на сайт производится просто:
— можете дать ссылку на /sendmail/index.php
— можете сразу вставить на страницу, при помощи кода
Пример кода:
Код можно найти на сайте, ссылка на который размещена выше.
Форма довольно минималистичная — не всем понравится дизайн «прямиком из девяностых», кому-то не нужна каптча, кому-то не хватает Аякса и красивых сообщений об ошибке. Решение есть.
Super (AJAX) Contact Form — русифицированная версия формы обратной связи
Работает эта штучка на чистом PHP + jQuery & AJAX — очень удобно для блога или небольшого интернет-магазина. Пример формы:
Как выглядит конфиг внутри («\code\assets\xml\config.php»):
Конфиг для настройки полей («\code\assets\xml\fields.php»):
Установка скрипта формы для связи SuperAJAX ContactForm ничем не отличается от инструкции по установке другого скрипта выше. Содержимое архива закачиваете на сервер и пользуетесь.
Преимущества этой формы над предыдущей:
— более эстетично привлекательная
— используется проверка полей, ошибки выводятся через AJAX
— подробнейшая инструкция по установке и настройке внутри
— есть подсказки под полями
Например, посмотрите как в этой форме связи выводятся ошибки:
Выглядит неплохо! А вот что увидит пользователь, после успешной отправки сообщения:
Подобные информационные сообщения улучшают юзабилити и помогают пользователю понять, на верном ли он пути, что-то пошло не так или все нормально.
Вы также можете посмотреть интересный видеоурок по данному скрипту:
Итак, вы познакомились с двумя функциональными скриптами и можете выбрать свой. Но не торопитесь, потому что вас еще ждет третий PHP-cкрипт формы обратной связи для блога. Тот, которым я пользуюсь уже наверное года два с лишним.
Установка готовой бесплатной формы обратной связи на сайт
Итак, на одном сайтов установлена вот такая «кнопка»:
Если нажать на нее, вниз «выпадет» форма обратной связи:
На другом сайте установлена всплывающая (popup) форма обратной связи, выглядит она так:
А вот что придет вам на почту, после того как пользователь оставит свои контактные данные в форме:
Очень удобно. Вот код для работы формы как в первом случае:
<p><a style="text-decoration: none; border-bottom: 1px dotted; cursor: pointer;" id="forma0">Заказать звонок</a></p>
<div id="forma1" style="display:none; background-color: #fff;">
<script src="sendmailforms/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="sendmailforms/form.css" />
<script src="sendmailforms/wait_for_call.js" type="text/javascript"></script>
<script src="sendmailforms/ajaxupload.js" type="text/javascript"></script>
<script src="sendmailforms/upload_file.js" type="text/javascript"></script>
<div class="call-me-form" title="Заказать звонок" button="Заказать звонок" style="width: 200px"></div>
</div>
<script>
$("#forma0").toggle(function() {
$("#forma1").slideDown("slow");
}, function() {
$("#forma1").slideUp("slow");
});
</script>
</div>
Расшифровываю: в скрытом div-блоке подгружается скрипт и все что с ним связано, этот блок при помощи JavaScript открывается и все — можно оставлять свои данные. Преимущество такого подхода — пользователю не нужно ждать, пока там что-то подгрузится еще.
Примерно также работает скрипт и на другом сайте, где форма обратной связи показывается во всплывающем окне.
Приведу содержимое конфиг-файла
Все! Больше ничего нет, остальное (стили) — вручную. Но они и так везде вручную. При этом форма использует Ajax, выводит сообщения об ошибке, а еще можно задать свою собственную маску номеров. Вот скриншоты:
После отправки номера, пользователю увидит ваше сообщение, которое также можно задать.
Скачать форму можно по ссылке, либо с этого блога.
Скачать скрипт формы обратной связи (заказа обратного звонка) — .zip, 16.4Кб
Это проверенное решение, которым я вполне доволен. Я нашел в этом скрипте для себя несколько преимуществ:
1. Он присылает URL страницы, с которой была отправлена заявка через форму.
2. На одной странице может быть несколько таких форм обратной связи и они никак не будут конфликтовать друг с другом.
3. Форма подгружается не PHP-кодом, а div-блоком — это упрощает ее вставку в любое место сайта на порядок. Можно даже в тексте вставлять, если умеете.
И он тоже позволяет загружать файл, то есть ничем не уступает.
Ну а про онлайн конструкторы и навороченные генераторы скриптов обратной связи — как-нибудь в другой раз. Может заодно еще и формы для WordPress обсудим. Посмотрим.
А комментариях давайте делиться своими наработками и ссылками, раз я уже поделился, теперь ваша очередь. Буду очень рад если вы поделитесь своими проверенными решениями или приведете примеры как сделали форму обратной связи у себя на сайте.
Спасибо за форму, только у меня не высвечиваются в форме при отправлении, спасибо ваша письмо отправлено
код я вставила в страницу сайта, письма на почту приходят, но данные введены не верно тоже не высвечиваются.
Такая же фигня. вставил код в сайт, теперь проверка полей не работает. Не подскажете почему?
Здравствуйте. А у меня проблема с формой скрипт формы (.zip, 169Кб) !!! Установил но!!! Если указать в поле обратный адрес .ru то письма не приходят, хотя маилто указан ( $mailto = «[email protected]»;) на маил.ру или яндекс.ру не важно письмо не придёт но если указать в поле обратный адрес с префиксом KZ ; UA ; gmail.com Письма приходят Мучаюсь уже вторую неделю и понять не могу в чём причина? Ведь пользователей с префиксом RU миллионы … http://xn--80adrksdko.xn--p1ai
Вместо проверки чисел лучше капчу поставить, числа любой спам-бот пройдет. В качестве альтернативы, кто программировать не умеет, могу еще stepFORM порекомендовать, неплохое решение.