Обратная связь для сайта

так выглядит форма обратной связи

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

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

Формы обратной связи на сайт — что выбрать

Форма для связи — такая вещь, которая всегда должна быть под рукой. Я имею ввиду какой-то свой проверенный скрипт, который вы изучили вдоль и поперек, а его встраивание в оформление сайта занимает 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 — русифицированная версия формы обратной связи

Скачать (.zip, 72.4Кб)

Работает эта штучка на чистом PHP + jQuery & AJAX — очень удобно для блога или небольшого интернет-магазина. Пример формы:

пример формы на сайт

Как выглядит конфиг внутри («\code\assets\xml\config.php»):

файл конфигурации формы

Конфиг для настройки полей («\code\assets\xml\fields.php»):

blogwork-contact-form-5

Установка скрипта формы для связи SuperAJAX ContactForm ничем не отличается от инструкции по установке другого скрипта выше. Содержимое архива закачиваете на сервер и пользуетесь.

Преимущества этой формы над предыдущей:
— более эстетично привлекательная
— используется проверка полей, ошибки выводятся через AJAX
— подробнейшая инструкция по установке и настройке внутри
— есть подсказки под полями

Например, посмотрите как в этой форме связи выводятся ошибки:

форма выводит ошибки т.к. поля не заполнены

Выглядит неплохо! А вот что увидит пользователь, после успешной отправки сообщения:

результат отправки формы

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

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

Итак, вы познакомились с двумя функциональными скриптами и можете выбрать свой. Но не торопитесь, потому что вас еще ждет третий PHP-cкрипт формы обратной связи для блога. Тот, которым я пользуюсь уже наверное года два с лишним.

Установка готовой бесплатной формы обратной связи на сайт

Итак, на одном сайтов установлена вот такая «кнопка»:

кнопка "заказать звонок"

Если нажать на нее, вниз «выпадет» форма обратной связи:

выпадающая форма обратной связи

На другом сайте установлена всплывающая (popup) форма обратной связи, выглядит она так:

всплывающая форма обратного звонка

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

сообщение на email с контактами из формы обратной связи

Очень удобно. Вот код для работы формы как в первом случае:

<div id="form">
<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 открывается и все — можно оставлять свои данные. Преимущество такого подхода — пользователю не нужно ждать, пока там что-то подгрузится еще.

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

Приведу содержимое конфиг-файла :)

<?php
define('FROM_EMAIL', '[email protected]');
define('TO_EMAIL', '[email protected]');
?>

Все! Больше ничего нет, остальное (стили) — вручную. Но они и так везде вручную. При этом форма использует Ajax, выводит сообщения об ошибке, а еще можно задать свою собственную маску номеров. Вот скриншоты:

валидация формы заказа звонка

После отправки номера, пользователю увидит ваше сообщение, которое также можно задать.

Скачать форму можно по ссылке, либо с этого блога.

Скачать скрипт формы обратной связи (заказа обратного звонка) — .zip, 16.4Кб

содержимое архива с формой

Это проверенное решение, которым я вполне доволен. Я нашел в этом скрипте для себя несколько преимуществ:

1. Он присылает URL страницы, с которой была отправлена заявка через форму.

2. На одной странице может быть несколько таких форм обратной связи и они никак не будут конфликтовать друг с другом.

3. Форма подгружается не PHP-кодом, а div-блоком — это упрощает ее вставку в любое место сайта на порядок. Можно даже в тексте вставлять, если умеете.

как вставить форму заказа звонка на сайт

И он тоже позволяет загружать файл, то есть ничем не уступает.

Ну а про онлайн конструкторы и навороченные генераторы скриптов обратной связи — как-нибудь в другой раз. Может заодно еще и формы для WordPress обсудим. Посмотрим.

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

4 комментария
  1. Александра

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

    Ответ для Александра
  2. Такая же фигня. вставил код в сайт, теперь проверка полей не работает. Не подскажете почему?

    Ответ для Айдар
  3. Леонид Васильевич

    Здравствуйте. А у меня проблема с формой скрипт формы (.zip, 169Кб) !!! Установил но!!! Если указать в поле обратный адрес .ru то письма не приходят, хотя маилто указан ( $mailto = «[email protected]»;) на маил.ру или яндекс.ру не важно письмо не придёт но если указать в поле обратный адрес с префиксом KZ ; UA ; gmail.com Письма приходят Мучаюсь уже вторую неделю и понять не могу в чём причина? Ведь пользователей с префиксом RU миллионы … http://xn--80adrksdko.xn--p1ai

    Ответ для Леонид
  4. Вместо проверки чисел лучше капчу поставить, числа любой спам-бот пройдет. В качестве альтернативы, кто программировать не умеет, могу еще stepFORM порекомендовать, неплохое решение.

    Ответ для Максим
Добавить комментарий

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

X