Как сделать форму обратной связи на сайте – Обратная связь для сайта с помощью скриптов форм на Html и Php, а так же онлайн конструкторов и генераторов — Вебджем.рф

Содержание

Генератор форм обратной связи | QForm

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

Сделать всё идеально с нуля сложно и долго, поэтому часто выбирают готовые решения:

бесплатные сервисы, вроде Google Forms и Яндекс.Формы,
платные/условно-бесплатные инструменты,
различные плагины для CMS.

Те, чьи цели сильно отличаются от стандартных и есть на это ресурсы разрабатывают с нуля под свои цели.

Мы предлагаем решение проще — гибкий и многофункциональный бесплатный конструктор QForm, который генерирует обратную связь для сайта любого вида и сложности, синхронизируется с CRM-системами, SMS-сервисами и облачными АТС.

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

Инструкция по работе с QForm

Чтобы продемонстрировать работу сервиса, разберем процесс создания простой формы обратной связи.

Пример: нужен простой вариант с именем, номером, отправкой файла и текстовым сообщением, согласием на обработку персональных данных и кнопкой «Отправить».

Прежде всего нужно добавить сайт в систему, делается это довольно просто.

Первый этап

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

Задаём поля

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

В нашем примере первым будет Имя. После его добавления, откроются настройки. Для имени это: Заголовок, Текст внутри (плейсхолдер), Дополнительный текст, чекбокс Обязательное поле. Также можно назначить список стоп-слов и задать Класс поля и его Имя (аттрибут name в коде). Прописывать всё не обязательно — можете оставить всё по умолчанию, сохранив поле на кнопку «Сохранить».

В нашем случает зададим заголовок — «Ваше имя». Ставим галочку «Обязательно для заполнения».

Затем добавляем поле для телефона посетителя. В Заголовок поля впишем «Ваш телефон», внутри поля «+7 ххх ххх хххх», чтобы подсказать пользователю нужный формат, ставим галочки на чекбоксах для настройки маски номера и

Обязательного поля.

Теперь добавляем возможность загрузки файлов: в заголовок впишем «Выберите файл», укажем 50 Мб как максимальный размер файла. Пусть поле будет не обязательным.

Чтобы пользователь мог вписать произвольный комментарий, нужно создать текстовое поле с типом Текст (строка), в заголовке Соообщение.

Обязательный для любой формы элемент — кнопка Отправить. Она по умолчанию есть в каждой новой форме, удалить её нельзя. Нажмите на поле, если хотите изменить текст кнопки или аттрибуты class и name.

Определяемся с дизайном

На одном экране с Конструктором находится вкладка Дизайн. Здесь у пользователей два варианта — использовать один из шаблонов оформлений QForm (включенный чекбокс) или указать каждому полю стили оформления из CSS-файла, чтобы адаптировать дизайн формы под дизайн сайта.

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

Настраиваем параметры формы

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

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

Сообщение после отправки: тут можно написать то, что видит пользователь после отправки формы.

На вкладке Google Recaptcha можно включить антиспам от гугл, при условии что она настроена на уровне сайта.

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

JavaScript-события нужны для настройки отправки целей в Google Analytics и Яндекс.Метрику, выполнение дополнительного кода после отправки.

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

Уведомления

Отдельно стоит упомянуть отправку уведомлений. На этой вкладке можно указать email получателей заявок через запятую. В противном случае, обрабатывать заявки получится только внутри кабинета QForm. Тут же настраивается SMTP.

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

Завершив все нужные настройки, переходим на вкладку Код для вставки и выполняем инструкции по вставке кода на сайт.

Вот что в итоге у нас получилось! Создание обратной связи заняло примерно 5 минут, а в первый раз займёт от силы 15. Если у Вас возникнут проблемы, не стесняйтесь обращаться в чат поддержки.

Назад на главную

как её сделать на сайте

В данной статье мы рассмотрим, что такое форма обратной связи и как её сделать самостоятельно. Данный функционал сайта в настоящее время является наиболее удобным и популярным способом общения клиента и владельца ресурса.

Форма обратной связи: что это такое

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

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

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

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

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

Теперь рассмотрим, как сделать форму обратной связи на сайте. Большинство обычных пользователей не смогут сделать это самостоятельно, поэтому программист – это тот, кто Вам нужен. Так как для разработки формы понадобиться знание PHP, HTML и JavaScript. Но, так же, в Интернете существуют различные конструкторы, с помощью которых возможно создать такой функционал. Но надёжнее, конечно же, будет первый способ разработки.

Обычно, в форме обратной связи имеется несколько различных полей, которые заполняются посетителем. Все Вы, несомненно, знаете, что существует ряд полей, которые отмечаются звёздочкой – это значит, что они являются обязательными для заполнения. Обычно это поля с ФИО, Вашим телефоном и адресом электронной почты. И если Вы их игнорируете, то написанное Вами письмо не будет отправлено.

Теперь к вопросу о том, где на сайте можно разместить такую форму. Если она содержит достаточное количество полей для заполнения, то для такой формы выделяется отдельная страница, или же на вкладке «Контакты». А вот размещать такую форму на главной странице сайта не стоит. Но если Ваш сайт представлен в формате Landing Page – это значит, что форма по умолчанию будет размещаться на главной странице. Так как лендинги представляют собой одностраничный веб-ресурс.

Как защитить форму обратной связи от спама

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

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

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

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

В uKit доступно два вида формы обратной связи: виджет «Обратная связь» и форма во всплывающем окне.

Виджет «Обратная связь»

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

Включение/отключение отображение заголовка;
Настройка полей формы;
Включение CAPTCHA для дополнительной защиты от спама;
Редактирование сообщения, которое увидит клиент после отправки формы;
Настройка email, на который будут отправляться заявки;
Добавление класса виджету;
Включение сбора статистики.

Редактирование подписей в полях производится в самой форме.

Форма во всплывающем окне

Привязать такое окно можно к следующим виджетам:

Слайдер;
Кнопка;
Карточка;
Прайс-лист.

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

Настройка полей формы;
Согласие на обработку персональных данных;
Редактирование сообщения, которое увидит клиент после отправки формы;
Тонкие настройки метки обязательного поля;
Настройка email, на который будут отправляться заявки;
Включение сбора статистики;
Редактирование текста в полях формы.

Настройка полей

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

Товар или услуга. Сюда автоматически подставляется название товара/услуги из виджетов «Карточка» или «Прайс».
Маленькое поле. Однострочное текстовое поле.
Большое поле. Увеличенный размер поля позволяет вставлять большее количество текста. Например, клиенты могут вписать в это поле дополнительные вопросы или указать полный почтовый адрес. В настройках доступен выбор высоты.
E-mail. Используется для получения электронной почты клиента. При заполнении производится проверка на правильность вводимой электронной почты.
Телефон. Используется для получения телефонного номера клиента. При заполнении производится проверка на правильность вводимых данных.
Файл. Дает клиентам возможность прикреплять и отправлять файлы размером до 25 мегабайт следующих типов: txt, docx, pdf, jpeg, png, gif, bmp, zip, stl, dfx, dwg, cdr, csc, cdw и cdt.
Согласие на сбор данных. Эта опция необходима для соответствия сайтов требованиям Федерального закона «О персональных данных» №152-ФЗ, для всех форм, запрашивающих персональные данные у посетителей.

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

Помогла ли вам статья?

Статья оказалась полезной для 84 человек

Как создать форму обратной связи для сайта

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

Этот пост посвящён тому, как очень просто создать форму обратной связи для блога или сайта используя только HTML и CSS.Здравствуйте, уважаемый читатель. На связи Евгений Назаров.

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

Это было нечто, чего я только не попробовал, в итоге выходило так, что-либо ломался Блог и форма не работала либо всё было ок, красивая удобная форма, но не рабочая всё равно. Я не знаю почему так выходит, может тема не позволяет, ~~может какие силы нечистые~~, может мои прямые руки. 😀

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

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

Как создать красивую, рабочую форму обратной связи

Решение нашлось само собой, как раз в тот момент когда я перестал искать.
Мой друг делал себе лендинг и попросил меня оценить его работу. В тот момент я заметил у него форму обратной связи и спросил, как он её сделал.

Он ответил что форма не самописная, просто взял код со стороннего сервиса. (Я как вы знаете уже перепробовал кучу всяких сервисов и генераторов форм обратной связи, плагинов и прочих инструментов, всё было безуспешно.)

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

Но это было совсем не важно, самое главное что она, блин, рабочая, отправляет письма.

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

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

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

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

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

Для этого качаем архив с кодом и нужными нам картинками по этой ссылке.

1) Далее вставляем код HTML через редактор WordPress предварительно переключившись на «Текст», прямо на ту страницу, где вы желаете видеть форму.

Это картинка, код вы можете скачать по ссылке выше.

В коде нужно прописать адрес почты, на которую вы хотите получать письма, её нужно вставить во второй строчке вместо [email protected] без пробелов.

2) Сделали?! Хорошо. Теперь добавим ей стилей, вставив его в самый конец файла style.css вашей темы.

Это картинка, код вы можете скачать по ссылке выше.

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

Если кнопка отправить находится не в том месте, где должна быть, то поиграйтесь в идентификаторе #contact_submit со значением margin-left: 470px; увеличивая или уменьшая число.

На этом всё, можете опубликовывать страницу. Если форма отображается не корректно или без стилей, попробуйте зажать сочетание клавиш ctrl+F5 или если у вас стоит плагин HyperCash или что-то подобное, удалите весь кеш через него.

Теперь всё должно работать.

Подтвердите вашу почту.

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

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

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

На локальном сервере всё работало прекрасно, выдавались красивые всплывающие поля с ошибками в которых было написано, что-то типа «Вы не ввели имя», но залив код на сайт, форма перестала работать, я плюнул и оставил всё как было. Если найду решение и этой проблемы, обязательно сделаю дополнение к посту.

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

Всегда с Вами,
Евгений Назаров.

Понравилась статья? Поделись ею в Соц. Сетях.

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

Всем доброго времени суток.

С вами Андрей Бернацкий.

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

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

И так, начинаем.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Для начала нам понадобиться файл placeholder.js, качаем его отсюда. Там, собственно, находится исходник.

Первый пример Вы можете посмотреть тут, а второй пример результат наших с Вами действий Вы можете посмотреть тут.

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

Далее мастерим нашу форму:

<form method=»get» action=»»> <input placeholder=»поиск по сайту»> <script type=»text/javascript»> inputPlaceholder( document.getElementById(‘hide_show’) ) </script> <input type=»submit» value=»go» /> </form>

inputPlaceholder( document.getElementById(‘hide_show’) )

</script>

</form>

Что нас здесь интересует? Во второй строке параметр placeholder. В качестве значения этого параметра указываем тот текст, который мы хотим отобразить на форме. И обязательно указываем id. Этот id запоминаем. Именно его нужно указать в четвертой строке:

inputPlaceholder( document.getElementById(‘hide_show’) )

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

Чтобы получить нужный нам цвет у текста, который виден сразу (текст-подсказка), открываем файл placeholder.js. На 18-ой строке ищем запись:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

var placeholder_color = color || ‘#AAA’;

Как раз в конце строки (в кавычках) #AAA – это и есть цвет текста. Давайте поменяем цвет на красный. Вместо #AAA пишем #FF0000.

Текст стал красным. Это так, но когда вводишь свой текст, он по-прежнему черный. Для того что бы и наш текст стал красным, добавляем в CSS файл или в часть head (в зависимости от того где у вас описаны стили) свойство color для id нашего input-а:

#hide_show{ color:#FF0000; }

#hide_show{

color:#FF0000;

}

Вот и все хитрости.

Что еще вам рассказать?

Думаю, у кого-нибудь возникнет вопрос: А что если мне нужно два поля с подсказками?

В этом случае каждому полю нужно задавать свои значения для id и эти же значения передавать скрипту, который находиться под формой. Ниже пример:

<form method=»get» action=»»> <input placeholder=»поиск по сайту»> <script type=»text/javascript»> inputPlaceholder( document.getElementById(‘hide_show1’) ) </script> <input placeholder=»вводи текст сюда»> <script type=»text/javascript»> inputPlaceholder( document.getElementById(‘hide_show2’) ) </script> <input type=»submit» value=»go» /> </form>

inputPlaceholder( document.getElementById(‘hide_show1’) )

</script>

inputPlaceholder( document.getElementById(‘hide_show2’) )

</script>

</form>

Если что-то не получилось можно скачать архив примеров по данному уроку тут.

Надеюсь, урок был полезен. До встречи!

Урок подготовил: Андрей Бернацкий. Команда webformyself.

E-mail:[email protected]

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал? Если ответ «Да», то жмите сюда.

Тут Вы можете с нуля поднять HTML&CSS

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Как сделать форму обратной связи на сайте – Обратная связь для сайта с помощью скриптов форм на Html и Php, а так же онлайн конструкторов и генераторов