Как сделать обратную связь на сайте jimdo
Обновлено: 07.07.2024
В данной статье мы рассмотрим, что такое форма обратной связи и как её сделать самостоятельно. Данный функционал сайта в настоящее время является наиболее удобным и популярным способом общения клиента и владельца ресурса.
Форма обратной связи: что это такое
Разберёмся, что же такое форма обратной связи и для чего она нужна. Если Вы ведёте свой бизнес в Интернет и у Вас есть сайт – это значит, что на нём обязательно должна быть такая форма. Она служит для того, чтобы Вы смогли отвечать на вопросы посетителей, проводить анкетирование, осуществлять приём заказов и заявок на исходящие звонки.
Использование такого функционала, как контактная форма делает отправку писем владельцу сайта менее затруднённой. На сайте существует специальное поле, которое отводиться для того, чтобы написать письмо и задать интересующий вопрос о цене создания сайта-визитки под ключ , например.
Здесь так же не потребуется искать и вводить электронную почту владельца ресурса, потому что в форме она предусмотрена по умолчанию. Незнание посетителем электронного адреса вдобавок огородит собственника сайта от спам-атак.
В использовании формы обратной связи существует огромное количество плюсов. Её удобство состоит так же в значительной экономии времени. Всё это из-за того, что клиенту не нужно переходить в свою почту, вводить электронный адрес владельца ресурса или администратора и отправлять письмо. Существует даже вариант увеличить конверсию сайта, это так же возможно при правильном использовании формы обратной связи.
Как сделать форму обратной связи
Теперь рассмотрим, как сделать форму обратной связи на сайте. Большинство обычных пользователей не смогут сделать это самостоятельно, поэтому программист – это тот, кто Вам нужен. Так как для разработки формы понадобиться знание PHP, HTML и JavaScript. Но, так же, в Интернете существуют различные конструкторы, с помощью которых возможно создать такой функционал. Но надёжнее, конечно же, будет первый способ разработки.
Обычно, в форме обратной связи имеется несколько различных полей, которые заполняются посетителем. Все Вы, несомненно, знаете, что существует ряд полей, которые отмечаются звёздочкой – это значит, что они являются обязательными для заполнения. Обычно это поля с ФИО, Вашим телефоном и адресом электронной почты. И если Вы их игнорируете, то написанное Вами письмо не будет отправлено.
Как защитить форму обратной связи от спама
В заключение скажем о том, как защитить форму обратной связи от спама с помощью всем известного способа. Владельцам веб-ресурсов мы советуем установить систему CAPTCHA – это проверочный код, с помощью которого определяется, является ли пользователь реальным или роботом. Пользователю предоставляется искаженное слово, обычно помещаемое поверх искаженного фона. Он должен ввести слово в поле, чтобы завершить процесс.
Компьютерам трудно декодировать искаженные слова, в то время как люди могут легко расшифровать текст. И если данный код не будет расшифрован, соответственно письмо не будет отправлено. Это необходимо, потому что множество роботов способны осуществлять отправку спама с форм обратной связи, а такой код поможет Вам получать письма только от реальных клиентов.
Размещая на своём сайте такой функционал, как форму обратной связи, Ваши клиенты смогут в считанные минуты задать вопрос о том, как заказать СЕО продвижение сайта , например, или любой другой вопрос, соответствующий тематике Вашего ресурса. И благодаря такой форме, все письма будут составлены чётко и аккуратно, чтобы без труда можно было понять, в чём суть обращения.
От автора: приветствую вас, друзья. Данная статья будет продолжением статьи, в которой мы реализовывали отправку данных формы на сервер без перезагрузки страницы. Здесь мы продолжим данную тему и узнаем, как принять данные на сервере и реализовать отправку формы на электронную почту (email). Итак, давайте настроим форму обратной связи и добавим возможность ее отправки на email.
Исходные файлы текущей статьи вы можете скачать по ссылке.
В этом уроке мы сделаем все максимально просто и своими силами. В частности, для отправки писем мы воспользуемся специальной функцией PHP под названием mail(), которая раньше часто использовалась для отправки писем.
Начнем с синтаксиса функции mail. Данная функция имеет три обязательных параметра и два опциональных (не обязательных). Обязательные параметры:
to — email получателя (также можно указать несколько адресов, перечислив их через запятую);
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
subject — тема письма;
message — текст письма.
Из опциональных параметров практически всегда используется только первый, который отвечает за заголовки письма: кодировка, отправитель, тип письма и др.
Понятно, что при использовании Joomla и WordPress вопрос обратной связи или заказа можно решить использованием различных расширений или плагинов, но есть способы, которые подойдут абсолютно для любого проекта, построенного как на чистом Html, так и использующего движок Cms (скрипты, cms, конструкторы и генераторы форм обратной связи).
Для работы классической формы в Html требуется скрипт обработчика, который чаще всего пишется на языке Php, поэтому желательно, чтобы ваш хостинг имел его поддержку (правда, сейчас даже хостинги предоставляемые бесплатно поддерживают Php).
Хотя, существуют решения и не требующие поддержки Php, и о них тоже будет упомянуто в этой статье. Никаких особо подробных описаний по установке и настройке в этой статье не будет, ибо это лишь обзор имеющихся вариантов, которые сейчас можно найти в сети.
Буду вам крайне признателен, если вы в комментариях приведете свой пример создания систем обратной связи (желательно оригинальный, красивый и функциональный) со ссылкой на описание и страницу с примером (я пока нахожусь в процессе поиска идеального решения).
Формы обратной связи для Joomla и WordPress
Давайте посмотрим, как можно организовать обратную связь в Joomla и WordPress стандартными средствами или с помощью расширений.
Так вы можете скачать отдельный модуль обратной связи для Джумлы под названием Rapid Contact, который может дать вам новые возможности и функционал (см. демо). Про настройку и возможности этого модуля сможете прочитать здесь. К тому же, стандартный компонент в Joomla для реализации обратной связи не обладает достаточной гибкостью и не позволяет использовать защиту от спама (капчу), а также не позволяет создавать несколько разных контактных форм на сайте.
Эти проблемы решаются с помощью альтернативного компонента для этого движка под названием aiContactSafev, который позволяет создавать на сайте любое количество форм обратной связи (можно привязать их к разным E-mail адресам) и имеет возможность добавлять поле для загрузки файлов, равно как и любые другие типы полей.
Этот компонент в своем составе имеет очень гибко настраиваемую капчу (ввод кода при отправке данных для зашиты от спама). Его можно бесплатно скачать для разных версий Джумла, а прочитать про его настройку вы сможете тут.
Теперь давайте поговорим за WordPress. Лично я пока еще не определился с этим и у меня на странице контактов красуется обычный E-mail, что в общем-то не очень здорово, ибо он уже давно попал в спам-базу, и если бы я не сумел привязать почту для домена через Google Apps к обычному ящику в Гмайле, то поток спама меня бы уже давно захлестнул с головой.
В общем-то в этом и состоит основное преимущество формы обратной связи — она позволяет сохранить инкогнито вашего почтового адреса для спамеров. Ну и еще она обычно оформлена в довольно приятную оболочку, что может добавить плюсик в отношении к вашему проекту пользователей, особенно это актуально для коммерческих ресурсов, когда удобная форма заказа или обратной связи может повысить конверсию (доход).
Собственно, по поводу WordPress. Есть один очень популярный и очень мощный плагин, который зовется Contact Form 7. Популярность его просто зашкаливает, а это значит, что что-то в нем такое есть. Правда для реализации функции капчи вам придется поставить еще дополнительный плагин Really Simple CAPTCHA.
Понятно, что за это время Contact Form 7 мог стать уже гораздо более подходящим для реализации стоящих перед нами задач и поэтому предлагаю вам опробовать его в работе самостоятельно, опираясь на довольно подробное описание. Если вы пользуетесь каким-либо другим хорошим и легким плагином, то чиркните, пожалуйста, об этом пару слов в комментариях.
Так, это мы говорили про реализацию обратной связи в Joomla и WordPress с помощью соответствующих расширений.
Но существует еще несколько способов:
Создание формы самостоятельно. Для этого нужно будет написать ее код и оформить внешний вид с помощью Css стилей, а еще написать на Php для нее обработчик (в принципе, знаний, полученных из видеокурса Попова по Php, будет достаточно) и затем добавить CAPTCHA, проверку правильность заполнения полей и что-то еще. Сразу скажу, что сделать это будет не просто.
Все у того же Евгения Попова есть серия бесплатных уроков на его блоге, посвященных самостоятельному созданию обратной связи для сайта:
Как вы можете видеть, знаний и времени потребуется довольно много. Поэтому можно будет для ускорения воспользоваться уже готовыми скриптами или же онлайн конструкторами и генераторами форм.
В интернете можно найти довольно много скриптов различных форм — от самых простых (однако, требующих от вашего хостинга поддержку Php) до очень навороченных, которые устанавливаются на сайт подобно полноценной CMS и требуют для своей работы не только поддержку PHP, но и базы данных.
Данные скрипты можно будет установить и использовать практически для любого проекта — как статического (на Html), так и динамического (на Cms). В общем-то, довольно-таки удобный и универсальный инструмент, но вам придется, скорее всего, перебрать много вариантов, чтобы найти что-то подходящее именно вам.
Php скрипты форм обратной связи для сайта
Итак, давайте рассмотрим сначала несколько скриптов, которые можно бесплатно скачать и установить на свой сайт. Простенький, но довольно наглядный вариант (использующий капчу для защиты от спама) можно будет бесплатно скачать отсюда. Есть вариант обратной связи:
Там и форма заказа для сайта:
В первой строчке вы указываете адрес почтового ящика, на который будут приходить письма, отправленные с помощью этой формы, а во второй строчке указываете желаемую кодировку текста (utf 8, windows 1251). В ряде последних строчек Php кода вы сможете поменять подписи к полям формы обратной связи или заказа. Вот и все.
Существует довольно привлекательный скрипт под названием Super AJAX Contact Form (можно использовать его и для заказа), построенный на основе PHP и jQuery с использованием Ajax:
В Super AJAX Contact Form осуществляется проверка правильности заполнения всех полей и сразу же (без перезагрузки страницы — ajax во всей красе) выдаются подсказки над соответствующими полями, что сильно повышает юзабилити обратной связи:
У меня возникли только замечания по работе капчи и желание интегрировать данную обратную связь в свою страницу с контактами, ибо открывать форму в отдельном окне без внедрения в дизайн блога мне кажется не совсем оптимальным решением. В общем-то на странице автора видеоурока в комментариях приводится решение этих проблем и вы можете с ними ознакомиться.
Ну и на затравочку хочу привести пример скрипта обратной связи, который можно сравнить с мини Cms, ибо у него есть своя админка, мастер установки, и для его работы вам потребуется создать базу данных (или использовать уже имеющуюся). Взамен вы получаете очень функциональный конструктор, позволяющий реализовать практически все, что угодно.
Данный скрипт называется Генератор форм обратной связи, скачать его можно совершенно бесплатно по приведенной ссылке. Обратите внимание, что для скачивания доступны три версии скрипта, которые отличаются только используемой в них капчей:
Скрипт осуществляет проверку на заполненность всех полей формы, на правильность ввода E-mail адреса, защищает от спама с помощью капчи и позволяет добавлять в практически любые дополнительные поля (загрузка файла, чекбоксы, радиокнопки, поля со множественным выбором и т.д.).
Особенностью установки этого скрипта обратной связи является использование им базы данных, которую вам нужно будет предварительно создать или же использовать уже имеющуюся (его таблицы будут помечены в ней своим префиксом, что поможет их затем без труда удалить при необходимости). Я уже писал про то, как создать базу данных в cPanel или скачать, установить и настроить phpMyAdmin.
Для описания процесса установки и настройки данного скрипта потребуется написание отдельной статьи, поэтому предлагаю вам скачать и посмотреть подробный видеоурок по этому поводу, где также будет приведено описание процесса интеграции скрипта в дизайн вашего сайта.
Конструкторы и генераторы форм обратной связи
Есть довольно много онлайн конструкторов и генераторов форм обратной связи. Например, этот сервис предлагает вам довольно удобный и функциональный интерфейс для создания конструкций практически любой сложности. На первом шаге вам предложат выбрать цветовую схему:
После чего вам нужно выбрать из левой части окна нужные поля для будущей формы и затем, щелкая по ним, произвести их более тонкую настройку (задать подписи полей на русском языке, выбрать ширину поля, сменить тип и ввести предварительный текст):
Добавленные поля можно менять местами простым перетаскиванием мыши, удалять и повторно редактировать:
В общем, интерфейс этого онлайн конструктора очень и очень современный и удобный. После того, как вы расположите все нужные вам поля в нужном порядке и приведете все нужные им настройки, можете нажать на кнопку сохранения (расположена внизу). На следующей странице вам предложат перейти к просмотру и скачиванию скрипта обратной связи или же вернуться к редактированию:
Обратная связь для Html сайтов (без Php)
Есть онлайн сервисы, предоставляющие бесплатно свои собственные Php обработчики, которые будут расположены на их серверах. К такому типу относится конструктор на ip-whois:
Не фонтан, конечно же, в плане изысков дизайна, но зато такую форму можно создать за пять секунд и еще за минуту поставить абсолютно на любой сайт, даже расположенный на хостинге без поддержки Php.
Комментарии и отзывы (44)
Пользуюсь ContactMeForm — очень доволен, довольно простой, более приятный внешний вид
Я использую Super AJAX Contact Form — доволен как слон 🙂
Шикарный пост, широкий выбор. Поэкспериментирую как-нибудь, пока стоит Contact Form 7.
Подскажите пожалуйста, установил на сайт (CMS Joomla) AJAX Contact Form, все работает, только не отображаются русские символы.
Очень помогли Дмитрий в подборке контактной формы. Спасибо
подскажите пожалуйста, чем рисовать такие 3d изображения, как у вас в анонсе этой статьи
Наконец то дошли руки, установил себе форму обратной связи от
no-spam.su/ — спасибо Дмитрий!
Взял, любезно Вами предложенный файл программы form, теперь получается есть вопрос к вам! Буду благодарен за ответ?
Встречались ли Вы Дмитрий, или кто либо другой с проблемой кодировки?
По умолчанию выставленная кодировка windows-1251 дает возможность на почте гугла лицезреть только английские символы.
Где проблема, кто подскажет. Спасибо!
P/S в благодарность за ответ, по нажимал на кнопочки ретвита!
Ребят,кто-нибудь разобрался с кодировкой с сайта no-spam.su/.
Если разобрались,то подскажите где ошибка.Спасибо!
Здравствуйте! Понравилась Super AJAX Contact Form.
Спасибо за статью.
У меня есть один вопрос?
добавить эту ссылку к тексту письма. Чтоб можно уже было получить с письмо с указанием этой ссылки. Пож помогите решить вопрос.
А как создать форму с возможностью прикрепления какого либо файла, например, архива.
Ведь где-то же должны храниться учётные данные, с которых идёт отправка почты? Где это вбивать? К домену подключена почта гугла.
Или хоть на какую тему гуглить? Третий день же мучаюсь.
Спасибо. Подскажите на счет Super AJAX Contact Form, как сделать чтоб она была развернута на моей странице, какой код вставить в хтмл редактор Ворд Пресс.
Очень большое спасибо.
Спасибо большое за скрипт! Очень помогли!
Вот еще нашел очень удобный сайт в котором можно создать свою форму,
Посоветуйте, что можно сделать с обратной связью если сайт работает в системе BERTA?
САЙТ СУПЕР, пост очень полезный
Все остальное, о чем тут писали, что можно поставить на html, пробовала, везде свои косяки: где-то платно, где-то оправка файла не проходит.
Бьюсь с комментариями на страницы сайта как у Вас.
В денвере все красиво и успешно.
Что Вы можете посоветовать?
То что нужно . нашел то что искал — Спасибки =)))
Вы забыли сказать, что перед установкой форм описанных перед Super AJAX Contact Form на Вордпресс необходимо установить плагин Exec-PHP иначе они не заработают.
Подскажите, пожалуйста, на сервисе смартреспондер и фидбернер можно сделать импорт своих подписчиков. Есть ли какие-нибудь инструменты, чтобы можно было сделать импорт своей группы в Контакте и Facebook.
Добрый день. Использую Super AJAX Contact Form, все работает, но нужно, чтобы на почту, которую пользователь вписал в форму, отправлялось письмо с уведомлением о заказе.
Подскажите, как можно это сделать с Super AJAX Contact Form.
Заранее благодарна за ответ.
Уже разобралась. Прикрутила скрипт отправки почты в начало файла send.php
Поставил aiContactSafev и все работает, только подтормаживает. До этого ставил CK forms на почту приходили пустые письма и ошибка ява, так и не понял в чем дело.
Кто то поможет написать скрипт к такой форме?
БИТАЯ ССЫЛКА В абзаце
Каждый сайт, как коммерческий, так и некоммерческий, нуждается в странице Обратной связи, поскольку это один из лучших способов быть ближе к пользователям и оставяться с ними на связи. К счастью, Joomla 3 имеет все необходимое, чтобы создать страницу обратной связи без расширений и всего в пару кликов!
В данной статье мы расскажем вам, как создать такую страницу на Joomla 3, достаточно просто следовать следующим шагам.
Шаг 1. Создайте контактную форму
Перейдите на вкладку Компоненты - Контакты.
Кликните по кнопке: Создать.
Заполните всю информацию, которую вы хотите показать на контактной странице.
Обязательно проверьте правильность ввода email (а лучше несколько раз). Будет очень обидно, если письма адресованые вам уйдут кому-то другому.
Как только вы заполните всю необходимую информацию - сохраните изменения.
Шаг 2. Включите Обратную связь в меню
Например, если вы хотите, чтобы переход на страницу с контактной формой осуществлялся из главного меню.
Перейти в меню Главное меню - Добавить новый пункт меню.
Нажмите на выбор типа пункта меню.
После выберите - Контакты - Контакт.
А дальше остается лишь выбрать нужный контакт из списка и сохранить изменения!
Теперь можете перейти по новому пункту меню и полюбоваться свежесозданной страницой обратной связи.
Вот и все! Надеюсь, что данная маленькая статья поможет некоторым пользователям :)
Читайте также: