Обратная связь для сайта
В этом посте научу вас и покажу, как вставить скрипт крутой формы обратной связи на любой сайт, блог или интернет-магазин.
Я предпочитаю использовать готовые формы для связи, чем городить каждый раз «велосипеды» и пытаться изобрести самую лучшую форму связи. Это лишнее — есть множество бесплатных решений, упрощающих коммуникацию между владельцем сайта и посетителями и при этом экономящие время вебмастера.
Формы обратной связи на сайт — что выбрать
Форма для связи — такая вещь, которая всегда должна быть под рукой. Я имею ввиду какой-то свой проверенный скрипт, который вы изучили вдоль и поперек, а его встраивание в оформление сайта занимает 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 — очень удобно для блога или небольшого интернет-магазина. Пример формы:
Как выглядит конфиг внутри («\code\assets\xml\config.php»):
Конфиг для настройки полей («\code\assets\xml\fields.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 обсудим. Посмотрим.
А комментариях давайте делиться своими наработками и ссылками, раз я уже поделился, теперь ваша очередь. Буду очень рад если вы поделитесь своими проверенными решениями или приведете примеры как сделали форму обратной связи у себя на сайте.
3 способа. Как сделать форму обратной связи на html?
Существует несколько способов реализовать данную фичу у себя. Их можно поделить по уровню сложности, а так же по требованиям от хостинга.
Способ №1. Форма обратной связи html + php.
Данный способ подойдет вам, если необходимо максимально расширяемое решение. Данную форму можно сделать какую угодно. Запрашивать любые данные у пользователей, которые вам необходимы. Можно сделать отправку файлов, капчу, отправку фото, адресов страниц от куда была совершена отправка и многое, многое другое.
Для данной формы вам потребуется:
Начнем с создания PHP файла который будет обрабатывать запросы пользователей на сервере. Он должен, проверить, все ли необходимые поля были заполнены и если все нормально, отправить сообщение.
Далее давай те напишем HTML код формы
Ну и конечно же файл CSS, что-бы все облагородить)
Вот, что получилось в итоге.
Способ №2. Сервис для формы обратной связи.
Сервисов форм достаточно много, мы разберем форму от яндекса. Сервис позволяет составить свою форму практически с любыми полями. Настроить тему, почту, уведомления. А так-же, все это, можно сделать без знаний программирования так как у таких сервисов есть конструктор, с помощью которого можно собрать все визуально, перетаскивая блоки и настраивая параметры.
Для данного способа вам понадобиться:
У Google и Яндекса есть отличные сервисы для создания различных форм, опросов и всего подобного. Вам остается настроить все, что вам нужно в визуальном редакторе, получить код и вставить на нужной странице. Собственно все, можно настроить уведомления на почту или просматривать результаты в ручную.
Я собрал вот такую форму на сервисе Яндекса.
Куча различных виджетов уже готовы и доступны для вас
Уведомления на почту
После составления формы, нужно лишь скопировать полученный по кнопке «поделиться» код и вставить в нужное место на странице вашего сайта.
Способ №3. Ссылка для отправки email.
Самый простой способ реализовать связь разработчика и пользователя. Оставить свою почту на сайте. Но мы ведь любим упрощать жизнь пользователям. Поэтому разместим не просто адрес, а ссылку адрес. Выглядит такая ссылка вот так:
Такую ссылку можно усложнить и задать сразу еще и тему к примеру
При клике по такой ссылке, пользователь перейдет в клиент электронной почты и сможет отправить вам сообщение. Также саму ссылку можно украсить с помощью CSS стилей, но это уже совсем другая история.
Стилизованная рабочая форма обратной связи
Создание формы обратной связи с валидацией, оформлением, отправкой письма и описанием
Преимущество данной формы в том, что в ней нет необходимости ставить капчу и мучать тем самым ее отправителей, а не спамботов.
Валидация заполненных полей осуществляется средствами jQuery, плюс дополнительно можно добавить проверки на php
Так выглядит форма:
HTML код формы:
Немного о коде:
Комментарии:
Разобрался. Прошу прощение за панику. Форма отлично работает. Спасибо Вам!
Подскажите пожалуйста как изменить надпись Ваше сообщение отправлено. В коде js меняю на Message sent но всеравно на руском остается. Спасибо!
Интересно как же заставить работать одновременно две формы, и почему не срабатывают две.
В JS нужно немного поменять, через each сделать форму.
Никак не соберусь обновить тут коды…
Очень ждем, а то хотел как раз сделать интеграцию с несколькими формами, а оно не фурычит, ставит еще одну форму не хотелось бы
Если на коммерческой основе, то хоть сейчас:)
Подскажите как поиграть с размерами? Форма не влазит в высоту, слишком большая, раза в 2 бы уменьшить и соответственно шрифт поменьше.
Смотрите по CSS, там даже не зная можно догадаться, проверить и поглядеть результат.
Например:
height: 50px; — высота верхних полей и кнопки
min-height: 170px; — высота поля с доп. инфой
Вопрос такой: как вставить в js код — цель на отправку формы метрики?
Когда форма отправлена:
всё работает по кайфу
Добрый день!
Спасибо за крутое решение… долго искал
Подскажите, пожалуйста, как правильно добавить input file, чтобы и можно было получить файлы
Я про отправку файлов не писал в блоге, но можно почитать тут например.
Или лучше использовать что то более профессиональное — PHPMailer
Вставил всё это на свою страницу. По нажатию кнопки ничего не происходит.
Нужно результат видеть, я же не могу угодать почему оно не работает
Как показать результат? Выполняю на openserver. При нажатии на кнопку ничего не происходит.
Файл стилей и файл скрипта прописаны (отлинкованы)
Когда все прописано, работает как на примере.
Ошибки какие-нибудь есть в консоле?
Выдает ошибку 404, типа файл не найден. При этом запрос уходит, а ответ говорит: 404 Not Found — файл сам по пути имеется, указан как со / так и без, разницы нет. Все равно ошибка 404. Есть предположение, что где-то в системе стоит запрет на открытие файлов php, как можно дать разрешение 1 файлу, send.php?
Если 404, то это не запрет php
Скиньте результат сюда или в ВК/Телеграм
Добрый день! А файл jQuery как назвать необходимо?
Готовая html форма обратной связи для сайта html
HTML-формы это набор элементов управления который позволяет сделать документ интерактивным. Как правило, формы используются для отправки на сервер какой-либо информации, например форма обратной связи на сайте.
Элементы управления это кнопки, текстовые поля и так далее. С появлением HTML5 форм и элементов управления в HTML стало больше. В этой статье я рассмотрю различные формы и элементы управления. Итак, начинаем.
Форма обратной связи в HTML
Давайте для примера создадим наиболее полную форму обратной связи в которой будут кнопки, текстовое поле, возможность загрузки файла и не только, итак обо всем по порядку.
Поле для ввода текста пока что непонятное. Давайте модернизируем его, а именно добавим текст внутри и сделаем поле шире.
Для вставки пояснительного текста используется атрибут placeholder тега
Сделаем 100% ширину с помощью CSS.
Получим следующую форму.
Ну что же, уже лучше. Теперь сделаем поле для ввода нашего имени.
Ввод текста в input
Элемент является универсальным, в отличии от элемента
. С его помощью мы можем создать форму для ввода небольшого текста. Ведь имена не занимают несколько предложений. С помощью атрибута type=»text» мы указываем, что в поле должен содержаться текст.
Изменим нашу форму.
Уже лучше, давайте добавим поле с адресом электронной почты.
Все хорошо, но не хватает нормальной группировки элементов.
Группировка элементов управления в HTML-форме
Давайте немного изменим форму, а именно:
Сделаем белый фон, размер уменьшим до 70% и располагаться форма будет по центру.
Ну что же, уже лучше. Не хватает кнопок.
Кнопки в HTML-форме
Добавим две кнопки:
Кнопка «Отправить» должна отправлять веденый текст на сервер. Что бы кнопка работала требуется PHP-обработчик (или обработчик на ином языке).
Кнопка «Очистить» будет очищать все введенные в форму данные.
Кнопка отправки формы
Кнопка очистки формы
Давайте дополним нашу форму.
Итак, у нас есть уже готовая простая HTML-форма обратной связи. Теперь возникает вопрос, как проверить что форма заполнена перед отправкой?
Проверка заполнения формы
Валидация форм, или проверка заполнения — довольно важный момент при работе с сервером. Давайте разбираться как сделать простую проверку полей формы на заполнение.
Самым простым способом проверки формы на заполнение является добавление к элементам атрибута required (от англ. required — требуется). давайте добавим этот атрибут к полям и посмотрим что будет.
Попробуйте оставить часть полей не заполненными и нажать кнопку «Отправить».
Второй способ заключается в добавлении к кнопке «Отправить» атрибута formnovalidate, он делает кнопку не активной пока не будут заполнены input’ы. Я не буду приводить пример, но вы обязательно попробуйте проверить форму таким образом. привожу полный код такой кнопки:
Иные проверки (валидации) выполняются с помощью PHP или JS кода.
Другие популярные элементы
Продолжим дополнять нашу форму. Добавим несколько элементов.
Форма загрузки файлов
Для создания формы загрузки используется уже знакомый нам input. Создается она с помощью следующего кода:
input type= «file» value=»Выберите файл»>
Дополним нашу форму. Создадим отдельную группу элементов.
Выбор даты
Добавим в нашу форму возможность выбора даты.
Выпадающий список
Выпадающий список создается с помощью тега select >, а элемент списка с помощью option >. Давайте создадим в нашей форме возможность указать адресата.
Переключатели
Переключатели бывают зависимые — можно выбрать только один вариант и независимые.
Зависимый переключатель
Зависимый переключатель создается с помощью тега input и его атрибута type= «radio». Соответственно в зависимом переключателе можно выбрать только один варинат.
Независимый переключатель
Независимый переключатель создается с помощью атрибута type=»checkbox». В нем можно выбирать несколько вариантов.
Добавим эти элементы на нашу форму.
На этом заметка о HTML-формах подходит к концу. Задавайте ваши вопросы в в комментариях.
Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.
Форма обратной связи для сайта на HTML и PHP
Форма обратной связи для сайта на HTML и PHP – готовые решения для вашего сайта!
Здравствуйте, уважаемые друзья и гости блога! Сегодня в этой статье я постараюсь Вам подробно рассказать и показать. как делается форма обратной связи для сайта на HTML и PHP, а также Вы сможете получить уже готовую форму обратной связи для сайта.
В интернете очень много статей на тему по созданию формы обратной связи для сайта, как самостоятельно, так и с помощью различного рода плагинов. Но не все эти статьи понятны для новичка. В некоторых материалах так сложно об этом рассказывается, что не каждый продвинутый вебмастер сможет разобраться. Так, что давайте я Вам расскажу простым языком, понятным для новичка, как создается своя собственная форма обратной связи для сайта при помощи простенького кода HTML и PHP.
Вот например у меня на блоге стоит форма обратной связи для сайта, которую я сделал самостоятельно буквально за несколько минут. И хочу Вам сказать, что она ни сколько не хуже стандартной. Вот посмотрите сами – это моя форма обратной связи!
Работает она замечательно, без сбоев и багов, и в отличие от форм связи, которые созданы при помощи плагинов, не тормозит движок WordPress. О том как сделана эта форма обратной связи для сайта я уже писал в своем материале – смотрите вот здесь.
А сегодня я Вам расскажу еще один вариант, с помощью которого Вы сможете создать форму обратной связи для сайта.
И так, давайте начнем …
Форма обратной связи для сайта на HTML – готовая к использованию!
Вот пример простенькой формы связи для любого сайта. Этот простой код HTML Вы сможете вставить на свой сайт и форма связи будет работать. Вот сам html код:
Вот код стилей для нашей новой формы связи, который Вы должны добавить в файл style.css темы вашего сайта, в самый его конец:
После проделанных действий со своим сайтом по созданию формы обратной связи для него, у Вас получится вот такая новая форма обратной связи для сайта:
PHP код для формы обратной связи
Теперь для того, чтобы наша новая форма обратной связи для сайта начала выполнять свою прямую функцию, то есть отправляла письма на наш почтовый ящик, нам нужно сделать некоторые действия …
Теперь этот вновь созданный php файл закачайте на свой сайт. Можно в корень вашего сайта, а можно и вашу рабочую тему оформления. Главное не забудьте прописать путь к нему в выше указанном html коде вашей новой формы обратной связи.