Форма обратной связи

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

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

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

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

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

Вот какие формы вы получите:

Обратите внимание, скрипты поставляются с встроенной каптчей. Второй скрипт (Simple Send Mail Order) имеет одно отличие — он одновременно отправляет два письма. Одно заказчику, другое — вам.

Как сделать одну из таких форм обратной связи на сайте? Качайте архив, закачивайте файлы из архива на сайт в каталог /sendmail, настраиваете конфигурационный файл config.php (прописываете свой email, другие настройки) и можно пользоваться — скрипт формы обратной связи готов к работе. Покажу как выглядит конфигурационный файл:

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

Вставка на сайт производится просто:
— можете дать ссылку на /sendmail/index.php
— можете сразу вставить на страницу, при помощи кода

Код можно найти на сайте, ссылка на который размещена выше.

Форма довольно минималистичная — не всем понравится дизайн «прямиком из девяностых», кому-то не нужна каптча, кому-то не хватает Аякса и красивых сообщений об ошибке. Решение есть.

Читайте также:
Создание печи на отработанном масле с водяным контуром

Super (AJAX) Contact Form — русифицированная версия формы обратной связи

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

Как выглядит конфиг внутри («codeassetsxmlconfig.php»):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

31 августа 2015

КАК ДОБАВИТЬ ФОРМУ ОБРАТНОЙ СВЯЗИ НА САЙТ

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

Читайте также:
Эмульсия для токарного станка своими руками

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

Для чего нужна форма обратной связи на сайте?

Форма обратной связи служит для отправки общений владельцу сайта от посетителей.
В специальные поля вводятся специальные данные (имя, электронная почта, текст). Для отправки сообщения на е-мейл владельцу сайта, необходимо нажать на кнопку «Отправить», может быть и другой вариант.

Ещё один плюс в пользу формы обратной связи – возможность сохранить свой е-мейл в тайне от спамеров.
В современном мире спам, это настоящий бич, который заставляет прятать е-мейл от посторонних глаз за семью печатями. Спам боты круглосуточно рыскают по сайтам в поисках новых электронных адресов для отправки на них спама. Если он найдёт е-мейл владельца сайта, то на этот адрес начнут сыпаться кучи нежелательной корреспонденции. В скором времени, на нём будет невозможно найти действительно нужную почту.

В форме обратной связи такой проблемы нет. Для отправки сообщения нужно заполнить специальное поле для отсеивания ботов. Это позволяет полностью избавиться от нежелательных писем.
Для создания формы обратной связи можете воспользоваться инструкцией и исходным кодом по созданию формы обартной связи или использовать готовый платный скрипт наподобие JivoSite, CallBackKiller и прочие.

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

СОЗДАЕМ ФОРМУ ОБРАТНОЙ СВЯЗИ НА HTML

Итак, допустим у вас уже есть сайт, и вы хотите создать форму, при заполнении которой, пользователь сможет получить от вас обратную связь. Для этого, в первую очередь создается сам каркас с использованием html, css и php кода.

Вставляем в нужное место на сайте следующий код:

Онлайн заявка

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

Вставили код и получилось вот так:

Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили (готовая html верстка формы обратной связи):

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

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

Выглядит это вот так:

Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.

Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.

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

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

Для этого перед закрывающимся тегом вставьте следующий скрипт:

Как работает этот скрипт?

  1. Производит проверку введенного e-mail.
  2. Указывает поля, с которыми будет работать.
  3. Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
  4. Обрабатывает введенную информации и инициирует отправку уведомления на почту.
  5. Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.

Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.

Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

Читайте также:
Шлак: структура, свойства, применение

ВСПЛЫВАЮЩАЯ ФОРМУ ОБРАТНОЙ СВЯЗИ ДЛЯ САЙТА

Бывают случаи, когда нужна именно всплывающая форма, которая открывается при нажатии на кнопку. Сделать ее очень просто. В качестве примера возьмем форму, созданную нами ранее и будет работать с ней. Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.

Добавьте эти строчки перед закрывающимся тегом body, только поменяйте путь к файлам на свой. Далее создаем кнопку, при клике на которую будет вызываться форма.

И придаем ей стили.

Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline».

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

Для этого нужно заменить стили #inline со старых на новые.

В итоге получаем вот такую кнопку.

При нажатии на которую открывается всплывающее окно с обратной связью.

Опять же, стили, расположение полей и элементов можно менять так, как вам будет нужно. К примеру, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать.

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

Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:

Скачать исходные файлы форм обратной связи.

Ключевые слова статьи: добавить форму обратной связи на сайт, верстка формы обратной связи, форма обратной связи html, форма обратной связи php, форма обратной связи почта, добавить форму обратной связи, css форма обратной связи, форма обратный звонок, виджет обратный звонок.

Блог Vaden Pro

Создаем форму обратной связи на PHP

Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.

Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.

Итак, начинаем создание формы обратной связи:

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

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

Согласен, пока все некрасиво и ничего не понятно, но мы только начали.

Рассмотрим приведенный выше код подробно:

Для того, чтобы наша форма обратной связи выглядела презентабельно ее нужно оформить. Для получения следующего результата:

Мы использовали данный код:

Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

  1. Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.
  2. Не используйте для переноса строк и создания отступов лишние теги по типу br >, p > и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться br > в верстке вообще можете почитать в статье Тэг br, а так ли он нужен?.
  3. Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.
Читайте также:
Утеплитель Пеноплекс 35 толщины: его цена и применение

Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap. Урок по оформлению форм с его использованием можно посмотреть тут.

Ну вот и пришло время сделать нашу форму работоспособной.

Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.

В конечном итоге его код будет выглядеть следующим образом:

Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:

Этой строкой мы создаем ссылку для возвращения на предыдущую страницу. Поскольку мы заранее не знаем с какой страницы пользователь попадет на эту, то делается это при помощи маленькой JS функции. В дальнейшем мы просто будем обращаться к этой переменной для вывода ее в нужных нам местах.

Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST[‘name’] в кавычках мы пишем значение атрибута name наших инпутов.

Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo “Для отправки сообщения заполните все поля! $back” и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.

Дале вставляем во внутреннюю часть обработчика формы:

Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.

Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.

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

После чистки тегов добавляем отправку сообщения:

Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:

  1. ‘почта_для_получения_сообщений@gmail.com’ – сюда между кавычек вставляете свою почту
  2. ‘Письмо с адрес_вашего_сайта’ – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
  3. ‘Вам написал: ‘.$name.’ br /> Его номер: ‘.$phone.’ br /> Его почта: ‘.$mail.’ br /> Его сообщение: ‘.$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом br /> делаем перенос строки, чтобы сообщение в целом было читабельно.
  4. Content-type:text/html;charset=windows-1251 – в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

Кодировка указанная в «голове» документа ( meta http – equiv = “Content-Type” content = “text/html; charset=windows-1251” /> ), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».

Многие не указывают кодировку отправляемого сообщения явно, но на некоторых почтовых клиентах из-за этого в дальнейшем могут возникнуть проблемы (на почту приходят нечитабельные письма), потому я рекомендую ее все-же указывать.

Проверка формы на адекватность вводимых данных

Чтобы пользователи по невнимательности не промахивались полями и заполняли все корректно стоит поставить проверку вводимых данных.

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

Читайте также:
Стекло для душевой кабины: как правильно выбрать и установить своими руками

Код скрипта вставляем в том же файле, где у нас располагается HTML часть формы. Для нашего случая он будет выглядеть так:

Ну а теперь обычный разбор:

Для того, чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка вешаем запуск нашего скрипта на тег form:

Теперь по пунктам забираем состав проверки:

  1. Обращаемся к нашей форме и по значению атрибута name выбираем интересующий нас инпут.
  2. Записываем его содержимое в переменную
  3. Собственно сама проверка формы на совпадение с заданными нами символами. (/^[A-Za-zА-Яа-я ]*[A-Za-zА-Яа-я ]+$/ – могут использоваться только буквы русского и английского алфавитов; /^[0-9+][0-9- ]*[0-9- ]+$/ – первый символ это «+» или цифра, дальше могут быть только цифры; /^[A-Za-z0-9][A-Za-z0-9._-]*[A-Za-z0-9_]*@([A-Za-z0-9]+([A-Za-z0-9-]*[A-Za-z0-9]+)*.)+[A-Za-z]+$/ – первые несколько символов это английские буквы или точки, потом знак @, потом снова английские буквы, потом точка и потом еще несколько английских букв).
  4. Если все верно, то проверка ничего не выводит и идет к следующему блоку кода, если же проверка на символы выдала ошибку, то выполняется часть скрипта с действиями 5 и 6.
  5. Пользователю выводится это сообщение о ошибке.
  6. Происходит выход из скрипта проверки.

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

Полный код страниц формы

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

Подводя итоги

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

Так что начинайте с малого, своей первой рабочей формы, и дополняйте ее по мере необходимости своими частями.

Надеюсь этот мануал окажется для Вас полезным. Если что-то было не понятно или не получается повторить – задавайте вопросы в комментариях.

О защите от спама я напишу в следующих статьях.

Форма обратной связи на сайте: какую выбрать

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

Как наличие формы обратной связи на сайте влияет на продажи

Представьте, что пользователь заходит на сайт, интересуется предложением, изучает товар и хочет его приобрести. У него не получается найти информацию о доставке товара в другой город, а ему это важно. Если у него не будет возможности задать вопрос консультанту или хотя бы оставить заявку с просьбой об обратном звонке, он просто уйдёт с сайта. В итоге клиент будет упущен, а прибыль — потеряна.

Как раз для таких ситуаций необходима форма обратной связи на сайте.

Виды форм обратной связи:

  • Всплывающее окно. Может появляться в любой области страницы сайта, и появляется либо после определённого количества времени, проведённого на сайте, либо после какого-то действия пользователя. Настраивается во время установки формы на сайт.
  • Статическая форма. Помещается в нужный раздел на сайте. Не «преследует» пользователя при его перемещении по странице.

Чтобы понять, какая форма обратной связи вам подходит, давайте рассмотрим основные типы:

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

Форма заказа обратного звонка на сайте «Ленремонт»

  • Форма в виджете онлайн-консультанта. Самый удобный и эффективный способ как получить вопрос клиента, так и сохранить его контактные данные.
Читайте также:
Чем покрасить ограду на кладбище

Форма обратной связи Webim

  • Pop-up окно. Чаще всего такое окно всплывает, когда посетитель сайта движется к вкладкам браузера или вовсе хочет закрыть сайт. Что прописать в данной форме? Тут всё зависит от вашего воображения и действующих акций. Предложите ему скидку или подписку на e-mail рассылку с полезными материалами или специальными предложениями.

Pop-up окно на сайте интернет-агентства «Простор»

  • Расчёт стоимости. Бывает, что указать фиксированную цену на сайте невозможно, исходя из специфики товара или услуги. В таком случае вы предлагаете индивидуально рассчитать стоимость клиенту, а заодно и ответить на сопутствующие вопросы.

Окно заказа расчёта стоимости на сайте «Фундамент СПб»

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

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

  • индивидуальная настройка полей формы;
  • активная форма в виде всплывающего окна;
  • работает без перезагрузки страницы сайта. Клиент остаётся на той же странице, после заполнения формы;
  • анализ статистики;
  • прикрепление файла к сообщению;
  • отправка данных на почту.

Смотрите также:

  • Форма обратной связи
  • Форма обратной связи
  • Раздел «Тексты»
  • Чат для сайта
  • Новый виджет чата Webim
  • Продукт
    • Тарифы
    • Возможности
    • Интеграции
    • Приложения
    • Установка
    • База знаний
  • Возможности
    • Чат для сайта
    • Чат в мобильном приложении
    • Каналы общения
    • Разработка чат-ботов
    • API для интеграций
    • Кастомные доработки
  • О нас
    • Блог
    • О компании
    • Вакансии
    • Отзывы
    • Контакты и реквизиты
    • Оплата
    • Кейсы
    • Стать партнером
  • Политика конфиденциальности
  • Согласие на обработку персональных данных
  • Лицензионное соглашение

Москва, Серебряническая набережная, 29

Санкт-Петербург, Большой пр. ПС, д. 18, офис 501

Какой вид сервиса обратной связи выбрать для своего сайта

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

Онлайн-звонок


Zingaya – сервис онлайн-звонков с сайта, где клиент звонит не со своего телефона, а со своего компьютера. По клику открывается окно, где достаточно разрешить доступ к микрофону и звонок пойдет на телефон менеджеров. Zingaya уже давно на рынке, в свое время о них писали на TechCrunch и еще ряде международных крупных изданий. Технология давно себя зарекомендовала и сейчас стоит на сайте таких крупных игроков e-commerce как Enter.ru и Wildberries.ru.

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

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

Онлайн-консультант


JivoSite, LiveTex, RedHelper, WebConsult, SmartSupp, Webim и еще ряд мелких и крупных игроков, работающих по одному принципу (всплывающее окно, где общение с клиентом проходит посредством текстовых сообщений), но сильно различающихся между собой дополнительными функциями. В одном из виджетов JivoSite, к примеру, указано, что заявки придут на почту, правда не указано, как ответят клиенту и когда. У LiveTex общение происходит сразу в открывшемся окне, правда с анонимом:

Как и Zingaya, онлайн-консультанты на рынке уже не первый год и успели зарекомендовать себя с положительной стороны. Касательно цен присутствует определенный разброс в зависимости от политики компании, но в среднем плата осуществляется за каждого отдельного оператора. Цена за одного оператора в месяц – от 800 до 2500 рублей.

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

Минусы: Встречается привязка к компьютеру (чтобы общаться с клиентом, менеджер должен быть у компьютера), плата за каждого оператора (если операторов 5-6, то цена может составлять в месяц до 10 000 рублей).

Самописные формы заказа обратного звонка и онлайн-чаты на Jabber


Представляют собой самописные виджеты, каждый из которых выглядит по-своему, и, соответственно, работает так же. Как правило, такие виджеты идут в комплекте с самим сайтом и делает в качестве бонуса/за дополнительную плату/заранее обговорив та же студия, что и сайт. Исходя из этого, форма брендирована. Наиболее распространена практика писать такие виджеты на Jabber. Сюда же можно отнести и формы на основе готовых решений, к примеру, LiveZilla позволяет создать чат для своего сайта или тот же самый ChatFocus.

Читайте также:
Тонкости создания гармоничного дизайна ванной комнаты

Плюсы: Дешево и сердито. Брендирование под дизайн сайта, возможность сделать форму так, как желает заказчик – звонок, текст или и то и другое. Отсутствие платы сторонним компаниям.

Минусы: Не очень надежны и не всегда работают, зачастую представляют собой бутафорию.

Callback-виджеты


Rocket Callback, Callback Hunter и многие другие. Тысячи их. Представляют собой всплывающее окно с 1 полем для ввода номера телефона. От Zingaya отличается тем, что общение происходит по телефону, а не через компьютер, хотя используется тот же самый VoIP. Различаются между собой дополнительными функциями — у Perezvoni это мультивиджет, у Rocket Callback настройка навязчивости, у RedConnect совместный браузер и так далее. По цене сильный разброс, но самая низкая цена у Rocket Callback (около 6 рублей за минуту), самая высокая у Callback Hunter (около 60 рублей за минуту).

Плюсы: Нет привязки к компьютеру, цена не зависит от количества операторов, настройка навязчивости и внешнего вида виджета, моментальная связь (от 20 секунд).

Минусы: При агрессивной настройке может сильно мешать посетителям, раздражая своим появлением в самый неподходящий момент.

Каждый из 4 видов фидбека отличается как минусом, так и плюсом. У онлайн-звонка все хорошо, да вот только без микрофона не поговоришь. Онлайн-консультанты очень удобны, да вот только высокая цена за несколько операторов. Самописные формы позволяют никому не платить, но зато требуют постоянного внимания. Сallback-виджеты позволяют моментально связаться, да вот могут быть невероятно навязчивыми. Есть мнение, что каждая из разновидностей может заменить другую, но это маловероятно, так как у каждой свои слабые и сильные стороны. Оптимальным решением будет протестировать все 4 и остановиться на том, что дало лучший результат.

Спасибо, что читаете нас!
Подписывайтесь на наш блог.

Код простой формы обратной связи для сайта на HTML и PHP

Рассмотрим пример легкой и быстрой формы обратной связи для сайта написанной на html и php.

Почему используется HTML и PHP?

Для CRM, таких как WordPress, Joomla и других можно найти различные плагины для установки формы обратной связи для сайта. Однако, что мне не нравится в таких плагинах, так это часто их низкая производительность и замедление сайта из-за загрузки лишнего «мусора» – ненужных стилей и скриптов. Так как эти плагины все равно выдают в результате тот же код HTML, то предлагаю использовать простую, но полноценно функциональную форму, которую можно изменить под свои нужны, например, под обратный звонок с сайта.

Форма связи на HTML просто вставляется в админке Joomla, WordPress, OpenCart, ModX, а если ваш сайт самонаписный или вы используете любой фреймворк на PHP, то использовать представленный код не составит труда и сайт будет загружаться так же быстро как и раньше.

Структура кода реализации обратной связи для сайта

Далее приведен алгоритм работы обратной связи:

  1. Код HTML формы, вставленный на страницу + CSS стили для его оформления.
  2. PHP файл, который и выполняет отправку письма или иное действие для регистрации запроса.

В коде HTML содержится содержится информация, какие поля для ввода нужно заполнять, какие из них обязательны для заполнения, и подписи к ним. Стили CSS отвечает за визуальное оформление формы и отображение данных. При нажатии на кнопку «Отправить» выполняется PHP скрипт на сервере через POST запрос, который отправляет письмо или выполняет иное действие. Скачать исходники можно в конце статьи, а подробнее исходный код формы обратной связи разберем далее.

Читайте также:
Холодильники Ardo

Код формы обратной связи на HTML

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

Сама форма находится между HTML тегами . Тегу присвоен CSS класс class=”form-zvonok” , который используется для реализации отображения через CSS стили.

Рассмотрим атрибуты формы
  • autocomplete=”off” — автозаполнение формы отключено, при повторном заходе на страницу все поля ввода будут обнулены. Рекомендуется автозаполнение отключать, так как при включенном иногда возникали проблемы, что при изменении значений полей формы отправлялись на сервер старые значения.
  • Атрибут action=’email.php’ , в нём указан адрес скрипта, в данном случае PHP, который вызывается и которому передаются данные формы после нажатия кнопки «Отправить» . Если указан не полный путь к скрипту, как здесь, то обращение будет с адреса, на котором размещена форма. Например форма находится по этому адресу http://site.com/feed-back , тогда обращение будет http://site.com/feed-back/email.php . Так же это может быть любой путь, по которому обрабатывается запрос.
  • Атрибут method=’post’ , в этом случае данные отправляются скрытно и не отображаются в адресной строке, другой метод GET отправляет данные формы через адресную строку. В этом случае после адреса строки появляется вопросительный знак «?» после которого идут название поля, его значение, что является небезопасным способом отправлять данные формы. Так, учитывая SEO оптимизацию сайта, данные формы обратной связи для сайта лучше отправлять методом POST, так как данные передаются скрытно, а в случае метода GET у сайта по сути будет доступно множество однотипных страниц, которые отличаются только несколькими параметрами после «?», что приведет к дублям страниц.

Далее внутри тега находится контейнер

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

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

Отправка письма PHP скриптом

Приведем код простого скрипта для отправки письма

Чтобы отправить письмо на нужный email, замените значение переменной $to email@tut.by на необходимый адрес. Переменная $subject — тема сообщения, показывается почтовыми программами при просмотре списков писем. $message — само тело письма, это и есть само сообщение. $headers — шапка письма, в ней указывается тип письма, например HTML, а также: кодировка, от кого доставлено письмо и на какой emal отправлять ответ.

Простой скрипт обработки данных формы HTML в PHP скрипте

Приведем сначала исходный код:

проверяем или используется метод POST

Далее проверяем или были высланы данные с полей ввода

Обратите внимание, что в конструкции $_POST[“username”] название поля совпадает с именем поля username в форме . Поэтому на одной странице названия полей должны быть уникальны, иначе они будут переписывать друг друга.

Функция strip_tags() удаляет HTML и PHP теги из строки. Делается для котого что бы злоумышленники не могли запустить свой код через форму связи.

Функция trim() удаляет пробелы в начале и в конце строки. Далее формируем письмо и все что подготовили отправляем функцией mail() .

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

Приведем код CSS оформления для формы обратной связи сайта.

Разберем подробнее код.

Делаем ширину дива равной ширине родительского блока и ограничиваем максимальную ширину 350px , если шире, то форма HTML выглядит растянутой:

Что бы упорядочить поля и кнопку «Отправить» , обертываем их в div , отображение ставим в flex и направление отображения столбцом column . Для красоты добавляем отступы сверху и снизу на 20px:

Подпись и поле ввода обернуты в контейнер div :

Для этого дива присвоим отступы сверху и снизу:

Кнопке «Отправить» делаем ширину равной ширине родительского блока и box-sizing присваиваем border-box — расчет ширины по границе, что бы она не выходила за пределы родительского блока:

Аналогично для подписей и полей ввода:

Читайте также:
Строительные подъемники: места использования, главные достоинства и типы

Настраиваем красивый внешний вид подписей и полей ввода:

Звездочку делаем красной:

Оформляем кнопку «Отправить» :

При наведении на кнопку настраиваем изменение цвета:

Обратите внимание, что иногда эти стили могут быть переопределены другими, которые имеют больший приоритет. Что бы усилить приоритет, просто присвойте форме имя через id , например id=”obratnuj-zvonok” и в CSS файлах тогда обращение идет не через точку, как к классам, а через решетку # , например #obratnuj-zvonok . Тогда достаточно добавить к селекторам в CSS файлах в начало #obratnuj-zvonok , что бы повысить приоритет правил.

Скачать исходный код формы обратной связи

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

Изготовление бетонных блоков и форм для них

Блоки из бетона могут быть полезны в следующих случаях:

  • изготовление ограждений, массивных строительных возведений;
  • производство зданий из бетонных блоков;
  • возведение мелких декоративных изделий из бетона.

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

Обратите внимание: установка блоков займет гораздо меньше времени, сравнительно с другими материалами, из-за своего размера.

Сфера применения

Чаще блоки из бетона используются в качестве базового элемента построек: гаражи, многоэтажные жилые дома, офисы, частные дома, дачные участки и прочее. Сфера применения не ограничивается крупномасштабными строительными проектами. Возможно самостоятельное изготовление/использование блоков из бетона в домашних условиях. Единственная трудность: необходимо задействовать дополнительную строительную технику (сушилка, бетономешалка). В качестве сушилки можно использовать закрытое помещение (подсобное), с наличием калорифера. Необходимая температура для сушилки своими руками – 70 градусов. Бетонные формы используются для следующих изделий:

  • строительный бетонный материал;
  • декоративные архитектурные элементы (вазы, бордюры, скульптуры);
  • тротуарная плитка (тип может варьироваться);
  • ограждения (в том числе и декоративного характера);
  • лотки для дренажа;
  • железобетонные строительные плиты.

Особенность: в зависимости от нужного нам продукта, качество, детали, отливка формы будет различаться. Чтобы создать форму, а затем изделие своими руками следует провести точные расчеты, внимательно следить за процессом, следовать правилам создания, знать особенности материала/будущего изделия.

Материал для изготовления

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

Эластомеры

Производство изделий с мелкими деталями, создание максимально точных копий, требует применения эластомерных форм. Область применения:

  • сложные объемные изделия;
  • высокоточные барельефы;
  • архитектурные возведения.

Производство данных изделий невозможно без следующих компонентов:

  • резина (синтетический каучук);
  • формопласт;
  • компаунды (полиуретан/силикон).

Примерный расход материала: 10-40 кг/м2.

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

Пластик

Крупногабаритные возведения, которые не требуют точных геометрических расчетов, лучше изготавливать из пластиковых форм. Основные материалы:

  • стеклопластик (низка совместимость с матрицей цемента, из-за чего возможны трещины, разломы);
  • жесткий пластик (склонны к короблениям, поэтому основная сфера применения – тротуарные плиты, бордюры, брусчатка из бетона);
  • листовой пластик АБС (склонен к расслаиванию, следует использовать дополнительную силиконовую смазку. Из него можно изготовить материал небольшого размера);
  • листовой/пленочный полистирол (хорошо передает фактуру, очертания предметов, является хрупким материалом);
  • пластик ПВХ (наиболее прочный, качественный. Максимально низка адгезия, не требует очистки и смазки).

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

Читайте также:
Что выбрать Шкафы для вещей в частном доме своими руками или кладовку? Обзор +Фото и Видео

Самостоятельное создание формы

Обратите внимание на то, что окончательная обработка изделия должна проводиться после полного застывания. Если продукт будет сырым, дальнейшие действия (например, резка) нелогичны, неэффективны. Создание формы:

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

Если у вас нет времени/желания проводить процесс самостоятельно, воспользуйтесь услугами строительных фирм. Связавшись с нужной вам компанией, вы сможете сделать заказ на ту форму, которая вам нужна. Объясните цель строительства, желаемый материал, оговорите сроки. За установленную цену (следует согласовать лично, по телефону) вас проконсультируют и примут заказ. Таким образом, вы можете быть уверены в качестве полученного изделия, его долговечности, правильности создания.

Самостоятельное создание блока

Бетонные блоки – незаменимый материал для строительства крупногабаритных построек. Себестоимость материала ниже, сравнительно с остальными. К тому же, постройки из бетона прослужат вам более 70-ти лет. Для того, чтоб сократить затраты, можно создать бетонный блок самостоятельно. Процесс создания:

  • установите опалубку (ее нужно сделать необъемной);
  • изготовьте форму из подручных средств: ДСП, фанера, деревянные доски. У формы для создания блока не должно быть дна;
  • поместите изделие на гладкую поверхность, застеленную тканью либо пленкой;
  • смажьте все детали опалубки маслом (для того, чтобы извлечение готового материала прошло легче);
  • смешайте в большой емкости песок, гравий, известь, цемент. Соотношения раствора к цементу должно составлять 1:4. Перемешайте, добавьте воды. Воду лучшего добавлять в прохладную погоду, во избежание испарений. Если вода незамедлительно испарится из смеси, возможность появления трещин возрастет. Правильно подберите соотношение воды, чтобы раствор не был слишком жидким или густым;
  • заполните изделие полученным раствором до середины;
  • прокладывайте проволоку над заполненной формой;
  • заполните форму до краев полученным раствором;
  • сгладьте поверхность (любым инструментом), чтобы она стала гладкой.

Через 28 дней после того, как была приготовлена смесь, которая находится внутри, полностью схватится и приобретет наивысший показатель прочности. Единственный недостаток процесса – длительность сушки. Если у вас нет времени для ожидания, закажите заводской бетонный блок. Обратите внимание на то, что цена будет отличаться в несколько раз. Экономия при самостоятельном изготовлении составит порядка 70%.

Заключение

Бетонная форма – оптимальный вариант для получения бетонных блоков. Преимущества:

  • низкая себестоимость;
  • прочность, устойчивость;
  • цена упадет в несколько раз при самостоятельно изготовлении;
  • легкость использования;
  • рассчитаны на несколько циклов повторного использования;
  • не требуют особой строительной техники (если речь не идет о масштабных строительный работах).

Совет: для единичного ремонта не следует покупать специальной техники. Создать нужный вам блок и форму под него, можно с помощью подручных средств. В любом случае, цена на ДСП, фанеру или деревянные доски значительно ниже специальной строительной техники. Если вы решили развернуть масштабное строительство, приобрести нужную технику, набрать квалифицированных рабочих – первостепенная основа дела.

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

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: